Userbar tutorial
  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
Userbar tutorial
08/25/2006 06:43 PM EST
OK, the only reason I made this thread is because I see some very poorly made userbars, i'm not gonna say any the usernames of people who made poor userbars.

So to fix this: Non other than ME, will show you how to make a awesome userbar!

1. Know what your're gonna make for a userbar, ideas are essential for userbars. If you can't think of anything, there shouldn't be a reason to make a userbar. You can make a userbar whether your're a "fan" "owner" "hater" "addict" "user" "member" or "lover" (nouns).

2. Design is always important! Know what design your're gonna have on your USERBAR! So search for high-quality pictures on a search engine. Or make one. (As I did in my "Proud Sprite Editor" userbar) Looking up logos will most likely get you results.

3. Let's start making a userbar now.

Open Photoshop. If you don't have it. Your're gonna have to ask someone to make one for you or learn how to make one with another program. But some features may not be in other programs.

Push Ctrl+N to make a new picture. Put in the size of the userbar which is: (width 350) x (height 19) Make sure it's tranparent. Something like this.
IMPORTANT: Make sure your're in RGB Color mode!



Click "OK" now.
Hmm... Let's make a simple Mortal Kombat userbar. Let's use a basic Dark Red to Red Gradient. So pick those colors.



Now that these colors are selected. Go to Layer>New Fill Layer>Gradient
Then click on Gradient.



Ignore the next dialog box and just Click "OK" Then where it says "Preset" choose yours (Yours will always be the first box) Then click "OK"



Followed by this dialog box here.


Ignore the preferences, but before you click "OK" click "Reverse" this will flip the gradient the opposite way according to the "Angle" It should be pointing up and say: 90 degress, then click "OK"



Now let's get our picture. (You can have as many pictures as you want in your userbar, but in this tutorial we're gonna use one)



You may be thinking "That picture is WAY too big for my userbar" But luckily we have a tool. We can shrink it. Go to Image>Image size then click on "Image size"



Then this should appear.


See where it says "Pixels" click on it you should see this...


Click on "Percent" And do the same thing to ONLY the bar below. It should show a 100% percent now. Put in 25% in one bar. It will automatically do the same thing to the other bar. Click "OK"

Much smaller now right? Good. This is it after the image shrink process.


Now we're gonna make the "Userbar Pattern" I call it. Open a new picure with the size of 3 x 3. Make sure it's transparent and in RGB mode. Click "OK" now. Go to the brush tool and right click it, this should appear.



Use the Magnifying glass tool to zoom in all the way. Pick black. Not GREY! I see people using grey for their userbars, that's wrong. They should be using black. Afterwards, make this.



Then go to Edit>Define Brush



Then click on "Define Brush" then this should come up.



Put in "Userbar Pattern" or whatever you want to put in. Then click "OK"

THERE! You won't ever have to do this again to make the userbar pattern. Unless your computer gets erased. tongue

OK. Now that we have that, go back to your userbar document. Then go to Layer>New Fill Layer>Pattern



Another dialog box will appear. Ignore this one and press "OK"
A different dialog box will come out. Leave all the settings alone, they should be like this.



Okay. Settings are all good, so click "OK"
Is the pattern too plain and dark? Good. We can fix that. Press Shift+F5 and this window should come out.



Fix the settings so that they are the same. 70% is usually what you should use. It's just the perfect amount, but in other userbars you probably will use different colors and need to experiment with it a little. But in this tutorial use 70%

Now that our userbar is properly patterned. Let's put our picture in. Copy it. Then paste it in our userbar. Move it around to your liking. Now decide where you want it. Now press Ctrl+A then afterwards press Ctrl+Shift+E

Wow! Now your userbar is 1 Layer. Now we're going to put in that shine that make the userbar look 3D!

Here's what you do. Right click on the Marquee tool and pick the Elliptical Marquee tool.



Now make a circle like this:


Now go to Layer>New Fill Layer>Solid Color
Ignore the dialog box after.


Then click on "Solid Color" Then this window should come up.



Pick White. And click "OK"

Now Move the White circle up until it reaches to here.



Now press Shift+F5 and do this.



