MAC OSX Buttons

Step 1.

Open an existing document of any size, or create a new one. I will be working on a sample grid background that you see on all OSX alert and prompt boxes.

Step 2.

Create a new layer, and name this layer 'button base'. Get out your rectangular marquee tool ( ) and make a square selection as I've done here:

Step 3.

Go to Select->Modify->Smooth with a setting of 6 pixels:

Result:

Step 4.

Set your foreground color to: #373EA3 and your background color to: #94DDF6

Now get out your gradient fill tool ( ), and set it up with a foreground, to background gradient as I've done here:

Now fill in your selection with a dark to light gradient as I've done here:

Do not deselect the selection.

Step 5.

Double click this layer, and apply the following blending options:

Drop Shadow:

Result:

Do not deselect the selection.

Step 6.

Create a new layer, by pressing Ctrl+ Shift + N on your keyboard.

Your selection should still be active, if not hold down the Ctrl Key on your keyboard, and click the layer named "button base".

Get out the rectangular marquee tool ( ). Now while holding down the Alt key on your keyboard deselect the bottom half of our selection as I've done here:

Set your foreground color to white (#FFFFFF), get out the gradient fill tool ( ) and set your gradient style to "foreground to transparent":

Now fill in this selection with our gradient, with a white to transparent, like I've done here:

Press Ctrl + D on your keyboard to deselect the selection

Step 7.

Next press Ctrl + T on your keyboard to get out the free transform tool.

Here's how your screen should look:

Now hold down the Shift + Ctrl + Alt keys on your keyboard, place your cursor near the node (small square) in the bottom left corner of the box and drag it slightly inward as I've done here:

Press return on your keyboard to finalize the transformation, result:

Step 8.

Now press the V key on your keyboard to get out the move tool. and tap the down arrow on your keyboard once, to nudge the gloss down one pixel, result:

Step 9.

Drop the opacity of this layer down to 80 percent as I've done here:

This should lighten it up, just a little bit.

Step 10.

The only thing left to do is add some text to this bad boy and call it good. The text that is used on the actual Mac OSX buttons is a 12pt Verdana, with the Sharp setting:

Try changing the colors used in step #xx to get a different looking button, as I've done below you'll see I used a pale grey, and a slightly shaded white color for the 'continue' button:

I hope you've had fun learning this technique!