In web designing, it is very much necessary for designers to be creative and use different techniques to attract a viewer, and we have seen most websites using animated GIF images to drive attention. In this tutorial, we’ll take a look at the Photoshop animation feature which can be used to create animated GIF image.
Note: In this tutorial, I am using Photoshop CS 5
Final Preview
Here’s a final preview of what you will be creating –
Step One:
Draw the outline (circumference) of a circle, like the one shown below.
Step Two:
Using the Polygon Lasso tool, slice a part of the circle. In other words, create an arc. You should obtain the following shape:
Once done, delete the rest of the circle. We don’t need it anymore.
Step 3:
Create three additional copies of the arc (i.e., by duplicating it) by pressing Ctrl + J. Arrange the four arcs in such a way, that it appears like a (broken) circle. Go to Edit > Transform > Rotate 180/90 CW/90 CCW
Step 4:
The steps from here are quite tricky and confusing. Hence, the rest of this tutorial is shown in the video below:
I hope you have followed the tutorial carefully and accomplished the end result. After you saved the file, make sure you open it in the browser to view it.
