TC 92
Forum Addict
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.
. 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.
![[Jennah]](/data/avatars/m/125/125730.jpg?1200528671){kind=avatar}
