Results 1 to 10 of 42
06-26-2010, 06:32 AM #1
[TUT]How To Make a Userbar &+ Animate It
You need Photoshop for this, sorry Gimp users.
Part 1: Normal Userbar
This is the userbar I will teach you to make:
Step 1- Your Userbar:
If you already know what you want to do your userbar on, you can move on to the next step. If you've come here to also learn what userbar you would like to make, then read on. Pick a userbar that you think will reflect your personal interests, hobbies, favorites, or just to show off your skills. The one I will be showing you to make is a simple but clean userbar. So if you're ready, let's begin!
Start off by opening a new document with the dimensions 350 x 19 and a transparent background (See Figure Below).
Now that you have your 350 x 19 box, let's add a gradient. I added a Black > Dark Grey gradient. (See Figure Below). Very simple so far? Good.
In a New Layer we're going to add a glossy effect at the top using the Elliptical Marquee Tool (located as the first tool in the toolbox). Make a selection at the top of the userbar and fill it in with white. Bring down the opacity of that to about 20% for best results. Here is my end result of that step:
Looks good eh? Now lets add those famous scanlines. We have to open a new document with the dimensions of 6 x 6 px. Zoom in all the way (1600 %). Get out the Pencil Tool and make 6 boxes (color of your choice) going down diagonally from the top right > bottom left. You should have something like this:
Now that you have that all set go to Edit > Define Pattern > OK. This makes it a pattern for later use. Now minimize that box and go back to your userbar. Double-click on the Background Layer (containing the gradient). Make sure the Layer Style box comes up. Now go to Pattern Overlay (on the left) and make sure its check-marked. Make sure you're in Pattern Overlay and go to Pattern and click the little arrow. Find your pattern that you just made and double-click it. Once you've done that lower the opacity of that pattern, for best results. Press OK. You should have something like this now:
Now that is the base of our userbar. Lets add some text and a logo or a picture. Here's what I came up with as my result:
The stars are custom shapes and the font is called Visitor at size 13. Save it as a JPEG so you can put it on the net and save it as a PSD for the next step (Animation).
Part 2: Animated Userbar
This is the 2nd part to the Easy Userbar Tutorial where I will show you how to animate the userbar I previously made in part 1. Lets get started
Begin The Animation:
Lets get straight to the point, no messing around. First open up the previous PSD of the userbar we made in part 1. Then go to the top of Photoshop and click (Window > Animation). A long and narrow box labeled Animation will come up. Now I?m going to show you how to animate the text so it transitionns from one text to another. In that same PSD file make a new text layer with what you want. Now go to the Animation Window and click the Duplicate Selected Frames button. Now you should have two frames. In the first frame have exactly what you want to show first. In the second frame have what you want the first frame to transition into. Here's a screenshot of what we've done so far
The image above shows my userbar, Animation Window, and the Layers Palette. Now as you can see I have 2 frames in the Animation Window, and so should you. To transition from the first frame to the next click the Tweens Animation Frames Button (3rd button from right). Now a dialog box will come up so use the settings below:
Now in your Animation Window you should have a total of 7 frames. You can change the Time Delay for each slice to make it how you want. I used 1 second for the first and last slide and used 0 seconds for the middle frames. To save this for the web go to (File > Save for Web > Save). Now you can upload it to your site! This is the end result of my animated userbar:
Last edited by Josh; 07-12-2010 at 01:48 PM.
06-26-2010, 06:42 AM #2
awesome, ill try this later
06-26-2010, 08:52 AM #3
ahh man dont have photoshop =(
06-26-2010, 09:13 AM #4
06-26-2010, 09:44 AM #5
- Join Date
- Apr 2010
Wow great tutoral. I'll use this. :pwn:
07-12-2010, 01:44 PM #6
07-12-2010, 01:46 PM #7
07-12-2010, 09:06 PM #8
just pm her a cracked version download?
07-14-2010, 07:53 AM #9
Hum I think that's a very good tutorial,but if I had Photoshop I could to be sure.Then someone could send me a link for downloading itI already searched but I dont find a good link they are all deleted...
07-14-2010, 08:02 AM #10