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.
