Create animation with Illustrator layers ~ Tutorial's Kingdom - Free Tutorial Windows, Mac OSX, Software, Music, etc

Recently Posted

advertisement




The ability to preserve Adobe® Illustrator® layers makes
Adobe Photoshop®, which includes ImageReady™
uniquely suited to adapting traditional animation
techniques for professional-quality Web animations.
Here's how to use ImageReady to create and optimize a
Web animation from a multilayer Illustrator file.

1. Arrange the layers in Illustrator.
Open the Illustrator file you want to use for the
animation, and arrange the layers. Make sure the layers
are in the order in which you want to display them as
animation frames. The bottom layer becomes the first
frame in the animation when you convert the layers to
frames in ImageReady. You can also rearrange the layers
after opening the file in ImageReady if necessary.

2. Export the file to Photoshop.
Choose File > Export. Choose Photoshop 5 for Format,
and save the file. In the Photoshop Options dialog box,
select RGB for Color Model and Screen (72 dpi) for
Resolution. Select Anti-Alias to smooth edges in the
exported image, and select Write Layers and Include
Hidden Layers to preserve layers. Click OK and exit
Illustrator.

3. Open the file in ImageReady.
Launch ImageReady, and open the file you saved in
Photoshop format. Notice that the layers are preserved
in the ImageReady layers palette.
Exporting a multilayer file from Illustrator in
Photoshop format may cause an additional background
layer to be added to the file. If an empty layer labeled
"Background" appears as the bottom layer in the
ImageReady Layers palette, select the layer and click the
Trash button in the palette to delete it.

4. Create the animation.
In the ImageReady Animation palette, choose Make
Frames From Layers from the palette menu. Each layer
of the Illustrator file becomes a frame in sequence and
is displayed in the Animation palette.
You can now preview and add, delete, or modify frames
in the animation, as well as set playback options as
needed.

5. Optimize and save.
Choose Optimize Animation from the Animation
palette menu, select Bounding Box and Redundant
Pixel Removal, and click OK. Right-click (Windows) or
Control-click (Mac OS) the frame thumbnail, and then
choose Automatic to preserve frames that include
transparency.
In the Optimize palette, select GIF from the file format
menu, and choose other options to optimize the file for
display on the Web. Then choose File > Save Optimized.