Userbar Tutorial.

[Skye_Vrbas]

Permission was granted for this topic in this section by Mod Venetia.

Dear forum members,

I tried making a tutorial on how to make a userbar,
hopefully it' useful to you...

I'm using Photoshop for this so if you don't have it, 'm sorry  :brow:.
Also I assume you have a basic understanding of the program.
(like knowing what the foreground & background colours are...)

Step 1 : Create new document

Make a new document with these measurements:

Width: 350px
Height: 20px
Resolution: 72px/inch
Background: Transparent

Step 2 : The gradient

In your first layer you put a gradient.
You do this by selecting 2 colors you like:

- one colour on the foreground
- the other on the background

Then select the Gradient Tool, and drag until you are satisfied...
Mostly a left to right drag over the total length of your document is fine.

http://users.skynet.be/fa322282/images/ ... /step2.png[/img]

Step 3 : The scanlines

a) Make a new document of 3x3 pixels.
b) Zoom in until you're satisfied
c) Select your Pencil Tool
d) Draw a line diagonally across your canvas (choose your direction)
http://users.skynet.be/fa322282/images/ ... creen2.png[/img]
e) Go to: Edit>>Define Pattern...
f) Name it like you wish
g) Go back to your original document
h) Create a new layer (Ctrl+Shift+N)
i) Select your Paint Bucket Tool (hold your mouse down on the Gradient Tool, and a popup menu will appear)
j) At the top of your screen select "pattern", and select you self-made pattern!
http://users.skynet.be/fa322282/images/ ... screen.png[/img]
k) Fill your new layer, and you have the scanline pattern
l) Drop the opacity of that layer until you are satisfied

http://users.skynet.be/fa322282/images/ ... /step3.png[/img]

Step 4 [optional] : White border

a) New layer (Ctrl+Shift+N)
b) go to: Select>>All
c) go to: Select>>Modify>>Contract >> 2 pixels
d) go to: Select>>Inverse
e) fill the selected area with a white color
f) drop the opacity of that layer to your desire

http://users.skynet.be/fa322282/images/ ... /step4.png[/img]

Step 5 : Your image

Make a new layer (Ctrl+Shift+N) and place your desired image in it.
Note that the image has to have a transparent background.
Also, don't try to scale down your images too much, it'll look bad,
the objective is to find an attractive snapshot of your image and expose that...

http://users.skynet.be/fa322282/images/ ... /step5.png[/img]

Step 6 [optional] : Black border

Make a new layer (Ctrl+Shift+N) and place your desired image in it.
Note that the image has to have a transparent background.
Also, don't try to scale down your images too much, it'll look bad,
the objective is to find an attractive snapshot of your image and expose that...

http://users.skynet.be/fa322282/images/ ... /step6.png[/img]

Step 7 : Text

a) Download the font "Visitor" here.
b) Install it.

To install a font:
# Windows Vista : Right-click on the font files > "Install"
# Windows XP : Put the font files into C:\Windows\Fonts
# Mac OS X : Double-click the font file > "Install font" button.

c) Save your Photoshop file (.psd)
d) Restart Photoshop and re-open your file
e) Select the Horizontal Type Tool and a 14pt "Visitor" Font
f) Type what you want where you want...
g) [optional] Add a black border:

- double click layer
- select stroke: 1px, black, blend mode: normal

Spoiler: Large screenshot

http://users.skynet.be/fa322282/images/tutorial/screen3.png[/img]

http://users.skynet.be/fa322282/images/ ... /step7.png[/img]

Step 8 : Shine

a) select the Ellipse Tool
b) select a white foreground color
c) draw a flat horizontal ellipse at the top of your userbar
d) drop the opacity of your shine and place at will

Spoiler: Large screenshot

http://users.skynet.be/fa322282/images/tutorial/screen4.png[/img]

http://users.skynet.be/fa322282/images/ ... /step8.png[/img]




Some last notes

- In this case I put the image between the white and black border, you may do so but it's not necessary.
- If there are any further questions, just post em, and I'll answer.
- You can submit you effort, but I'm not granted the title of "Userbar teacher" or anything, so I'm not grading you...
- Comments on this tutorial are always welcome  :blush:

- If you don't have photoshop or gimp, you can use this handy program to create them anyways !
>> The Userbar Designer <<
** Thanks for the link Kraft  :thumb:

 

[Ratty524]

Nice tutorial. I've only just begun trying to create userbars, this will be helpful for me.

 

[Ninjitsu]

