Creating a bright forum signature userbar

2007-02-06

In this tutorial we will make a userbar which you can use in your forum signature. We will make a userbar for www.tutorials-db.com but you can make one for whatever you like. Before getting started, let me show you what we're making:



If you want to use the above userbar as your forum signature, use the following code:



Let's start by creating a new document 350px width and 19px height. This is the most common size of userbar.



Now we need to choose our background colour, I am making this userbar for www.tutorials-db.com so I'll use a blue from the header - #5d83b7. Select all (ctrl-a) then hit shift-backspace to fill the selection. Select 'color...' from the dropdown then choose the colour you want as your background colour.



Now we will add scanlines but first we'll have to create a scanlines pattern. Create a new document 6px width and 6px height then zoom into 1600%. Create a new layer then delete the white background so that the background is transparent. Select your pencil tool then draw a black diagonal line like in the following image. Now Edit->Define Pattern and give it any name you like.



Now to add the scanlines to your userbar, create a new layer (ctrl-shift-n) then hit shift-backspace again but this time choose pattern from the dropdown box. Choose your new pattern then click OK. The scanlines we just added are black but we want white ones because our background is quite dark so hit ctrl-u to bring up the hue/saturation options. Drag the lightness slider to 100% to make your scanlines white. The scanlines are still far too bright so change the opacity to 20%.



Now lets add a shine to the background. Create a new layer, choose your Elliptical Marquee tool then make a selection of the top half of your background like in the image below. Fill the selection (shift-backspace) with white then change the opacity to 10%.



Now to keep our text easily readable, let's remove the scanlines where we're going to have our title. Choose your scanlines layer then pick the rectangular marquee tool. Make a selection similar to the one in the following image then hit delete. Your scanlines should now have a space where we can add text.



Now lets add a border between the scanlines and text area. Choose your pencil again and draw a contrasting vertical line on each side of your text area (hold shift to keep your line straight).



Now add whatever logo or text you would like on your userbar e.g. If you were making a userbar for 'Firefox User' you could use the Firefox logo. This userbar if for www.tutorials-db.com so I used the title from the header of the website.



Now we shall add a label to the right hand side of the userbar. As userbars are very small, we'll need to use a pixel font for this, the font I recommend is Silkscreen. I used Silkscreen at size 8px and colour #ffffff. It's a little plain with just those settings so well also add a stroke. Select the text layer then add a stroke style with Size 1px and Position 'Outside'.



Now the last step left is to add a border to the userbar. To do this, create a new layer and fill it with solid white. Add a stroke style with 1px size and inside position. Now we want to make the white part transparent so change the layer mode to darken.



Now our userbar is done. For it to work, you'll need to upload the image to a website like ImageShack, PhotoBucket or your own hosting then finally add your BBCode. Remember that you can freely use the www.tutorials-db.com userbar if you like with the following code: