After you have used layers to begin a simple Web animation, a banner advertisement in which the text appears, grows larger, then scoots off-screen. This month we use the companion software to Photoshop, ImageReady, to tweak and finish off our production. ImageReady has special tools for creating and editing animated Web graphics.

Last month we created Animation.psd, a nine-layer Photoshop file. Each layer is actually a frame in the animation and thus displays an incremental progression of text. (The PSD file will ultimately become an animated GIF [Graphics Interchange Format], a standard format for Web animations.)

To get started, open the file. If you do not see the layers, choose Show Layers from the Window menu. Use the eye icon to show or hide layers.

Jump To ImageReady

ImageReady 3.0 comes bundled with Photoshop 6.0 and is typically installed at the same time. To open it, from the File menu, select Jump To and ImageReady.

Along with the Animation.psd file, you should see the Layers Palette, exactly as it displays in Photoshop, as well as the Animation Palette. If these palettes aren’t immediately visible, choose Show Animation and/or Show Layers from the Window menu.

The Animation Palette

This tool looks and functions a bit like a video player. The triangular and square buttons let you play and stop the animation. There are also buttons to select, create, and delete frames. There is also a button for tweening, a way to automatically create a series of frames that fit between two others.

At the bottom left of the tool, set the looping option to Forever.

Browser Preview

To see how your animation looks on the Web, select Preview In from the File menu and choose a browser. The browser not only displays the file, it also lists the animation’s physical properties including its size (in kilobytes). If a browser hasn’t been configured or you wish to select a new or alternate browser, do so by finding your favorite browser, selecting the browser’s EXE file, and clicking Open. (Browser programs are usually located in the Program Files folder.)

Tweak Frame Timing

If your animation flies by too quickly, return to ImageReady and look at the delay time listed below each frame. Delay time is the increment of time, usually expressed in fractions of seconds, that each frame pauses on-screen before it is replaced by the next one. To remedy a too-speedy animation, simply click the time displayed and reset it.

Experiment, fuss, then preview again. We ended up setting the first two frames to 0.5 seconds and the remaining seven frames to 0.2 seconds each.

A few editing notes to keep in mind: If more than one image appears in a frame, highlight the frame in the Animation palette and use the eye icon to “turn off” the extra image. If you make changes to the PSD file in ImageReady (change the font style or color), the changes will be automatically updated in Photoshop and vice versa.

Optimize For The Web

What we especially like about ImageReady is the way it automatically optimizes the size of files for efficient Web display. For a quick-and-dirty optimization, simply select File, Save Optimized, and Save again. Rename the file if you wish. Be sure the new file has the .GIF extension.

Or, if you’d like to shave off a few more kilobytes, click the 2-Up or 4-Up tab and optimize the image yourself. As with a static image, you can specify color palette, the number of colors, the dither pattern (the way dots array on-screen), and the percentage of dither.

Incorporate Your Image

When you’re finished, you can include the new animation in a Web page just as you would any other Web graphic. First move or copy the animation file to your Web folder, then use your favorite Web editor to insert the image and preview it.