[Tutorial] Create a loading image!

[K4rMa]

With the increase in the popularity of AJAX web applications, we have seen similar animated GIFs around the web used when an AJAX process is pending to let the user know that it's working on something. In this tutorial, you will learn how to create these professional-looking animated GIFs.

 

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

 

This example was created with Adobe PhotoShop CS3, which has animation features built-in, unlike older versions where PhotoShop is packaged with ImageReady.

 

We start with a blank canvas of around 200x100px. We will create a new layer and select the Marquee tool, and on the toolbar for the marquee, set Style to Fixed Size, Width: 4px and Height: 20px:

 

 

Now we can just click on the canvas and a selection of these dimensions will be made:

 

 

In our new layer, paint the selection with black:

 

 

Now right-click the layer and Duplicate Layer. Select the Move tool, hold Shift and press the down arrow key four or five times - shift will move the layer in increments. We should now have two layers like so:

 

 

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

 

With the top layer active, press Ctrl+E to merge down - combining the two line layers together. Now right-click the layer and Duplicate. Goto Edit > Transform > Rotate, and holding down the Shift key, rotate the duplicated layer clock-wise a quarter of a turn:

 

 

Holding Shift will rotate at increments. Choose the Move tool to accept the changes. Now repeat this process (duplicate then rotate) to fill in all the gaps like so: (it may be wise to number the layers as you duplicate, so that you can keep track of which is which)

 

 

Now we should have 12 separate layers for each of our 'spokes'. Next, we will color them.

Starting with the first, open up the layer styles and add a color overlay of light gray. You may want to zoom in for a better look.

 

 

Now right-click the layer you just added a style to and choose Copy Layer Style, then proceed to Paste Layer Style on each of the other, so we have this:

 

 

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

 

Now let's open up the Animation Window by going to Window > Animation. You should see something like this:

 

 

This is a timeline of our animation. Each frame shown in here will play in order for a set number of seconds. We want to create different frames with different 'spokes' colored, in sequence.

So let's start by changing the colors of the first three spokes. Let's change the color of the first three like so, fading from light gray to dark. The colors we used were #BABABA for the first; #999999 for the second; and #444444 for the third:

 

 

Ok, we have our first frame. Now let's click on the New Frame button () and our frame will be duplicated. Making sure our second frame is selected, let's change the colors again - we can copy the layer styles if we want to move the colors along one spoke:

 

 

You should notice that frame one remains the same and frame two will accept our changes. Now we only need to repeat this a few more time - one frame per spoke. Make sure you click on the New/Duplicate Frame button before changing the layer styles again!

 

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

 

Once we're done, we should have a timeline that looks like this:

 

 

We can click the Play button at the bottom of the Animation window to see a preview. If the animation is too slow, we can change the duration in the bottom right corner of each frame. This specifies the duration for each frame to be visible. Let's try 0.1sec. Hold Shift and select all the frames in the window, then choose 0.1 seconds (or choose Other and try 0.05 - or whatever you want) on one of them. This will change all of them, because they're all selected.

 

 

To export, goto File > Save for Web & Devices. Choose GIF from the DropDown menu - 128 being the best quality. And you can also preview it here as well, using the controls buttons near the bottom:

 

 

Finally, this is what our Animated loading GIF looks like:

 

 

Credits ~~> Jooria

 

 

[Ma3x*]

Ty karma ..

Mporo na kanw kai allo sxedio h mono afto to sigkekrimeno ??

[Morian]

Very nice k4rma! Thank you! I go to try it!

[Enable^^]

k4rma! i love you senk ^^