Let's Put Some Lipstick On This Pig, Part 1

Every once in a while, some of us are called upon to perform a task so heinous, so unmentionable, so undeniably hideous that the very thought of it is generally enough to send even the atheists amongst us fleeing to the nearest place of worship to pray for our very souls. The task, of course, is to somehow make the average, ordinary screen capture somehow look like the most exciting bit of animation that has ever existed. But never fear. Here's one way to dress it all up, with Photoshop and After Effects as our instruments of salvation.

The quick summary

We've all seen it before. No matter how stunning the screenshot is, when thrown flat and lifeless into the middle of a background, placed in a video, and shown on a TV screen (for example), something automagically happens to make it an unbelievably uncompelling image. Showing a Web page in a video is particularly susceptible to this kind of "adrenaline drain," if you will. There are probably a thousand ways to rectify this situation, but we're going to focus on one popular method in particular: faking the "monitor effect," whereby we're going to add things like simulated interlacing, hotspots, and curvature to create a stylized version of viewing the screenshot on a virtual monitor. Let's get started!

For this tutorial, I'm going to feature the United States Library of Congress Web site. Why? Well, I'm a U.S. taxpayer, so I figured I could exercise my considerable pull as such and have the government help me out for a change. Which is the long way of saying, "why not?" Anyway, it's a pretty nice-looking site with a relatively compact home page, which doesn't hurt. We're already behind the curve as far as making the shot show well; we don't need to further our predicament by picking a site that looks nasty to begin with.

Step 1: Window dressing

One of the identifying characteristics that make a Web page a Web page is the surrounding browser window, and I, for one, am a big proponent of putting Web pages "in context" by making sure all the browser chrome is present and accounted for. So, with that rationalization out of the way, the first thing to do is to create an interesting browser setting to frame your featured site in.

If you're on Mac OS X, pretty much any browser is going to look like a million bucks (even IE), so you really can't go wrong in choosing a browser with a cool-looking window. Personally, I prefer to use Safari, but as I said, any OS X browser is probably going to look pretty good. But even back in my Windows days I was able to force the issue a bit, usually eschewing the unsightly IE environment for a Mozilla variant (usually Firebird) with a third-party skin to spice things up a bit. Heck, these days, even the Luna Silver Windows XP theme on IE isn't half bad, so it's not tremendously hard to acquire a decent-looking browser window to stage your shot in (fig. 1).

Figure 1: Regardless of your chosen platform, it's possible to make a browser window look pretty good.

For now, just fire up your chosen browser, surf on over to the Library of Congress site, drag the window size to how you want it, and take a screenshot. Just for kicks, let's capture only the browser window itself to the Clipboard and paste it into Photoshop. On the Mac, you can bypass the whole "PDF on the Desktop" thing by pressing Command+Shift+4, and when the crosshair cursor appears, press the Spacebar. This will give you a camera icon for a cursor, with which you can select any window on your screen (fig. 2). Hold down the Control key, and then click the selected window to capture just the window contents to your Clipboard. Easy, right? On Windows, it's one of the few things that's a little simpler: Alt+Print Screen will capture only the frontmost window to the Clipboard.

Figure 2: The faded window and camera icon: unmistakable signs that you've pressed a lot of keys in OS X to take a snapshot of a single window.

Now, switch over to Photoshop and hit Command/Control+N to create a new document, which should default to the size of the screen capture on your Clipboard. Select the Transparent document option (fig. 3), click OK to create the document, and then do a good ol' Command/Control+V to paste in your screenshot. You should end up with some variant of figure 4 as your image. If you've used a Mac browser, you may want to go the anal retentive route like I usually do and make sure the rounded windows are properly carved out and transparent around the edges (fig. 5). Windows users that may be on XP or using some sort of theme that creates little rounded trim elements may want to do the same here. Next, rename "Layer 1" to "Chrome" in your Layers palette, and save the image as a native Photoshop file (which I named chrome.psd). Why transparency, the Chrome name, and native PSD? Setting up the sequel, my friends. Setting up the sequel. All shall be revealed in time.

