Userbar: How to Make a Simple Toolbar

Intro
So you want to make a userbar? Not surprised. In this tutorial I'm going to show you the basics of making a simple toolbar. I want to point out the simple part because you should never let this tutorial hinder your imagination and you should always experiment, this tutorial will simple provide a jumping off point. In this tutorial, I will be using Paintshop, but the steps are almost exactly the same for Photoshop. Microsoft Paint is not recommended for userbars because of its lack of layers, pattern tools, ect.

Step 1: Creating Bar Pattern
Lets begin by looking at some userbars:

The first thing that we need is to make a pattern so we can quickly and easily make those diagonal lines you see in the background. Start by opening up Paintshop or Photoshop. Now make a new image and give it these settings:

Width: 10 pixels
Height: 10 pixels
Resolution: 72

Now that we have our 10x10 blank white image take the paint brush and draw one diagonal black line across the image.

Later on you can change this pattern to get different angles and spacing, but for a first userbar this is a good start. Now save this into your patterns folder (often something like C:\Program Files\Paint Shop Pro\Patterns) so you won't need to keep making it over and over again.

Step 2: The Background
Now that our pattern is made we are ready for our first userbar! Start by making a new image with these settings:

Width: 350 pixels
Height: 19 pixels
Resolution: 72

Now grab your paint bucket tool and fill in the background however you want. It could be a solid color, a gradient, a wallpaper, ect. For this simple one I'm just going to use a solid color.

Now would be a good time to make note that Portable Network Graphic (.png) is a good format for userbars. Anyway, on to step three.

Step 3: Using Your Pattern
Make a new layer (make sure its above the background layer) and select your pattern. To do this click on the drop down list near the color and select pattern. Confused? Of course! So refer to the pictures below.

Now if you click on in the color box, you should get a menu to select patterns.

Select your bar pattern, then grab your paint bucket and fill your userbar with your pattern. Now don't panic when the white in the background of the pattern covers your beautiful userbar. Instead go over to your layers find where it say "Normal" next to the bar pattern layer, and set it to "Multiply".

*OPTIONAL STEP* Step 4: Picture
This step is not necessary, but most of the time your userbar will look pretty boring (especially when the background is a solid color) if you don't add a picture or something to compliment your text. So lets make another layer above the other two and add our picture. There isn't much too this, just find the picture, get it to look like you want it to, make the right size, copy paste, and locate.

Step 5: Adding Text
Now as far as text goes you can use what ever font and size and color you want. For this userbar, I'm using Redensek (downloaded using google) at size 12, white text. Just remember that when choosing a font you want one like Redensek because it is easy to read even when in a small size. Also, now would be a good time to make sure that if you have any Anti-Aliasing settings to turn them off (Right Click > View Image my avatar and look at the white part of the text for a good example of Anti-Aliasing, see how it looks round) as having it on with a small text size can lead to blurry text and will ruin a boarder if you chose to make one like I explain in the next sentence.

While it is like this, position it, and then go to Selections > Modify > Expand. You will get a popup asking about the floating text, just click ok and the text will be defloated into your top layer allowing the Expand tool to work. Select how many pixels you want to expand by (at this size I recommend 1 pixel) and click ok. You will now have the text selected only now there will be space around it.

Chose a color, grab the paint bucket and click in that extra space and you will make a perfect boarder around your text like this (Don't forget to fill the insides of letter too).

Now deselect your text (Ctrl+D) and congratulations you've made a basic userbar.

*OPTIONAL STEP* Step 6: A Glossy Finish
This optional step will show you one of the many tricks to giving a glossy finish to your userbar. Start by adding another layer to your userbar, then select the color White. Now take your circle/ellipse tool and make a nice white ellipse like in the pictures below.

Now find the slide bar that controls Opacity and play around with it until that ellipse fades into a glossy finish.

Another great idea is to use this same technique with the rectangle tool to make the top half of the background a lighter shade than the bottom half.

And my final tip is that if you want to make a boarder around the entire userbar (some people like black boarders), make sure to keep the final size of the userbar at 350x19 pixels so it matches other userbars because people like having signatures with multiple userbars stacked perfectly on top of each other.

Now get out there and experiment with userbars of your very own!