how to create glossy buttons for website using photoshop

In this tutorial we are going to re-create those fancy buttons that are used on Mac OSX.

how to create glossy buttons for website using photoshop

Step 1: Create a new document of any size in Photoshop.

Step 2: Create a new layer by pressing Ctrl+J. Name this layer ‘Layer 1’. Select Rectangular Marquee Tool and make a square selection as I’ve done here:

Step 3: Go to Select->Modify->Smooth with a setting of 30 pixels:

Step 4: Set your foreground color to: #373fa4 and your background color to: #8dddf8

Step 5: Now select a Gradient Tool(G), 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  6: Double click this layer, and apply the following blending options:

Do not deselect the selection.

Step 7: 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 “Layer 1”.

Select Rectangular Marquee Tool. Now while holding down the ALT key on your keyboard deselect the bottom half of our selection as l’ve done here:

Step 8: Set your foreground color to white (#FFFFFF), select Gradient Tool(G) and set your gradient style to “foreground to transparent”:

Step 9: 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 10: Next press CTRL + T on your keyboard to get out the free transform tool.
Here’s how your screen should look:

Step 11: 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 l’ve done here:

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

Step 12: 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 13: 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 14: The only thing left to do is add some text. I select the 36pt Verdana, with the SHARP setting:

Here’s my final result:

Thank You!