Tips & Techniques - The Chopping Block - How to gallery

Web

How-to with The Chopping Block's Rob Reed

The Chopping Block probably shouldn't have shared this tutorial with the

world, but no one will stop those folks. It features a technique they

occasionally use to bring human realism into a Web animation. Although

the final file at the bottom of this page may look like a drawn animation, it

actually began as a live-motion DV shot, and was, by the process

described below, changed into an SWF-format movie.

Step 1:

Using a DV camera, take some video of an action that you want to convert

to vector animation. The final product is going to be a simple silhouette, so

you will probably want to backlight the figure while videotaping it. This will

make things easier down the road. You then need to capture this footage

and edit the clip to contain only the frames you want. Then you'll want to

export this footage as a series of images. To do this, Rob Reed used the

export to image sequence in Adobe® After Effects®. You can do this by

selecting File > Export > Image Sequence.

file:///E|/Misc%20PDF's/Streamline%20How-To/T...Chopping%20Block%20-%20How%20to%20gallery.htm (1 of 7) [23/11/2002 5:16:34 PM]

Tips & Techniques - The Chopping Block - How to gallery

Step 2:

You will now have a series of numbered picts, each of which represents a

frame in the video.

Step 3:

Now, you'll need to batch process these images to make the silhouettes

that you will later transform into vector-based artwork. To do this, create an

action in Adobe Photoshop® that will be applied to the entire sequence.

Open the first image in the sequence in Photoshop.

file:///E|/Misc%20PDF's/Streamline%20How-To/T...Chopping%20Block%20-%20How%20to%20gallery.htm (2 of 7) [23/11/2002 5:16:34 PM]

Tips & Techniques - The Chopping Block - How to gallery

Step 4:

Open the Actions palette by selecting Window > Show Actions. Then,

choose New Action from the Actions palette options and name the action.

Here we've named it "kitty," which was the name of the dancer.

Step 5:

You know see that "kitty" appears in the Actions palette. Press the record

button. Now everything you do to the image will be recorded in the action

named "kitty."

Step 6:

Now that the actions are being recorded, the first thing you'll want to do is

save the file size. Since the image will only be black and white, change the

mode to grayscale by selecting Image > Mode > Grayscale.

Now it's time to adjust the contrast using Levels (select Image > Adjust >

Levels). Select the white-point dropper and then click on a section of the

image that is in the middle gray area. As you do this you'll see the contrast

in the image increase. Make sure the edge of the form doesn't get too

jagged as you're decreasing the middle values. Once you've got it where it

looks pretty good, click OK.

file:///E|/Misc%20PDF's/Streamline%20How-To/T...Chopping%20Block%20-%20How%20to%20gallery.htm (3 of 7) [23/11/2002 5:16:34 PM]

Tips & Techniques - The Chopping Block - How to gallery

Step 7:

Save the file and press the stop button on the Actions palette. You've now

completed the action that you will use to batch process the entire sequence

of images.

file:///E|/Misc%20PDF's/Streamline%20How-To/T...Chopping%20Block%20-%20How%20to%20gallery.htm (4 of 7) [23/11/2002 5:16:34 PM]

Tips & Techniques - The Chopping Block - How to gallery

Step 8:

Select File > Automate > Batch to begin applying the action to the

sequence of images. You'll have to declare the source folder (the folder

that contains your image sequence) and the destination folder. You should

create a new folder as your destination folder so that the original images

are not replaced, just in case they don't turn out the way you want. Make

sure the Override Action "Save In" Commands checkbox is checked. This

makes sure that the images will be saved in the destination folder you have

chosen, rather than in the folder that was used when you saved the action.

You will now have a series of images that have very high contrast and are

ready to be converted to vector art.

Step 9:

For the next step, you'll need to use Adobe Streamline™. In Streamline,

open the first image in the sequence. Then, choose Options > Conversion

Setup to establish the settings that you will use to convert the bitmap

images to vector images. First, adjust the Tolerance depending on how

detailed you want the image to be. The more detailed you make it, the

more points it will contain; this also means you'll get a larger file size. You

may also want to decide what type of lines are in the images. This

particular image has mostly curved lines, so we selected Curved & straight

lines but set the tolerance all the way to curved. Click OK to reset the

Conversion Setup.

file:///E|/Misc%20PDF's/Streamline%20How-To/T...Chopping%20Block%20-%20How%20to%20gallery.htm (5 of 7) [23/11/2002 5:16:34 PM]

Tips & Techniques - The Chopping Block - How to gallery

Step 10:

Now you'll batch process these images similar to the way you did in Step 9.

Choose File > Batch Select to choose the files you want to convert. Add all

of the frames, or just the ones you plan to use, and click Start. You now

have a sequence of vector-drawn files that can be used in a vector

animation.

Step 11:

You can see that the body came out much cleaner than the feet of the

woman. This was because the body was set against a white background,

while her feet were against a gray one. You can clean this up in a few

different ways: The easiest way is to shoot the video on a white

background and floor, but if that's not possible, you can clean up each

frame in Photoshop, or in Adobe Illustrator® once you've run the images

through Streamline. Or, if you like the way it looks, you could just leave it.

file:///E|/Misc%20PDF's/Streamline%20How-To/T...Chopping%20Block%20-%20How%20to%20gallery.htm (6 of 7) [23/11/2002 5:16:34 PM]

Tips & Techniques - The Chopping Block - How to gallery

Step 12:

The final step is to create an SWF-format animation out of it. You can do

this easily in Adobe LiveMotion™ by opening a new file and selecting File >

Place Sequence. Navigate to the folder with all of the images and select

the first one. All of the images will be automatically placed in a sequence

that can be exported in whichever format you choose.

Final product:

A small SWF file as opposed to a video that could be 20 times the size.

And since it's vector art, it can be increased to any size without losing

quality. A round of applause, folks — the Chop has earned it.

Copyright ©2002 Adobe Systems Incorporated. All rights reserved.

Terms of Use Online Privacy Policy Avoid software piracy

file:///E|/Misc%20PDF's/Streamline%20How-To/T...Chopping%20Block%20-%20How%20to%20gallery.htm (7 of 7) [23/11/2002 5:16:34 PM]