Santa Clara University

Web Publishing
How to make an animated gif (using 3 images)

When creating an animation, you need to keep in mind that it consists of a sequence of frames. For this tutorial we will be creating a simple animation that consists of three images. The general idea on how animations are created is by the use of layers in Adobe ImageReady.

 

Note: Adobe ImageReady is part of Adobe Photoshop. If you have access to Adobe Photoshop then Adobe ImageReady is bundled with it.

 

1. Start by opening your images in Adobe ImageReady. Make sure all images are the same size as found in the OCM’s guidelines for images.

 

2. From the drop down menu go to the window selection and select animation. When this is done an animation window will be brought onto the screen.

 

Gif tutorial image 1

 

3. Within the animation window you can copy and paste the different images as layers. Go ahead and do so.

 

Gif animation image 2

 

4. Start with your first image as the only visible layer (by turning off the eye button in the layers palette).

 

5. In the animation window, click the "Duplicates Current Frame" button.

 

undefined

 

6. Change to the next image and make other two layers invisible.

 

undefined

 

7. For the last image, repeat: In the animation window, click the "Duplicates Current Frame" button. Change to the next image and make other two layers invisible.

 

8. Press "PLAY" in the Animation Window to view your animation to this point.

 

9. You can change the duration between each image change by clicking on the "Seconds" arrow on each image and changing it to your ideal duration.

 

10. You can also make your images look as if they are blending. To do this, click on your first image in the Animation Window. Hold down the "Shift" key and click on the next image in the Animation Window.

 

11. Click on the "Tweens Animation Frames" button and adjust the number of steps you want in-between both

image frames.

 

undefined

 

12. Press "OK" and "Re-Play" your animation to see the changes.

 

13. To save your completed work, go into the file menu and select “save optimized as.” It is from there that you can save as a gif image that will animate when displayed on the web.

 

animated gif
Above is a gif animation done without tweening.
tweening animated gif
Above is a gif animation done with tweening (blending).

Printer-friendly format