How to create an animated gif in Photoshop

by hannah 485 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.

new document
new document

Step 2.

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

choose circle shape
choose circle shape

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.

circle shape
circle shape

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.

Layer palette
Layer palette
duplicate layer
duplicate layer

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.

duplicate of shape
duplicate of shape

Step 6.

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

subtract from shape area
subtract from shape area

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.

subtract triangle from shape
subtract triangle from shape

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.

duplicate shape again
duplicate shape again

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.

change anchor points
change anchor points

Step 10.

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

half circle
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.

half circle shape layer
half circle shape layer

Step 12.

Go to window > Animation to open the animation panel.

Window > animation
Window > animation

Step 13.

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

animation panel
animation panel

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.

frame panel
frame panel
animation frame
animation frame

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.

frame 0.5 seconds
frame 0.5 seconds

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.

duplicate animation frame
duplicate animation frame

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.

canvas and layer palette view
canvas and layer palette view
duplicate animation frame
duplicate animation frame

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.

duplicate frame
duplicate frame

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.

full animation frame sequence
full animation frame sequence

Step 20.

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

play animation
play animation

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.

change each frame to 0.2 seconds
change each frame 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’.

change to loop
change to loop

Step 23.

Choose the crop tool from the toolbar.

crop the canvas to size
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
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
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
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
final animation

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>