[Tutorial] - Create your own custom buttons
 

++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++
This tutorial is copyrighted to vBulletin.org and Myself. All rights reserved.
Please ask permission in this thread to copy the tutorial. If granted, post a link that points to this page.
++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++

In this tutorial i will try and teach you how to make smooth and elegant buttons for your vbulletin.

Requirements:

- Adobe Photoshop (preferabbly version 6 or 7)

_________________________________

Instructions:

1/ Open up Adobe Photoshop and make sure your foreground color is 'A0A0A0' and your background color is '646464'.

2/ Press 'Ctrl + N' which will open up a screen allowing you to create a new image. Use these settings:

http://members.lycos.co.uk/emceemist/step2.gif

3/ Now in this case we're going to make rectangular buttons. To create a one pixel border which IMO all buttons should have we press 'Ctrl + A' then goto 'Edit > Stroke'. Use these settings:

http://members.lycos.co.uk/emceemist/step3.gif

4/ OK now you have a one pixel border around your button we need to create the background gradient. To do this we need to use the 'Rectangular Marquee Tool'.

Now create a new layer by pressing 'Shift + Ctrl + N'. Select inside your one pixel border and fill with white by going to 'Edit > Fill' and in the dropdown selecting 'white'.

Then Click the 'Gradient tool'. Now you have a gradient bar at the top which looks like this http://members.lycos.co.uk/emceemist/gradientbar.gif. Click it. The screen that pops up should look like this:

http://members.lycos.co.uk/emceemist/step4.gif

5/ In the presets box scroll down until you see the 'Copper' option. Click it. A new color gradient should appear. Now just below the colour part there are little triangular points. Two should be darkish brown and two should be very light brown. Click one of these little points and then the options below should become selectable. If you are selecting a dark brown point then change the 'Color' dropdown to 'Background'. And if it's a light brown point then change it to "Foreground". After you've done that it should look like this:

http://members.lycos.co.uk/emceemist/step5.gif

Now click the "Ok" button

6/ You should already have the gradient tool selected and the area selected inside the one pixel border we have created. Drag your mouse from the top of the selected area to the bottom in a straight, vertical line.

You should end up with a gradient looking like this:

http://members.lycos.co.uk/emceemist/step6.gif

7/ Now we add the text. Select the "Text" tool and choose a pixel font. I'd reccomend downloading the Visitor2 font. With the font tool drag the area you want the font to be in and then let go of the mouse. Then on the top toolbar make your font color white. And Type in the text you want on the button.

A new text layer should have been created on the layers tab on the left. Click it. Then goto Layer > Layer Style > Drop Shadow

Use the settings that are already but modify these settings:

Distance: 1
Spread: 0
Size: 3

Then you should end up with a nice and simple button which looks like this:

http://members.lycos.co.uk/emceemist/final1.gif

__________________________________________________ _

Tips:

- You can always change the color of your gradient and then change the color of your font to match. Try different gradient effects too apart from "Copper".

- Never use stroke on a pixel font. It looks very untidy. If you use drop shadow like i've done then make it very minimal.

- You can change the dimensions of your buttons and add extra items or objects to make it look nicer. Example: http://members.lycos.co.uk/emceemist/final2.gif

__________________________________________________ _

Regards

- miSt

Nice tutorial, it's surely helpful

*stick*

Thanks Xenon.... i hope people find this useful

Regards

- miSt

Nice Mist:)

Satan

Thanks for that, might come in handy!

Thank you Mist!
Cool tutorial!! :)

Your Welcome :D

- miSt

that is very helpfull to me, thanx :)

Nice tut.

Has anyone attempted using illustrator for buttons?

I haven't used illustrator unfortunately - i hear it's very good but more unnecessarily complicated than photoshop :)

- miSt

Personally I think Macromedia's Fireworks is a terrific graphics program.

It integrates very easily with Dreamweaver and Flash as well which makes it overall a nice package for making web documents.

:banana: - Yes, that is my bananna. No, you may not touch it.

I'm not going to start a debate on graphics programs but lets keep this thread for any support or questions that may need to be asked :)

Regards

- miSt

We followed the steps exacvtly with Photshop 7 and could not get it to work for us.

What didn't work :)?

Please explain more...

- miSt

Great tutorial man :)

Now can you explain on how to make pictures shaped like your avatar? :)

hehe, indeed, please do

That would take ages to explain...

You need software such as Cinema4d to make renders and such ...

Too complicated to right out and there are various tutorials distributed out there on how to make them :)

Regards

- miSt

hehe ok. I use to always wonder how to do that.

This is nice. Thanks! :)

It would rock even more if someone could make a tutorial on how to create vB skins. :)

Haha that's a bit more of a tutorial - that would stretch for pages and pages - and there's no point in making a tutorial because every styles is different :p

- miSt

Illustrator is used for vectore graphics that can be rezised to any size without screwing it...

nice tut btw:) don't need it:p but good for newbies:)


oh, btw radon... theres a tut on how to pretty much edit your vB [here]

that should help ya get started :banana:

Thankyou :)

- miSt

I get alot of requests for that daily. People need to realise vB skinning is not something you can learn in the tutorial. It's knowledge of several parts of the vB put together.

sweet.. im going to try it now...

nice tut man, will help a lot in time ;D

Thanks :)

- miSt

Um dude I think I got lost around step 3.
I run version 7, dunno what version you were running but things weren't quite the same (one of the drop-down options were missing).
And the text was TINY - more than unreadable it was like less than a pixel and I used size 9 (Tahoma).

Dave.

I used the visitor font which i linked to... With tahoma perhaps use a bigger font.

Tell me exactly the problems your having and i'll try to help :)

Regards

- miSt

Things like that are impossible to explain on a bulletin board.
One of the drop down menus is missing in one of the images (although all the images in the instructions are missing now, probably cause your site got closed down. Lycos requires an index.htm/.html page...)

Dave.

I do have an index.html and i cna see the images.

PM me your AIM or MSN or ICQ and i'll try and help on there :)

Regards

- miSt

I've made an action file with Photoshop 7 to make a nice button, but not sure this is the right place to show it... Ok, I'll post it @ webmaxtor.com, my new board.

Mist awesome tutorial. But I have one question. I downloaded the Visitor2 font. How do I get that font to show up on Photoshop 6 so that I can use it?

Move it to the C:/Windows/Fonts directory :)

- miSt

Mist this has helped me more than you know and I finally got around my other button problem, thanks to your tips on the font glow. :)

Thanks man. :)

Mark

Your welcome :)

- miSt

How do I cut the corners just a little or round them off some?
Is that Gradient your favorite to use Mist?
The gradient seems to be the touchiest things for me to understand, when i comes to adjusting and trying diffrent ones.

Mark

Well i just use a very gentle color difference on my gradients :)

To round corners off a little make an outer stroke of 1px all around the edge. Then in the corners just delete one pixel so its transparent. Do this in each corner and then your corners aren't so sharp :)

- miSt

What tool do you use to delete 1 pixel?

The select tool and then press delete on the layer which has the border on hehe ;)

- miSt