It often baffled me how to create a convincing perspective scroll, unlike my earlier tutorial that simply scrolled across the frame in this tutorial I want to unveil the technique behind perspective scrolling.
So how do you make convincing perspective scroll?
Recursiveness is the key to perspective scrolling, in simpler words that the animation must wrap infinitely around itself to give the impression of a continuous scroll.
Firstly I found a suitable image, where I could create a good scroll from and using the Pen Tool (P) drew a path around the shop I wanted to scroll. I included the pavement as this would look good and more convincing.
Once you have a good path around your object - ensure you have the image layer selected in the Layer Palette then simply Ctrl+Enter will create a selection from the path.
Once you have the selection it's just a case of Ctrl + J to make a New Layer via Copy - which copies what you have selected to a new layer. I ghosted the background so you can see what I did more clearly but the background layer is redundant from now on and it's Transparency can be switched off by clicking the Eye Icon for that layer in the Layer Palette.
So this is where stuff gets a little bit complicated but bear with me - First it will help a lot if you make a Perspective guide simply get the Pen Tool (P) and draw a line that follows the pavement edge then press Esc to break out of that Path and draw another Path that follows the line of the roof as you can see from the image below. Then on a new layer select the Pencil Tool or the Brush with a small hard brush/pencil setting maybe 4px or so and a nice bright colour and simply press Enter which will stroke the Paths. once you have your guides click the Paths tab on the Layer Palette and click anywhere in the palette except on the Work Path - this just simply deselects the path so that you won't end up transforming them instead of the building. Once the paths have dissapeared off your screen then ensure the duplicated House Layer is selected and Ctrl+T to Free Transform this layer. Grab the Transform Point [the little cross in the middle] (If you're having difficulty picking it up then press Alt when you hover the mouse over the point) drag this point to where the Perspective guides intersect - this is your Horizon of your House layer and will make scaling easier (You can opt to scale without moving the Transform Point but be ready to move the layer about until it look right)
Transform Again - and again and again.
Once you have the first duplicate properly postioned and scaled release the FreeTransform by pressing Enter or the big green tick on the Options Bar then it's just a case of duplicating the duplicate House Layer press Ctrl+Shift+T to Transform Again using the previous scale and position values - Hey Presto! the House is transformed in position and scale to the perspective of the original - Duplicate the layer you've just transformed then Ctrl+Shift+T repeat this until you a row of houses . Order the duplicates behind the orginal in the Layer Palette
When you are finshed you should have something that looks like this
Select all the House layers in the Layer Palette and drag them onto the Create Group button (the one that looks like a folder at the bottom of the Layer Palette) to put them all into one folder call it something like "Row of Houses" of something and collaspe the group (the little arrow next to it) and drag this entire folder onto the Make New Layer icon (the one next to the folder icon that looks like a page being turned - This will duplicate the group - so you should have 2 groups of the same row of house like the image below.
Now we need to do a test to be able to work out the Scale Factor for each frame. With the duplicate Row of Houses Layer selected change it's Blending Mode from "Pass Through" to "Hard Light" this is a temporary change so that we can align the duplicate layer with the orignal layer by seeing through it - Ctrl+T to Free Transform and move the Transform Point to the intersection of the Perspective Grid, as you did before, then ensure on the Option Bar that the "Maintain Aspect Ratio" button is selected (see picture below) or press Shift when you are scaling the Free Transform Bounding Box - The duplicate Row of Houses will scale to the Perspective of the original and watch closely as you scale it down until the first hosue sit perfectly over the second house of the Orginal Layer and matches the pavement too (see picture below) because the Duplicate Layer is Hard Light it's not too hard to see when they aligned (there is really no easy method to this madness just a case of trying to match as closely as you can) but try your best. Once you have it scaled to the right position make a note of the Width (W:) and Height (H:) Scale Values in the Options Bar [see the green circled area in the image below] - if you've followed things correctly they will be the same value in my case 80% - Now CANCEL the transformation by clicking the Little Red 'No-Go' Circle next to the Tick on the Options Bar - you don't want this transformation, only the value of the scale which you should have written down.
Maths! Do the Maths!
Yuk it's maths time - I had a 80% scale value for my animation yours undoubtedly will be different so your value will replace the 80% value in the next equation (see image below) also I chose to create 7 frames of animation you might chose a different value depending on your image obviously fewer frames means jerky / jumpy animation more frames means smoother animation but larger filesize - I can't tell you how many frames you'll need that's your decision but mine is 7 so replace 7 in my equation with the number of frames you want. A scientific calculator helps at this stage the one on your PC (The MS Calculator can be switched to Scientific Mode) if you have a Mac then find an alternative.
So now we have a scale value which is 96.8% for the first Transformation of this Duplicate Group. Select the duplicate layer for the Row of Houses - ensure you switch it's blending mode back to "Pass Through" then Ctrl+T to Free Transform, move the Transformation Point to the perspective grid's intersection (all like before) then ensure you have "Maintain Aspect Ratio" button active in the Options Bar and type in either the W: or the H: box 96.8 (or whatever your value is) and if all is well, fair and good in the World your tarnsform will have moved to the first position of the up and coming animation -like you see in the image below.
Once that worked ok duplicate the duplicate group from Row of Houses by dragging it's folder to the Make New Layer icon and Ctrl+Shift+T to Transform Again - keep doing this until you have the correct number of folders for the number of frames in your animation, in my case that's 7 layers.
Now for the animation.
We have 7 layers all with their visibility on of course this isn't going to animate - so we switch off the visibility for all the layers except the original layer - then we create a new animation frame in the Animation Window and turn on the next layer's visibility and turn off the previous layer's visibility and for each new frame up to frame 7 / layer 7(or whatever you end frame is) and you should have a roughly animated scroll like below
This animation has been cropped so that the houses scroll on from out of the frame right as you have grouped all your Row of Houses Layers then cropping is simply a case of clicking to the last frame of your animation and cropping the right-most house and pavement so that it's like the image below
The problem we have with the animation at this stage is that whilst it scrolls smoothly the end house just seems to be pushed along and then dissapears - So we will fix this with an Opacity fade out on the very last house in each duplicate group layer. Select the last frame of the animation and in the Layer Palette select the active group for this frame and select the last house picture in that folder and change it's Opacity to (Maths again) 100% / Number of Frames ( round up or down as appropriate) in my case it's approx. 15% - doesn't have to be exact. After this select the next frame in the Animation Window and once again in the Layer Palette open the active group and select the last house layer and change it's opacity to (in my case) 30% continue until you have changed the opacity of all but the first frame which should be 100%. Now when you play the animation the end house will fade away rather than be pushed off which is much better.
Okay so now we can add a background to this scroll - as a Parallax scroll it isn't necessary to animate the background, sound weird but it will looks great - alternative if you like making work for yourself you can animate another layer behind this main animation scrolling much more slowly but I'm not delving into that animation nightmare ;)
With a nice Background that matches roughly the perspective of the row of houses things are shaping up - add in a layer filled with grey for your road and add some noise and median to this to make it look like tarmac it's up to you how artistic you want to be here but a basic noise and median will look pretty good. Once you have created that layer behind all the other layers - duplicate it and scale the duplicate it to roughly assimulate the perspective of the houses like so:
Doesn't have to be exact you'll know when it looks good. And that's it you don't transform the other grey noise layer because you're going to suggest motion by selecting all alternate frame in the animation and switching off the visibility of the scaled grey noise layer - It's not great animation of the road but with the smooth house scroll it's going to look good.
And that's about it - you might want to Lens Blur or Gaussian Blur the buildings in the backdrop to emphasise a sense of depth of field but your Perspective Scroll is complete ready for you to drop some animated characters in there - perhaps a kitten in a car? If you place the animated object so that it obscures the fade-out of the last house then even better - have fun and tell people about this tutorial if you find you enjoyed it :)
Of course your biggest obstacle will be optimising the animated gif 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