 |
New Document |  |
Make a 400x400 document. You can edit>fill the background layer to any colour you want, I suggest a moderately dark gray
 |
Draw a Rectangle | |
Make a rectangle selection about the size of the button that you want.
 |
Modify | |
Keeing the same slection, to make it a little more stylish we'll kill the corners. Go to selection>modify>smooth>do 2 pixels (this depends on the size of your button, do 2 pixels at first, you'll quickly get the idea)
 |
Fill Color | |
Now on a layer NOT your background, (you may need to create a new layer) fill in this selection with whatever colour you want your button. I like Hot Pink. So you should have something like this:
 |
Add Stroke | |
Now, hold ctrl and select your layer, this will select the contents of the layer. Create a new layer, and add a stroke to this selection on the new layer with these settings:
 |
Editing Rectangle | |
Now Your going to use the Polygonal lasso tool:
And make a selection of the lower half of the button, corner to corner like this:
 |
Color Adjustments | |
We will now darken this stroke to a dark grey by going to image>adjustments>hue/saturation and using lightness of: -69
It should look like this after:
(note if your button becomes darker then you did not create a new layer for the stroke, go back and do so)
 |
Adding Effects | |
Some May be happy at this point, but for added affect add these effects to the pink button layer, and NOT the stroke layer.
Inner Shadow for more depth:
Outershadow for even more depth:
and now a stroke:
(note that the stroke needs to be darker then the bottom portion of the stroke added earlier, or it looks weird)
 |
Add Text | |
There You should have something that looks something like what is below, now just toss some text on it and your on your way!
(note that I used a pixel font on my button, and any of the Arial and Verdana fonts look good small w/out any antialiasing)
Dreamweaver Tutorials 
