Here’s how it looks at the moment:

Here’s the underlying vector map layer:

And even that map began life as a set of even more boring public domain vectors. Everything else is AE-generated. (And yes, the size of Hawaii and Midway are exaggerated slightly for increased visibility on your television screen. Shhhh.)

Nothing is finalized yet; the map that actually ends up in the film could be more different still.

Note:
Almost a year to the date I originally wrote this tutorial, I can finally make it public because the film has been released! You can watch it here: Jury Selection: Edmonson v. Leesville Concrete Company.

This is the trailer, which is almost entirely done with the effect I’m about to explain:

Click here to view the embedded video.

I’m currently working on a new Constitution Project film about Edmonson V. Leesville Concrete Company. In the past, we’ve used methods like digital puppetry to avoid filming reenactments. Edmonson is a much more recent court case than the others we’ve covered (1991), but the US Supreme Court only permits audio recordings of oral arguments, so there’s still no footage of the proceedings.

We were actually able to interview several of the people involved, however, resulting in tons of sharp, clear green screen footage (It’s also our first CP film in HD), as well as hundreds if not thousands of still images. So what to do with them?

Enter a new feature in After Effects CS4: the Cartoon effect. We’re going to take those photos and turn them into something like this:

Preparing The Images

1. Choose the footage clip or set of photos you want to use. If you’re hoping to reposition the person within the frame, make sure you’re not using footage or stills in which parts of their body you want visible are cropped out. Don’t import stills as a sequence.

2. Drop the footage or images into a new comp with a name like “stills precomp”. (We’re working at 1920×1080 HD, 29.97fps.) Select all and adjust the sizing and position so the portion of the image you want visible is within the comp’s borders.

3. If you’re using stills, set their duration to the length you want each to last, select them from first to last (this is important!) and choose Animation -> Keyframe Assistant -> Sequence Layers…

You can choose to overlap them or not — this gives a nice faded result, and allows you to stretch fewer stills over a longer period of time, but if there are lots of stills it’s not really necessary.

Adjust any of the images that seem to be particularly out of line position-wise.

4. Nest the image sequence comp within a new comp and play it through. If the sequence is particularly shaky it might be worth using the motion tracker for stabilization. Mask out any areas that contain background junk.

5. Pre-compose again (Ctrl+Shift+C/Cmd+Shift+C) and enable “collapse transformations” — the little sun icon on the layer switches.

Adding The Effects

6. We need to key out the green chromakey background. Keylight is the best filter for this, but it often leaves a slightly fuzzy matte unless you tweak the clip black and clip white settings. Since we don’t need to be super-precise, you can cheat this by adding a quick Simple Choker effect on top instead. I created a preset for this project because all of our photos are from the same source, but you may need to adjust the numbers for your own materials.

7. Create a new adjustment layer called “Cartoon” (Layer -> New -> Adjustment Layer).

8. Apply the Cartoon effect, and make sure to set render to “Edges.” Adjust the sliders until you get a result you like. I created another animation preset for this step, but it still has to be tweaked for each shot to keep everything consistent — the Edge Threshold and Width sliders in particular need to be changed depending on the source image.

9. Add a Drop Shadow effect. Size to taste.

You now have a cartooned cutout of your source. What you do with it is pretty much up to you. For our project we want to composite these stylized photo sequences over a range of different backgrounds, everything from simple textures to documents.

Adding Some Texture

10A. The Simple Route: Drop the texture file into the same comp. Experiment with different blend modes until you find one that looks good with your materials. Add a vignette* to burn the edges. Animate the texture (perhaps adjust the scale slightly?) to give the scene a little more motion. Here’s an example of a simple texture application:

10B. The Slightly More Complex Route: Drop the texture file into the comp, and set the blend mode to Silhouette Luma. Add a vignette adjustment layer. Precompose everything, and add the texture again to the new comp — below the cutout. Animate as needed. You may want to set keyframes in both the final comp and the precomp, depending. Add another vignette if necessary.

Final result, with a different texture:

*I have a standard preset for vignettes since I use them so much, but the quickest way to make one from scratch is to create a new adjustment layer, double-click on the rounded rectangle mask tool (which gives you a mask the size of the layer), set the mask to “subtract” with a large feather value, then drop a Levels filter on the layer and push the blacks way up.

That’s about it! If you’re going to be doing a lot of these, presets for the key, cartoon effect and vignette are definitely worth making.

The opening few minutes of our Constitution Project film about Japanese internment during WWII and Korematsu, the court case that upheld it. The graphics for this one were subtler and more subdued than the ones we created for the Yick Wo film.

A little about what it’s about, courtesy of the press release:

There are places in America where the unthinkable is happening — too many babies are dying. In most cities, black babies are dying at three times the rate of white babies. That’s what’s happening in Memphis, Tennessee, the city with the nation’s highest rate of infant mortality. A baby dies there on average every 43 hours. But many people are working to change that startling statistic. “Babyland,” a one-hour report anchored by Elizabeth Vargas, airs on “20/20,” FRIDAY, AUGUST 22 (10:00-11:00 pm, ET) on the ABC Television Network.

It’s a really important topic, and I definitely think it’s worth watching (and for more reasons than “hey, that’s my work on TV!”), but a warning: some of the footage is pretty intense. I’ve been working on this all week and am still having a bit of a hard time with all the tiny caskets.

It’s amazing how many graphics even an entirely live action film needs. Opening titles, logo bumpers for the start and end of every segment, locator maps, lower thirds, end credits — even the midbreak “…will return in a moment” is an animated clip. And on top of the show elements, there are web graphics, promo sequences, email ‘postcard’ promo images… the list goes on. And all this stuff, no matter how elaborate, pretty much goes under the radar of most viewers. If it doesn’t, something’s wrong: it’s either too over-the-top and distracts from the story or lacks the production value that makes your show seem like a real, professional undertaking. The graphics are important; they set the tone and help with the overall feel of the documentary — but subtle is key. That said, I’m pretty happy with the ones I’ve done for China. They’re shiny.

Anyway, a little more about the show:

China Inside Out, a documentary reported by ABC News’ Bob Woodruff, explores the stunning global transformation that is taking place at the outset of what is already being called “The Chinese Century.” While much of American foreign policy has been focused on the Global War on Terror, China has been shaking hands and making deals all around the world. In this hour-long documentary, Woodruff examines four of those relationships to discover how China’s rise is impacting all of us.

You can read more at my company’s site.