How to create an animated GIF using Photoshop

Changing layer visibility one frame at a time is a classic Photoshop animation technique which can be used in many different circumstances to make a GIF file (recall, GIFs are useful because they support animation). To use this technique:

1. In  a new file, create a layer for each image that is to be put into the final animation, and put the image you want into the layer.
   
   
2. From the menu, chose Windows > Animation to open the animation palette.
   
   
3. On the first frame, turn off visibility for all layers you don't want showing at the start of the animation.
   
   
4. Add one frame for each image you do want to include. For this frame, turn on the layers you want to show on that frame, and leave the others turned off.
   
   
5. Set the timing for each frame, using the value (shown in seconds) below the frame.
   Hint: Hold down Shift to multi-select frames and change them together.
   
   Not required for ECDL, but in real life - also choose Do Not Dispose for each frame.
   
   
6. If there is a linear action which you want to spread over a number of frames (eg something dropping from the top to the bottom of the image), use the Tween function:
   
   • Make sure that the start of the motion is shown on all the frames you want to spread it over
   • Add a frame which shows the very end of the motion.
   • Select“Tween…” from the Animation palette’s pop-out menu.
   • Enter the number of frames to add and press OK - Photoshop spreads the motion evenly between this number of frames, giving the effect of motion.
     
7. Export the animated GIF by choosing File > Save For Web & Devices (in Photoshop CS3 & higher).
   
   
8. Check that the animation is correct by opening the file in a web-browser (double click the file from Explorer to do this) - you should see the animation occur.