I decided to post this after recently discovering, to my shock, that a lot of people don't realise that Photoshop has been redesigned with the release of CS2 to allow animation without having to use Imageready.
So here's my first tutorial, sorry if it sucks.
I'm going to use a very simple example to make it easy. First off, make your userbar as you normally would. Open a new document, sized 350x20 and create a background. The example I am using is a nice, bright red.
Next, create a new layer and add anything else you want - stroke, scanlines, gradient, etc.
Now, for the purposes of this tutorial, I'm going to make a nice simple message. Just for the sake of simplicity, let's make it "userbars.org user." Make sure that each word is a different layer. So we have three layers of text - "userbars" ".org" and "user".
Now to animate it. Go to the "Window" menu in photoshop and select "animation". In the first frame, make all the text except "userbars" invisible. Move the word "userbars" to the far right of the bar. Now you have arranged the first frame in this way, duplicate it (the small button next to the trash icon on the bottom of the animation palette). Select the second frame and move the word "userbars" to the far left using shift-click to make sure it stays in line. Now make the text ".org" visible and move it to the far right. Duplicate this frame and move it across to the far left to join alongside the first word.
Now duplicate that frame, make the word "user" visible and move it to the far right. Finally, duplicate this frame and move it to the left to join it's friends.
Now at this point you can click play and see that the animation is somewhat jerky. This is where we use the "tween" feature to make it look smooth. Select the first frame, and click on the pulldown menu in the top right corner of the animation palette. Select "tween" and this screen will come up -
Make sure that "next frame" is selected and add 10 frames. The "opacity" and "effects" options are no use to us now so simply select "position". Click ok and you will see 10 frames have been added, and if played, the movement of the word "userbars" is nice and smooth. Next you need to go to the first frame where the text ".org" appears on the far right and repeat the tween process for that frame. Do the same for the first frame where the word "user" appears. Now play your animation. You should have this -
Cool, huh? Of course, this is only a fairly rough animation for the sake of easiness. If you want the text to move even more slowly and smoothly, simply add more frames. Experiment to see what sort of effects you get with different numbers of frames.
Was that useful?
Author