How to Create Animated GIFs

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