Using Photoshop to Prepare Animations

Because Photoshop s Layers palette enables you to successively stack one transparent layer on top of another in sequence, it serves as a very effective cell animation program.

You can target an image on one layer, copy the layer, and apply a small increment of a filter, movement, or other operation. Copy the layer again and apply the operation one more time. Continue this process until the animation is complete. Incidentally, you can record the entire operation as an action, and quickly automate your task.

Here is a step-by-step example of preparing a Photoshop animation:

1. Open the Beating_Heart.psd image in the h07 folder on the Photoshop CS Savvy CD. The Heart image has been separated from its Background and named Layer 1 (see Figure 26.2).

   
   Figure 26.2: The Heart image separated from the Background

2. Choose Window ’ Actions.

3. From the Actions palette menu, choose New Set. Name the set Animation .

4. From the Actions palette menu, choose New Action. Name the action Heart Beat . Assign the F2 key as a key command. Click Record and OK.

5. In the Layers palette, control-click (Mac) or right-click (Windows) on Layer 1, the layer with the heart. Choose Duplicate Layer from the pop-up menu. A new layer called Layer 1 Copy is created.

6. Choose Filter ’ Distort ’ Spherize. Set the amount to 25% and the mode to Normal, as seen in Figure 26.3. On the new layer, the heart appears to have grown a little.

   
   Figure 26.3: Settings on the Actions palette

7. Stop recording.

8. Target the Layer 1 Copy. Run the action by pressing the F2 key. A new layer is created called Layer 1 Copy 2. On the new layer, the heart has grown a little more.

9. Each time you target the new layer, repeat the action. Repeat the process three more times by pressing the F2 key, until you have a total of five heart layers. The heart will grow a little bit each time as each new layer is created. Name each layer with a sequential numeric value from 1 to 5 (as in Figure 26.4), so that when you create the animation in ImageReady, you ll have no problem keeping the layers organized.

Figure 26.4: The Layers palette after the animation action has been applied

The animation file is complete. Save it as a Photoshop file named Beating_ Heart_Layers.psd , with the layers intact. In order to create the beating heart animation and convert the file to animated GIF format, you ll import it into ImageReady.