In this tutorial we'll learn to create some really attractive buttons
suitable for website specials, a fancy navigation or whatever you feel
fits a side column of buttons.

Start creating a new document, 200px by 70px with transparent
background.

Fill the first layer with a light grey (I'm using #EAEAEA) and name this
layer "background".
This should be the color of the area where the
buttons will go so that they will blend with the background.

Create a new layer and name it "button", pick the Rounded Rectangle Tool
and set the radius at 3px, check the antialiased box. Select any color
just to be able to distinguish it from the background and draw a button
like the following one.




If you drew exactly as shown here (drawing from top left, 1px space from
top and left and none from bottom and right, due to the way that
photoshop draws shapes) the resulting rectangle should be like this (in
case you don't have spaces at the sides don't worry, you'll always be
able to crop the final image later):




Double click on the button layer and apply these blending options:








Your button should now look like this:


Create a new layer and select the Custom Shape Tool, select this shape
from the list and set black as foreground color:


Draw a couple of shapes at the corners as you prefer.


Now select the button layer (CTRL + click on the layer in the layers
palette), go to Select > Modify > Contract > 1 px and hit OK.

Now go to Select > Inverse, your selection should look like this
(make sure to have the circles layer selected in the layers palette):


and delete the content of the selection.

Press CTRL+D to deselect and the part of the circles outside of the
buttons should be gone.


Now lower the opacity of the layer containing the circles to 35%.


Now select the text tool and choose the font BellCent NamNum BT (or any
other that you'd like to use), make it bold,set the anti aliasing method
to strong, set the size to 21pt and the color to black and type the
main button text.


Now duplicate this text layer, change the text color to white and move
it up and left by 1 px so that the lower black text makes kind of a
shadow effect.


Now we'll use the same procedure for the secondary smaller text.

I'm using the 04b08 font, no antialiasing, normal weight, 8pt and here's
the final result.


Cradit: tutorialstream.com