Create a Web animation

Create a Web animation using a layered Photoshop image.

An animation is made up of a sequence of frames. By varying each frame slightly from the next, you achieve an illusion of motion. You can create simple animations in Adobe ImageReady using a layered Photoshop or ImageReady image. The image contains all the elements of the animation on separate layers. Rather than duplicate and vary the entire image over and over, you vary the content of each frame by hiding or showing layers for each frame. You need only one copy of each layer containing static elements, whereas an element in motion will probably require several layers to create an impression of smooth, fluid movement.

In Photoshop, create an image you want to animate. Include a single layer for each static element. Create multiple layers for moving elements. Each layer for a moving element should represent its position at a different point in time.

Save the file, and choose File > Edit in ImageReady. The ImageReady application opens and displays the image.

Click the Animation tab to bring the Animation palette to the front or, if the palette isn't open, choose Window > Animation. ImageReady creates the first frame of the animation.

Click the Layers tab to bring the Layers palette to the front or, if the palette isn't open, choose Window > Layers. Arrange the Layers palette and the Animation palette so that you can view at least some of the document window and both palettes.

In the Layers palette, make sure the correct layers are visible and hidden for this first frame. Click the eye icon to hide a layer or the empty eye column to show a layer.

Click the Duplicate Animation Frame button at the bottom of the Animation palette to add the next frame. In the Layers palette, adjust the visibility of layers as needed for this frame. Continue to add new frames and hide or show their layers as appropriate.

When you have created all of the animation frames, click the Play button at the bottom of the Animation palette to preview the animation. Click the Stop button to stop it.

If the animation is moving too quickly, select a specific frame whose display time you want to adjust, or select all the frames to change their display time uniformly. Then, click the arrow next to 0 sec. at the bottom of a selected frame, and choose the desired time from the pop-up menu.

To set how many times the animation loops, choose Other from the pop-up menu on the bottom left-corner of the Animation palette (it defaults to Forever). Enter a value for Play, and click OK.

When you are satisfied with the animation, save the file. It is important to first save the file using the Photoshop format. The Photoshop format preserves all components of the button and allows you to make changes later if necessary. Once you have saved it as a PSD file, you can optimize the animation for the Web and save it in the GIF format, the format needed to display the animation on the Web.