How to make userbars - Free tutorial.

After quite a long time of making userbars for myself and others, I decided that I should share my knowledge and make a free for all tutorial to help all budding userbar makers in the Sythe community . I have aimed to make an informative, yet relatively simple guide for the novice userbar maker. All you really need is a program such as fireworks or photoshop by adobe, free trials of these are available at www.adobe.com. So if you want to learn how to create an effective looking userbar, read on...

For this tutorial I will assume that you are using Adobe Fireworks. However if you are not, the steps are pretty much the same.

Step 1: Open up a new fireworks document with the dimensions 350 pixels wide and 19 pixels high. Set the canvas colour to "transparent:"


Step 2: Next, make a rectangle of the same size as your document. You can do this by typing in the box outlined in red in my picture. Set X and Y values both to 0. You should now have the same situation as in the picture:


Step 3: Now fill your rectangle with your favourite colour! I have used red monotone for this tutorial, but more advanced users may wish to make 2 tone userbars. Do not change anything but the colour at this point!:


Step 4: Next up is to choose a pattern for your userbar by clicking the drop down "Texture" bar. My personal favourites are diagonal patterns, but anything goes with a userbar! Once you have decided on the pattern, set the numerical value to 50:


Step 5: Not a step as such, but this is roughly how your userbar should look... If it doesn't, go back and read steps 1-4 again!:


Step 6: Now it's time to give your userbar a shiny effect. Use the elipse tool to make an elipse as long as the userbar, maybe slightly longer. Fill it white and move it around on the top of the userbar until it looks right:


Step 7: Now to make it look properly shiny. Select the elipse you have just made, and change the edge drop down bar to "Feathered" and the number to "30" (Does not have to be this, but it's how I do it.. experiment to find a shine you like...) :


Step 8: Time to add text. Make a text box using the text tool, and set text size to 12 and the colour to white. The font you should use is "Visitor TT2 (BRK), aligned to the right. If you do not have this text it can be downloaded from various sites (I got mine from www.fontstock.net. Once downloaded, simply go to control panel, find font options and drag the download into the font list.) Once your screen looks like the one below, continue...:


Step 9: On the "Assets" menu, change the font format to the one I have enlarged in the picture (the big ABC) and change the first colour to white, the second to black. Make it bold if you wish. Then type in what you want your userbar to say. Yep, it's that simple... even I can do it...:


Step 10: You now need to find your image(s). If RS related, I use www.runehq.com. If not, google images does the trick. Save it to your images. Then, Go to file>import and then select the image(s) you want to use. Size the image to the size you want it to be on your userbar. If you want more than one, once all sized up, copy and paste the image and move it around. If more than 1 image is desired, simply repeat this step:


Step 11: Your userbar is now complete and you are officially 1337! Admire your work...



Hope you like this tutorial... will be making a similar one for orbs soon.

 

Jeez that takes ages to load.. how I change that?

 

nice guide

very helpful

 

Pretty good tutorial

 

nice. works.

GOOD GUIDE.

 

Thanks

 

Nice tutorial, but I don't got Fireworks.

Just a question. Why is your name TC 92?

 

This should work in GIMP. I'm going to try later

 

:O ill make a new latah thank you

 

Were do I get the adobe fireworks I don't feel like registering for an account to download the free trial.

 

Very nice keep it up + good its stickied so it wont move from my sight lol

 

I cant find the elipse tool =\

 

finally i find a guide on how to make these, thanks!

 

sounds like helpful guide
im gonna go make some

is there a place to get fireworks without regitering for account at adobe?

let me kno in msn

 

Wow, amazing guide! Sticky plzkthx

Now to see if I have fireworks...

 

the userbar isnt really how it should be but still nice guide

and you made the guide in CS3 some ppl got CS2

heres one of my works using a diff guide on CS2 (this was my first userbar and i didnt have any other text at the time)

this is for a different forum

 

this is nice
im confused about photoshop could some1 add my msn and help me

[email protected]

 

thanks bro .. im going to do one right now

 

Great Tutorial Man :d

 

love it u also got one of a orb?