How to make a forum userbar. [Photoshop]

[Ninjashizzle]

[glow=green,2,300]Forum userbars[/glow] are small images to share something about yourself very quickly, while being simple but effective, and also, they look cool. Userbars are 19x350 pixels in size, so sometimes it can be tricky to select a part of the photo.

 

To start off you will need a picture, obviously. And in for this tutorial I am using Photoshop but I know this can be done in editors such as GIMP or Pixlr.

 

In this tutorial I will use this picture (because House is awesome):

 

 

Now, you need to create a new photoshop document with the dimensions of 19 pixels high and 350 wide, you might want to set this as a Preset if you intend to make a few. Next, import the image you wish to use and move it about until you get something you like.

 

I chose the eyes:

 

 

Next, you need the text. I use Visitor TT2 BRK, once you have entered your text double click it in Layers and go to Stroke, change the Size to 1 and make sure the color is black. This will then make a very small black layer around the text, but is very effective.

 

 

Next, we need to create a pattern (the lines that go across the userbar). First, create a new document with the dimensions of 4x4 pixels, then zoom in 2000% by going to the top of the window and where it says "100%" change it to 2000%.

 

 

Once you have done that, take the pencil tool (if you don't know how to find this simply hold left-click over the brush tool and click the pencil tool) and draw a diagonal line from the bottom left to the top right, like this;

 

 

Now, go to Edit and click "Define Pattern", call it something like "Diagonal lines" (it doesn't really matter) and click Ok. Now, go back to the document with the image, select the paint bucket tool (hold left-click on the Gradient tool. ) and at the top of the window there is a small box saying Foreground, click the drop-down arrow and select Pattern, then the pattern you created.

 

                                     

 

Now, create a new layer and while the paint bucket tool is selected (with the pattern) just click on the user bar and go from this;

 

 

to this:

 

 

Now all you have to do is turn down the opacity of the new layer (it depends on your image how much, but you want it visible but not too obvious).

 

And lastly, the glossy effect. First create another new layer and select the Elliptical Marquee Tool (it's just like the regular select tool but circular , No prizes for guessing how you find it). Then, start off way off the actual userbar (in the grey area, start at the top left) and stretch it right across so you get a nice dip/curve, then hold ctrl and press backspace, it should look like this;

 

 

Once again, turn down the opacity (again it depends on your picture, but you want it low-ish) and you are done! This is the finished result and thank you for reading this tutorial, hope it helped.

 

[Thrill]

Awesome tutorial, I'm gonna follow this and make one later

[DynamiteDai]

Good tutorial.  :thumb-up:

[Scotteh]

Brilliant tutorial mate, going to have to make myself one of these at some point. Thanks!

[CHiLL]

That's a cracking guide! Nice work mate.

[ford1001]

maybe make some geeksoup.net ones? maybe something like the geeksoup logo, then geeksoup.net (rank here such as admin, member, addict, VIP) to be used on other sites and forums

[Thrill]

maybe make some geeksoup.net ones? maybe something like the geeksoup logo, then geeksoup.net (rank here such as admin, member, addict, VIP) to be used on other sites and forums

 

Was thinking this myself! Ninjashizzle, up for it?

[Ninjashizzle]

Yeah of course, sounds awesome. I just need to get PS working, I've tried re-installing but it still says "Adobe Photoshop CS5 is not responding" every time I try to make a new document/open a picture. I'll try using Pixlr for now

[Thrill]

Ninja, post a new topic in Multimedia Support. We'll help you out

[Ninjashizzle]

How's this? I know the "Member" part looks a bit squashed but that's just the font, I did have "User" but I thought member was more accurate.

[ford1001]

it looks great! good work!, i shall add it to my rotation

[Ninjashizzle]

it looks great! good work!, i shall add it to my rotation

 

Thanks dude

[Richio]

Nice tutorial, man!