This tutorial will show you how to create those smooth, glossy buttons that are so popular these days.
This tutorial is geared towards complete beginners and will teach you many basic, yet important photoshop tools and techniques. This tutorial does not simple tell you how, but more importantly, it tells you why.
Step 1
Open up a document or create a new one, it doesn't matter. (To create a new document go to File -> New... and for this simple task of creating a button you can make your size around 250px by 75px.) Background color doesn't exactly matter, but you may want to go with a medium gray as it will be easier to make out your button.
Step 2
Create a new group by clicking on the "Create a new group" button.
Name this group 'button' by double clicking on the name of the group or by going to Layer -> Group Properties... Then create a new layer by clicking the "Create a new layer" button.
Name this layer 'base' by double clicking on the name of the layer. Then drag this layer onto the group titled 'button' to put it inside. It is very important to name and group all of your layers so that you can keep track of what layer is what. When you have 30 different layers trying to guess which one is the one you want to edit is nearly impossible. So stay organized, it'll save you a ton of time.
Step 3
Select the rectangular marquee tool and click and drag on the layer you just created. This will be the size and shape of your button.
Step 4
Fill your selection with a color of your choice by pressing Alt + backspace or going into Edit -> Fill -> Foreground Color. This will be the color of your button. You can press Ctrl+D to deselect the base layer.
Step 5
Double click on the layer or go into Layer -> Layer Style -> Blending Options.
This brings up the Layer Style menu. Click on 'Stroke' and make the color black and the stroke size 1px. Click OK. This adds a thin black border around the button.
Step 6
Click on the base layer and add a new layer (Ctrl + shift + n or click on the button). Name this layer 'top refraction'. This is going to be the top shiny part of our button.
Click on the rectangular marquee tool again and make a selection going about half way down the button but encompassing the entire top (you can go outside your button's border).
Now press and hold Ctrl+Shift+Alt and click on the base layer thumbnail. You now have a perfect selection inside the button where your top refraction will go. To add to the realism of a refraction go to Select -> Modify -> Contract. 1px will do fine, but if you have a really big button you may want to go with 2 or 3 pixels.
Step 7
Now, select your gradient tool. You have a choice of linear, radial, angle, reflected, or diamond gradients. We will want to use the linear one. Make your foreground color white and change the gradient type to foreground to transparent.
Click and hold below the button (about half of the buttons height) and drag while holding shift (to make the gradient perfectly straight) up above the button (about half the buttons height).
A very saddle gradient of white to transparent is put into your selection. The idea here is to get a good refraction that isn't too soft or isn't too hard. If it is too soft then the button will look less glossy, but if it is to hard the button loses realism.
Step 8
Click on the base layer and add a new layer named 'bottom glow'. Get your brush tool and set the hardness to 0 and the size to about 3/4 the height of your button. Change the flow to about 50%.
Now hold Ctrl and click on the base layer thumbnail (the little picture of the layer, not the name). Be very careful to remain on the bottom glow layer and not the base layer. We are just getting the selection of the base layer so we only paint on the button.
Step 9
Take your brush and position it outside the button to the right. Hold shift and move it across the button from right to left at a steady pace. You want to try to fill up the bottom quarter with a thick white glow. You do not want any of the white to overlap the top refraction, but you do not want it to be to far down. It may take a few tries but that?s what Ctrl+Z is for :-P.
Step 10
When you add text place it in-between the bottom glow and top refraction layers. Pick a color that isn't too bright because the white top refraction may wash it out.
Completed
And voila! There?s your button, if you want to make a rollover image all you do is simply duplicate the base layer and fill it with a different color. You can now duplicate the button group to any photoshop document and get that beauty on the web.
More Tutorials: 