Figure 3

Figure 4: My final screen capture of the Library of Congress Web site, as seen in Safari.

Figure 5: Get those rounded edges transparent!

Step 2: Meet the "nurnies"

I could be "disremembering"," but I seem to recall a seeing a documentary once in which the special effects team from the original Star Wars film were describing the process of adding little boxes, pipes, and other extraneous decorations to spaceships and the Death Star and whatever else to make them a little more visually interesting, and that said decorations were affectionately known as "nurnies." Since then, I've (however wrongly) taken to calling just about anything that could conceivably fall into the category of "extraneous decoration" by the nurnies moniker, two instances of which I'm going to describe here in order to fake our external monitor effect: interlacing and a hotspot.

Creating the interlacing and hotspot images we're going to use in our final shot are both staggeringly simple. For the interlacing, we're going to create a pattern which we're then going to apply over a much larger area. In Photoshop, create a new, white RGB document with a size of 3 pixels wide by 6 pixels tall at 72ppi (fig. 6). This should result in a pretty tiny new image, so use the Zoom tool to make it a little easier to see. Using the marquee tool, select the top 3x3 section and fill it with black by pressing Shift+Backspace and selecting Use:Black from the resulting dialog box. You should now have an image that looks like figure 7. Next, Select All (Command/Control+A) and then choose Define Pattern... from the Edit menu. Name your pattern "Interlacing" and then click OK. You can now close your pattern window, saving it if you're so inclined.

Figure 6

Figure 7

Next, create another new, white RGB document that's 1600 pixels wide by 1200 pixels tall at 72ppi (we're going way bigger than we need to here, FYI). Select Edit:Fill, and then choose Use:Pattern from the Contents popup menu. Select the Interlacing Pattern you stashed here (fig. 8) and then click OK. Ouch! Little hard on the eyes, but we won't have to look at it much longer. Save this image with a name of "Interlacing" and as whatever file type you like (Targa for me).

Figure 8

To do the hotspot image, create a new, white, RGB 500x500x72ppi document and click OK. Then invert the image (Command/Control+I), making it black (or just use whatever process you already use to make canvases black). We're going to make the background black for the moment so we can better see the hotspot. Now, create a new layer (Command/Control+Shift+N) and name it Hotspot when asked. Then, on the Hotspot layer, create a 250x250 pixel white circle (using either a filled circular selection or the Circle shape tool, whatever's most comfortable for you). Center the circle (guides, select all and cut/paste, whatever—you probably have a favorite method to use here), resulting in an image like that shown in figure 9. Remaining on the Hotspot Layer, select Filter:Blur:Gaussian Blur, and give it a blur of 35 pixels (fig. 10). Finally, delete the Background (black) layer, and save the image either as a native Photoshop file or a "true" transparency image format such as PNG (in my case, I ended up with a file called hotspot.png).

Figure 9

Figure 10

That's it for the Photoshop part—now it's time for some After Effects work.

Step 3: Makin' comps

One of the more basic (and most useful, I might add) features After Effects sports is nested comps, which we'll be relying on heavily here. First, though, let's fire up After Effects and set up our project. You're good to go if you have version 5 or later, incidentally. Anyway, once After Effects is up and running, let's import the files we made in Photoshop.

From the File menu, choose Import:Multiple Files and select the Chrome, Hotspot, and Interlacing images you've made (fig. 11), either as one big connected set of files or individually (as the Multiple File Import dialog box allows). When AE asks, you can either pick the "Merged Image" option or the Chrome layer itself -- it doesn't matter. Then create a new Comp by dragging the Chrome image to the New Comp button at the bottom of AE's Project window (fig. 12). This will give us a nice, new comp which will be the exact size of your Chrome image to work from (defaultly named "Chrome Comp 1," and yes, I know "defaultly" isn't a real word). We'll tidy up the comp a bit before we go any further, though. With the Chrome Comp 1 window active, go to the Composition Settings dialog by typing Command/Control+K, and then renaming the comp "WindowComp." While you're at it, let's do a little prep work for later and set the duration to 10 seconds (fig. 13), then click OK.

