PhotoShop Lesson: Simple Animation in CS4

sample picture
This illustration shows the initial image and all layers in Photoshop. Click on it to see the animation.

  1. Start a new landscape oriented file, about 600 X 500 px.
  2. Create a new layer for the airplane.
  3. Choose the Custom Shape Tool and draw a picture of an airplane.
  4. Type Fly, Me, and Away on separate layers.
  5. Display the Animation palette from the Windows menu.
  6. The next step may not be necessary. But if the pallette is in Timeline Mode, click the bottom right button
    on the palette and choose "Convert to Frame Animation"
  7. Click the options menu of the palette and turn off "New Layers Visible in all Frames."
    The reason is that if you choose new layers later, you probably do not want to impact the old frames.
  8. From the Animation palette, click Duplicated Selected Frame.
  9. On the new frame that you just duplicated turn off the layers that you DON'T want.
    (i.e. In this case, turn off Me and Away)
  10. Repeat by duplicating again. Turn off Fly and Away.
  11. Repeat by duplicating again. Turn off Fly and Me.

You will now create a "tween"

  1. Duplicate to make a 5th frame. This time, keep all layers displayed.
  2. Duplicate to make a 6th frame. Again, keep all layers displayed.
  3. On the 6th frame, move the plane to the top right corner.
  4. On the 5th frame. Click "tween" from the palette options. Choose the number of frames you want in between. Click Ok.
  5. Play the animation.
  6. Now change the delay of each frame to about .2 seconds.
  7. Play it again.
  8. Save as Web & Devices. Choose GIF format.
  9. Insert the .gif file in your web page.

(NOTE: You may add it to your website project if desired. It's not a requirement, however.)