We will be creating this navigation menu for website layout.

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Start off by creating a new layer (Ctrl + N). We used 600*120 pixels here. Fill the layer with white (if its not your default color). This will be your background.

Now create one more layer and create a “box”, using the rectangular marquee tool. While it is still selected, and you see the dashed lines around it, go to Select >> Modify >> Smooth (as shown on the screen shot). This will make he borders round.

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Type in 6. The bigger is the number, the rounder will the corners be.

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Press “G”, of choose the Pain Bucket Tool, and fill the new layer inside the selection with any colour, except white, as shown on the picture below.

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Go to Layer >> Layer Style >> Blending Options, and apply the following settings for Shadow, Inner Glow and gradient Overlay.

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design
Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

For the gradient itself, click inside the small window that previews the gradient effects (Below the “Opacity” line) and choose the following colours, in this very order. (see picture below)

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

So far, with the style settings you have applied, your menu bar looks like this:

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Now select the Typing Tool (or just press “T”) and type the keywords that will become the buttons in your navigation menu. This will vary in every website, just make sure the words are not too close to one another and that you leave at least a few extra spaces between words. Here we made a huge menu, most people prefer it smaller (big menus will look bad in a busy design) so we also used a rather big font size.The font we used was Lucida Sans. After having typed all the navigation buttons, in any colour (as we will apply a gradient after), your screen should look like this:

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Now go to Layer >> Layer Style >> Blending Options, and apply the following styles (be sure that you apply these settings to the text, and not to the navigation menu bar)

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design
Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design
Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design
Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Here the gradient and the Stroke effect was simply Black and White.

So far, this is the result…

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

In order to turn it to a real clickable navigation menu, select the Slice Tool:

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

and once the slice is selected, Right Mouse Click on the blue corner with the number, and choose “Divide Slice”. Divide vertically to the number of buttons you have.

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Click “OK”. Now drag the edges and try to place them exactly between the words. Don’t worry about it not been precise, these borders will not be visible afterwards.

Comprehensive Tutorial for Metallic Navigation Menu - Photoshop Tutorials Lorelei Web Design

Go to File >> Save for Web and save this menu as an HTML table with images. Be sure to optimize each cell separately and configure which URL will every button lead to, but even if you mess something up here – later, when you will be working in Dreamweaver or any other web editor, you can change the settings applied here. Most important, save it as a table which you will be able to use later on. Good luck and please post if you have any questions!