Quick and Easy Aqua Button

If you search Google for "Aqua button tutorial" you will get back a truckload of tutorials. Many of these come out looking very pretty. Most, however, have 20+ rather involved steps and the pill part of the button is very much linked to the graphic you are placing within the button, so that making a bunch of buttons is very time consuming since you have to go back to step 5 or 6 for each new button. Also, if you don't use the dimensions of the tutorial, figuring out what tweaks to make to step 8 of 20 is a little hard to gauge.

The following tutorial makes a roughly square button that you can just dump an image or text into. It's fairly simple so different sizes should be achievable without much work.

Couple of tips:

1. Have a color in mind for your button; write down the hex value for this color. Then create a darker version (this will be used for shading).
2. Ideally, make the image much bigger than you need and scale it down later. It ends up looking better. I *didn't* do this in the tutorial unfortunately.
3. The button consists of a body which has an inner shadow applied, another two layers that make the bottom part of the button "glow", and yet another layer above your text or image that adds highlights (a white colored reflection) to the top of the button.
4. Use "Save for Web" to save the pill, and save it using either GIF-128 or PNG format. PNG looks better but is not supported by older browsers.

Ok, lets get to the step by step instructions:

1. create a box with rounded edges by using the pencil tool, size 17, in the 4 corners use the box marquee selection tool and paint bucket with a dark version of your color (fill with #636363 for me). I call this the "pill body"
   
2. if you're fancy, fill the pill body with a gradient from a lighter version of your color or the color itself to the darker version; #636363 to the dark version #484848 worked for me
3. add inner shadow via blending properties. Use the dark version of your color, in my case, #484848 (make sure to set "global light" to off on the shadow! or further steps will break this step)
4. the inner shadow should create shadow at bottom and sides only (not the top); so adjust the light angle to be vertical up and down and adjust the "size" parameter until it looks good for your size of button
5. create a new layer, this will be the first glow layer (the bottom of the button glows)
6. create a radial gradient within the boundaries of the pill body, centered at the bottom, white to black. Transform width by 200% to make it wider
7. set blending mode to color dodge, 10% opacity (screen and overlay also work, though overlay gives a more pronounced effect)
   
8. transform by 200% again, this will create a new layer, glow layer #2
9. set blending mode to linear dodge, 10% opacity
10. select the original pill layer boundaries with the magic wand; select>invert and switch your layer selection to the two glow layers on top and delete their content outside the pill boundaries you selected with the magic wand
11. change primary color to white, and create a new layer-- this will be the highlight at the top of the button
12. select the original pill body shape with the magic wand and then switch back to highlight layer in the layer list
13. fill the highlight layer with a linear gradient; white at top, to transparent at about 75% down the height of the pill body
14. use the elliptical marquee (making a circle much bigger than the pill itself) to select the top half of the linear gradient, losing off a bit at the left and right side within the boundaries of your pill; then select>invert, cut the lower half of the highlight layer off, and about another quarter off the sides (you just want the top half to have the white reflection, and having a perfectly horizontal cut in the reflection doesn't look as good)
15. shrink the highlight layer to 93% width and 98% height, move the layer down a little so it doesn't touch the edges of the pill body
16. gaussian blur 0.5 the highlight layer to give it fuzzy edges
17. add your image or text below the highlight layer, but above the original pill and the glow layers
    

You may or may not want your button to have a shadow. I tried using the blending properties drop shadow effect, but it never looked really good. Measure out how much room you have and then follow these steps:

1. select the original pill body again with the magic wand
2. create a new layer
3. fill with a very dark version of your color (I just used black since my button is dark grey)
4. distort the top left and top right corners inwards so the shape has perspective-- the guides Photoshop shows should be a trapezoid shape
5. gaussian blur by 3.0
6. set opacity to 50 to 70 %, whatever you like
7. voila
   

That's all! The best part is you can reuse your button without much effort.

The following tutorial looks better but is more time consuming: http://www.webdesign.org/cat/photoshop/tutorials/aqua-style-button-with-photoshop.35.html