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.
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.
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’.
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.