A common question from editors is,

How can I get a good-looking screenshot of a website?

In my experience, the answer is not the obvious one.
The best way to get a really great screen shot-- especially one where the cursor moves and things happen on-screen-- is to fake it.

In this tutorial I will offer a method I've used a number of times on a number of jobs, this is a powerful way to present screenshots, because as you will see, you can easily "pan and scan" the website-- even while the cursor is moving!

This tutorial, of course, could apply to any screen capture, not just a web site.

Click here to see a small movie of this first animation.
download project and source files for this example
Macbinary (1.4MB)	Zip (1.5MB)

Step one:

The first thing you need to do is capture your on-screen content. Take screenshots of the web page you would like to work with. I find it helpful to save off the page with no cursors on it, then capture separately the arrow cursor and the finger cursor (the finger cursor is that which appears when the arrow hovers above a link). How do you take screen shots? One suggestion on Windows is Snagit, another is to use the Print Screen button and then paste the screen into Photoshop and crop out what isn't needed. On the Mac, you can use Command-Shift-3 to capture your entire screen, Command-Shift-4 (Caps off) to capture a region defined by a crosshair, or Command-Shift-4 (Caps on) to capture a window. However, I strongly suggest that if you're on a Mac you use Snapz Pro from Ambrosia Software. Snapz Pro is what I use to capture all my menus, windows, screens, for everything I do. It is so well worth the small shareware fee.

You want to capture all your elements separately, as we're going to go into Photoshop to assemble our elements. We'll use Photoshop for two things, building a layered PSD, and also to scale up our screen captures to make them "High-res." First, let's address the scaling up. Those of us who know about panning and scanning of photos know that you need a very high-resolution image that is much larger than your TV screen so you can move around inside it without the pixels crapping out. Since this tutorial is going to end in us panning and scanning the web page, we need it High-Res. It is easy to do it. In the Image Size dialog box, scale up the image 200%, or 400%, and from the Resample Image popup, choose Nearest Neighbor. By scaling up in multiples, like 200% or 400% and using nearest neighbor, pixels get bigger but don't blur out or become anti-aliased. Your captured image will retain all its sharpness.

I like to build a Photoshop document with all the elements required for shot in one document. This makes everything live in one file, and it makes it very easy to get into After Effects to do the animation.

Take all your screen shots, build a layered Photoshop file with the two cursors you need, of course you need to take the time to create transparency all around the cursors. This is because as we animate the cursors (move them around the screen), we don't want weird stray pixels hanging off the edges of the arrow and hand.

Step two:

In After Effects, import the Photoshop file as a Composition. This creates a comp that has layers set up exactly like the layers were set up in Photoshop. The duration of the comp will need to be adjusted, as After Effects just defaults to the duration of the last comp you created. You can modify the duration by selecting the comp in the project window and then pressing Command/Control-K. The first step will be to create our cursor animations, don't worry yourself yet that our comp isn't TV-sized. We'll get to that later, for now it is perfectly correct that the comp that After Effects created is the same size as our web browser window.

After Effects makes all of your comp layers the same duration. They won't stay that way, because certain layers need to only be seen at certain times. But we'll wait on changing that stuff. For now, let's start by animating our arrow cursor. Select the Arrow layer, and from the Window menu, choose Motion Sketch. This opens a floating window with the Motion Sketch contols. Motion Sketch is a feature that allows you to basically draw motion on screen. You click your mouse and drag a motion path on screen, and when you release the mouse, After Effects creates position keyframes for the layer you had selected. In the Motion Sketch window, set the Capture Speed to 100% and turn on the Show wireframe and Keep background options. Arrange your comp window so that you can see the entire area that you need to draw motion into. When you're ready to draw your motion path, click the Start Capture button. This doesn't actually start the capure process, it doesn't begin until you click your mouse button. So after you press the Start Capture button, position your mouse in the comp window at the spot you want your animating cursor to begin, then click the mouse and drag the cursor through the path you want your arrow layer to take. When you're finished, release your mouse button. If your first attempt goes awry, just undo.

In my example, the first step is to move the arrow to the text box, so we can search for a Billy Goat item on eBay. So I did a very short animation, just over a second. This created position keyframes for the Arrow layer. Once the cursor gets to the text box, presumably the virtual user that we are imitating would have clicked into the text box to start typing the search string. So the arrow should disappear once it has reached the text box. To accomplish this, drag the layer's out point just past the last position keyframe. Or you can position your time marker at the frame you'd like to make the arrow disappear and press Option/Alt-]. Press 0 (zero) on your numerical keypad to see a RAM preview of your cursor animating.

If you haven't yet, now would be a good time to hide the finger cursor, we don't need it yet.

