How to create animated gif image banners

The banner image you see above is nothing more than an animated gif image. It’s simple and effective and can be used in places or sites that allow gif images but do not allow flash components. To create the image, you will need a series of images of the same size and Adobe ImageReady. Note that animated gif image can only display 256 colors so the quality of the image will not be as good as jpg. Gif images are also larger so beware of how many images you stack. The three images you see in rotation above results in a 252 KB file.

1. Open all the source images in ImageReady. (The images should not contain layers. If it does, flatten them)

2. You will need to create a layer for each of the photo you want displayed. To do this, copy each target image into a master image following these steps:

  • select a target image
  • press ctrl a to select all
  • press ctrl c to copy
  • select the master image
  • press ctrl v to paste
  • repeat for each of the images until the master image contains a layer for each of the images.

3. Open the animation window by going to Window-Animation

4. Activate the animation menu by clicking the > arrow on the top right hand corner. Select ‘Create Layer for Each New Frame’. Choose Make frames from layers. You will now see series of frame.

5. Select how long you want each frame to be displayed.

6. Press play to preview.

7. When you are satisfied, go to the animation menu and select ‘optimize animation’.

8. You must save this as a gif file for the animation to work. In the Optimize tab on the top right hand corner, select the following:

  • Format: GIF
  • Reduction: Selective
  • Colors: 256
  • Method: Diffusion

9. Now save ‘optimize’ as in the file menu.

That’s it.