User Bars

hazeaccord · Member Joined: 11 May, 07:50 Posts: 92

Have you ever seen those nifty little user bars in people sigs? In this tutorial I will explain to you how to design these. Another question you might be askin yourself right now is why would I want one of these and what do they stand for? First of you might not want one, and they show other people what you like, play, and use etc. But lets begain:

Step1: Create a New Document with the size of 350x19px

Step2: On the new document you will want to select the colors you will use for your gradient. (It is a good idea to select the colors that match your theme) While using the gradient tool start above the bar and drag about 1/2 to 3/4 the way down the image to get both colors displayed, also make sure that the first gradient button is selected

Step3: Next we need to add some scan lines. To do this we will first need to create a new document 6x6px. Since this is so small you will want to zoom all the way in. Now we will need to select the pencil tool, first right click the brush tool and selcet the pencil tool. After this you will want to select black as your for ground color, and draw a diagnal line from the left hand bottom corner to the right hand upper corner. (make sure the penciles brush is set to 1px) After this you will to go to edit: Define Pattern, and when it ask you for a name type scanlines.

Step4: Now we will need to add a new layer. On the second layer you will want to go to edit: Fill, and then select pattern and choose the scanlines you just made in step3

Step5: Since the scanlines are so dark we will need to tone them down a bit, set the optancy to whatever fits the colors best and the fil to 60 or 70%.

Step6: Next you will want to add the image that will define you user bar, in my case I'm using image ready icon (make sure this layer is above the scanlines layer)

Step7: Next you will want to place sometext describing what it is your user bar is. I used a pixel font called Visitor TT1 and set it to a 10pt.

Step8: Next create a new layer. Now we want to create a curve to the top of the bar. To do this you will want to right click the rectangle marquee tool and select the elliptical marquee tool. After selecting your section fill this layer with white. Now this is where you will need to fool around with the optancy and fill to make it suit you bar the best, but make sure its almost clear so you can lightly see it.

Step9: To finish your new bar you will want to right click your first layer and add a 1 pixel black border to it. This is my finish result.

Hope this tutorial makes since, since this is the first one I have ever made. If you have any question fill free to ask me. Thanks!

I know my bar isnt that good, but it should give you an example. I will be maken myself a bar in a second.

Flea

sweet tutorial dude i might use this

Jeff · Mod Joined: 23 Jan, 07:17 Posts: 765

Very cool, l love the way these things look!

hazeaccord · Member Joined: 11 May, 07:50 Posts: 92

Yea i do too, i have seen other tutorials on these but i think mines a little easier to understand in some ways.... hope everyone likes lol

DEVs · Mod Joined: 01 Feb, 09:10 Posts: 243 Location: London,UK

Yeh i love it great stuff Very Happy

Fitzy#

Awsome tut! Very Happy

here is what i got... had some trouble with Fonts, not fiting in correctly, not being able to see it proply ect, urs didn seem to work either tho it didn in ur sig, ahwell i tryed Razz