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 using Photoshop CS 5

Final Preview

Here’s a final preview of what you will be creating –

"Loading..." Photoshop Tutorial

Step One:

Draw the outline (circumference) of a circle, like the one shown below.

"Loading..." Photoshop Tutorial

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:

"Loading..." Photoshop Tutorial

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

"Loading..." Photoshop Tutorial

Step 4:

The steps from here are quite tricky and confusing. Hence, the rest of this tutorial is shown in the video below:

Gradient Color used: b2e10f

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.


Share this post

Loading Facebook Comments ...