Web Domination Using Photoshop

Making a Glass Button

In this solution, we're going to create an eye-popping glass button that's particularly effective when it's overlaid on photographs and non-solid backgrounds.

Example of glassy button

Solution

1. Start with a vector button of any shape in a color that blends in with your background. Here, I'm using a pink that I color-picked from the sunset image onto which I'm going to place my button. Set the fill for the button layer to 0%.

Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss... from the menu that appears. Apply the settings used here, which are illustrated in the dialog below:

• Style: Inner Bevel
• Technique: Chisel Hard
• Depth: 800% or larger (depending on the size of your button)
• Direction: Up
• Size: 13px (You may need to adjust this later.)
• Soften: 7px
• Angle: -65°
• Altitude: 65°

Bevel and Emboss settings for the glass button

• Gloss Contour: Rolling slope-descending (Set this by clicking on the dropdown arrow next to the contour shape and choosing the Rolling slope descending option, as depicted below.)
• Highlight Mode: White, 75%
• Shadow Mode: Dark gray, 75%

Setting Gloss Contour

Your button should be looking like the one shown below.

After applying a Bevel and Emboss effect

2. In the Layer Style dialog box, click on the Contour style under Bevel and Emboss to select it. Click on the thumbnail image of the contour to bring up the Contour editor, shown here.

Changing the contour curve

3. Select and move the bottom-left point of the contour until it's positioned just above the first horizontal grid marker. Then, click on the contour line to add another point and drag it to form a curve.

The image below shows our button after the contour effect has been applied.

After applying the Contour effect

4. Not bad, huh? Now, select the Satin layer style and apply the settings shown here:

• Blend Mode: Overlay; black
• Opacity: 30-40%
• Angle: 126°
• Distance: 4px (You may need to adjust this later.)
• Size: 10px (You may need to adjust this later.)
• Contour: Cone-inverted

Applying the Satin layer style

5. Select the Drop Shadow layer style. Change the Distance to 4px, the Size to 10px, and the Opacity to 50%, as shown in the example below.

Applying a drop shadow

At this stage, our button's looking quite glassy, as can be seen below.

Satin and Drop Shadow layer styles applied

6. All we need to do now is add a simple text layer with a slight drop-shadow! Your completed button should look like the image below.

Completed glassy button

You can easily copy this layer style to other shape layers. When you do, remember to set the new layer fill to 0%. Experiment with the layer effects to change the look of your button. The images below show variations of my glass button.

Glassy button style applied to different shapes

Bevel and emboss shadow set to 20% opacity