Creating a “Loading…” Animated GIF Using Photoshop [Video Tutorial]

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:

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.