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.
Adobe AlterCast is a new dynamic image server software solution
designed with graphics professionals in mind. AlterCast greatly extends
the power of Photoshop by linking key image parameters in
Photoshop PSD files (such as text content, layer visibility, and image
dimensions) to elements residing in a database or content management
system. This linkage enables Web publishers and other graphics
professionals to automatically generate multiple and varied iterations
of PSD files using templates developed with Photoshop commands and
executed by AlterCast programming scripts.
In a Web imaging workflow, Web designers create pages for a site just
as they normally would. The difference: Using ImageReady 7.0, Web
designers assign variables to those pages that, through programming
scripts created by a developer, can be dynamically updated by Alter-
Cast. For example, by integrating AlterCast into a Web imaging workflow,
headlines or price changes can be entered directly into a database.
A batch-processing script would then locate the original PSD
image file containing that text; automatically update the text while
retaining effects such as drop shadows; save a new version of the
graphic in GIF format with a user-defined file name and destination;
and post the updated graphic to the Web. Instead of making those
changes manually, the designer simply submits the new pricing information
into the database; AlterCast handles the rest.
To speed common production tasks, AlterCast can automatically
generate every file version a company needs whenever a new image is
created—from online thumbnails to low-resolution monochrome
images, for mobile devices to high-resolution printer files. AlterCast
delivers virtually any image in any common format to virtually any
online or print device. Image modifications and enhancements such as
resizing, color mode conversions and text replacement are made
possible by adding Photoshop imaging controls and Adobe font
technology to an enterprise-class server with industry-standard
interfaces.
By automating these processes, AlterCast frees designers and content
creators to concentrate on doing what they do best—building compelling,
visual Web page designs.
For more information about AlterCast, go to http://www.adobe.com/
products/altercast/. For an online trial of AlterCast, go to http://
altercast.netxposure.com.
The Brushes palette lets you preview brushes, such
as the Flowing Stars brush, as stroke thumbnails,
among other options.