Photoshop Web Layouts - Black Chrome Menu

By Jasmine Starr, published Dec 21, 2006
Published Content: 1,021  Total Views: 1,307,872  Favorited By: 54 CPs
Rating: 4.5 of 5
In this Photoshop Tutorial I will show you how to create the Black Chrome Menu in my image. Please click the image to see the ending results. This is a chrome menu with a black inside. Then the buttons really set the menu off. There are four parts to this menu. First, we will need to create the chrome part. Then we will insert the black piece. Next we will create the buttons and last we will add the text. I will explain this tutorial in detail so that the new Photoshop users can create this menu too.

How to Create a Black Chrome Menu in Photoshop

Create a new canvas 400 pixels by 400 pixels. Set the background to white. Then create a new layer. Layer > New > Layer and name it chrome background. Select your Custom Shape Tool from your toolbar. Load your Banner Shapes into the Shape Box. Click on Banner 4. Draw the Banner long ways on your canvas. Please see my image if you don't understand.

Right click on your Chrome Background Layer and click Rasterize Layer. Right click on it again and click Blending Options. Apply the following effects to the Layer.

Drop Shadow

Blend Mode - Multiply
Color - # 959595
Opacity - 70
Angle - 90
Distance - 16
Spread - 0
Size - 11
Contour - Linear
Anti-aliased - Unchecked
Noise - 5

Inner Shadow

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

Outer Glow

Blend Mode - Screen
Opacity - 35
Noise - 0
Color - White
Technique - Softer
Spread - 0
Size - 22
Contour - Linear
Anti-aliased - Unchecked
Range -50
Jitter - 0

Inner Glow

Blend Mode - Multiply
Opacity - 50
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 - 100
Direction - Up
Size - 11
Soften - 3
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

Color Overlay

Blend Mode - Normal
Color - # f7f7f7
Opacity - 100

Click OK on your Blending Options window.

Photoshop Web Layouts - Black Chrome Menu

Black Chrome Menu

Credit: Jasmine Starr

Copyright: Jasmine Starr

Takeaways
  • First, we will need to create the chrome part.
  • Then we will insert the black piece.
  • Next we will create the buttons and last we will add the text.
Did You Know?
There are four parts to this menu.
Comments
Type in Your Comments Below - (1000 characters left)
Your name:

Submit your own content on this or any topic. Get started »
Most Commented On