Online Design Digest

In this tutorial we lean how to create a 3D menu bar for website.

Final look of the menu bar is:

Step 1:

Create a new document (File -> New) with following specification.
Width -> 800px
Height -> 400px
Background Contents -> white

Step 2:

Select “Rounded Rectangle Tool” and create a wide rounded rectangular shape. Width should be of around 700px and height should be around 60px.

Color -> # 0c327f

Radius -> 10px

Step 3:

Apply following layer style to the rounded shape from blending options.

Step 4:

Select “Rectangular shape” and set color to # e3d215

Create small rectangular shapes on the previous rounded rectangular shape that we created in step 2 (as shown in below image).

Apply following layer style from blending options

Our menu bar looks like this:

Step 5:

Repeat step 4 to create more buttons. Move the alternate button up by about 5px (as shown in below image).

Step 6:

Press and hold “ctrl” key and click on the layer that we created in step 2. Thus only shape created in step will be selected.

Now, Go to:

Select -> Modify -> Contract -> Contract By 5px

Select “Rectangular Marquee Tool”. Press and hold “Alt” key and select lower half of live chat button. You will find that only upper half of the button is select.

Create a new layer (layer -> New -> Layer) and fill the selection with #ffffff color and set:

Layer mode: Soft light

Opacity: 80%

Fill 80%

Step 7:

Add some text on first button.

And add following layer style to text.

Menu bar will look like this.

Step 8:

Repeat step 7 and add some text on each button.

Our menu bar is ready.