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.

Source: techie-buzz.com

Share this post

Loading Facebook Comments ...