[Flash] How to make GOOD userbars!

[McBob]

So you want to make relatively GOOD userbars, but don't have any of those fancy-schmancy programs like Photoshop, but you DO have Flash?
Then you've come to the right place, sort of.

Here's what you'll need:

-Flash (duh)
-An icon thing for the program the userbar will say that you're using
-A good pixel font. If you don't have one, download one! http://dafont.com/en/bitmap.php Or, you can use whatever font you want. It's YOUR friggin' userbar.

Yay

First, we'll start on the background.

1. Open up a Flash document, 300x20, or somewhere around that size.
http://img393.imageshack.us/img393/5126/userbartut15ur.png

2. Make a rectangle about the same size as the document.
http://img371.imageshack.us/img371/2805/userbartut20rf.png

3. Select the rectangle, and bring out the color mixer. Set the fill gradient to linear.
http://img371.imageshack.us/my.php?image=userbartut35iq.png

4. Make the colors at each end white, and add two more colors in the middle. Make the left one whatever color you want, the the other one black. Now de-select your rectangle.
http://img371.imageshack.us/img371/8981/userbartut43zl.png

Your background should look something like this:
http://img371.imageshack.us/img371/2407/userbartut58qp.png

5. Now, everyone knows the gradient on a userbar should be vertical, so we'll fix that now. Secect the fill transform tool.
http://img369.imageshack.us/img369/9162/userbartut69jk.png

6. Now select your background. It should now look like this.
http://img371.imageshack.us/img371/8158/userbartut70eu.png

8. Grab the little circle on the top-right corner of the rectangle and drag it down like this:
http://img371.imageshack.us/img371/3172/userbartut88fo.png

Release the mouse button, and your gradient should look like this:
http://img371.imageshack.us/img371/7088/userbartut95ir.png
^You might wanna perform that last step with the magnet tool turned ON, so you can get the gradient at a nice, perfect, 180 degree angle.

9. Now, grab the little SQUARE at the bottom, and drag it up until it touches the outer border of the rectangle. If the magnet tool is still on, it should automatically snap to the edge of the rectangle. What this does is squash the gradient so that it's the same height as the rectangle.
http://img112.imageshack.us/img112/9900/userbartut102pb.png

Release the mouse button, and your background should look something like this:
http://img112.imageshack.us/img112/2203/userbartut116pb.png

Now you're done with this layer. Make a new layer.
Add the icon thing to the layer.
http://img112.imageshack.us/img112/14/userbartut128yi.png

You're done with this layer already. Wow. Make a new layer.

10. Add your text, preferably with a white pixel font, size 8 or 9, in all caps, with no anti-aliasing.
http://img112.imageshack.us/img112/9133/userbartut131vw.png

Now for the glossy effect. Make a new layer.

11. Select the oval tool, fill color white, with no outline.
Make an oval so that it is in this position.
http://img112.imageshack.us/img112/575/userbartut144mo.png

Release the mouse button and you should have a white oval.
http://img352.imageshack.us/img352/5881/userbartut154qw.png

12. SELECT your oval.
http://img352.imageshack.us/img352/5084/userbartut168xm.png

13. Bring up the color mixer again. Lower the oval's alpha to about 30%.
http://img352.imageshack.us/img352/4904/userbartut172am.png

14. DE-SELECT your oval. It should look like this:
http://img352.imageshack.us/img352/1784/userbartut184hk.png

15. Now for the final part: Teh scan lines!
Make a new layer.
LOCK all your OTHER layers, so they don't get in the way.

