How to make a userbar by pyost


Lately the userbars have become very popular with people. They are mostly putting them in their forum signatures, which is very practical. They are small, but can be used for linking.

A lot of userbars can be found at www.userbars.com and www.userbars.org, but sometimes people can't find exactly what they want. This is why I have decided to make a tutorial on how to make you own userbar.

The pictures in this tutorial are made in Photoshop 6.0, so don't be surprised if you're Photoshop is different. I will be making a Thunderbird userbar.

First of all, you have to create a new picture. The dimensions are as shown in the picture below.



Next, you must choose you background color. It is best to use the gradient tool and the colors that would suit the thing you are making a bar for. In this case, I will be using a light blue color going to white (because of the Thunderbird logo).

It should look like this.



Now, we must add the diagonal lines seen in all the userbars. To do this, create a new picture, dimensions 6x6 pixels and transparent. Next, use the pencil tool on that picture to create a diagonal line like this.



When you draw that, go to Edit -> Define Pattern and choose the pattern name. Now go back to the first picture and the Pattern Stamp Tool in order to put lines into you picture. Since the lines are too bold, I would advise you to lower the opacity. I use 15% myself, but it's up to you to decide. After doing that, you get something like this.



Now it's time to add the logo to the picture. The logo must have transparent background, so when you put it it should look like this.



Now we've got only two things left. The first one is to add text to the userbar. For this, most people use the Visitor -BRK- font. That's what I'm going to use, too. When you choose the font tool, choose Palettes and do the following. Set the font size to 10pt, turn of anti aliasing, and increase the character spacing to 25. When you write the text, use the stroke option to create a black or white 1 pixel border, depending on the font color. Here's what you should get.



Then, you should add the elliptic transparent white part. In order to do that, choose the Ellipse Tool, select Create Filled Region and set the opacity to 30% or less to get the best quality. Create a new ellipse with this tool so that it's bottom part is located in the top of the picture.

The final thing to do is to add a 1 pixel border to the whole picture, and do it with around 20% opacity. I hope that there is no need to explain this. And here is the product – Thunderbird userbar.



If you have any further questions or want to comment my tutorial, you are free to do so.

   Sun Feb 5, 2006    Reply         

   Sun Feb 5, 2006    Reply         

Sweet tutorial. But why do all these userbars have the same design all the time? As in with the transparent eclipse across the userbar and the diagonal striped lines? I mean it looks great and cool but its like ipods. Where the circlular navigation pad on it is what makes it so "hipp" and everyone thinks its cool. I guess that applies to this too?

   Mon Feb 6, 2006    Reply         

First of all, not all the userbars have the same pattern. Some have diagonal lines, while other have artistic dots Also, some don't have the transpart ellipse. Your iPod example was really good. If somebody tried to make a variation, the public probably wouldn't like it.

In other news, here's an Astahost userbar by me

   Mon Feb 6, 2006    Reply         

User bars looks nice, even though I don't look at them very seriously, but they are great. But when people, like above ads lots of them, it does not look normal in my opinion, to much is to much

As I don't own photoshop, only the Gimp, I still want to make userbars, so I found this easy tutorial to do it, if somebody is interested how to do it using Gimp, here is the link:

http://www.userbars.com/gimp_tutorial/gimb...or_userbars.htm

( Link doesn't work anymore, at least for me, so try this one: http://www.gimptalk.com/forum/topic/Make-A...imp-9605-1.html )

It's really easy, there are so much of those user bars, but maybe making a bit different ones, of already existing, is good too the bad side is that anyone can steal your custom userbar on which you worked

   Mon Feb 6, 2006    Reply         

Very nice tutorial! Thanks for sharing this. Here's mine:


-=jeroen=-

   Tue Feb 7, 2006    Reply         

You might consider registaring at www.userbars.org. There you can upload your own creations and comment others'. I already have about 10 of my userbars over there

   Tue Feb 7, 2006    Reply         

Here are some more of me. (nice idea to upload them to userbars.org, I uploaded them all.






Hope you like them,
-=jeroen=-

   Wed Feb 8, 2006    Reply         

Nice work It's good to see more people interested in this. The only thing I don't like is the font on the thompson addict userbar. It's a bit hard to see. Try using a white font with a black stroke around (or any color that you fancy)

   Wed Feb 8, 2006    Reply         

hey! this is very nice little tutorial, and userbars are cool too. Good work...

   Wed Feb 8, 2006    Reply         

I think it's useful in more ways. First thing, it has taught me how to make userbars. Second thing, it made me think about learning to use Photoshop. I'm a complete n00b at this so I think it won't be easy, but I'll give it a shot.

Offtopic:

finaldesign, I haven't noticed that you're from Croatia, we're neighbours

   Wed Feb 8, 2006    Reply         

   Sun Feb 19, 2006    Reply         

   Sun Sep 3, 2006    Reply         

   Sun Sep 3, 2006    Reply         

Nothing important, just trying to showoff pyost's userbar in my signature lol

Regards
Dhanesh.

   Sun Sep 3, 2006    Reply         

Hehe, nice, but I don't see a point in having an "Astahost Member" userbar - on Astahost!

   Sun Sep 3, 2006    Reply         

lol, true .. but for a guy like me who visits ONLY these forums (and HB .. but not so frequently now) .. Its pretty much of a cool thing .. besides keep this thread on track, we always tend to get off-topic somehow ..

Regards
Dhanesh.

   Sun Sep 3, 2006    Reply         

Hey thanks there. Kudos for you and until now, I used to make my own but never learned how to make those black diagonal lines. I mean, they look really cool!!!

I guess these weren't THAT hard at all!!

THanks again - I still need to learn some Photoshop features (more like many)

   Sun Sep 3, 2006    Reply         

   Sun Sep 3, 2006    Reply         

   Sun Sep 3, 2006    Reply         

As I said, it's a Visitor -BRK- font. A simple Google search gave me this link: http://www.webpagepublicity.com/free-fonts-v2.html. There you can find this font (it's free).

@cyborgxxi
Userbars are good because they are simple to create, but show you how to use several Photoshop options. I started off with this tutorial, and now I have a lot more knowledge - this one gives you a good head start

   Sun Sep 3, 2006    Reply         

thanx a lot
you should make this sticky
im a modertor on an invision forum and im just trying to make userbars for mods and admins
this guide was very helpful
thanx a lot

   Sun Sep 3, 2006    Reply         

   Sun Sep 3, 2006    Reply         

   Sun Sep 3, 2006    Reply         

ok i finally figured out how to do everything
here is mine:

   Sun Oct 1, 2006    Reply         

   Sun Jan 20, 2008    Reply         

   Wed Mar 5, 2008    Reply         

   Wed Mar 5, 2008    Reply         

   Fri Mar 7, 2008    Reply         

nice tut. i know hot to make userbars, but knowing twice is better

   Tue Apr 8, 2008    Reply         

thekpo

Exc

Niru