Photoshop Tutorial: Glossy Buttons

Create some shiny glossy buttons for your website’s menu system. This tutorial illustrates how to add a glossy finish to your buttons or other nifty shapes.

Step 1

Start with a new image about 400x400 pixels with a background color of your choice, (the example uses white). Make any kind of wacky shape you’d like for your button (for this tutorial I will show you one particular shape, though you can use any shape you can imagine). Start by creating a new layer and using the Rectangular Marquee to draw a rectangle roughly the size you want your button to be.

Step 2

Open the Channels palette and create a new channel. Fill the selection in with white, and deselect by pressing Cmd+D (PC: Ctrl+D). Now go to Filter » Blur » Gaussian Blur and use a setting of about 3.5. Click OK. Next go to Image » Adjust » Levels and drag the two bottom triangles towards the center until the button looks nice and smooth (see the example below). Click OK when done. Hold Command (PC: Control) and click on the “Alpha 1” channel to select it. Click the Layers tab to return to the Layers Palette.

Step 3

Create a new layer, make that layer current, and then fill your selection with your chosen color (the example uses #ff7e00, and deselect by pressing Cmd+D (PC: Ctrl+D). Now to make the button more interesting go to Edit » Transform » Perspective. Drag the bottom right point inwards so that your button is shaped similar to the example (or of course feel free to experiment with other shapes).

Step 4

Now, to make the highlight, create a new layer. Using the Freeform Pen. Ensure that the “Paths” options is selected in the Options bar, and not “Shape Layers”. Draw a rough wiggle circle around the top of the shape as seen in the example. Once you have your path, right click and choose “Make Selection”—use the default settings. If the path is still visible under the selection, right click again and choose “Delete Path”. Now create a new layer and fill the selection in with white.

Step 5

Next hold Command (PC: Control) and click on “Layer 1” to select it. Go to Select » Modify » Contract and enter 1. Now go to Select » Inverse. Make sure you have “Layer 2” active and hit delete. Now hold Command (PC: Control) and click on “Layer 2” to select it then hit the Delete key about 4 times to completely get rid of the white. Do not lose the selection.

Step 6

Now press D then X to reset and flip the colors. Select the Gradient tool and ensure that it is set to Linear mode. In the options tab change the gradient type to “Foreground to Transparent” and drag the gradient from the top of the selection to the bottom. You should now get a highlight effect. If you’d like you can save the selection for later use by choosing Select » Save Selection » OK. Then press Cmd+D (PC: Ctrl+D) to deselect. If the bottom of the highlight isn’t as well-blended into the rest of the button as you’d like, choose Filter » Blur » Gaussian Blur and add as much blur as needed to soften the edge of the highlight.

Step 7

You have the highlight, now you need the dark shadow. Do the same as before, using the Freeform Pen draw a wiggly line across the bottom of your button (see the example). Again, right click and choose “Make selection”, use default settings, and if applicable, right click and choose “Delete Path”. Now create a new layer—don’t lose the selection.

Step 8

Create a new layer, select the layer and fill the selection with black. Hold Command (PC: Control) and click on “Layer 1” to select it. Go to Select » Modify » Contract and enter 1. Then, go to Select » Inverse and with “Layer 3” active in the layers palette, hit delete. Now hold Command (PC: Control) and click on “Layer 3” to select it, hit the Delete key about 4 times to remove all the black—do not lose the selection.

Step 9

Now set black as your foreground color, and using the Gradient tool at foreground to transparent still, drag from the bottom of the selection to the top (you may want to drag from a spot a bit below the selection and stop right at the top, so that the gradient won’t appear too dark). Then deselect by pressing Cmd+D (PC: Ctrl+D). Now you may want to blur the black shadow a little using Filter » Blur » Gaussian Blur (the example uses a setting of 3.0, with the layer’s opacity lowered down to between 40-60). The button is now complete, so if you’d like to add a drop shadow at this point, select “Layer 1” and choose Layer » Effects » Drop Shadow, and adjust the settings to your preference.

Step 10

When you add text make it the same color as the button but a lot darker. To make it look like it’s inset into the button’s surface, make a copy of the text layer by dragging it to the New Layer icon in the Layers Palette. Drag the new copy layer below the first text layer and change the color of the duplicate text to white. Hold down Command (PC: Control) to temporarily enable the Move Tool, and using the arrow keys on your keyboard, move it up a pixel and left a pixel. Set the layer blend mode to “Color Dodge”. Go to Layer » Type » Render Layer (or depending on your version, right click on the text and choose Rasterize Type), and then Filter » Blur » Gaussian Blur, choose a setting of about 1.0. Finally, turn the bottom text layer’s opacity down to about 50% and you’re done.

Step 11

Don’t stop there though. Make some wacky shapes and see the cool effects you get. Just experiment and see what you can come up with.

Note: This tutorial was originally authored by my friend Rob, of Robouk. This revised version is available on Absolute Cross with his permission.

Really difficult, because the delete key doesn’t work on Photoshop CS4 I can’t follow your instructions to completion. Very frustrating. I wish there was an easier way to create a gloss or shine effect. Thank you for the time you took to prepare this tutorial

1

Your instructions are actually difficult to follow, I tried in Photoshop CS3 not been able to complete till now its been 4 hours.Actually I need this button for my site frankenfish.com I hope I will be to make it in next couple of hours. However I would like to thank you for the tutorial.

2

Hey guys… I’ll run through the tutorial myself using CS4 and see what the issues are. This tutorial was originally written for earlier versions of Photoshop (perhaps before CS) so there may be issues to iron out for newer versions.

3

Tried it in Photoshop 6 — no luck either. Step 2 is missing some bit of key information.

4

nice tutorial work good with cs5

5

very nice tutorial thanks! i love glossy buttons!

6

Awesome Tutorial !!! Thanks for the posting !

7
Back to top