Free resources Go back to Introduction page tutorials
Introduction Tutorials Brushes Other

How to make an animated GIF

PNG is a much better format than GIF, and if you want animation you should probably use Flash or similar. However, animated gifs are still useful sometimes.

In this tutorial I will show how to make a very simple animated gif using Photoshop CS3. If you use CS2 there is some additional information at the bottom of the page.

Animated GIF

An animated gif is suited for low resolution illustrations, and is not suited for photographic elements. Photographs will create a large file size and also remember that GIF is limited to 256 colours. It does not support partial (alpha) transparency.

In this example I will use the simplest scenario. I have a Photoshop-file with all my frames as layers, so that I can create the animation simply by hiding/showing layers.

This is what my file looks like:

  1. Step 1: Open up the animation palette.
  2. The palette that opens will say "Animation (Timeline)" or "Animation (frames)". If it is set to timeline, you will have to go to this button:
  3. ...and click "convert to frame animation"
  4. You now have a palette that looks like this:
  5. Now, hide all the layers you don't want to show in the first frame.
  6. Click duplicate frame and you will get a new frame (2).
  7. Now, hide all the layers you don't want to show for the 2nd frame.
  8. Click duplicate frame again and you will get a new frame (3).
  9. Now, hide all the layers you don't want to show for the 3nd frame.
  10. Repeat this process until you've got all the frames you want
    (remember you don't need the last frame to be identical to the first frame as the animation will loop)
  11. You should now have something like this:
  12. As you can see, by default for me the frames last 10 seconds each. To change this, select all your frames by making sure the last one is selected, then while holding down shift, click the first frame.
  13. Then click the time ("10 sec.") and choose a new timing. E.g. "0.1 seconds". Make sure the setting in the bottom left also sais "forever" to make the animation loop.
  14. Now, press play to preview you animation to see if it looks ok.
  15. If you're happy, we can now save this as an animated GIF. I recommend saving the PSD file as well or else you will not be able to properly edit your animation should you want to change things later.
  16. To save as animated GIF go to "File > Save for web and devices..."
  17. You will now get a big window that looks something like this:
    • Make sure you have selected GIF (1).
    • Uncheck Transparency unless you need it (6).
      (if you have transparency make sure "matte" is set to a color close to the page background.)
    • Double-check the looping (2).
    • Check that you have many frames (3).
    • Preview your animation (4).
    • Check that the file size is small enough (5).
  18. Press save and give it a name that ends with .gif (I named mine "red_dot.gif"). You now have an animated gif!
    Try opening it in your web browser to see how it looks. Different programs sometimes have a bad tendency to playing the back the gif at different speeds (noticeable with fast animations).

The final result:

Tips:

If you get a file size (5) that is too big (e.g. 400kb would take a long time to load on a webpage) play around with the settings to reduce the size. Some ideas: If this is not enough, you will have to go back to your document and try something more drastic:

CS2 users (and older!):

CS2 had a program called "ImageReady" to handle things like gif animations. When your file is ready, click the big "send to imageready" button at the bottom of your tools palette.

Here you can have a timeline (frames) similar to that in photoshop cs3. Do the same process of adding new frames until happy. To save as a gif choose "save optimized as..." from the file menu.
(Detailed gif settings, metadata, etc, can be chosen in the different imageready palettes.)