So now we've set up our comp so that the arrow moves into the text box and then the arrow disappears. The next thing that should appear is the flashing text insertion cursor. My Photoshop document had a layer dedicated to this, it was called (ambiguously enough) "cursor". To make the "cursor" flash, its opacity parameter needs to animate-- but I want to use Hold Keyframes, which don't allow interpolation of values, so the opacity will snap from 0 to 100 then back to 0 and so on. Creating a sensation of flashing. Provacative.

Revealing the Search term was a little tricky, but only because it was time consuming. I duplicated the layer "highlighted field with serch te" and renamed one of the layers to "search term", because I needed to differentiate the layers. This is because first I used an inverted rectangular mask to hide the letters of the search term but reveal the text field highlighting. Then, in the search term layer, I created a mask that animated to reveal one letter at a time, as though someone was typing in the text. Again, Hold Keyframes were used to make the mask snap from one shape to the next. After the text reveals itself, I moved the blinking text cursor by using hold keyframes to animate its position across the text field.

After the search term is entered, the user would likely press the "Find It" button. Actually, the user might very well just press Enter on their keyboard after typing in the search string, however this isn't very interesting looking! We want to SEE this search take place, so we'll use the Find It button. First thing that needs to happen is we need to duplicate the arrow layer. We used it once to enter the text box, now we'll use a copy of it to get out of the text box. Select the layer and press Command/Control-D. Drag its out-point to the end of the comp, and drap its in-point to just after the search term was revealed. Put the position indicator at the start of the new arrow layer. Again using motion sketch, I moved the arrow from the text box over to the Find It button, then let it come to a rest.

Those of us with lots of web surfing experience know that when you move your cursor over a link on a web page, the cursor chages from an arrow into a hand with its finger extended. We need to make it so that when we animate our cursor over the Find It button, the cursor changes, as it would it real life!
First, the Finger needs to have the same motion as the arrow, because theoretically the arrow becomes the finger. So to give the finger the same movement as the arrow, copy the position keyframes from the arrow layer to the finger layer. Here's how: Place your position indicator at the start of the arrow layer (press 2 on your numeric keypad to select layer 2, then press I to move to the layer's in-point). Click the word "Position" just beneath the layer name, this selects all the position keyframes. Copy them by pressing Command/Control-C. Now select the finger layer and press Command/Control-V. This pastes the copied keyframes starting from where you're parked. Now the two layers move together. Next, we find the moment where the arrow crosses over the edge of the Find It button and change from the Arrow cursor to the Finger cursor. At that moment, we need to turn off the arrow cursor and turn ON the finger cursor. This staggering of ending and starting points is illustrated in the above screenshot.

Almost done with this step! So far we've moved our cursor into the search field, "typed" the term we're looking for, then moved the cursor over to the Find It button, and we were smart enough to change the cursor once we got to the button. Great so far!

The only thing left to do in preparing the animation is to "press" the Find It button. We're about to cross a philosophical divide here, are you ready? My belief is that when it comes to interface mocking-up like this, what is most important is that the spirit of what we're doing is conveyed as quickly as possible. That means that accuracy (but not necessarily the truth) could very well be placed aside. What am I talking about?

Which looks better?

The last thing I did in my animation was to make the Find It button appear to be pressed. If you go to the eBay web site right now, you'll see that pressing the button doesn't actually cause it to "press down", but it sure looks better if it does. So after the finger cursor comes to a rest over the Find It button, I animate the scale properties of both the button (which I separated out to make it animatable) and the finger. I find that pressing the button down just reads better.

That's it for the animation! Now there is a large comp that animates, it is a beautiful thing.

Step three:

OK, we're doing good and now we get to see the fruits of our labor. We are now going to start "Panning and Scanning" our animating web page. If you're unfamiliar with how to Pan and Scan in After Effects, I recommend you reference my friend Pete Gould's DV article from 1997 on the subject.

In my example, I created a square pixel comp that is a 4:3 window and the same aspect as a TV screen. In this comp I set up the animation on the web site. (In NTSC this comp would be 720x540, in PAL it would be 768x576).

Then I start animating the "camera" by animating the scale, rotation and anchor point of the web page nested composition. I position my windows so I can see the web site comp's layer window, the comp window and the timeline. It is important to animate the anchor point and not the position parameter, so in the layer window, turn on the Anchor Point Path's visibility by using the menu in the upper right corner as shown in the image at right.

Really, that's it. Animate until you're happy.

Step four:

Lastly, I nest the 720x540 comp into a proper D1-pixel comp for rendering. This is most important in NTSC. Our friends who work in PAL can render their 768x576 comp and stretch it in the output module to 720x576. But in NTSC if we work at 720x540, we MUST nest the 720x540 comp into a 720x486 D1 pixel comp and render that.

That's it! Render, Import and play back!