friendsterTalk - Friendster Forum

How To Create An Animated UserBar

I’m sure this tut has been done before, but I don’t care. Many sites also offer their own animators as well, but some people may not want to use that.

This tutorial is for them.

This tutorial is also using Adobe Photoshop CS3’s OR CS2 Animation function. Which works similarly to ImageReady’s.

Step 1

Of course, first, you will need userbars. There are plenty of sites that offer free ones, or you can create your own. ( UserBars.be is a good one. ). Depending on how many UserBars you have will determine how many layers you have, and how large the file will be.

I will be using 5.
These are the ones I am using:





Feel free to use them as well, to follow along with this tutorial exactly.

Step 2
Open up your userbars in Photoshop.


Step 3
Select the file you wish to be the final layer/frame of your animation. Next, select the “Move Tool” ( “V” ), and go to the other images, and click and drag them, in the reverse order you wish them to appear in.

    IE: If you want the Half-Life 2 bar to appear last, and you want the Matrix bar to appear before it, drag the Matrix bar on top of the HL2 bar.

Do this for all of the images. Once you have your bar in the order you like, you may close the other windows.

    If you are using the images from this tutorial, you should now have only 1 window open, with 5 layers, each layer containing one of your userbars, like the following image:


Step 4
Go to your animation window. If you do not see an animation window, head to the menu bar and go to “Window >> Animation”:

You should see the following window in your workspace:

Time to animate .

Step 5
First, in your animation window, duplicate your current frame.

    If you’ve used ImageReady, you know exactly how this works, and what this button looks like. If not, it looks like this:


Once you’ve done that, you should see 2 frames in your animation window. Click on the second frame, now, go to “Layers”

    If you’re new to CS3, it looks like this now:


In your layers palette, hide the first layer ( The one that is on top of all the other layers.

Step 6
Next, in your animation window, click on the “Tween” button.

    Again, ImageReady users should already know what this looks like, but in case you dont, it looks like this:


When you do, you should see the following window pop up:


Under “Tween With”, it should be set to tween with the frame either before the one you have selected, or the one after you have selected.

    If you have your second frame selected, then make sure this box is set to “Previous Frame”. If you have your first frame selected, then make sure it’s set to “Next Frame”.

Under “Frames To Add”, set how many frames you wish the animation to have. The more frames, the smoother the animation, but also, the larger the file size.

I chose “10″.

Next, in the animation window, you will see all of the frames you have created so far.

    If following this tut exactly, you should have 12.

What you want to do now, is set the amount of delay for each frame. This is how long each frame will display. This is purely up to you.

For my first, and final frames, I chose a “1.0 Second” delay. This means that these frames will be displayed for 1 second each.

For the frames in between, I chose a “0.1 Second” delay. This will make the frames go by a little bit slower, as they were moving too fast for my taste. If you like the speed at which they move at a “0 second” delay, then leave it as is.

    The delay menu is found at the bottom of each frame:

To select multiple frames, you have 2 choices:

You can either -
Hold CTRL. This will allow you to select multiple frames individually.

    ie: Select frame 2, and, while holding CTRL, select frame 5, 7, and 9, and it will select just those frames.

OR

Hold Shift. This will allow you to select groups of frames, that follow each other.

    ie: Click frame 2, and while holding shift, click frame 8, it will select every frame inbetween frames 2 and 8 as well.

You can also use these shortcuts for layers as well.

Step 7
Duplicate your very last frame.

Step 8
Repeat Steps 5-7 until you have finished .

Step 9
For the final frame, if you wish, you may tween this with the first frame, to make one continuous, smooth animation. Simply use the same steps as above, however, after you tween, delete one of the 2 first frames ( It doesn’t matter which. )

Go to “File >> Save For Web And Devices”


In this menu, it allows you to preview what your animation will look like, and tweak any settings you might want.

In the following drop down menu, make sure it is set to “GIF”.



Clcik on the play button, to make sure your animation is the way you want it, and then click “Save”. Ensure that the drop down menu on the save window is set to “Images Only(.Gif)”, and click “Save”.

Finished
If you have followed this tutorial exactly, you should have something similar to below.


:angel:If you have any questions, feel free to leave a comment here. I will try my best to help you out. :yay:





Edit(11/30/2007) FoRsAkEnKiD: Thread Title Renamed.

Last edited by FoRsAkEnKiD (2007-11-29 18:04:21)