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

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 –

"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.

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

  1. Good video. I just started learning Photoshop and this is something easy that I can learn pretty quick, and it can come in handy.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>