Creating an AJAX loading icon in Photoshop CS 3

For the logo of 24 Hour Apps I wanted to use an AJAX loading icon to convey the fact that all my projects are ongoing and that I am constantly thinking about, creating, and working on applications as that is what I care about. The problem was that while there are many AJAX loading graphic generators, none of them provided scalable icons that I could quickly apply to 24 Hour App's header image. This meant I had to resort to creating it on my own.

To create a basic loading icon is actually very simple. First you create a new blank image and a new layer then choose the Rounded Rectangle Tool. Make sure that the created object is set to just Fill Pixels and set the radius to something that is appropriate the for image size you are using. I have it set as 10 pixels.
Once you have configured your round rectangle icon just draw it in the middle (doesn't need to be exact) of your canvas. It should look something like the picture below:
This is the basic shape that we will use to construct our loading icon. Now we need to duplicate it by dragging our layer to the Create a New Layer icon in the layers window and now you should have two straight bars.
We now need to rotate it by 30 degrees. To do so press command-t or choose from the Edit menu, Transform->Rotate. You should see a bounding box around the bar and be able to type 30 degrees in the transform toolbar.
After the transformation you should see your icon start to take shape.
Now repeat the process (continue using the first layer as the duplicate source) and rotate by 30 degree increments (60, 90, etc) until you reach 150. You icon should be very recognizable now with many layers.
To turn the layers of rounded bars into a single icon you need to merge the layers. You can do so by picking the top layer and pressing command-e or in the menu choose Layer->Merge Down. After the merge is complete and you have a single image draw a vertical and horizontal guide so that they intersect at the exact center of your icon. This will give you a mark to create the center hole with.
To create the center hole use the Elliptical Marquee Tool and draw a perfect centered circle from the guide cross hair by holding down the alt and shift keys while you drag. You can make the circle as big or small as you like; depending on the desired icon effect.

Then all you need to do is clear the circle contents by pressing delete. Now your icon is complete. You can shade each bar individually and create multiple images to make a loading gif or just use layer gradient effects to create something similar to the 24 Hour Apps logo.


Post a Comment