Ugh. I really don’t like having to re-write this tutorial XD.

Creating An Animated Userbar

In this tutorial, I will teach you how to create one of those nifty, animated, userbars. This gets a little tricky in some spots, so feel free to ask questions if you feel something isn’t explained properly. I’ll try to clear it up as best I can!

Let’s see if I can remember this..

Step 1 - Getting Started/Setting Up

First, you will need userbars. You can create your own, or you can Goole ‘Userbars’ to find plenty of sites. I myself recommend Userbars.be. They have a ton :). If you wish, you can download the userbars I am using for this tutorial, here. [They are all together, in a .RAR file.]

All set? Let’s begin :).

First up, open your userbars. You can use either ‘CTRL + O’ or go to ‘File >> Open’. Screenshot below.

Got ‘em opened? Good :). Let’s move on.

Step 2 - Setting Up Cont.

Time for the next step. This one’s a little tricky, so, I’ll explain as best I can. Try to stay with me, ok?

Once you have your images open in Photoshop, it’s time to arrange them, and set them up to be animated. To do so, do the following:

First, find which image you want to be last in the animation. This will be your base layer. Next, with the Move Tool (’V') selected, drag each of the other userbars onto your base layer. Make sure they are lined up evenly (Having userbars of the same size makes this a bit easier to do.) Once you have all of the userbars set up, you should have a layers palette, similar to the screenshot below.

All done? Next step.

Step 3 - Animating

It’s time to start animating. First, make sure your “Animation” window is open. If it is not, head over to “Window>>Animation” to bring it up.

You should now see this window.

Next step :).

Step 4 - Starting The Animation

Got your animation window up? Good. First, you should hide all the layers in your layers palette, except the first layer. Now what you want to do, is click on the “Duplicate Layer” button, at the bottom of the Animation Window”. If you’ve use ImageReady before, you know what this is, and where it’s located. If not, it is shown in the following image.

Got it? Let’s continue.

Step 5 - Animating Cont.

You should now have two of the same frames in your animation window. What you want to do now, is, with the duplicated frame selected, head into your layers palette again, and hide all of the layers except for the one above the first layer.

Done that? Let’s move on.

Step 6 - Animation Cont.

Now comes animation :). It’s fairly simple, to be honest. With your duplicated frame still selected, click the “Tween” button. ImageReady users, as before, you should know what this is already. If not, please consult the following image.

Got it? Alright, let’s keep going.

When you clicked that button, a window should have popped up, titled “Tween”.

Allow me to explain this window a little.

Tween With:

Previous Frame: This will tween your current, selected frame, with the frame directly before it.

Next Frame: This will tween your current, selected frame, with the frame directly after it.

Frames To Add:

Self explanatory. Determines how many frames will be between the current frame, and the Previous/Next frame (Depending on what you have selected for “Tween With:”)

Those are the only two items you need to worry with. Now that that’s out of the way, let’s get down to business.

In this window, under “Tween With:”, ensure that “Previous Frame” is selected. Under “Frames To Add:” add how many frames you wish for the animation to be. I chose 10. I recommend choosing between 5-10 frames. The fewer frames there are, the faster and less fluid the transition between bars will be, and the smaller the file size as well. The more frames you add, the smoother and longer the transition will be, but the file size will grow as well. 5-10 frames is a good medium.

That’s i for this step.

Step 7 - Animating Cont.

We’re getting close to the end. What you want to do now, is set the amount of time you want each frame to last. You can change this by adjusting the time underneath each frame (Shown below).

First, a tip!

To make this quicker, you can select multiple frames. To do so, use either of the following methods.

To select frames one by one, hold down the “CTRL” key, while clicking on the frames you wish to select.

To select large groups of frames that follow each other, hold down the “SHIFT” key, and click on any frame to select it, and anything between it and the other frame you have selected.

Now, for your first and last frame (Select them using the “CTRL + Click” method.), set the time to “1 sec”. You can make it longer if you wish, this is just what I chose.

For the frames between the first and last (Use the “SHIFT + Click” method to select them.), set the time to “0.1 sec”. Any longer and it won’t look right!

Step 8 - Finishing Up

You’re basically done! Just repeat steps 4-7 for whatever bars you have left.

Step 8b - Finishing Touches

(OPTIONAL, BUT RECOMMENDED)

One thing you can do, to make the userbar one, continuous animation, is this: Repeat steps 4-7 on the last frame. However, when you reach Step 6, instead of having “Previous Frame” selected in the “Tween With:” menu, choose “First Frame“. This will Tween your final frame with your first frame, creating a single, smooth animation!

Step 9 - Saving

Time to save your animation. To do so, head to “File>>Save For Web & Devices” (If you are using ImageReady, head to “File>>Save Optimized As..”)

You should see the following window (Photoshop CS3 Users, anyway.).

Before you click “Save”, ensure that “GIF” is selected in the drop down menu (See image)

Once it is, click “Save” and you are all finished!

Finished!/Results!

Yep, that’s it! I hope you enjoyed reading this tutorial more than I “enjoyed” writing it XD. Here is the final result I got, using the images supplied at the beginning of the tutorial.