Figure 11

Figure 12: Drag the Chrome image (top highlight) onto the New Comp button (bottom highlight) to create a comp that's auto-scaled to the Chrome image.

Figure 13

For the interlacing, we're going to inject a little flexibility by using the image we created earlier as a track matte for a Solid. Drag the Interlacing image from the Project window directly into the Timeline, which will automatically place and center the image. I know, I know. Eyes burning. So let's do the rest quickly. In the Layer menu, select New:Solid. From the Solid Footage Setting dialog, set the name to IntColor, click the "Make Comp Size" button to auto-set the size, and then choose black as the color (fig. 14). Ahhhhh....sweet relief for your peepers, as you should have nothing but solid black in your comp window. But the relief will be short-lived, as you now need to drag the IntColor solid below the Interlacing layer in the Timeline. Now, in the Timeline, click the Switches/Mode button to reveal the layering mode and track matte options, and then set the TrkMat popup for the IntColor layer to Luma Matte "Interlacing.tga" (fig. 15). Your comp window should now look as nasty as figure 16. Yuck. But quickly fixed. With the IntColor layer selected in the Timeline, press the "t" key to reveal the Opacity setting, and then slide the opacity down to 10%. Now your comp window will be slightly reminiscent of the pinstriping in pre-Panther versions of Mac OS X, which is much better and, coincidentally, happens to be the look we're after at the moment (fig. 17).

Figure 14

Figure 15

Figure 16: Ouch! Probably need to tone this down a bit.

Figure 17

Slight aside before we move on here. By using a Solid as the source for the interlacing effect instead of just making a transparent image to throw directly on top of the screenshot, it's much more flexible for tweaking to better complement whatever image you're looking to highlight. Who says that you have to use black here? Or even a solid? You could use a gradient (or Ramp, in the After Effects filter vernacular), or even another image. Sky's the limit, and by setting it up as a track matte you're not stuck with one particular look.

Anyway, I digress. Let's throw on the hotspot and be done with this first comp. Drag your Hotspot image onto the stage, placing it somewhere that it's more or less out of the way, and then tone the opacity down to about 90%. My final fiddled-with comp looks like figure 18. Once you're all set, save the project if you're so inclined, and then take a deep breath and get ready for the last step for today.

Figure 18: The subtle, yet effective, hotspot.

Step 4: It's curvy, baby

The next thing we're going to do is to create a bit of a curvature to the image so it's not such a flat rectangle. This, along with the interlacing, will also give it just a hint of that 1940's-era TV feel to the effect, which is a nice contrast to the late 20th/early 21st century subject matter.

Hit Command/Control+N to create a new composition, name it "CurveComp," and make it 1600x1200 with a length of 10 seconds (fig. 19). Drag an instance of the WindowComp comp from the Project window into CurveComp's timeline, which will center the WindowComp in the CurveComp window. Since the CurveComp is so large, you may want to view it at 50% or smaller, incidentally. With the WindowComp layer selected in the Timeline, go to the Effect Menu, and select Distort:Bulge. We need to make sure the bulge effect encompasses the entire WindowComp, so in the Effect Controls window set the Horizontal Radius to 800 and the Vertical Radius to 600 (fig. 20), which will just hit the edges of the host CurveComp window (fig. 21). Leave the other settings where they are for now, as we'll more than likely tweak them in our next installment.

Figure 19

Figure 20

Figure 21: A dash o' the Bulge filter, and this thing is starting to look a little more exciting.

Next time: Season to taste

Seems like we've hit a good stopping point for the moment, as we're starting to see our flat screenshot come together just a little bit. Next time, we're going to spice things up a little more, adding things like 3D perspective and drop shadows, and even get into how you can build your comps to better host animated screens. So, for now, buh-bye!

Filed under: Tutorial on December 17th, 2003

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.