It Logo

Photoshop 13: Lesson Activity - Animation in Photoshop/ImageReady

This exercise requires a familiarity with Photoshop and its menus and commands. It is not meant as a beginner exercise.

ImageReady is an add-on tool in more recent versions of Photoshop such as 5.5 or 6.0. It has some neat features such as animation, image slicing and rollovers. This is just a quick example of what you can do with animation. The following document is a step by step procedure to show you how to use the Animation Feature of ImageReady. By doing this, you will be more familiar with the way ImageReady does animation. Remember, you have to save your animation image in a GIF format.On the web, you see lots of animating ads, for instance, MSN uses one here about Sprint.

This step by step exercise will quickly show you how to make an animation image as seen below:

Open Photoshop's ImageReady by selecting the ImageReady icon at the bottom of the main toolbar - . This will open up ImageReady in another window and leave Photoshop at the same time. If the software runs slow, you can close down Photoshop since you will only need ImageReady.

  1. Create a new image - 500 pixels x 75 pixels
  2. Add some text and graphics like this:
    animation screen
  3. Select Window - Show Animation - (you should see a second animation frame with the same contents as the previous frame)
    animation window
  4. Click on the triangle at the top right & select the option to - add a new frame
  5. Select the new Frame and add new content (you can fill in the background color, add new text & images)
  6. Then you need to "hide" the layers from the previous frame. These are the layers that you don't want to see in the current frame as seen below. You can do this by clicking/toggling on the 'eye'
    hidden layers
  7. To add another frame - review steps #4 - 6
  8. Finally select the # of seconds that you want to view that particular frame.
    1. Click on the Second option - & choose a time.
  9. Play your animation with the vrc-type controls (arrows);
  10. To save your animation
    Select File - Optimized As & select GIF format
    . Only GIF format can do animation!
Now you are ready to use your image on a web page. Use Dreamweaver or some other web editor to insert your image.