Create Your Own Animated Pre-loader in Photoshop

Let’s create an animated pre-loader gif for your next UI project. You’ll need the Extended version Photoshop CS3 or above.

We’re going to create a little animated gif that can be used for a multitude of widgets, anytime ajax content is being requested, files are being uploaded, whatever you fancy. Feel free to mix-in your own styles and variations to the loader as we go along. There are three major sections we’ll be undertaking:

• Creating the Loader Shapes
• Styling the Loader Shapes
• Animating the Loader

Ready. Set. Go..

Step 1: Creating Shapes Setup File

Begin by setting up the canvas size, and add a quick background to get started.

1. New Photoshop Document (File>New) || Control/Command + N
2. Canvas size: 100px by 100px
3. Double click BG layer, Convert to regular layer
4. Set its color to dark gray, I used: #3d3d3d

Step 2: Creating Shapes Background Pattern

Just for kicks, we’ll add a lined pattern to our background, and then start work on the loader.

Create a new transparent document: (7px by 7px). Draw a diagonal line with a 1px black pencil tool (click the top left pixel, hold down shift and click the bottom right pixel)

Define and name the pattern (Edit menu > Define Pattern).

That done, jump back to the original document and create a layer style of “Pattern Overlay” on our gray background layer: (Layer menu > Layer Style > Pattern Overlay). Choose your pattern from the pattern box, and lower the opacity (I used 20%).

Step 3: Creating Shapes Guides

We’re going to set up a few marks which will act as guides to help us along – we’ll use the “Transform Again” Command to speed things up.

Draw a 1px vertical white line with the line tool on your document:

To make sure it’s aligned in the center, select both its layer and the background layer, grab the move tool, and click the “Align Horizontal Centers” option like so:

Rotate the line 45° (Select the line Edit menu> Free Transform || Control/Command + T)

Select Edit menu > Transform > “Transform Again” while holding down the “Option/Alt” Key (Command/Control + Option/Alt + Shift + T )

Perform that command several times until the line has rotated all the way around, like so:

Step 4: Creating Shapes Tick Marks

Using the same technique as explained above, we’re going to add some little tick marks on each grid line to make the loader go round and round.. Here goes.

Add some guides around where you want your initial “Tick Mark” to appear (make sure your guides are on whole pixels, don’t split pixels).

Create a rounded rectangle with a 1px radius within our guide lines (make sure you have snapping turned on for guides: View menu > Snap)

Using the Direct Selection Tool move the bottom corners (nodes) of our rectangle tick shape inwards, so the shape tapers.

Utilize the same ‘Transform Again’ trick we used above, to duplicate the shape all the way around our tick marks (When rotating the 45° be sure to set the transformation point to the center of our grid, not the center of the rectangle tick shape, which it where it defaults).

Select Edit menu > Transform > “Transform Again” while holding down the “Option/Alt” Key (Command/Control + Option/Alt + Shift + T ) until the tick has been copied all the way around. It should look like this:

Layer Check: ensure your layers panel looks like this:

Step 1: Styling Shapes Build Our Tick Marks

Phew. We’ve got the pre loader shapes all created, now we’re just going to add a bunch of layer styles to spruce things up a bit. As usual, salt to taste. We’re going to be adding layer styles which can all be found in “Layer menu > Layer Styles”.

Add a “Color Overlay” layer style to the ticks layer (I used #242424).

Add a “Drop Shadow” layer style to the ticks layer:

Add a “Inner Shadow” layer style to the ticks layer:

Your loader should now look like this:

Step 2: Styling Shapes Duplicating Layers

There are a few ways we could go about this next bit, but to make things simpler we’re going to duplicate our tick layer five times, and then delete all of the shape ticks which don’t belong to those particular shape layers. We don’t want any overlapping ticks marks from layers below, as the layer styles we’ll be adding would stack, causing over-exposed looking effects.

Duplicate your base tick layer four times, then start deleting tick marks on each of the layers until you end up with the following:

You can use the Direct Selection tool to delete the tick shapes from each of the layers.

Step 3: Styling Shapes Style Them Puppies

Now we’ll add some styles to each of the individual tick mark layers we separated out. I’ll be referencing my own layer names.

To the layer named “Shine-Active”, add/modify the “Outer Glow” layer style:

To the same layer, add/modify the “Inner Glow” layer style:

Then add/modify the “Color Overlay” layer style (I used #0087c6):

To the layer named “Shine-Fading1″, add the exact same styles above, omitting the “Outter Glow” layer style:

To the layer named “Shine-Fading2″, add/modify the “Inner Shadow” layer style:

To the same layer, add/modify the “Inner Shadow” layer style (I used #0087c6).

Then, to the layer named “Shine-Fading3″, add/modify the “Inner Shadow” layer style (note the change in opacity as well):

Your loader should now look something like this (tweak layer styles to your liking):

Step 1: Animating Shapes Group & Duplicate

Okay, we’ve got the base styles set up, now it’s time to duplicate the layers a whole bunch (which will make animating a snap) and create our animate .gif

Group all of the layers that make up our tick mark (highlight them all + Layer menu > Group Layers)

Duplicate the entire group, then rotate it 45° (Edit menu > Free Transform). Repeat Step 2 until you’ve rotated the tick mark all the way around (you’ll have eight groups in total).

Your loader should look something like this:

Step 2: Animating Shapes Animate

Alright, our layers are all set up, and we’re ready to animate. We’re going to stick with regular frame by frame animation, although we could accomplish the same things with the timeline-based animation.

Open up the Animation Panel: (Window > Animation). Turn off all the tick group layers except the first one, then click the “Duplicate Selected Frames” button in the animation panel.

Turn off the first grouped layer, and turn on the second grouped layer.

Repeat the previous step for each of the group layers. Highlight all frames in your animation layer (Shift + Click Each Frame) and set frame duration to .1 sec

Choose File > Save for Web & Devices and use the following settings for your animated .gif

Open up your .gif in a web browser and admire your new fancy loader! Lastly, get some ice cream.

Conclusion

That’s it. I hope you’ve enjoyed creating the loader! It was fun for me to set up. Upload and link to some of your creations in the comments, and ask any questions you may have.

Additional Resources

• Quick Tip: Animate a News Ticker GIF With Photoshop on Webdesigntuts+
• Quick Tip: Create an Animated Banner Ad in Photoshop CS5 on Psdtuts+