Aero Glass Button

0

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Enter your email address:

Never Spam

This tutorial demonstrates how to create a aero glass style button using Adobe Photoshop and explains how to style the text within the button to achieve a really neat glassy button effect. This type of button works best on a darker color background, but this is essential for the effect to work.

Step 1

Create a new file and fill the background with black or a very dark gray. In this example I have used a 300×100 pixel canvas and background color #343434.

Step 2

Create a new layer (Ctrl+Shift+N), then select the rounded rectangle tool and set the radius value to 8 pixels. Draw a thin rectangle in the center of your canvas like this:

Step 3

Select the layer that contains the rectangle that you just created and open the layer style menu (Layers > Layer Style > Blending Options). Then apply the following effects just as I have done:

The resulting image should look like this:

Step 4

To select the entire button image load the selection (Select > Load Selection). Next, using the Rectangular Marquee Tool while holding down the Alt key, subtract the bottom half of the button from the selection like this:

Then contract the selection by 1 pixel (Select > Modify > Contract). Your canvas should now look like this:

Step 5

Create a new layer on top of the current layer and fill the selection with white using the Pint Bucket Tool. Set the new layer to an Opacity of 24%.

Step 6

Type out some white text into a new layer and center over the button. I used Trebuchet MS size 4pt for this example.

Step 7

With the current text layer chosen, open the layer style menu (Layers > Layer Style > Blending Options). Then apply the following effects just as I have done:

The resulting image should look like this:

If you work through this tutorial let us see how it turns out - post a link in the comments to share your work. Good luck!