[TUT] Making Userbars

jarjar

Userbars have become very popular with a lot of forum users over the last year or so. Mostly being used in forum signatures. For example, just look through the profiles here and I'm sure you will find someone with at least one in there signature in less than 5 minutes. Some people like them, some don't, either way, learning how to make them can be an interesting experience. Userbars contain a lot of types of GFX related tasks that once learnt can give any graphics you make a more appealing look and feel. Userbars are very easy to make, and you will get the hang of it very fast, i assure you . If your not sure what a Userbar is, check out the description at Wikipedia. The main reason i have created this tutorial is because, the other day i got a request to do a userbar, i did the quick Google search and found a tutorial for Photoshop 6, nothing much has changed from Photoshop 6 to 9 but it was not the easiest to follow tutorial, so i decided to do my own. It should give you the basics of how everyone does them, but it should also give you an insight into how to extend the userbar to make it more appealing. So lets get started. We will be making a Userbar that everyone here can use..a GTAForums.com User Userbar.

Tools Required:Photoshop 7,CS1 or CS2. NOTE: It may also work this way with past version, though i only have experience with PS7 and CS2.

Step 1:

Start a new image. Go File -> New... or on your keyboard click Ctrl+N. When prompted with the New Dialog for creating a new image in Photoshop input the values as i have below:

Input the information above into the Dialog Box you will be given once you have pressed Ctrl+N.

Then click "OK". You will now have something looking like this:

Once you have created a new image, it should look something like this.

Step 2:

Now click the "Paint Bucket Tool" in you tools window:

Selete the "Pain Bucket Tool" In your tools window.

Now with the Paint Bucket Tool click the body of your image to make the whole image completly black (#000000):

Use the Paint Bucket Tool to make the body of the image black.

Next, right click on "Layer1" and click Blending Options.

Click "Blending Options" in "Layer1"'s Right Click Menu.

Then input this data and then click "OK":

Input this information into the dialog that pops up.

Your image will not look like this:

What you image will now look like.

Step 3:

Now your going to add text to your userbar. Use the "Horizontal Text Tool" and click on the Right - Center of your userbar and type "GTAForums.com User".

Select the "Horizontal Text Tool".

Next you need to add this font to the text: Visitor -BRK- Font. This is the font used on all Userbars. Though, if you wish you can use your own font. Your image should now be looking like this:

Now you need to add it to your image. Once you have download the image open it in Photoshop (Ctrl+O) and use the Move Tool to drag it into your Userbars Window.

Select the "Move Tool".

Now you need to scale it down. Go Edit -> Transform -> Scale. Then import this information into the box under the main menu and then click the "Tick" button:

Input this data into the bar below the main menu.

You Userbar should now look like this:

What your image should now look like.

What we want to do now is make the logo more noticeable, it's what we're wanting people to see first, so we do this: Right-Click you logos layer and Click "Blending Options" and input this information:

Input this information into the dialog.

The click "OK". The logo should now look like this:

The logo should now stand out more.

Step 5:

Now the you nealy done, all you have to do now is add a boarder and add scan lines.

Open this image in Photoshop:

Save this image to your hard drive and open it in Photoshop.

Now click Edit -> Define Pattern... and call it "Diagonal Line".

Now go back to your Userbar and create another layer (Shift+Ctrl+N) and then click Edit -> Fill and select the pattern you just added. Change the layers opacity to 60%:

Change the layers opacity to 60%.

Your Userbar should now look like this:

Looking good now isn't it?

Step 6:

All that's left to do now is add a boarder, create a new layer (Shift+Ctrl+N) and press "Ctrl+A" to select the entire body of the user bar.

Then click Edit -> Stroke and set the following values and then click "OK":