Bluefaqs

Photoshop: Design A Clean Glossy Button

Posted on 04. Aug, 2009 by Shawn Ramsey in Design

Glossy web 2.0 buttons and tabs have always been desirable among designers. You could argue that these shiny buttons are just a fad but lets face it, they’re not going anywhere anytime soon. You see them in operating systems such as Windows Vista, browsers like Firefox and they still make their way into some web designs. To help you create your own, I present you with a simple Photoshop tutorial to help you design your own clean glossy web 2.0 button.

Step 1:

Create a new document 400px X 200px.

Step 2:

Draw a Rounded Rectangle with a Radius of 8px on a new layer the shape of the button you want. The color of the button does not matter at this point.

Step 3:

Right-Click on the layer and choose Blending Options… change each option as noted below.

Inner Glow

Bevel and Emboss

Gradient Overlay from the color 1d608b to 2f93c7.

Stroke using the color 2f93c7.

You button should now look similar to this:

Zoomed In View

Step 4:

Create a New Layer and use the Elliptical Marquee Tool (selection tool) to draw out a selection similar to the example below.

Step 5:

Now drag out a Gradient from top to bottom over the selection using White to Transparent with Soft Light as the mode.

On the same layer, change the Fill to 20%. (*Drop the Fill % down to what ever looks good on your button. Depending on the distance that your gradient was dragged over the selection your Fill % could be much higher or lower.)

Your button should look similar to the image below.

Step 6:

We now need to get rid of the shine where it overlapped the edge of the button. While holding down the CTRL button on the keyboard, Left-Click on the Layer thumbnail that contains the button (not the last layer you created) so that the entire button is selected. Now choose Select>Modify>Contract and choose to Contract By: 2 pixels.

Step 7:

Now go to Select>Inverse (to select the opposite of the selection) and select the last layer you created, the one where the Elliptical Marquee Tool was used, and press the Delete button once while the inverse is still highlighted.

Your button should now look like this.

Step 8:

Now just add some Text. I find that a clean font such as Eras Demi ITC or Lucida Bright work well, but use what ever fits the style of your project.

Adding the text really puts the whole thing together.

YOU MAY ALSO ENJOY:

• 30 Watercolor Tutorials and Brush Sets for Photoshop
• How To Create An Arrivals Board Effect In Photoshop
• 30+ Scribbles And Doodles Photoshop Brush Sets
• Photoshop Shortcuts - The Fun Way
• 200+ Seamless Grunge Patterns For Designers

Tags: Photoshop