Creating Stylish Web 2.0 Gradient Buttons

First create a new layer and select the "Rounded Rectangle Tool" from the left side tools menu, you will then need to set the Raduis in the top options bar to a required amount, for mine I have used 25px (The higher the raduis the more rounded the corners of your rectangle. I have also used a grey colour but you can use any as this is only a temporary colour.

next right click on the layer containing your new rectangle shape and select the "Blending option" menu.

Once the panel opens select the "Gradient Overlay" option form the left menu. On the right side some settings should now appear, ensure that the angle is set to 90 degress upwards and then left click on the gradient colour box.

A new panel should now open with the gradient colour options, all you need to do to set the colour is double click on the colour sliders (shown above) a colour selection panel should then appear.

For this example I have chosen to use two closely related shades of blue, keeping the colours closely related is the key to gradients, see the "Becoming a Gradient Junkie" article for more.

Now click "OK" for both the gradient and blending options panels.

Next create a new layer above the first (you do this my clicking the small paper icon in the bottom of the layers panel).

Now ensure that you have this new layer selected and once again select the "Rounded Rectangle Tool". Important: Before you continue you also need to make sure that the style setting in the top options panel is set to "None"

Now draw a rounded rectangle simular to before, but so that it just covers the top half of your original rectangle.

Note: You can also experiment with the size and roundness of the corners of this shape to create your desired reflection effects.

When you are happpy with your second rectangle shape click the "Add Layer Mask" button at the bottom of the layers panel (shown above) This will turn the area into a mask so that you can add colour into that specific area.

Next select the gradient tool from the left hand tools menu. It can be found by holding down the left mouse button on the fill tool.

Since adding the layer mask you will notice that the colours in your palette have turned to black and white, these colours are used to define masks, in other words black areas are not seen.

Now with your gradient tool selected and the top options panel displaying the a black to transparent setting, click and drag from the bottom to the top of your new rectangle shape.

Once you let go you should be left with a faded white effect, in the confines of your new rectangle shape..

The only thing left to complete this effect is to set the "Opacity" level of this new masked layer, I have chosen to set it at 60%, but you can set this depending on how much of this masked area you wish to show.

Start off by creating a new layer (you can do this using the small document icon towards the bottom of the layers panel)

Now select the "Eliptical Marquee Tool" Not the "Elipse Tool, this will become apparent in the next steps.

Hold down the SHIFT key when drawing your circle as this will keep the aspect ratio and ensure that your circle is a perfect circle.

Fill your shape with a temporary colour, I have chosen grey but you can use anything.

Now create a second new layer above the first.

Then select the Select -> Modify -> Contract option from the top menu

After selecting the Contract option a small panel should appear simular to the above.

Now depending on the size of your circle the amount you enter in this box may change, for mine i have chosen to contract this selection by 12 pixels.

If you want to go back and adjust this setting afetr you have applied it use the Windows -> History panel.

Once you have contracted your selection by your chosen amount, fill this circle with a different temporary colour, I have used a darker grey.

You should now have two circles one on top of the other, and on seperate layers.

Next simular to the Rectangle Button tutorial ou will need to right click on the second/top layer and select the "Blending Options" option.

Then select the "Gradient Overlay" option from the left options. Now set the angle for the gradient effect to 45 degrees and click the gradient colour box above.

Once again simular to the rectangle tutorial you will need to choose two closely related colours in order to create a gradient effect over our circle shape.

As you can see I have used two closely related shades of red.

Then click "Ok" on the gradient selection and Bending Options panels.

Now right click on the top layer (the one you just edited) and select the "Copy Layer Style" option, then right click on the layer below containing your larger circle and select the "Paste Layer Style" option.

Now right click on the bottom layer and once again choose "Blending Options" then edit the gradient selection and swap the two colour sliders around (see above)

Create one more final layer above the others this time use the "Elipse Tool"

Now create another circle smaller than the rest, and position it in the center of your button.

Next just as in the previous tutorial click the small "Add Layer Mask" button for this new layer (see above)

Then select the "Gradient Tool" from the left side tools menu, now click and drag in the direction shown above.

This will as explained previously create a mask in the chosen direction so that only a portion of the circle shape is visible.

The final stage is to set the opacity of this layer so that this gradient mask effect is'nt so intense.

I have chosen 40% but you can set this depending on how much of this masked area you wish to show.

To create a slightly different version of this button that looks as thought its sticking out instead of in, simple miss out the second layer.

Create the first circle give it a gradient setting, then create a second circle using the "Elipse Tool", use the "Add Layer Mask" option and give it a directional mask as previously explained.

The final step is to give this button a shiny edge, this is done using the "Blending Options" panel.

Select the "Inner Shadow" option from the left side menu.

In the options set the Blend Mode to "Normal", colour to "White", Distance to "85px" and the Size to "0px"

Once you click "Ok" in the "Blending Options" panel you should end up with something simular to the above.

Well there you have it some really cool gradient buttons in minutes!

Be sure to play around with some of the settings, as it dosent take much to come up with different styles.