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!

It appears you are new around here. You may want to subscribe to my RSS feed or register for email updates. Thanks for visiting!