Create file

This tip shows you how to use Adobe Photoshop to create an animated GIF for the web.

For this example I create in Photoshop a new file of 90 x 90 pixels (72dpi) but in principle this is possible with any size image. Keep in mind that a large animated GIF image can become very large in terms of file format and that this will cause a (too) long loading time.

Blog post 002 - animated-gif- schermafbeelding 2Layers

First you have to convert the background layer to an ordinary layer because the background layer cannot be converted to an animated GIF. To do this, after selecting the background layer, click on the small hammer menu of the layer palette and choose ‘Layer Out Background’. You can also ‘control’ + ‘click’ the layer if you want to be more efficient.

I called this layer ‘Layer 1’ and created seven other layers. Each layer will be a frame in the animation.

On each layer I made a black frame of 30 x 30 pixels, always at a successive position within a 3 x 3 grid.

 

Timeline

Now that you have all the layers you can start with the timeline, you can open it via the menu ‘Window’ > ‘Timeline’.

Then click on the text ‘Create video timeline’.

The layers will now appear on the timeline.

Conversion

Now drag the purple bars so that they no longer overlap. In my case, I’ve always made an indentation and a length of 3 seconds. The length doesn’t matter yet, we’ll set it at a later time.

Then choose from the burgers menu of the timeline window for ‘Convert frames’ > ‘Convert to frame animation’.

 

Frames

Now you can see the frames of the animation in the timeline, you can set the duration of the frame for each frame and you can also indicate whether the animation should always continue (run), 3 times the sequence ends or whether it is just a single sequence. In this example I have set the duration per frame to 5 seconds and the animation will always repeat itself.

Export

Now you can export the GIF from the menu ‘File’ > ‘Export’ > ‘Save for web (obsolete)’.

Make sure you choose GIF and try to give as few colors as possible, this will keep the animation as small as possible in terms of file format.

Result:

Animated GIF small
In this example the Dutch version of Photoshop is used, it is possible that the terms used are not properly translated into the English language. In future tips we will try to use the language matching version of Photoshop.