How to create an animated gif in Photoshop

In this tutorial you will learn how to create a basic animation for the web with Photoshop. Follow these simple steps to create a circular animation. This tutorial can be used with any graphics you like, I’ve used simple circular graphics to create a circle which changes into a half circle and back just for the purposes of this animation.

Step 1.

Create a new document 800 x 500 pixels, with a white background.

Step 2.

Select the circle shape from the toolbar and a bright colour from the colour palette (at the bottom of the toolbar).

Step 3.

Click and drag on the canvas to create a shape. To draw a circle rather than an oval press shift as you drag the shape on the canvas.

Step 4.

Go to the layers palette and duplicate the shape you have just drawn. To do this highlight the layer (Shape 1) and click and drag this layer into the new layer icon to the left of the bin in the layers palette.

Step 5.

Click on the eye icon of the shape 1 to hide it from view and select the layer which contains the new shape.

Step 6.

Choose the pen tool from the toolbar and select subtract from shape area from the application bar.

Step 7.

Draw a triangular shape on top of the circle with one of the points in the centre. Imagine that you ere cutting a cake into 12 segments, although it doesn’t matter that it’s exact. This shape should have subtracted the fill from the circle.

Step 8.

Go to the layers palette and this time duplicate the layer you’ve just modified. Turn off the second shape by using the eye icon and select the third or top layer.

Step 9.

This time use the arrow tool and drag the point on the right of the triangle into a new position as if to account for 2 slices of cake.

Step 10.

Keep repeating this method until you have a perfect half circle.

You may need to draw other shapes on top of the circle and triangle to help the triangle cover all the area that needs to be subtracted. To do that select the pen tool again and click on the subtract icon again in the application bar. You can then draw another shape over the circle and triangle which will also subtract any of the original circles shape.

Step 11.

You should now have 7 or so layers in order ranging from complete circle to half a circle.

Step 12.

Go to window > Animation to open the animation panel.

Step 13.

Click on the squares icon bottom right of this window to view the basic frames animation area.

Step 14.

This should be displaying whatever you have on the canvas at the time. Toggle the visibility of the layers on and off so it is only the original circle that’s shown.

Step 15.

Click on the tab just below the frame in the animation panel and set this to 0.5 seconds. This is how long this individual frame will be shown in the animation for.

Step 16.

Duplicate this frame, as with the layers palette, drag the frame onto the new frame icon to the left of the bin at the bottom of the animation panel.

Step 17.

Select the new frame and go to the layers palette. Turn off the circle icon by using the eye icon and turn on the layer above with the circle with 1 segment missing.

Step 18.

With the second frame selected in the animation panel, duplicate this frame and repeat the process in the layers palette selecting the next layer in the sequence.

Step 19.

Repeat this process until you have a frame with the half circle then continue duplicating frames and working with the layers palette in the opposite direction until you have a sequence in the animation panel with frames that go from full circle to half and back to full circle again.