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.

Published by

Joel Fernandes

Joel Fernandes (G+) is a tech enthusiast and a social media blogger. During his leisure time, he enjoys taking photographs, and photography is one of his most loved hobbies. You can find some of his photos on Flickr.He does a little of web coding, and maintains a tech blog of his own - Techo Latte.Joel is currently pursuing his Masters in Computer Application from Bangalore, India. You can get in touch with him on Twitter - @joelfernandes, or visit his Facebook Profile for more information.

  • http://pureinfotech.com Pit

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

    Thanks,

  • http://www.mukesh.co Mukesh

    Nice tutorial …………………………