16. This is a rather unusual way to make scanlines in Flash, but it's the easiest way I could find. Set your fill color to black, and select the text tool. Make sure it's NOT bold. Set it to a standard font, preferably Arial, size 12, anti-alias OFF. (to turn off anti-aliasing, bring up the Properties panel at the bottom and click on this icon: http://img352.imageshack.us/img352/8597/userbartut197rn.png)

17. Make a text box around the userbar.
http://img395.imageshack.us/img395/7210/userbartut205rb.png

18. Fill it with lots of slashes.
http://img395.imageshack.us/img395/5664/userbartut219cl.png

It should now look like this:
http://img395.imageshack.us/img395/9764/userbartut228mn.png

19. Select the scan lines, and stretch them vertically.
http://img395.imageshack.us/img395/5100/userbartut235hl.png

20. Now skew the lines so that they're at more of an angle.
http://img395.imageshack.us/img395/3599/userbartut245kp.png

It should now look like this:
http://img395.imageshack.us/img395/8651/userbartut256aq.png

21. Now, SELECT the scan lines, bring up the color mixer, and lower the alpha to about 15%.
http://img395.imageshack.us/img395/8140/userbartut268dd.png

22. De-select your scan lines.
It should now look like this:
http://img395.imageshack.us/img395/3926/userbartut279uz.png

23. Now for the black border outline thing. Make a new layer, select the rectangle tool, black outline, no fill. Make the rectangle, any size. Select the rectangle (and ONLY the rectangle) and bring up the properties. Set the
width and height EXACTLY THE SAME AS THE WHOLE USERBAR, MINUS 1 PIXEL. (Yes, MINUS ONE PIXEL. VERY imporant.)
And set the postion as x:0 y:0


24. You're done now! YAY! Save your file, and go to file > export > export image, and save it as a .png or .jpeg.

Teh finished product:
http://img235.imageshack.us/img235/6721/flashuserbar0uc.png

[BarneyGumball]

nice =D

but PS ones are betterer...

[texastchmatt]

Good but i'd have to agree with ^^^ :rolleyes:

[McBob]

This tutorial is for people who DON'T have Photoshop. Yay

[Skate78]

wow very nice job.

EDIT: i downloaded a font. i have the file but how do i use it?

[Lambi]

wow very nice job.

EDIT: i downloaded a font. i have the file but how do i use it?

copy the font file, open the control panel, goto look's and themes, click graphic's
and just paste it in the file.

note: the name of the files I told you may be diffrent because I have a norwegian windows. ^_^

[McBob]

wow very nice job.

EDIT: i downloaded a font. i have the file but how do i use it?
Unzip teh file and send it to C drive > Windows > Fonts. At least that's how it works on MY computer.

[Skate78]

ok i got it, it's in my sig. but it's got some problems. the icons blurry, and the text is blury. how do i fix this? and how do ya like it?

[McBob]

ok i got it, it's in my sig. but it's got some problems. the icons blurry, and the text is blury. how do i fix this? and how do ya like it?
It's goody
The text is blurry because it's anti-aliased. Anti-aliasing smooths the edges of text. Since there are no curved lines on a pixel font, anti-aliasing isn't needed. So turn it off. If you don't how, it says it somewhere in my tutorial.
And about the blurry icon. Bitmaps tend to lose quality when imported into Flash, so what I do is select the icon and go to modify > bitmap > trace bitmap, and you should set "minimum area" to about 2 or 3 pixels, and click OK. Yay.

[Fuse]

Pretty cool... although I don't feel like waiting for photoshop too load.

[Skate78]

ok i fixed text
EDIT: can you send me the link to the font you used, i can't find it

[fedo]

wow that pretty cool good ones all though photoshop is better these are still very very good.

[McBob]

ok i fixed text
EDIT: can you send me the link to the font you used, i can't find it
How could you not find it? It's right at the top of the list in the link in my tutorial.
http://dafont.com/en/font.php?file=04b_03

[Skate78]

well how come your text looks different from mine?
EDIT: and i was making another and i used that text, but its not the same, its like not pixels, somethin messed up i think

[ayyg]

I made this, any comments?
http://img28.imageshack.us/img28/4548/originalst00012dt.jpg

[Skate78]

the text is wrong unless thats the kind you want, there aren't any slashes...but overall i give it a 5/10

[ayyg]

If you look closely, there are slashes

[Skate78]

don't see them, sorry

[ayyg]

I think why people don't see it is because the background is too black and i think i make the alpha too low.

[ghost]

also, you can help the picture by making it png, or GIF, for soem reason when I made it into a jpg. it looked like that, png is best, publish as PNG it will look a ton better, I think 8/10 (when you convert to png :p)

[ghost]

hehe I made mine

http://img410.imageshack.us/img410/1298/ghostbar7cd.png

one problem, I dont have that good of flash skills, lol :D

[zmobie]

Go Gorillaz!!

Anyway: Nice tutorial. Helped out.

[insanity]

Do you need Flash Pro for the color mixer? Cause if so damn

[McBob]

Do you need Flash Pro for the color mixer? Cause if so damn
No...you don't....at least I don't think so...
There's a rectangular tab with a little black arrow WAY on the right of the Flash document. Click on it:
http://img398.imageshack.us/img398/5393/rect9pp.png

It should bring up this panel:
http://img398.imageshack.us/img398/6136/derpaab3pe.png

Click on teh color mixer. YAY!

[funnyav]

thnx alot dude! everyone has userbars and i wanted one but didnt know how. where'd you get the " f " icon for flash?

ps:, next time instead of using links to the images just put them like this

[#img] http:url of image [/#img]

please ignore the #'s, they were so the tags dont work.

[McBob]

thnx alot dude! everyone has userbars and i wanted one but didnt know how. where'd you get the " f " icon for flash?

ps:, next time instead of using links to the images just put them like this

[#img] http:url of image [/#img]

please ignore the #'s, they were so the tags dont work.
I KNOW how posting images works. It actually doesn't make any difference if you remove the #'s, the tags still won't work.
der
yay
I kept the pics as URLs just in case some people had really slow computers that take forever to load multiple images.

[Murder_Burger]

Nice tutorial, I couldnt really see my text when it was at size 8 though.

[McBob]

Nice tutorial, I couldnt really see my text when it was at size 8 though.
Use a pixel font and turn anti-aliasing OFF.

[Seiken]

I've almost finished mine, but how do you make the background for an image transparent? Sorry if it's a stupid question, I'm new to flash.

Great guide by the way!

[stickysticker]

Well done, well done. I'll have a userbar on my sig in no time.

[Sword-Man]

I've almost finished mine, but how do you make the background for an image transparent? Sorry if it's a stupid question, I'm new to flash.


Make sure the image is selected, and go into Modify > Trace Bitmap

Then play around with the settings until your happy and click OK, then click on the background on the image, and simply delete it.


Also, in future, try nor to bump threads that are several months old.

[Maelstrom]

I've almost finished mine, but how do you make the background for an image transparent? Sorry if it's a stupid question, I'm new to flash.

W-what? You mean make the image background transparent?

Well, you do what Sword-Man said, but if you don't want the image to be modified as you trace the bitmap, then you put the settings as 1.

Then you click OK, then deselect the image, then select the background of it, and delete it.

[Cosmoseth]

Yey I Love You Mcbob.

[sam 24]

I don´t now why, but when I lower the ovals alpha, it doesn´t change. :(

Nice tut.

[Resoku]

Making a userbar in Flash seems a little retarded to me...
If you have Macromedia sofware, then just make a userbar in Fireworks. It'll take you a tenth of the time, and is a thousand times simpler than this tutorial. Unfortunately, theres not a Fireworks subforum on this here forum or I would show you guys how its done.
For the record, all of my userbars were of course made by me in Fireworks, and none took longer than 3 minutes. For a REAL tutorial on how to make a userbar, IM or PM me.

[CrappyAnimator]

Making a userbar in Flash seems a little retarded to me...
If you have Macromedia sofware, then just make a userbar in Fireworks. It'll take you a tenth of the time, and is a thousand times simpler than this tutorial. Unfortunately, theres not a Fireworks subforum on this here forum or I would show you guys how its done.
For the record, all of my userbars were of course made by me in Fireworks, and none took longer than 3 minutes. For a REAL tutorial on how to make a userbar, IM or PM me.
You seem a little retarded to me.
Nobody cares about your opinion.
Besides, your userbars are low-quality and they suck.
You should have gotten Photoshop instead.
For a shit tutorial on how to make a userbar, IM or PM him.
And plus, you should only bump tuts if you have constructive criticism or you're saying how the tutorial helped you or didn't help you.

[desk1ll]

i used your tutorial (the basic idea) abnd made this userbar:
http://i31.photobucket.com/albums/c398/desk1ll/userbars/G-haver.jpg

[ninjapanda]

Freakin' sweet dude! XD

The finished sig looks the same (if not better) than a Photoshop sig!

...:::Very Nice:::...

[painedadj91]

Nice man. I like the way you've done it.

[Gongagoo]

Bumped for awesomeness.
I loved it, great way to make userbars. Thanks!
http://i15.tinypic.com/4mn56ps.png
Mine ^^^^

[jyre]

its something freaky with mine http://img520.imageshack.us/img520/2030/userbar2tz9.jpg the lines is outside i dont know what is wrong

[Mooper]

how do you make with photoshop?

[jyre]

photoshop... i dont got photoshop

[sh4d0wslayer]

for step 8 i dont have a circle on the corner only in the middle :Nooooooo:

[darchon]

Great tut i have 1 problem i cant save my sig as 300 by 20. so it comes out like the attachment i have. can anyone help me?