Photoshop Web Layouts - Clear Gel Menu with Blue Arrows

In this Photoshop Tutorial I will show you how to create a Clear Gel Menu with Blue Arrows. This is a really cool menu. There are three steps to this menu. First, we'll create the buttons. Next, we'll create the arrow. Then we will add the text. After we make the first button we can duplicate the other ones that we need. You can use whatever font and color that you want. I just thought this one went really well with the buttons. So, let's begin..

How to Create a Clear Gel Menu with Blue Arrows

Open your Photoshop program and let it load. Create a new canvas about 500 pixels by 500 pixels. Click File > New to create a new canvas.

Create a new layer. Name the layer Button. Select the Rounded Rectangle Tool and set the Radius to 10px. Then draw your button on your canvas.

Rasterize your Layer. Right click on your Button Layer and select Rasterize Layer from the pop up menu. Then right click the Button Layer again and select Blending Options from the pop up menu. Apply the following effects below to create your button.

Inner Shadow

Blend Mode - Multiply
Color - # 989898
Opacity - 25%
Angle - 90
Distance - 12
Choke - 23
Size - 22
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Inner Glow

Blend Mode - Multiply
Opacity - 55
Noise - 0
Color - # 9a9a9a
Technique - Softer
Source - Edge
Choke - 0
Size - 6
Contour - Linear
Anti-aliased - Unchecked
Range - 50
Jitter - 0

Bevel and Emboss

Style - Inner Bevel
Technique - Smooth
Depth - 110
Direction - Up
Size - 11
Soften - 3
Angle - 90
Use Global Light - Unchecked
Attitude - 66
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
Range - 90%

Satin

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

Color Overlay

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

Stroke

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

Click OK on the Blending Options window.

Now we will create the arrow.