Userbar tutorial
0
posted01/24/2013 04:36 PM (UTC)by
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
Member Since
06/07/2006 07:26 PM (UTC)
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
Avatar
Randy
Avatar
About Me
"A man with no sense of history is like a man with no eyes or ears"
08/25/2006 11:46 PM (UTC)
0
That is really great and im sure it will come in handy for a lot of people, you definately deserve DPs!
Avatar
SickFreak
Avatar
About Me

Why don't you have a seat?

08/25/2006 11:49 PM (UTC)
0
Good tutorial. Are mine*gulp*crappy?
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
08/25/2006 11:53 PM (UTC)
0
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.
Avatar
JediTommy8
08/25/2006 11:58 PM (UTC)
0
There's a Userbar Generator site on the web....just incase you wanted to know.

Good tutorial nontheless.
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
08/26/2006 12:02 AM (UTC)
0
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
Avatar
Hikari715
08/26/2006 12:48 AM (UTC)
0
Great tutorial Arctic! You definitely deserve DPs.
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
08/26/2006 09:46 PM (UTC)
0
Thanx. grin
Avatar
SickFreak
Avatar
About Me

Why don't you have a seat?

08/26/2006 10:00 PM (UTC)
0
Sticky this and give the man 5 dps.
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
08/26/2006 10:07 PM (UTC)
0
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
Avatar
Bezou
Avatar
About Me
08/29/2006 07:58 PM (UTC)
0
I used your tutorial and look what I made!

Avatar
Vampyre
08/29/2006 08:48 PM (UTC)
0
Nice tut.
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
08/29/2006 08:57 PM (UTC)
0
Bezou Wrote:
I used your tutorial and look what I made!



Amazing Bezou! These are the kinda userbars I wanna see! grin
Avatar
SickFreak
Avatar
About Me

Why don't you have a seat?

08/29/2006 09:30 PM (UTC)
0
Check out the bar in my sig.
Bezou Wrote:
I used your tutorial and look what I made!



LOL!
Good old Bezou ^_^



Ka-Tra
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
08/29/2006 09:34 PM (UTC)
0
I hope more people make userbars.
Avatar
Bezou
Avatar
About Me
08/29/2006 10:50 PM (UTC)
0
I've made a bunch now. Too bad I can't use them on MKO.





Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
08/29/2006 10:59 PM (UTC)
0
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.
Avatar
Xones
08/29/2006 11:21 PM (UTC)
0


I created that one in a place, well that is free, pretty basic.
Avatar
Kyobu
08/29/2006 11:27 PM (UTC)
0
Well done and everything but there are hundeds of user bar tuts already, a link to one would have been easier.
Avatar
Bezou
Avatar
About Me
08/29/2006 11:34 PM (UTC)
0
I blurred the shine on mine. I like the effect better. For reference Gaussian Blur of 3 pixels.
Avatar
ThePredator151
Avatar
About Me
The Ultimate Mortal Kombat Experience
- Lead Graphic Designer - Mortal Kombat Online -


:G-play

:Story

:F-Design

:Cutout

:Get Sig

:Raiden

:Fans [1] [2]

:#LegendaryArts

08/30/2006 01:39 AM (UTC)
0
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.
Avatar
Bekim
Avatar
About Me

08/31/2006 11:00 PM (UTC)
0
wow this shits so old
lol u guys just learned to do this?
Avatar
Arctic
Avatar
About Me
Request Sprites | Userbar Tutorial | Kamidogu |
09/01/2006 03:33 AM (UTC)
0
I knew about a year ago.
Avatar
atticus
09/04/2006 11:09 PM (UTC)
0
I used ur tutorial and made this



Thanks artic.
Pages: 5
Download on the App StoreGet it on Google Play
© 1998-2024 Shadow Knight Media, LLC. All rights reserved. Read our Privacy Policy.
Mortal Kombat, the dragon logo and all character names are trademarks and copyright of Warner Bros. Entertainment Inc.