mad in pursuit CRAFT/TUTORIAL

Cosmopolitan Productions | Cosmo Resource Page | Mad in Pursuit  | Contact

final product -"I'm So Sexy": from magazine to animation

I can't even remember why I just had to do this, but tackle it I did. My friend Jean gave me a stack of fashion magazines and my first thought was to try to animate a model's runway walk. Maybe I would trace a few figures and then draw the "betweens." I started tracing but it was just too damn frustrating.

So instead, I scanned some photos, cleaned them up in Photoshop, imported them into Illustrator and animated them in After Effects. Click on the silhouette to the right to see the results -- a funky dance.

The process (assuming basic knowledge of these programs)

Scan the torn-out magazine pages at 200 dpi, full color, and import into Photoshop. Models that stand out from the background with good clean lines work best.

Photoshop layers, screenshot

Copy the original and rename the new layer "extracted." Add a new layer behind it and fill with white.

With "extracted" layer selected, Filter>Extract. This filter allows you to get rid of the background and is especially valuable (with a little practice & a lot of luck) for complex edges like hair. Use the Magnifier tool to enlarge the image to see the edges in detail. Use the smallest brush you can to paint the edges, barely overlapping the image and its background. For nice clean edges, check Smart Highlighting. Once the edges are painted, fill the insides and Preview the image against the gray, white, and black mattes. Use the Cleanup tool to remove more background or (with Alt-key) to restore missing image bits. OK.

Copy the "extracted" layer. Rename "extracted-filled." Turn off "extracted" layer.

Fill "extracted-filled": With layer selected, Lock Transparency. Set Foreground Color to black. Alt-Backspace to fill the silhouette.

Clean up. It is important at this stage to clean up the edges as sharply as possible. Unlock transparency on the "extracted-filled" layer. With Eraser and Paintbrush tool, get rid of any fuzzy edges. Getting the edges as clean as possible will make the import into Illustrator much easier.

Original scanned image Extracted image Extracted image, filled

Why convert the Photoshop files to Illustrator files? Excellent question. I tried doing my animation with the Photoshop silhouettes, but the edges were just too darn fuzzy, even at greatly reduced magnification. If I'm aiming for slick and sassy, fuzzy won't do.

Adobe Streamline. Illustrator has a labor-intensive auto-trace function and the even more labor-intensive option of hand-tracing. Yikes. I invested in Adobe Streamline instead. Some experimentation is needed to capture the most detail. But alas, a lot of that cool wispy hair detail gets lost. When the converted image looks good, CTL-A to select all, CTL-C to copy. Open Illustrator document and CTL-V to paste.

NOTE: Adobe has discontinued the sale and development of Adobe® Streamline™ software. "New, more powerful" tracing capabilities have been integrated into Adobe Illustrator® CS2 software as the Live Trace feature, eliminating the need for the Streamline product. Live Trace offers enhanced tracing quality, functionality, and performance. Find out more by visiting the Illustrator CS2 product area or by reading the Live Trace white paper.

Illustrator layersIllustrator clean-up. I put all my models into separate layers in one Illustrator document (shown inIllustrator paths, selected to punch out white fills the screen shot below). The red background layer is used to indicate areas that have been imported with white fill instead of no fill. These are annoying and I always forget what to do. Here's the fix:

Select the white-filled path as well as the surrounding path, as shown on the screenshot on the right. On the Pathfinder palette, click Exclude Overlapping Shape Areas. Eek! Everything turns white!! No problem. Simply go over to the Color palette and click on black. The area refills with black and the formerly white areas are unfilled.

Simplify the drawing a bit more. Select Object>Path>Simplify and set for 95%.

When all the layers look good, you're ready to import into After Effects or another animation program.Showing guidelines in After Effects

In After Effects, import the Illustrator file as a "composition" to bring all the layers in at once. Create a New Composition (min is 300 x 480 pixels) and add a red solid as the background. It's pretty simple to stack up the figures in the composition, scale them to fit, and spread them out so that each figure is shown for 5 frames. I used 10 of my 11 prepared silhouettes because one just didn't fit. The composition time should be shortened to the end of the last figure.

Fine tuning. Guidelines should be established to help align the figures for more credible movement. As shown on the right, I made guidelines for a vertical midline, ground, waistline and shoulder line. The figures then can be scaled and repositioned to match the guidelines.

Output. For the final output shown here (top right), I rendered the composition as an animated GIF file, with looping. It works because the figures and colors are so simple.


4.7.04 (revised 12.12.05)

Thumbs Up if you liked this entry
Cosmopolitan Productions | Cosmo Resource Page | Mad in Pursuit  | Contact