Although in this tutorial I'll be using Image Ready and some Photoshop, the technique explained should apply for all gif and vector animation programs, so I'll try to stick mostly to the technique rather than Photoshop/Image Ready specific jargon.
So how do you make a background scroll convincingly?
Well the simple answer is that you must remember that whatever appears as
the background on the first frame of your animation must wrap around to appear
in the last frame of your animation i.e. If your character in the foreground
is to walk past a tree that appears on the background in the first frame then
that tree must scroll off one edge of the screen and reappear on the other
edge of the screen and smoothly scroll back to it's starting position ready
to loop the animation from the first frame.
Firstly I found a suitable background image, this is fine because it will scroll across the screen nicely - perspective shots are far harder to deal with and take a whole lot of tweaking to make them scroll in the direction of the perspective.
Destroy to make good
"What! Are you mad?" You might
exclaim. But no, in order to make a seamless tile of the background image
you must cut it in half and transpose the two halves so that the cut edges
become the outer edges.
Using a rectangular marquee tool select the left half of the image then cut and paste it to a new layer.
Then move the left half over to the right edge of the screen and the right half over to the left half of the screen.
"Okay so now it's seamless at the edges of the picture what
about that ugly seam in the middle?"
Well this is where your artistic skills with the Clone Tool, Smudge Tool,
Healing Brush Tool etc. come into play. Don't worry too much about making
it look absolutely seamless because later on we will be applying a motion
blur to give it a real sense of movement, but make as a good job on the seam
as you can.
Okay this was my effort which took about 5 mintues (as you can see it's not a perfect but enough for the job at hand)- Ensure that when your using the Clone and Healing Brush tool that you have Use all Layers checked in the tools option palette this allows you to take samples from all layers and apply them to the layer you are working on which should be the topmost layer. Once you're are happy with the blending merge down the top layer to create it as a single image. In Photoshop this can be done using (Cmd-E) Mac (Ctrl-E) PC.
Duplicating the background tile
Okay so what we have done now is to have created a relatively seamless
background tile (Relative to your skill levels and how much time you put into
it). Now in order to animate it we need to duplicate it Layer>Duplicate
Layer... or right-click the layer in the Layer Palette and select
Duplicate Layer...
Now we have a copy of the background tile we will move it off the edge of the screen depending upon the direction you want the background to scroll (Right-to-Left move the duplicate off the Right edge / Left-to-Right move the Duplicate off the Left edge) In this case we will be moving the background Left-to-Right so I'll need to move the duplicate off the Left edge.
Tip - Ensure you have the Move Tool (V) selected and use the directional arrows on your keyboard to tap the duplicate off the edge (pressing Shift as you do this makes it move in steps) - this ensures that you don't accidentally move the duplicate up or down spoiling the effect.
Hide the visibility of the bottom layer when you get near to the edge by clicking on the layer Visibility icon depicted as an eye.
Then move the duplicate layer off screen a pixel at a time until it just dissapears then (Cmd-E) Mac (Ctrl-E) PC to merge the two layers together.
Even though you cannot see the duplicate layer it is still there - to test this press (Cmd-T) Mac (Ctrl-T) PC to select the transform tool then press (Cmd-0) Mac (Ctrl-0) PC to Fit to Screen. The Transform bounding box will be selecting all of the background image and not just the visible part. Press Enter to deactive the transform tool.
Swap over to Image Ready to animate
Here is a good point to save your work whilst your still in Photoshop.
Save as a .psd image (This is to ensures that you don't lose all the work
you have done so far and it always makes good practice to save your work a
various stages).
So now we are going to animate the background. In Photoshop you can press a toggle button to take the image and all it's layers across to Image Ready.
Or you can simply open Image Ready and open the saved .psd background file.
Once in Image Ready select Image>Image Size and in my case I resized the image to 400 pixels as my original image was over 600 pixels wide and 400 is a nice round number which is essential to creating a smooth scroll. As I intended to make my image scroll over 10 frames it means that each frame must be moved by 40 pixels (400 / 10).
Bring up the animation window Window>Animation and click on the Duplicates current frame button symbolised by the paper image which is next to the dustbin icon. This creates a duplicate of the first frame. Select the Move Tool (V) and press the shift key while tapping the directional arrow key on your keyboard (as we are scrolling Left-to-Right this will be the Right key) and tap it 4 times - as Image Ready by default will shift-move by 10 pixels making your 40 pixel scroll per frame. If your image is 300 pixels wide then that will be 3 Shift-taps (3x10 = 30 per frame)
Now with the 2nd frame selected click on the Duplicates current frame button again to make a duplicate of that frame and shift-tap that frame 4 times (40 pixels) repeat these steps until you have 10 frames - all being well when you click on the Plays/stops animation button it will scroll smoothly.
"But what about the motion blur you mentioned earlier?"
Don't worry Image Ready can take care of that easily enough. Select the first
frame of your animation in the Animation window.
Then select Filter>Blur>Motion Blur
Set the Angle to 0 degrees and in my case I set the distance to 15 pixels which makes a nice blur without totally blurring the background.
What you will notice is that all the other frames will become equally blurred and completing the effect.
If you feel it doesn't scroll fast enough for your liking then delete every other frame to double the speed (use Cmd on the Mac or Ctrl on the PC to select the frames individually and delete as a group) or increasing the motion blur can add to the effect of speed.
Of course your biggest obstacle will be optimising the animated giff image
reducing the size and the number frame helps but Lemony has produced an excellent
tutorial upon the subject of optimization you might want to spend sometime
having a look at
Image/Animation
Optimisation
I hope you've enjoyed this tutorial have a look at the others I have done.
Return to Tutorial Page