Photoshop Web Layouts - Blue Gel Tab Menu

In this Photoshop Tutorial I will show you how to create the Blue Gel Tab menu in my image. Please see the image that I have provided to see the ending results. You may need to click on the image to enlarge it. These tab menus are used on many websites and I think they look great. They really spice a site up. I will write this tutorial in detail so that the new Photoshop users can create the tab menu too.

How to Create a Blue Gel Tab Menu in Photoshop

Step 1 - Create a New Canvas
Open your Photoshop program and let it load. Then click File > New at the top of your Photoshop window. Create the canvas 450 pixels by 450 pixels. You can crop the canvas at the end. Set the background to whatever color you need. Then click OK to close that box.

Step 2 - Create a New Layer
Next, you will need to create a new layer to work on. Go to the top of your Photoshop window and click Layers > New > Layer and name your Layer Button. Then click OK.

Step 3 - Drawing your Button
Click on the Shape Tool in your toolbar and hold it down until the menu drops down. Then click on Custom Shape Tool. Drop the Shape box down at the top of your window and click the little arrow on the right. Click on Web when the menu drops down. 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.

Step 4 - Rasterizing and Blending
Right click on the Button Layer in your Layers Panel and click Rasterize Layer. Rasterizing the layer will make the edges of the button smooth. Right click again on the Button Layer and click Blending Options. You will need to apply the following effects to your button.

Inner Shadow

Blend Mode - Multiply
Color - # 316999
Opacity - 85%
Angle - 90
Distance - 11
Choke - 25
Size - 23
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Inner Glow

Blend Mode - Multiply
Opacity - 50%
Noise - 0
Color - # 003c5e
Technique - Softer
Source - Edge
Choke - 0
Size - 8
Contour - Linear
Anti-aliased - Unchecked
Range - 50
Jitter - 0

Bevel and Emboss

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

Contour

Contour - Rolling Slope - Ascending
Anti-aliased - Checked
Opacity - 90%

Satin

Blend Mode - Overlay
Color - #05609a
Opacity - 100%
Angle - 90
Distance - 38
Size - 38
Contour - Ring
Anti-aliased - Checked
Invert - Checked

Color Overlay

Blend Mode - Normal
Color - # 00b2b8
Opacity - 100%

Click OK on the Blending Options windows.

Next, we will duplicate the other buttons. Right click on the Button Layer and click Duplicate Layer from the menu. Click OK on the window that pops up. Grab your Move Tool and move your duplicated button over. When you duplicate a button the duplicated button will be directly on top of the original button. So you will need to use the Move Tool to move it. Continue doing this until you get all the buttons that you need. Then you can add the text to the buttons.

If you have any problems with this Photoshop tutorial, please feel free to leave me a comment at the bottom of this page.