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

After Effects and Photoshop team up to smack down the mostest boringest of visuals
By Kevin Schmitt

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).

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.

Fig. 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.