Sleek Menu Bar

About Celoxdesign

Celoxdesign is a webdesign community offering free high quality tutorials in several categories such as Adobe Photoshop, Maxon Cinema 4D, Cascading stylesheets and xHTML.
I drive myself to give all my knowledge back to the design community for free and will continue doing this for a long time.

Guest tutorials

A new added feature on Celoxdesign is the guest tutorials section, this section will house tutorials written by my guests/members, some of them are even better tutorials that I've written over the past years. Register yourself and submit your own guest tutorials to give something back to the design community.

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%.

123Next >Last >>