How-To Photoshop Tutorial: Glossy Buttons

CREDIT WHERE DUE: I learned this technique from the Absolute Cross Glossy Button Tutorial, although I have changed it and do it differently now.

Use the rectangle/ellipse/custom shape tool or pen tool to draw a shape. Fill it with a color. I'll use #ff9900, Squidoo Orange.



Tip: to make a tab, draw a Rounded Rectangle, use the Pen Tool set on "Delete Anchor Point" to delete the top two points, then use the Pen Tool set on "Convert Anchor Point " to convert the remaining two top points to sharp corners instead of rounded.

1. In the Layers Palette (Choose "Layers" under the "Window" menu, click the small notepad icon on the bottom right to make a new layer.

2. Use the Lasso to make a selection across the top of the button. You may want to choose "Select > Modify > Smooth..." to smooth the edge of your selection 5-10 pixels.



3. Choose the Gradient Tool (Click on Paint Bucket and hold to get it). Choose Linear Gradient from the options in the control strip on the upper lefthand controls.

4. On the upper lefthand controls, double-click on the gradient swatch to edit the gradient. Change the bottom left color stop to white, so that the gradient is from opaque white to transparent white.



5. Fill the selection with the gradient, dragging from top to bottom.



6. Filter Menu > Blur... > Gaussian Blur.. My canvas is 250x130pixels, and I found a Gaussian Blur radius of about 10pixels worked.



This already looks pretty good, but let's add a bit more of a 3-D edge to the highlight. Save the document in .psd format before continuing, as the following sometimes takes a little fine-tuning to get perfect.

7. In the Layers Palette, click on Shape 1 (the orange button).

8. Choose the Path Selection Tool (arrow midway down Tools Palette on left).

9. Right-click (Ctrl-Click on Mac) on the button to get a popup menu and choose Make Selection. Pick New Selection. (No feathering)

10. In the Layers Palette, click on the highlight's layer.

11. Choose the lasso or marquee selection tool.

12. Use the arrow keys to move the selection 2-3 pixels down and to the right.

13. In the Select menu, choose Inverse.

13. In the Select menu, choose Feather... about 5 pixels.

14. Delete.



Remember you can use Step Backward under the Edit menu if you're not quite satisfied with the result and want to try again. Or Revert under the file menu.

1. In the Layers Palette, click the small notepad icon to make a new layer.

2. Using the lasso, select the bottom area... maybe a bit more to the right than left.



3. Choose the Gradient Tool and click on the Gradient swatch to edit. Change the bottom stops to black.



4. Fill the selection with the black-to-transparent gradient, dragging from below the selection up to the edge of it. Don't worry, we haven't ruined it!



5. Deselect and Gaussian Blur again.



6. In the Layers palette, click on Shape 1's layer.

7. Choose the Path Selection Tool. Right-click (Ctrl-Click) the shape to get that popup menu and choose Make Selection.

8. In the Select menu, Select Inverse. This time, NO feathering.

9. In the Layers Palette, click on the shadow's layer.

10. Delete.



11. In the Layers palette, reduce the opacity to about 20%.

12. In the Layers palette, click the arrow button at upper tight to "Duplicate" the layer.

13. For the new layer, change "Normal" blending mode to "Overlay" and set opacity to around 80%. You may want to fiddle with the opacity of the "Normal" and "Overlay" shadow layers.



13. In the Layers palette, click on Shape 1.

14. Under the Layer menu, choose Layer Style > Drop Shadow...

15. Set the distance to about 2 and the opacity to about 50%. Click OK.

Time to add a white icon and/or text to the button. You can use a dingbat font, the Custom Shape tool, or a drawing, but if you're not using text, the shape needs to be a silhouette filled with flat white.

I'm going to use text for this demo. Arial Black is a good font because it's big and blocky.

1. Text tool, Arial Black, 40pt, WHITE color:

2. Choose Layer Style > Inner Shadow... from the Layer menu.

3. Double click on the (black) color swatch. Pick up the dark color from the darker parts of the shadow.

4. Reduce the distance and size by a few pixels until the letters/shape are crisp. Here's Distance: 4pixels, Size: 3pixels.



5. Click Blending Options and set the Fill opacity to about 50%.

6. Pick Inner Glow. Double-click the color swatch to make it white.



All done! Phew!

This tutorial works on almost any shape. Sometimes a Radial Gradient may work better.

Also, try using the Layer Style > Pattern Overlay on the colored Shape that makes the button. A subtly textured pattern can look snazzy! (See the round button for an example.)




In the two pentagons, I noticed the 3-D effect wasn't that strong in the "raw" version (left) and enhanced the Layer Styles as follows (right):

Inner Shadow

• Double-clicked color swatch, selected a color from the shaded area and darkened it slightly.
• Unchecked "Use Global light."
• Set the angle to 20 degrees (found by experimenting).
• Distance: 7px
• Size: 46px.

Inner Glow

• Color: white.
• Blend Mode: Lighten.
• Opacity: 6%
• Size: 24px

Satin

• Color: default black.
• Blend Mode: Overlay.
• Angle: 20 degrees
• Distance: 36px
• Size: 95px

The whole doument is about 250x230, so adjust sizes accordingly.

Credit and Thanks

This tutorial is partly based on the Glossy Button Tutorial by Robouk@Absolute Cross, where there are several excellent Photoshop Tutorials. However, I've simplified, added to, and changed the way I do it, including adding an Overlay layer and making a completely different style of text.

Suppose you have a logo you want to put on a button? Here's a way to prepare it.



1. Select All, Copy, and Paste, to get a copy of the original logo in its own layer.

2. Click the Magic Wand in the background, tolerance about 20, anti-aliased (It will vary.) Your goal is to get as little white as possible around the logo's outline.

3. Select > Modify > Expand 1 pixel.



4. Layer > Add Layer Mask > Hide Selection.

5. You may want to deselect and fill the background/bottom layer with a color to see how good the edges are.



Not bad, but I see a little bit of white sneaking into the lower righthand part. The good thing is, the original picture hasn't changed -- it's just masked. So we can tweak the mask without disturbing the picture.

Click on the Channels tab on the layers palette. Click on the blank square next to the mask at the bottom to turn it into an eyeball (visible). Whoa! What's this?



The masked area is indicated by a transparent red color so we can see where the mask is. The red will disappear when we go back to normal view.

6. Zoom in. Now, to ADD to the mask (part that's hidden), paint with black. To DELETE part of the mask, paint with white or erase. Gray is semi-transparent. I'm using a 3-pixel brush with about 90% hardness to get a bit of feathering.

7. When you've got the mask looking good, click the Layers tab on the Layers palette, then click on any layer to switch back to normal editing mode.



You may wanna save that logo-separated-from-background file in PSD format; it comes in handy.

8. Image menu > Adjustments > Desaturate.

9. Drag the logo onto another document where you've prepared a button. Whoops! Too big.



10. Edit menu > Transform > Scale... to shrink it.

11. In the Layers palette, change Normal blending mode to Screen. (You might check and see what Difference, Exclusion, Linear Dodge and even Color Burn look like. Sometimes they come out spiffy.)



12. You may want to reduce the contrast somewhat if the logo has very bright and dark areas. That's > Image > Adjustments > Brightness/Contrast...

Now do #2-6 in Step Four: Add Text or Icon.

Ta-da! Not perfect, but not bad!



(This was where I realized I'd forgotten a drop shadow on the blue button, and as long I was doing that I added the extra "Layer Styles" mentioned in Finishing Touches above to help the logo pop out better.)

Below is my original glossy button tutorial. I'm not entirely satisfied with how fuzzy these are, but you can get several different effects this way. Also, the buttons are entirely vector graphics, so they're easier to scale. Here's two examples of what this tutorial makes:

Glossy Button

Bevel turned off

Different shape

1. Pick a color.

2. Pick the Shape Tool and choose Ellipse.

3. Holding down the shift key, drag and draw a circle.

4. Open the Layers Palette under the "Window" menu and name it Circle.

1. Choose "Layer Style > Gradient Overlay" from the "Layers" menu.

2. Double-click on the gradiant swatch. We're going to make a new gradient.

3. a) Click the upper left black box on the gradient and set the opacity to 75%. b) Click on the upper right black box and set the opacity to 0%.

4. Click the lower left box and set the color to white.



5. Click OK.

6. Set the Style to Radial. Set the opacity to 80%.

7. Click on the circle in the main window, and drag the highlight down so the brightest part is at the edge of the circle.

1. Still in the Layer Style Palette, click "Inner Glow."

2. Click on the color swatch to get the eyedropper. Pick a light color from the circle in the area with the highlight.

3. Set the size to 25 or so. (This is assuming you've made the circle large as I have.)

4. OPTIONAL: Click "Bevel and Emboss."

5. Set the size to 15. Add a bit of softening.

6. Click the shadow color swatch. Click on your circle to pick up its default color. Then pick a darker version of that color.

7. Click OK to set the color, then OK to close the palette.

1. Click the Move Tool (arrow, upper right part of palette).

2. While pressing option (Alt), click and drag the move tool upwards on the circle to create a new copy. Use the shift key to move a circle straight up, until only its lower half is covering the circle below.

3. Choose "Layer Style > Inner Glow..." from the "Layers" Menu.

4. Turn OFF Inner Glow. Turn OFF Bevel and Emboss.

5. Under "Blending Options: Default", set the Fill Opacity to 0%.

6. Click on Gradient Overlay. Place your cursor on the circle in the main window and drag the highlight up until it's centered within the top circle (brightest highlight will be on the edge of the original circle).

7. Double-click the gradient swatch to get the Gradient editor.

8. a) Click on the upper left black square (opacity stop). b) A small diamond will appear between the left and right opacity stops. Drag it to a location of about 60.