Not bad. Well made.
Our techniques differ in some things tho.

 

[Skye_Vrbas]

:blush: Thanks for the comment both of you ...

In what details do we differ Ninjutsu ?

 

[e]

Actually, that was pretty sweet. Except that the chocobo kind of covers the white inner border. Is it intentional?

 

[Skye_Vrbas]

- In this case I put the image between the white and black border, you may do so but it's not necessary.

>> Yep, it was intentional... You think it shouldn't ?

Thanks for your kind comment  :blush:
I hope this get's stickied...

 

[e]

Oh yeah, my bad; I hadn't seen that line. Sorry.

 

[Skye_Vrbas]

Didn't mean to be a  :specs: ,
it's only normal to overlook a single line with all of my brabling ... :lol:

 

[Ninjitsu]

We differ in the way we do borders.
And my gloss comes out smaller, cause i dont like making the window that big :thumb:

 

[Spoo]

I love this tutorial, but I just can't find that 'Edit>>Define Pattern' button. I'd like the scanlines there, but I cant find that...

 

[Skye_Vrbas]

If you are using Photoshop (on wich this tutorial is based...),
you can find it at the top of your screen next to File.

If you don't get it, look at the large Screenshot in this spoiler here:
If you press that option, the menu in the red square appears.

Spoiler: Large Screenshot

http://users.skynet.be/fa322282/images/tutorial/screen5.png[/img]

 

[Spoo]

Sorry I didn't clarify, I'm using Gimp, so I don't know there.

 

[Skye_Vrbas]

As I declared in the beginning, I'm using photoshop, not gimp.
I wish I could help you though...

I could suggest you draw a 3x20 box with the lines in it,
and copy the layer horizontally. It's kind of lame but I never
even opened gimp, so I cant help you there...

It should look like this:
(but the white has to be transparant)

Spoiler: Large Screen

http://users.skynet.be/fa322282/images/tutorial/screen6.png[/img]

It's not always so obvious to have Photoshop, I know,
but I'm working with it and I rather put my time in learning to know
that program better than to get started with gimp.

 

[khmp]

You can create the closest diagonal scanlines pattern in a 3x3 square.
http://i229.photobucket.com/albums/ee31 ... attern.png[/img]
The horizontal mirror of that image creates upper left to downward right.

 

[Skye_Vrbas]

Step 3 : The scanlines

a) Make a new document of 3x3 pixels.
b) Zoom in until you're satisfied
c) Select your Pencil Tool
d) Draw a line diagonally across your canvas (choose your direction)
http://users.skynet.be/fa322282/images/ ... creen2.png[/img]
e) Go to: Edit>>Define Pattern...

khmp, was that @me or @Akinari ? 'cause as you can see I already explained. Your 3x3 square and mine behave the same .
I was just trying to help Akinari since he doesn't have photoshop, and I don't know how gimp works...

Any other comment are always welcome.

 

[khmp]

I was talking to you. To be honest it never occurred to me to have a simple diagonal line across. :huh:

 

[Skye_Vrbas]

So folks, I'm getting some friendly commnt in my PM box,
but feel free to share it in this thread !

"I just hope in that way this might get stickied" :brow:

 

[Aepriz]

Yeah a sticky would e VERY great .
This is a post that accualy worth some thing .

Great job Skye_Vrbas

 

[___]

I was talking to you. To be honest it never occurred to me to have a simple diagonal line across. :huh:

If you work it out it in your mind should be obvious, the gap between each line is 2 pixels either way.  If you're ever in doubt about how an image will tile, use Filter->Other->Offset and offset it by roughly 1/2 your width & height, you'll see how the edges fit together.  Similarly in Graphics Gale when dealing with tiles you can select an area (say a 32x32 tile in a tileset) and Image->Scroll... to achieve the same effect.  I don't remember how it works out in the Gimp as it doesn't deal well with Tablet PCs so I don't use it anymore, but I do know there's a command in there to do it.

 

[Kraft]

http://ubdesigner.com/

You could also use this...

But, just to let y'all know, I dont use that ^_^
I am merely posting it for people who dont have/cant use photoshop.

I make the ones I make in photoshop as well.  And yes, I am amazed how close your tutorial is to the way I make them ^_^

I actually thought I was being clever by useing the ellipse tool and making an oversized oval to make that shiny part on it... but I guess now it is no secret!

Anyways, great job on the tut.  (also, thanks for the font...  I had to reboot my computer a few months ago, and lost the font and couldnt remember what it was called ^_^

Cheers!

~Kraft