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]