Photoshop Web Layouts - Blue and Clear Gel Bow and Heart Menu

In this Photoshop Tutorial I will show you how to create the Blue and Clear Gel Bow and Heart Menu. This is a menu with a Blue Gel Bow and Clear Gel Hearts dangling from the box. This is a really pretty menu and would make a great menu to put on your website. First, we will create the Bow. Then we will create the heart buttons. After we have finished those two, we can add text. I will write this tutorial in detail so the new Photoshop users can create this menu too. Please see the image that I have provided to see the ending results.

How to Create a Blue and Clear Gel Bow and Heart Menu in Photoshop

Create a new canvas. Click File > New to create a new canvas. Set the size to 500 pixels by 500 pixels. You can crop it once we are done. Set the background to white and click OK.

Click Layer > New > Layer and name your layer "Bow". You will see your new layer in your Layers Panel. Press F7 if you do not see your Layers Panel.

Click on the Shape Tool in your toolbar and hold it down. When the menu drops down, click Custom Shape Tool. At the top of your Photoshop window you will see a drop down box beside the word Shape. Drop that box down and click the arrow on the right. Click "All" when the menu drops down. This will load all of your shapes in your Shape Box. Click on the Bow Shape and draw a Bow about the size of mine on your canvas.

Left click on the Bow Layer to highlight it. Right click on the highlighted layer and click Rasterize Layer from the pop up menu. Right click again on it and click Blending Options. You will need to apply the following effects to your bow in the Blending Options window.

Inner Glow

Blend Mode - Multiply
Opacity - 50
Noise - 0
Color - # 470035
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 - Shallow Slope
Anti-aliased - Unchecked
Range - 100

Color Overlay