How to Create Animated GIFs

UIS Office of Web Services
Documentation
How to Create Animated GIF files using Adobe Photoshop
Prepared by Ralph Shank
In some cases, creating animated GIF files is an easier method for having a few rotating images
for your website. There are several options for creating animated GIF files:
• Use free, online resources such as http://www.gickr.com, or http://www.picasion.com.
These free services allow you to upload images from your computer, and then download
the animated GIF file that they create for you. Once the animated GIF file is saved to
your computer, you can insert it on your webpage just as you would any other image.
• Use Photoshop to create animated GIF files. In older versions of Photoshop, a program
called Image Ready was used to create animated GIF files. In Photoshop CS2 and later,
Image Ready has been integrated into Photoshop. This option will give you more control
over the appearance of your animated GIF.
Image Sizes
Some thoughts to keep in mind before you begin:
• The larger your images are to begin with, the larger your animated GIF file will be in the
end.
• Having several images in your animated GIF will make the file much larger.
• Larger files will take longer to load on a web page, especially for those users who have a
dial-up connection to the Internet.
• All of your images should be the same size for your slide show in the beginning, so that
the size of the slide show doesn’t change with each image.
• Limiting the slide show to a maximum of four or five images will keep the size of the
animated GIF down.
Prepare Your Images
1. Copy all of the images you would like in your slide show into one folder.
Note: Copying the images rather than moving them is best, because we will resize the
images. This will guarantee that you have the original images in another folder on your
computer.
2. Refer to the Office of Web Services handout entitled “How to Resize an Image and Save
a Copy for the Web” to resize your images for use with a slide show or animated GIF
file.
Create the layers
In this case, “layers” refers to each image you would like in your animated slideshow, each on a
separate layer in Photoshop.
How to Create Animated GIF files using Adobe Photoshop – 3/17/10 – Page 1 of 3

3. Open Adobe Photoshop.
UIS Office of Web Services
Documentation
4. Choose File > Open and select your resized images, then click Open to open the photos
in Photoshop.
5. Move the images within Photoshop so you are able to view them all on your screen.
Notice that for each image, you have one layer named Background in the Layers
Palette.
Note: If the Layers Palette is not currently open, choose Window > Layers to make it
visible.
6. Choose one of your images to be the main project that you will add your layers to. It
does not matter which one of your images you choose. Double-click on its Background
layer and choose OK. This will unlock the layer and change its name to Layer 0.
7. Think of layers as stacked images. We will stack the other images on top of the image in
Layer 0 in order to add all of the images to one file. Make sure the Move Tool is selected
in the Photoshop Toolbox, and then drag each of your images onto your main image
(Layer 0). For each image you drag in, a new layer is created in the Layers Palette named
Layer 1, Layer 2, and so on.
8. Make sure each image is centered when you drag it, or by using the arrow keys on your
keyboard after you drop the image. You can close the remaining images once they have
been added to layers in your main project, leaving your main project open to create your
new animation.
9. Choose Window > Animation to open the Animation Palette. The Animation Palette
may open in a timeline view instead of a frame view. Click the button in the bottom right
corner of the palette to change it to a frame animation view.
10. In the Animation Palette you will see one frame that displays the topmost layer in the
Layers Palette. It is selected by default. Click on the small button in the Animation
Palette that Duplicates selected frames. This will add a second frame to your animation.
Now the second frame in the animation is selected by default.
11. In the Layers Palette, click the small image of the eye located to the left of the layer name
on your topmost layer. See how the selected frame in the Animation Palette changes,
showing the image underneath the topmost layer. Repeat steps 10 and 11 for each new
frame of animation, clicking on the small eye for each layer until each frame of the
animation is displaying a different layer or image.
How to Create Animated GIF files using Adobe Photoshop – 3/17/10 – Page 2 of 3

UIS Office of Web Services
Documentation
12. Set the timing for each frame as required. Below each frame is a time listed with a small,
downward-pointing arrow. Click on this arrow to choose timings for each image. It is a
good idea, in a rotating image animation, to select the same amount of time for each
image.
13. You can test the animation by clicking on the play button located beneath the frames in
the Animation Palette. If you’d like the animation to continue in a loop click on the small,
downward-pointing arrow next to Once in the bottom left corner of the Animation
Palette, and choose Forever. You will want to have this option selected if you want your
photos to continue to rotate on your web page.
14. Once the animation is working correctly for you, click on the Animation Palette menu
button, located to the far, right side of the Animation Palette. The button appears as a
small, downward-pointing arrow with three small horizontal lines next to it. Choose
Optimize Animation… from the menu choices. Make sure both Bounding Box and
Redundant Pixel Removal are selected, and then choose OK.
15. Choose File > Save For Web & Devices.
16. Choose GIF from the drop-down menu located underneath Preset:. Make sure the Dither
slider is set at 100%.
17. Click on the Save button.
18. Choose where on your computer you’d like to save your file, and then click the second
Save button.
Open Adobe Contribute, connect to your website and choose Insert > Image to insert your new
animated GIF file onto your web page as you would any other image.
How to Create Animated GIF files using Adobe Photoshop – 3/17/10 – Page 3 of 3