Sleek Menu Bar Tutorial

Intro:

Make a sleek menu bar, very shiny stuff for your web 2.0 templates. Below is the finished result I made with the same techniques mentioned, all explained in detail over 13 steps.

Step 1:

Make a new file with canvas size 500x100, though you can make it longer if your going to use this for a design, but keep in mind that the height of the bar should be very similar to mine to make it work. Don't mind what I just wrote we'll just make a fixed selection (which you can change the width of if you have a larger width).

Step 2:

Select the rectangular marquee tool , at the top "options" bar change the style from "Normal" to "Fixed size", change the width to 500 (if you used the default width in the beginning), change the height to 47px. Then make the selection and a new layer called "menu bar" fill this layer with black with the selection still active obviously.



Now add a gradient overlay, to do this right-click your bar layer in the layers palette > Choose blending options, check the gradient overlay box, and fill it's properties to the ones below.



That will give you the following result:

Step 3:

Now apply a photo filter to the menu bar, later on we're coloring all the layers with color balance to tweak it even more. But the photo filter has to be applied now so let's get going. Click the layer adjustment icon.



and choose "Photo filter". A new box will appear, change the filter to yellow and leave all the other values as they are. Press OK. Make sure the the photo filter layer is on top of the menu bar layer.

Step 4:

Make a new layer called bottom gradient. Change the foreground color to #184360, take the gradient tool , set the gradient to the foreground to Transparent gradient. Make a selection like the image below.



Then make a gradient from the top of the selection to 3/4 of the selection. And change the opacity to 50%.