Aqua Buttons

1) To make your aqua button, first start by drawing a rounded rectangle using the shape tool and a radius of 30px (the radius can be changed in the tool bar at the top once the shape tool has been selected. Once the shape has been drawn go to Layer > Simplify Layer.

2) Hold control and click on the shape layer to select it. Now select the gradient tool . In the menu bar at the top click on Edit to bring up the gradient editor.

At the bottom of the gradient editor we can see the area that lets you manually edit the gradient. The two small boxes circled in red represent the two colours in the gradient, while the boxes circled in blue represent the Opacity (or transparency) of that particular colour in the gradient. Clicking on one of the colour boxes allows you to change the colour of the gradient in the little colour menu below, and likewise click on the boxes above allows you to change the opacity of the corresponding colour.

3) Set one of your colours to the colour of your rounded rectangle and the other one to black, keeping both opacities at 100%. Click OK.

4) Back on the page position the pointer at the bottom of the shape then click and hold the mouse and drag it halfway up the shape and release. Your shape should now look something like this:

5) Make sure the Layer is still selected (dashed line around the outside) and then create a new layer. Now go to Select > Modify > Contract and enter a value of 3 px.

6) The selection should now have shrunk a little. Go back to the gradient editor and this time set one edge to white (100% opacity) and the other to the original shape color (0% opacity).

7) With the gradient tool create a gradient starting at the top of the contracted selection and dragging down about a third of the way. The shape should now look like this:

8) Now go up to Filter > Blur >Blur More and apply it 2 or 3 times to the highlight layer. The button is now almost complete. Add a new layer above the original shape but below the other layer. This is where we can now write our text to complete our button.

Remember to save this as a .PSD file first, and then Save for Web. You can now go back change the text and Save for Web under a different name, so you only ever need one template file to create all your buttons. Have fun with aqua buttons.