Dean C
01-02-2003, 04:13 PM
++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++
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 (http://members.lycos.co.uk/emceemist/visitor2.ttf) 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
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 (http://members.lycos.co.uk/emceemist/visitor2.ttf) 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