How to Create
Complex Web Graphics in ImageReady
About rollovers and states
A rollover is a Web effect in which
different states of an image appear when a viewer performs a mouse
action--such as rolling or clicking--over an area of the Web page.
A state is defined by a specific
configuration of the Layers palette, including layer location,
styles, and other formatting options.
By default, every image has one state--the
Normal state. The Normal state corresponds to the appearance of an
image when it is first loaded into a Web browser and no rollover
effects have occurred. You can add states to an image that will
occur when a viewer performs a mouse action--such as rolling or
clicking--over an area of the Web page.
About working with
layers in rollovers and animations
You work with layers in ImageReady to create rollover buttons and animations.
Placing the image content for a rollover on its own layer allows you to make
changes to the layer's style, visibility, and position to create rollover
effects. Likewise, placing each element of an animation on its own layer
establishes it as an independent object and enables you to change the position
and appearance of the object across a series of frames.
You can also work with rollover effects for layer slices
other than the one you have selected. You can use these
remote rollovers to create effects such as launching an application or
running an animation in the Over state. See
Creating remote rollovers.
Illustration of a rollover. The button is on its own layer; effects are
added to the layer to create a new appearance of the button for the Over
state. The text for the word "EVENTS" is also on a separate layer.
Illustration of an animation. The bicycle image is on its own layer; the
position of the layer changes in each frame of the animation.
Using the Web
The Web Content palette lets you create, view, and set options for the
rollover states in an image. In addition to rollover states, the Web Content
palette can display slices, image maps, and animation frames. Displaying
slices and image maps helps you keep track of the elements in an image that
contain rollover effects. Displaying animation frames makes it easy to see
which states of an image contain animations.
The Web Content palette with slices, image maps, and animation frames
A. Normal state B. Image
map with Over state C. Slice visibility icon
D. Indicates this slice has an active rollover
state E. Drag the pickwhip to the image window to
make the targeted slice remote for this rollover state F.
Indicates that the down state has a remote slice associated with it
G. Indicates that this slice has a remote target
associated with it H. Indicates that this state
has animation associated with it I. Indicates that
this slice is a nested table J. Nested Slice info:
slice number, layer-based indicator, remote-trigger badge
K. Individual slice info: slice number, layer-based indicator
L. Remote slice info: slice number, layer-based
indicator, remote-target badge
Displaying the Web Content palette
Choose Window > Web Content. A check mark indicates that
the palette is showing.
Using the Web Content palette menu
Click the triangle
in the upper right corner of the palette to access commands for working with
Displaying slices and image maps in the Web Content
In the Web Content palette, there are sections for Image
and Slices .
Click the disclose triangle to view or hide them. An option in the Palette
Options area of the Web Content palette menu toggles the display of slice
badges, which are small icons on each slice that display the slice's current
Displaying animation frames in the Web Content palette
Choose Palette Options from the Web Content palette menu.
Select or deselect Include Animation Frames, and click OK.
Changing the size of rollover thumbnails
Choose Palette Options from the Web Content palette menu,
and select a thumbnail size. For sizes other than None, select Object Bounds
or Entire Document to determine the contents of thumbnails.
Expanding and collapsing states, slices, and image maps
Click the triangle to the left of an item in the Web
Content palette. Alt-click (Windows) or Option-click (Mac OS) expands or
contracts all options.
Creating and editing rollovers
You use the Web Content palette, in conjunction with the Layers palette, to
add rollover effects to an image. When you save the image as a Web page,
ImageReady supports animations in Web pages, and provides tools for creating,
editing, and displaying animations.
You can apply optimization settings to animated images just as you do to
nonanimated images. You should always optimize an animation in GIF format
because GIF is the only format in ImageReady that supports the display of
animated images on the Web.
Note: While you can optimize an
image that includes animation in JPEG or PNG format, these formats do not
support animation. The resulting Web page will display only the current frame
of the animation.
In addition to the standard optimization options for GIF
format, you can optimize frames to include only areas that change from frame
to frame. (This greatly reduces the file size of the animated GIF.) ImageReady
also applies a special dithering technique to animations to ensure that dither
patterns are consistent across all frames and to prevent flickering during
playback. Due to these additional optimization functions, ImageReady may
require more time to optimize an animated GIF than to optimize a standard GIF.
To optimize an animated image:
- Choose Optimize Animation from the
Animation palette menu.
- Set the following options:
- Bounding Box to crop each frame to the area
that has changed from the preceding frame. Animation files created using
this option are smaller but are incompatible with GIF editors that do not
support the option. (This option is selected by default and is recommended.)
- Redundant Pixel Removal to make transparent
all pixels in a frame that are unchanged from the preceding frame. This
option is selected by default and is recommended. The Transparency option in
the Optimize palette must be selected for redundant pixel removal to work.
Important: Set the frame
disposal method to Automatic when using the Redundant Pixel Removal option.
- Click OK.
- Apply optimization settings.
optimizing the colors in an animation, use the Adaptive, Perceptual, or
Selective palette. This ensures that the colors are consistent across frames.
Viewing an animation lets you preview the frames in timed sequence. You can
preview an animation in ImageReady or in a Web browser.
To view an animation in ImageReady:
- Click the Play button
in the Animation palette. The animation is displayed in the document window.
The animation repeats indefinitely unless you specified another repeat value
in the Play Options dialog box.
- To stop the animation, click the
Stop button .
- To rewind the animation, click the
Selects First Frame button .
To preview an animation in a browser:
- Click the Preview in Default Browser
in the toolbox or choose File > Preview In and select a browser from the
- System Default Browser opens the browser
you've set as your chosen one.
- Other Browser lets you choose an application
from your system.
- Edit Browser List lets you add browsers to
the Other Browser list.
Note: Once you select a browser, the
Default Browser button changes to the browser icon.
- Use the browser's Stop and Reload
commands to stop or replay the animation.
Viewing animated images in Photoshop
When you open a file containing an animation in Photoshop, only the frame that
was selected when you saved the file in ImageReady is displayed. You cannot
edit the animation frames separately, play the animation, or save the
animation as an animated GIF.
If you add a new layer to the file while in Photoshop,
the layer is added to all frames of the animation. However, the new layer will
only appear in the selected frame when you reopen the file in ImageReady. If
you change the stacking order of layers while in Photoshop, the stacking order
of layers will be changed when you reopen the file in ImageReady.
You can save an animation as an animated GIF file, a QuickTime®
movie, or a SWF (Macromedia® Flash™)
file. You can also save each frame in an animation as a separate file.For
information on saving animations and other ImageReady files in the SWF format,
Exporting animation frames as files
You can export individual animation frames as files. You can export frames as
Photoshop (PSD), GIF, JPEG, PNG 8, PNG 24, WBMP, or SWF.
ImageReady provides a number of preset formats for
animation files. You can also develop your own formats and add them to the
library of presets.
To export animation frames as files:
- Choose File > Export > Animation
Frames as Files.
- In the File Options area of the
dialog box, do the following:
- Enter a Base Name for new files. You may
choose your own naming scheme if you wish.
- Click the Set button to set the file naming
convention for new files. You can choose from a number of different
conventions and postfixes.
- Click the Choose button to determine the
location for saved files.
- In the Save Options area, select the
- Selected Frames Only to choose specific
frames for export.
- Preview to display the current layer settings
in the document. Use the forward and backward triangles to cycle through
- Apply to set the formatting preference.
- In the Format Options area, select a
format from the Preset menu. You can save sets of formats and place them in a
directory that ImageReady can see; this lets you build a library of presets
from which to choose. You can also use an "unnamed" Preset, and fill in the
- Based on your chosen Preset, the
Format item receives an automatic value, or you give it a value for "unnamed."
The other options in the Format Options area are then filled in automatically
to reflect the Preset/Format settings, or you can fill them in for your own
Opening and importing files as animations
You can use the animation features in ImageReady to edit animated GIFs,
multilayered Photoshop files, and QuickTime movies.