DesignBash

web magazine and more…

Animated GIF – How to Make a Loading Bar

Todays topic will deal with the wonderfully painful world of animated GIFs. Specifically, how to make animated GIFs inside of Photoshop. For this tutorial I’ll be using Photoshop CS3 on a Mac, but I suspect that CS4 probably uses almost the same process. Alright, lets get started!


animated-loading-bar

Our Final Product



First off, I know that it’s easy to find semi-customizable GIF makers around the web. This being said, I think it’s important to understand how to make these yourself, as it allows for a degree of customizability that would otherwise be impossible with the online tools such as AjaxLoad (a great tool to make little AJAX loaders).

A Word of Warning

I love Photoshop with all my heart, but to be honest, creating animated GIFs can be painful and annoying. Things just don’t work the way you would expect, and if you mess things up bad enough, it means sometimes redoing the entire animation (aka make sure your history settings are set to longer than normal). What makes this worse is that changing small details can be really annoying because it seems like you need to do it across ALL your frames of animation. If anyone out there has any insight into this please let me know and I’ll update this post. Thanks 🙂

Step One: Create a Nifty Looking Loader Bar

First we’ll create a new Photoshop document with the following settings:

Animated Banner Settings

Next we need to create the background for the loading bar. When creating basic elements I generally try to use vector shapes whenever possible. This allows me to scale my work without losing quality and ends up saving me tons of time if I ever need to resize my document. Go ahead and create a vector rectangle shape (U key). Make sure that you’re making a shape, not a path. Your top toolbar should look like this:

vector toolbar

Now, using the info panel for precision, make the rectangle shape exactly 260px by 30px and centre it on in the document. Another thing that’s nice about vector shapes is how easy it is to change their color. All you need to do is double click the color swatch located on the left side of the layer (in the layer panel). For this example I choose a light grey #d2d2d2. Your basic outline should look something like this (click to enlarge):

0create loader shape

Next up we will add a subtle gradient overlay to give our loader background a little more depth. Make sure that foreground color is set to white (#ffffff) and double click on the layer  (again, in the layer panel) to pop open the layer styles dialog. In the Gradient Overlay section click on the Gradient dropdown to see all our possible gradients. In this instance we want to have a white to transparent gradient, which will probably be your second gradient swatch (you did choose a white foreground, didn’t you?). We will also be adding a small inner shadow:

If everything is working out, your image should look something like this:

OK, now let’s make the actual loader. I like the glossy candy-striped look, but you can really choose anything you want. Start by duplicating the layer we’ve been working on, and make sure that it is sitting on top of our background layer. Right-click on the new layer and choose “remove layer styles” to clear out our old styles and rename the layer to something like “loading bar.” I want to have a nice viberent red loading bar, so I choose #ff2f2f as my base color. Now we are going to add some layer styles that will give our loading bar that glossy look. Just like before, make sure that you have pure white selected as your foreground color. We are adding 4 different styles: an inner shadow, an inner glow, a gradient overlay, and a pattern overlay. If you want to use the same pattern that I’m using, I’ll attach it to this tutorial at the end.

Whew, I know it’s a lot of styles, but it creates a really nice effect! At this point you should have something that looks kinda like this:

loading bar style

Finally, you should reselect the background layer (the grey one) and transform the shape so that it sticks out 1px by on each side. This will give our loader a little border.

Step Two – Animating the GIF in Photoshop

With our loader in vector format, we can now start the process of animation. There are quite a few ways of doing this and tons of little tricks and tips, but if you’ve never animated a GIF before I’ll try and keep this easy (there is probably a faster/more complicated way to do this).

First things first, transform your loading bar until it is only a few pixels wide:

Now comes the annoying part. First you need to open up the animation window.

photoshop-animation-window

By default, your animation window is probably on the wrong setting (timeline mode) and we want to do this animation frame by frame. Adobe has hidden a huge menu in the animation window, it’s located in the top right corner, just below the close button. Click on it and select “convert to frame animation“. If you’ve done this right your animation window should now look something like this:

Now we need to put in some guides so that we can animate our loading bar with precision. The number of slices you put in will correspond with the smoothness of your loading bar. The more guides you place, the more frames you’ll need, and the smoother the animation will be. It doesn’t need to be exact, but try to keep it relatively uniform. Take a look at my example:

loader with guides

With our guides in place we can start the actual animation process. In the animation panel you can add new frames by clicking the new frame button (bottom of the animation window, just left of the trash icon). While clicked on the second frame, duplicate the loading bar, and horizontally transform it – moving the right side up by one “notch.”

Photoshop allows you to hide and show layers within the animation timeline, and that’s really the magic that will make our loading bar move. Click back on the first frame of animation and hide the duplicated layer we just created. Now when you click between the first and second frame, you should see the loading bar get bigger and smaller. It’s good practice to name your layers after their corresponding frames, so the first (smallest) loading bar layer should  be named “1st”.

Hopefully you’re getting the idea by now. Go ahead and finishing incrementing the loader until you’ve filled up the entire thing. It can be hassle to do all the frames, and you’ll find that Photoshop can be a little annoying. What seemed to work for me was to 1. add new frame, 2. hide the current loader step, 3. duplicate the hidden loader step, 4. unhide and transform the duplicated loader steprepeat, repeat, repeat… (If you do it in this order you won’t need to go back and re-hide the duplicated loader step in each animation frame). My animation took a total of 26 frames, yikes!

You can tweak the timing in the animation window – in my project each frame is set to take 0.07 seconds:

When you’re ready to export make sure you save it as a GIF and the animation should work just fine. The finished product looks quite nice: (for this example I’ve set the gif to automatically repeat, although you probably only want it to play once)

animated-loading-bar

So thats it! As I mentioned before, there is probably a much easier and efficient method of doing this, but for simple animations this technique will work fine.

Feel free to download the source PSD and have a look for yourself!

posted by admin in Photoshop,Tutorials and have Comments (2)

2 Responses to “Animated GIF – How to Make a Loading Bar”

  1. chyva says:

    what is the software needed in doing loading bars…
    but i like it…

  2. very nice work bro…..

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment