If you’re an expert at handling layers, the next challenge is maneuvering them into an animated Web graphic. As you know, layers work like those transparency sheets for overhead projectors: Each new layer adds to the overall effect. But in the world of electronic imagery, layers viewed sequentially become frames for an animation.

This month, you’ll create a sequence of layers to animate. Next month, we’ll show you how to bring layers to life using Image Ready, the companion software to Photoshop 6.

Our simple animation consists solely of letters, a kind of banner advertisement. It’s based on the slogan for Mrs. Mom’s Taxi Service, an after-school taxi service. We take the slogan"We’ll Drive, Hop In,” enlarge it, and have it travel off-screen to the right. Follow along with us or use our example to create your own set of layers.

One Image, Many Layers

A file destined for animation differs from your usual Photoshop file. Because its layers are essentially frames in an animation, you are not supposed to view the layers all at once. It can get confusing, so keep your wits about you. Start by creating a new file. From the File menu, select New. Set the Width at 300 pixels and the Height at 75 pixels. Mode should be RGB Color. Background should be Transparent. Set resolution to 72 dpi (dots per inch).

f you don’t see the Layers Palette on your screen, select Show Layers from the Window menu. The palette lets you view, reorder, and edit layers, as well as adjust their visibility.

The Background

First, we’ll create a background layer. Its image will appear in every frame of the animation. We’ll use a colorful fill and the company name. Click the Foreground Color box in the tool palette and select a shade of light blue. From the Edit menu, choose Fill. Select Use Foreground Color and click OK. Next, click the Type Tool. From the horizontal text tool menu, select Arial MT, Bold, 11-point, and change the text color to black. Then type Mrs. Mom’s Taxi Service. Click the Move Tool (the arrow with the cross) and move the text to the upper-left corner.

Note that the fill and the text occupy separate layers. To combine them, from the Layer menu, select Merge Visible. Save the file as Animation.psd.

Frame By Frame

Next we’ll create layers based on the company slogan. Click the Create A New Layer button in the Layers Palette. Choose a dark blue from the color palette. This is the background color of the animation. Then click the Type Tool select Arial Black, 12 point. Type We’ll Drive, Hop In!. This text is the basis of our animation.

Next, right-click the layer, select Duplicate Layer, and click OK. Highlight the text and select Arial Black, 18 point. Select Duplicate Layer again, and this time select Arial Black 18 point text, italic. Larger and italicized, here’s a strong message with the illusion of movement. (As you create new layers and overlap text, it gets difficult to see what you’re doing. Make it easier by clicking the eye icons of the earlier layers to temporarily turn off visibility.)

Now, right-click this latest layer and select Duplicate Layer again. Select the Move Tool and move the text slightly to the right, so the word “We’ll” overlaps “Drive.” Repeat this three more times, each time moving the text closer to the edge of the border. To make the last layer blank, click the Create A New Layer icon once. At the end of the process, you should have a total of nine layers. Then use Adobe ImageReady to convert this file into a live animation for the Web.