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.
Create a new document 800 x 500 pixels, with a white background.
Select the circle shape from the toolbar and a bright colour from the colour palette (at the bottom of the toolbar).
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.
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.
Click on the eye icon of the shape 1 to hide it from view and select the layer which contains the new shape.
Choose the pen tool from the toolbar and select subtract from shape area from the application bar.
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.
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.
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.
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.
You should now have 7 or so layers in order ranging from complete circle to half a circle.
Go to window > Animation to open the animation panel.
Click on the squares icon bottom right of this window to view the basic frames animation area.
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.
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.
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.
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.
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.
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.
Click the play button at the bottom of the animation palette to view the animation on the canvas.
To make it go faster, click on the frame speed at the bottom of each frame and change it to 0.2 seconds.
To get the animation to loop click on where the panel says ‘once’ bottom left of the animation panel and select ‘forever’.
Choose the crop tool from the toolbar.