Today we are going to make a menu bar. This is very simple but you can use this same button or menu bar or header for many different types of website. Because of its color and style it can be fit for many subjects. Even you can change the colors and make your own custom look or just go ahead and can use this premade button for your projects. So here is the tutorial.

Create a new Photoshop document. Choose the rectangle marquee tool and create a wide rectangle. It doesn’t matter what color it is because we’ll add Layer Styles.

Wide Rectangle

Now go to Layer/Layer Styles/Gradient Overlay. For reference please follow the image shown bellow.

Gradient Overlay

So with layer style you will get result like this.

menu bar

Now its time to add some drama in our menu bar. Create a new layer and name it dark. Now select a portion of our menu bar and fill it with any color. Now again we will add Gradient Overlay in this layer. So go to Layer/Layer Styles/Gradient Overlay. For reference please follow the image shown bellow.

Layer Styles/Gradient Overlay

So with layer style you will get result like this.

header

We need create divider lines. For that create a new layer and with Rectangular Marquee Tool create a thin Rectangle line. Fill this with color (#616161). Now copy this layer and fill that with lighter color (#999999). Now align and place both lines side by side and merge those 2 layers into one. Make few more copy of that line and align properly. Merge all lines into one layer name “Line”.

lines

Now its time to add our menu text; you can also add your own menu text.

menu text

Photoshop Tutorial

Create a new layer above the menu bar and the duplicate. Make a selection using the rectangular marquee tool. Choose the gradient tool, set it to the linear gradient and then open the gradient editor. Choose “foreground to transparent”. Set the foreground color to (#2a2727) and drag the gradient tool within the selection on the new layer. And you should have something as shown below! And that brings us to the end of this Photoshop tutorial. Cheers!

Menu or button or header or banner