9. Click OK.

10. Set the overall opacity of the Gradient to about 60%.

11. Click OK.

12. On the Layers Palette, name this layer Highlight.

1. Click on the "Circle" layer on the Layers Palette.

2. Click on the small triangle button at upper right on the Layers Palette and choose "Duplicate Layer".



3. Select "Layer Style > Bevel and Emboss..." from the Layers Menu.

4. Turn OFF Bevel and Emboss, Inner Glow, and Overlay.

5. Turn ON Drop Shadow. Try a Distance of 10px and a Size of 13px.

6. In Blending Options, set the Fill Opacity to 0%.

7. Click OK.

8. In the Layers Palette, click and drag the Highlight Layer so it's under the Drop Shadow Layer, above the Circle Layer. That keeps the highlight on the button but avoids lightening the Drop Shadow.

Now you need a shape, words, or graphic to stamp onto the button.

Try the Custom Shapes tool and click the Custom Shapes palette at top to select a shape. Or try a Dingbat font and use a dingbat. (You can also Google for "free Dingbat fonts". If you need to use an existing logo or picture that's a JPG, you'll have to use the magic wand, lasso tools, or eraser to cut it away so it's a silhouette.

For this example, I'm going to use the fat arrow in the Custom Shapes palette.



1. Pick a shape.

2. Click on the "Circle" layer in the Layers Pallete.

3. Draw the shape over the button.

4. a) On the ribbon up top, click the "Style" icon and click the "no style" (square with red slash through it) to remove the bevel, highlight, etc. b) Click the Color swatch up there to set the color to white.



5. Choose "Layer Style > Blending Options..." from the "Layer" menu. Set the General Blending opacity to 75%.

6. Turn on "Inner Shadow."

7. In "Inner Shadow," click on the black color swatch. Use the eyedropper to pick up the default color of your circle (someplace with no highlight or shadow). Adjust on the color picker until you've got a darker version of that color.

8. Click Okay, Okay again.

9. Use the Crop tool to crop the document down to just the button and drop shadow.

10. Save the document in .psd format and keep it as your template.

11. To resize, chose "Image Size..." under the "Image" menu. You may have to adjust sizes of drop shadows and bevels after shrinking.

You're done! Fiddle with bevels, shadows, and other Layer Styles to see what other magic you can work on it.

Glossy Button

Glossy Button with Bevel turned off, Inner Glow upped to 40px