Change the settings to match the picture above. Good, now we have slick shine. Click on the Text button. Looks like a "T" (Sorry. I don't want to a show a picture of that.) Put the font Visitor TT2 (BRK) Look up the font this website.

1001 free fonts

Now type in what you want your userbar to say. Proof read it before you save it. Put in size 12, then change the font to white, (usually, the color but you can change it if you want) leave the "Anti-Alias" to "None" (the "Anti-Alias is the double A's) Your settings should look like this:



Now insert your text. In this tutorial we'll put "Mortal Kombat Fan"



The font looks boring doesn't it? OK then let's put a stroke around it. Go to Layer>Layer Style>Stroke



Now click on "Stroke" on change those settings to these below!



Got em'? Great! Now let's continue to our final step. (Optional, but will make your userbar bar look amazing ) Take a last good look at your userbar. Decide if that's where you want to keep the font in the same location and you know the drill. Done? Okay. Press Ctrl+A then press Ctrl+Shift+E and BAM! One layer.

Now we're gonna put a stroke on our userbar. Press Ctrl+A then go to Layer>Layer Style>Stroke



Now put in the same settings we did for our last stroke but with an EXCEPTION!

Make sure where it says "Outside" to "Inside"
It will show the great stroke of the ENTIRE userbar. Something like this.



There. We're done now. I hope you learned how to make a userbar. It gets very simple after a couple of times. When you do so many, you will be able to make them in 2 minutes. I mean, I do. So should you. grin

Your userbar should look like this:



Now save it or whatever. Questions, comments?

This tutorial was "Made by Arctic" inspired by crappy userbars. tongue
Request Sprites | Userbar Tutorial | Kamidogu |
4.0
  • England
Rank Mortal
Posts2732
Likes0 received
0 given
RE: Userbar tutorial
08/25/2006 06:46 PM EST
That is really great and im sure it will come in handy for a lot of people, you definately deserve DPs!
"A man with no sense of history is like a man with no eyes or ears"
  • United States of America
Rank Mortal
Posts1393
Likes0 received
0 given
RE: Userbar tutorial
08/25/2006 06:49 PM EST
Good tutorial. Are mine*gulp*crappy?
Why don't you have a seat?
  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/25/2006 06:53 PM EST
SickFreak Wrote:
Good tutorial. Are mine*gulp*crappy?


Not at all Sick Freak. Yours are better than most people. But your're missing the userbar pattern.

Someone should sticky this.
Request Sprites | Userbar Tutorial | Kamidogu |
  • United States of America
Rank Mortal
Posts3793
Likes0 received
0 given
RE: Userbar tutorial
08/25/2006 06:58 PM EST
There's a Userbar Generator site on the web....just incase you wanted to know.

Good tutorial nontheless.
  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/25/2006 07:02 PM EST
JediTommy8 Wrote:
There's a Userbar Generator site on the web....just incase you wanted to know.

Good tutorial nontheless.


I didn't know that. Thanx anyway. grin Still, most pictures in this tutorial should be bigger. I don't know why it looks terribly small! confused
Request Sprites | Userbar Tutorial | Kamidogu |
  • Canada
Rank Mortal
Posts6135
Likes0 received
0 given
RE: Userbar tutorial
08/25/2006 07:48 PM EST
Great tutorial Arctic! You definitely deserve DPs.
  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/26/2006 04:46 PM EST
Thanx. grin
Request Sprites | Userbar Tutorial | Kamidogu |
  • United States of America
Rank Mortal
Posts1393
Likes0 received
0 given
RE: Userbar tutorial
08/26/2006 05:00 PM EST
Sticky this and give the man 5 dps.
Why don't you have a seat?
  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/26/2006 05:07 PM EST
SickFreak Wrote:
Sticky this and give the man 5 dps.


Wow. I'm glad you found this useful. grin

Has anyone made any userbars? Feel free to show them here or request any. glasses
Request Sprites | Userbar Tutorial | Kamidogu |
  • Canada
Rank Fatality
Posts6320
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 02:58 PM EST
I used your tutorial and look what I made!

Rank Mortal
Posts1916
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 03:48 PM EST
Nice tut.
  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 03:57 PM EST
Bezou Wrote:
I used your tutorial and look what I made!



Amazing Bezou! These are the kinda userbars I wanna see! grin
Request Sprites | Userbar Tutorial | Kamidogu |
  • United States of America
Rank Mortal
Posts1393
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 04:30 PM EST
Check out the bar in my sig.
Why don't you have a seat?
  • Canada
Rank Ninja
Posts5510
Likes160 received
877 given
RE: Userbar tutorial
08/29/2006 04:33 PM EST
Bezou Wrote:
I used your tutorial and look what I made!



LOL!
Good old Bezou ^_^



Ka-Tra

15 YEARS! ^[2004-10 Komics Sig by Siklooted, tyvm]^ [2012-19 Komics *NEW 1/26/2019*] "Circling Vulture, Laughing Hyena" "Ma'at" "Zhi Nu" True story, it happened to a friend of a friend of mine... EVERYBODY!

  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 04:34 PM EST
I hope more people make userbars.
Request Sprites | Userbar Tutorial | Kamidogu |
  • Canada
Rank Fatality
Posts6320
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 05:50 PM EST
I've made a bunch now. Too bad I can't use them on MKO.





  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 05:59 PM EST
LOL! I love the second one! You may notice I made a userbar showing how much I love cheez-its


Also made a Playstation 2 one as well.



I had more spare time on my hands so "What the heck!" I made a Macromedia Flash userbar too.
Request Sprites | Userbar Tutorial | Kamidogu |
  • United States of America
Rank Mortal
Posts115
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 06:21 PM EST


I created that one in a place, well that is free, pretty basic.
  • United Kingdom
Rank Mortal
Posts1177
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 06:27 PM EST
Well done and everything but there are hundeds of user bar tuts already, a link to one would have been easier.
  • Canada
Rank Fatality
Posts6320
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 06:34 PM EST
I blurred the shine on mine. I like the effect better. For reference Gaussian Blur of 3 pixels.
  • United States of America
Rank Mortal
Posts10460
Likes0 received
0 given
RE: Userbar tutorial
08/29/2006 08:39 PM EST
SickFreak Wrote:
Good tutorial. Are mine*gulp*crappy?


No, mine suck. I needed this.

I think Bombs- gave something like this before in one of the request or cut out thread. But I just got the right kind of program to make them the right way. This was excellent timing. Thank you alot.
The Ultimate Mortal Kombat Experience
- Lead Graphic Designer - Mortal Kombat Online -

:G-play :Story :F-Design :Cutout :Get Sig :Raiden: Fans [1] [2]:#LegendaryArts
  • Albania
Rank Mortal
Posts28
Likes0 received
0 given
RE: Userbar tutorial
08/31/2006 06:00 PM EST
wow this shits so old
lol u guys just learned to do this?
  • Mexico
Rank Mortal
Posts1099
Likes0 received
0 given
RE: Userbar tutorial
08/31/2006 10:33 PM EST
I knew about a year ago.
Request Sprites | Userbar Tutorial | Kamidogu |
  • England
Rank Mortal
Posts710
Likes0 received
0 given
RE: Userbar tutorial
09/04/2006 06:09 PM EST
I used ur tutorial and made this



Thanks artic.