Userbar
Posted by admin on 12/25/07 in All, Web Graphics
![]()
In this tutorial I’ll teach you how to make a simple userbar for use in a forum signature for example.
To start this tutorial you’ll need to create a 350×19px document.
Fill your document with a colour. I am using black for this tutorial as I think it has the best effect.

Once you have filled your document you need to select the elliptical marquee tool, you can see this in the image below.

You now need to select roughly half of your userbar, you can do this from either the top or bottom. You can see me select the top half of the userbar below.

We are rougly half way through the tutorial. You now need to edit the hue/saturation of the selected half. To do this you need to click the button shown in the image below and then select Hue/Saturation. Both buttons are highlighted in the image below.

You should now see a box that says hue, saturation and lightness. We only need to edit lightness, in the lightness box you will need to enter 30. You can see the box you need to enter 30 into in the image below.

You should now have something like this.

We now need to add text using your favorite font. My result with text is below.

You have your simple userbar! You can now learn how to add images to it and make it even better. I would advise you add a 1px black border around the userbar too make it better. To make it even better I’ll show you what the userbar can look like with say, an msn icon.
Cut out your small icon, it has to be small otherwise it won’t fit on the userbar. Once you have cut out the little icon just paste it onto your userbar and position it and add a 1px white stroke. My outcome is below.

Good luck on creating many more userbars and advancing your userbar creating skills.
tag this
Post a Comment