Tutorial – Animated GIF

I’m not exactly sure how many times I’ve been asked on MySpace how I made my default pictures flip through like a slide show, but it’s been close to 15. It seems like people want to know how to do this, so here’s how I do it. It’s not the only way, and it’s probably not even the easiest way, but it’s how I do it. If you have a different way that you’re proud of, post it in the comments.

Before you get started

You’ll need to have Adobe ImageReady to use this tutorial. It comes with Adobe Photoshop, so if you have Photoshop, then you have ImageReady.

Also, you may want to prep the images that you’ll be using to make your animation. If all the images are the same dimensions before you go to ImageReady, it makes the process a lot simpler. You don’t have to make them all the same dimensions if you don’t want to, but you’ll have to play with the transparency or a matte background if they are different.

Here we go!

1 Open ImageReady.

2 Click on the File menu, then Open… and you will see the open dialog box. Navigate to the images that you want to include in your animation. (Hopefully, you already have them prepped as I do below.) Select all of them at once by clicking on the top one, and then holding the shift key as you click on the bottom one. Click Open.

3 Now you need to have certain tool palettes and windows open. Make sure your Window menu matches mine below. (The check marks indicate a palette/window is open.)

4 Make sure you have the Marquee tool selected in the Tools palette, and then click on one of the images. I have clicked on the far right image. Now press command+A to select all (control+A on Windows) and then command+C (control+C) to copy the entire image.


5 Next, click in the far left window and press command+V (control+V for Windows) to paste the image on top of the first image. Continue to do this with the remaining image(s) until they are all copy and pasted into the same window (or for you pros out there, the same “canvas”). You’ll notice that each time you paste an image onto the canvas, a new layer will be created.


6 After you copy all the images onto one canvas, close all windows except for the one that contains all the images. Your display should look something like the screenshot below with only one canvas open (top left red circle) and three layers in your layers palette (bottom right red circle).


7 Click the Duplicate current frame button as many times as you have images. In my case, I have three images, so I clicked it three times to create three animation frames.


8 This is where the going gets rough, so don’t give up! The animation works by simply displaying only one layer in each animation frame. We have to tell ImageReady which layers we want displayed in which frames. We can do this by setting the layer visibility as shown below. The little eye icon means that the layer is visible. If there is no icon to the left of that layer, then that means it is hidden.

Highlight the second frame of the animation, and then go over to the layers palette and make it so that only one layer is visible (i.e. only one eye is showing next to the layers).


9 Highlight the next frame in the animation, and go over to the layers palette and make the next layer visible, and the previous layers hidden as show below. Repeat this process as many times as you have layers so that each layer has its own frame in the animation palette.



10 You now have an animation! To preview it, you can click the play button on the bottom of the animation palette.

Whoa! Hold your horses, pardner! That’s moving a little too fast, isn’t it? You’re not done yet. Let’s fine tune the animation and export it for use on the web.

Highlight the first frame of the animation by clicking on it once, then hold down the shift key and click on the last frame of the animation. This will select all of the frames of the animation as shown below.


11 You can change the amount of time each frame is displayed by clicking on the menu directly below the image in the animation frame (the default is 0 sec.). We already selected all of the frames, so when you change it to 2.0 seconds, it will change all selected frames to 2.0 seconds. (If you would like the delay to be different for each frame, you can only select one frame at a time and change the delay separately.)


12 Ok, we’re almost done… in the optimize palette, select the format GIF as shown below.


13 In the same optimize palette, select 32 colors. (This will decrease the file size by only using 32 different colors to make up your images. You can play with this number to find a balance between low file size and a good quality image. For my animation, 32 was about right, especially since it’s not a very large image that will easily show grain.)


14 Now we’re ready to export the file. In the File menu, select Save Optimized As…


15 A save dialog box will pop up and ask you to name the file and ask you where you want to save it. I’ve chosen to name mine “my_animation.gif” and I’m saving it to the Desktop.


16 Make sure that you have the Format set to Images Only as show below, then click Save. That’s it! You’re all done making your animated GIF.


17 If you would like to preview the final product, you can do so by dragging the image file into a browser window as shown below.


18 Here’s the final animation.

My Animation-2

If there was anything that was unclear, please let me know and I’ll try to rephrase or add more descriptions. I’m always trying to walk the thin line between writing too much that it becomes confusing or insulting, and not writing enough and getting people lost. Enjoy and feel free to send me your newly created animations.

Reader Submission:

SmileyNoBike of the GixerJunkies.net
Photographs by JT aged 8 1/2

Leave a comment

Your email address will not be published. Required fields are marked *