How to Create a Metallic Menu in Photoshop

In this tutorial we are going to be making a metallic interface menu using Photoshop, this tutorial can be completed with Photoshop 7+ to CS3. This menu can be used for web sites and blogs among other things, so lets get started then.

Creating the menu.

First lets open Photoshop, and open up a new document (Ctrl + N). As for it's size, 250x350 should suffice, with white as the background. Then create a new layer (Shift + Ctrl + N).

Now lets select the rounded rectangle tool, you'll have to right click on the rectangle tool which is under the text tool to find it. Then make a selection with it similar to the size shown in the pictures (It will automatically fill in with just black, but don't worry about that. It's about to change.)

Then select your rectangular marquee tool, it's located at the top-left of your menu bar. On your layers window, you should see two layers. On the new layer you created, hold down ctrl and click on the thumbnail in the layers window. It should make a selection of your rounded rectangle.

Now we need to create a gradient, go to your paint bucket tool and right click on it. Then select the gradient tool, then open up the gradient editor and create a gradient similar to the one shown in the pictures. Apply the gradient to your rounded rectangle selection till you come up with something you like.

Time to apply some layer styles to refine the look of this some, so right click on the layer in the layer window and select blending options. First lets go to drop shadow, leave everything at its default settings except opacity which we will set to 40% and then check the box to enable. Now lets go to inner shadow, set the distance to 6 px and the size to 8px. Then set the opacity to 30%, and check the box like before to enable the layer style. Next stop is inner glow, set the color of the glow to pure white (#FFFFFF). Then set the choke to 0% and the size to 40%, and set it's opacity to 50%. And the last one we're going to add is bevel and emboss, set the depth to 125%. Set the size to 16 px and soften to 8 px, and enable that layer style and click OK. You should have something similar to what I have now.