How to create an animated gif in Photoshop
by May 1, 2010 5:38 pm 1,285 views0
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.

Step 20.
Click the play button at the bottom of the animation palette to view the animation on the canvas.

Step 21.
To make it go faster, click on the frame speed at the bottom of each frame and change it to 0.2 seconds.

Step 22.
To get the animation to loop click on where the panel says ‘once’ bottom left of the animation panel and select ‘forever’.

Step 23.
Choose the crop tool from the toolbar.
-
crop the canvas to size Step 24.
You can drag the crop tool across the canvas as normal or use the image size commands to resize and the layers palette and the animation palette will keep the settings you have.
canvas and animation view after cropping Step 25.
Finally, when you are happy with the animation sequence. Go to File > Save for Web.
save animation for web Step 26.
Choose Gif from the drop down menu on the right. If you are not worried about file size select the 256 colours from the drop down. (If you want to minimize the file size try choosing less colours, although this will lower the quality especially if you have many colours in your photoshop file.
save animation for web panel Step 27.
Save the file. To preview the animation open with the default picture viewer on your system or view in a internet browser.
final animation