Photoshop Web Layouts - Clear Glass Tab Menu

In this Photoshop Tutorial I will show you how to create a Clear Glass Tab Menu. These tab buttons make great buttons for websites. You can place this tab menu on any color background and it would look great. There are two parts to creating these buttons. First you create however many buttons you need. Then you type your text on them.

How to Create a Clear Glass Tab Menu in Photoshop

First, we will start out by making the buttons.

Open Photoshop and let it load. Then create a new canvas by clicking File > New at the top of your Photoshop window. Create the canvas about 500 pixels by 500 pixels. You can crop the canvas after you are done. Set the background to whatever color you need. Then click OK.

At the top of your Photoshop window click Layers > New > Layer and name your Layer Button. Then click OK.

Click on the Shape Tool in your toolbar and hold it down until the menu drops down. Then click Custom Shape Tool. At the top of your Photoshop window you will see the word Shape and a drop down box beside it. Drop that box down and click the little arrow on the right. Click on Web. Click OK on the pop up box. Click on the black rectangle in the box. When you hover your mouse over it, it will say Tabbed Button. Draw your button on the canvas whatever size you want it.

Right click on the Button Layer in your Layers Panel and click Rasterize Layer. Right click again on the Button Layer and click Blending Options. When your Blending Options window opens, enter the following effects below.

Inner Shadow

Blend Mode - Multiply
Color - # 9f9e9e
Opacity - 25%
Angle - 90
Distance - 11
Choke - 26
Size - 21
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Inner Glow

Blend Mode - Multiply
Opacity - 52%
Noise - 0
Color - # 9f9f9f
Technique - Softer
Source - Edge
Choke - 0
Size - 5
Contour - Linear
Anti-aliased - Unchecked
Range -50
Jitter -0

Bevel and Emboss

Style - Inner Bevel
Technique - Smooth
Depth - 110%
Direction - Up
Size - 12
Soften - 2
Angle - 90
Use Global Light - Unchecked
Attitude - 68
Gloss Contour - Linear
Anti-aliased - Checked
Highlight Mode - Screen
Color - White
Opacity - 100%
Shadow Mode - Multiply
Color - Black
Opacity - 0%

Contour

Contour - Gaussian
Anti-aliased - Checked
Opacity - 75%

Satin

Blend Mode - Overlay
Color - White
Opacity - 100%
Angle - 90
Distance - 35
Size - 35
Contour - Ring
Anti-aliased - Checked
Invert -Checked

Color Overlay

Blend Mode - Normal
Color - # f5f5f5
Opacity - 100%

This effect is optional. I applied a Stroke Effect to mine. But you may like yours better without the Stroke Effect. Here is the Stroke Effect that I used.

Stroke

Size - 1
Position - Outside
Blend Mode - Normal
Opacity - 100%
Fill Type - Color
Color - # 636262

Click OK on your Blending Option window when you are done.

Now we need to make the other buttons. We are simply going to Duplicate the button we just made. Duplicate the button however many times you need to. If you need 5 buttons then Duplicate the button 4 times. Right click on your Button Layer and click Duplicate Layer. Click OK on the box that pops up. Repeat this step until you have as many buttons as you need.

After you have completed that, you can add your text to the buttons. Create a new layer for each text that you put on the button. You can use whatever font, color, and size you want.

When you finish with your menu, you can crop it to whatever size you need. Please see the image that I have provided to see the ending results. If you have any problems with this Photoshop tutorial, please feel free to contact me using the contact button at the top of this page.