Big Attractive Buttons

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