Jump to content

[TUT] Userbar Tutorial


Thomas.

Recommended Posts

Here is a simple tutorial for making Userbars in Adobe Macromedia Fireworks on the computer.

Step 1:

Create a new file on Fireworks, make the sizes 350 pixels wide and 20 pixels high. Select the canvas colour to transparent.

step1-1.jpg

Step 2:

Now you should have an empty graphics file with grey and white squares all over it.

This is roughly what it should look like:

step2-1.jpg

Step 3:

Create a black border around the blank file, make it 1 pixel all the way around.

step3-1.jpg

Step 4:

Make the interior of the userbar any colour you want by creating a new rectangle outside of the template. Once you have done this you will need to switch the layers around so the border is above the rectangle.

step4-1.jpg

Step 5:

Add some text using the visitor font which can be found here. With Visitor 1 use the font size 10 and make sure you center the text to the middle of the userbar in height.

step6.jpg

Step 6:

This step is optional but you may want to add an eclipse to make the userbar look 3D, if you do it then you should put the opacity to around 20% to 30%.

step7.jpg

Step 7:

This step is also optional but you may want to add diagonal lines going through the userbar. If you do then set the opacity to around 15% to 20%.

step8.jpg

That's basically how you make a userbar, here some of my own examples of userbars:

ncfcuserbar2.png

proudenglishubar.png

tutuserbar1.png

ncfcuserbar1.png

ffmuserbar.png

ffmuserbar1.png

ffmuserbar2.png

ffmuserbar3.png

ffmuserbar4.png

ncfcuserbar.png

evofan.png

scottfan.png

thomasfan.png

Link to comment
Share on other sites

Yeah, I wanted to however, it is a basic tutorial. It is mainly directed towards those who already know the features of Fireworks rather than those whom are just beginning to use it.

Thanks man!

@ S-V: I might soon, but I am using one of the older versions of Fireworks so there will be many changes between my version and the latest version.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...