Making simple animated gifs using Photoshop CS6

You would be forgiven for thinking animated gifs were a thing of the past, but you may have noticed more and more being used across the web – mainly because of their sheer simplicity, tiny file sizes and cross-platform support.
The graphic below is a .gif with a file size of 164kb and is set to loop through a very simple animation.
Previously animated gifs were created using software such as Fireworks, which is soon to be phased out as Adobe move all of its features over to Photoshop.
So how did we make the animation above using Adobe Photoshop CS6?
1. Create Canvas & Open Layered Vector Graphic – We started with a simple 1185 x 732 canvas and imported a layered vector graphic (allowing us to hide and show elements of it)
2. Open the “Timeline Window” by clicking on the Window Menu bar item
3. Click “Create Frame Animation” in the newly added pane to reveal the frames.
4. Start adding the frames by clicking the “new icon” in the timeline pane.
5. Hide and reveal layers in the “Layers” in the order you want to animate the graphic, adding a new frame each time you hide or show a layer.
6. Choose the speed of the frame changes – Highlight each frame and click the small down arrow to choose the delay times. (highlight them all and click one of the down arrows to set them all the same)
7. Once you are happy with the timings, click “File” > “Save for Web…” – then choose “GIF” from the side panel. Note you can also preview the animation here by clicking the “play” button at the bottom right hand side of the pane. Then simply choose “Save…” and give it a name.
That’s it! you have a very simple animated gif using Photoshop. There are obviously loads of other advanced features, but this is the basic process.
Have fun…

Written by Oli Yeates


Follow Oli on Twitter