1 Adobe Illustrator and Adobe Photoshop
Export layers to Photoshop
If you're looking for a way to create animations or
special effects using artwork you create in Adobe®
Illustrator®, you should know how to export artwork
on separate layers into Adobe Photoshop® or Adobe
ImageReady® (which ships with Photoshop). Watch us
create a rollover animation in ImageReady by exporting
the artwork on layers from Illustrator. The transparent
background is kept intact, and special effects such as
feathering are also exported without changes. Follow
this tip to see how easy it is to create a rollover
animation once you get used to exporting artwork on
layers.
1. Create the elements of a rollover animation, and
place them on separate layers.
Create your artwork, making sure that each element
you want to animate is on a different layer. In this
example, we created the dog stamp artwork on one
layer. Then we drew a rounded rectangle on a separate
layer, painted it yellow, and feathered the edges to create
a halo effect. (To feather an edge, choose Effect >
Stylize > Feather, and enter a value for the feather
radius. We chose a radius of 20 points.) Finally, we
created a simple red rectangle that we'll use as a
background and placed it on its own layer.
The yellow rectangle will be used as our rollover effect.
We placed the yellow feathered rectangle between the
artwork and the background to provide the effect of
highlighting the artwork when we turn it on and off in
our rollover.
2. Make sure the artwork is transparent to the
background.
Choose View>Show Transparency Grid. In this closeup,
you can see that the feathered part of our yellow
rounded rectangle fades to transparency at the farthest
edge. This is necessary to ensure that the rollover state
will appear correctly in our rollover animation.
Similarly, you can see that the background between the
scalloped edges of the stamp edge is also transparent.
3. Export the artwork to Photoshop format.
Choose File > Export, and then choose Photoshop 5
from the Save As Type (Windows) or Format (Mac OS)
menu. In the Photoshop Options dialog box, make sure
the Color Model is set to RGB. Also make sure the
Screen Resolution (72 dpi) and Write Layers options are
selected, and then click OK.
4. Open the new file in Photoshop or ImageReady.
Start the Photoshop or ImageReady application, and
open the file you saved. Since we are creating animated
rollovers, we used ImageReady. Open the Layers palette
to view the artwork.
Notice that the layers in ImageReady are identical to the
layers in the original Illustrator file. The edges of the
feathered yellow rectangle and the stamp artwork
retained their transparency when we exported the
image to ImageReady.
5. Set up the animated rollover.
In the Layers palette, hide the yellow rectangle by
clicking the eye icon for that layer. Choose Window >
Show Rollover to display the rollover palette, select New
State from the Rollover palette menu, and choose Over
to select the mouseover rollover state. Then click the eye
icon in the Layers palette again to show the yellow
rectangle. The yellow rectangle will appear when you
roll the mouse over the dog stamp.
Use these techniques to create transparent artwork in
Illustrator, and then to export the artwork into
Photoshop. It’s an easy way to create a wide range of
special effects and animations.
Adobe, the Adobe logo, Illustrator, and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United
States and/or other countries. Windows is either a registered trademark or trademark of Microsoft Corporation in the United States and/or other
countries. Macintosh is a trademark of Apple Computer, Inc., registered in the United States and other countries.
©2000 Adobe Systems Incorporated. All rights reserved.
The scatter brushes in Adobe® Illustrator® provide a
good starting point for creating playful animated
patterns. By taking advantage of the brushes' ability to
scatter patterns at adjustable intervals, you can quickly
generate animation frames that proceed with seemingly
random movements. Follow along as we use scatter
brushes in conjunction with the Blend commands and
Release to Layers command to create a GIF animation
of dancing flowers. To complete this tip, you need
Adobe® Photoshop® 5.5 or higher.
1. Paint a path with a scatter brush.
Open a new Illustrator artwork window in RGB color
mode. Select the spiral tool in the toolbox in Illustrator,
and drag to draw a spiral. Set the fill and stroke of the
spiral to None. Then apply a scatter brush to the spiral
path. (We chose Window > Brush Libraries > Floral
Sample, and applied the Violets brush.)
Scatter brushes spread copies of an object along the
selected path.
2. Copy the brushed path, and adjust Scatter Brush
Options.
With the brushed path selected, choose Edit > Copy,
and then choose Edit > Paste in Front to duplicate the
brushed path. In the Brushes palette, double-click the
active scatter brush to display the Scatter Brush Options
palette. Drag the sliders to adjust options, click OK, and
then click Apply to Strokes to apply the new options to
the duplicate brushed path.
By adjusting scatter options for the duplicate path, you
alter the distribution of scatter objects along the path.
The two brushed paths represent the starting and
ending frames of your animation.
3. Blend the brushed paths.
Choose Edit > Select All to select both brushed paths,
and choose Object > Blend > Blend Options. For
Spacing, choose Specified Steps, enter the number of
intermediate steps you want in the blend, and click OK.
(We used 5 steps.) Then choose Object > Blend > Make.
The Blend commands let you automatically create
intermediate steps that blend the positions, shapes, and
colors of a starting object and an ending object.
4. Release the blend to separate layers.
In the Layers palette, select the blend you just created.
(You may need to expand layers to see the blend.) Then
choose Release to Layers from the Layers palette menu.
The Release to Layers command places each object in a
group or layer on its own separate layer. In this case,
each step in the blend is released to a separate layer.
5. Export the file to Photoshop 5 format.
Choose File > Export, choose Photoshop 5 for the file
format, and click Save (Windows) or Export (Mac OS).
In the Photoshop Options dialog box, make sure the
color mode is set to RGB. For Resolution, select Screen
(72 dpi). Select Write Layers and Write Nested Layers,
and click OK to the alert message that appears. Then
click OK to export the file.
When exporting an Illustrator file to Photoshop 5
format, you can choose between flattening or
preserving layers in the file. Because you are preparing
your file for animation, you want layers to be preserved.
6. Create animation frames in Adobe
ImageReady®.
Start Adobe ImageReady, and open the Photoshop file
that you just exported. Choose Window > Show
Animation, and choose Make Frames From Layers from
the Animation palette menu.
The ImageReady Animation palette makes it easy to
create and customize frames of a GIF animation. Here,
you converted the layers in your file automatically to
animation frames. You can use the Animation palette to
set further options for your animation, such as delay
time between frames and looping.
7. Optimize and preview the animation.
In the Optimize palette, choose GIF from the file format
menu, and choose other options to optimize the
animated file. Then preview your finished animation by
choosing your Web browser from the File > Preview in
menu.