Creating a “Loading…” Animated GIF Using Photoshop [Video Tutorial]
By on August 1st, 2011

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.

Tags: , ,
Author: Joel Fernandes Google Profile for 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.

Joel Fernandes has written and can be contacted at joel@techie-buzz.com.

Leave a Reply

Name (required)

Website (optional)

 
    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'advanced_comment' not found or invalid function name in /home/keith/techie-buzz.com/htdocs/wp-includes/comment-template.php on line 1694
 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN