Clean Blue Menu

April 11th, 2009 | Tags: ,

Tutorial Description:

Learn how to design a very clean and professional website menu; very nice outcome.

This is the finished product from this tutorial, a nice blue menu covered by a soft metal part.

I am going to show step by step how to do it.
First, make a selection like the pic, and fill it with the color you want for the menu, I used #215FA8.

Now, ctrl+click on the layer (to get the selection) and go to the Channels tab.
Create a new channel, fill it with this selection. Now go to Filter > Blur > Gaussian Blur and use around 2-4, depending on the size of your selection. I used 3,4.

Go to image > adjustments > levels and get all the arrows to the middle, like showed on the picture. Your selection is smoothed now :)

Ctrl+click this Channel and go to the layers tab. Create a new layer and fill this selection in it. Now that we have the right shape, we can work on adding effects to it.

On the Layer Style settings (Right click on the layer > Blending options) apply the following styles: Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay.

On the Drop Shadow, reduce the size to 2px and the distance to 0px. Apply the other styles as showed on the picture. The colors for the Gradient overlay are: #467EB9 and #125DAE.

Time for the SoftMetal part. Create a selection, go to your blue-menu layer and copy it (ctrl+c). Then paste on a new layer (ctrl+v).
For this new SoftMetal layer, go to the Blending options. Apply a dropshadow style with 2px of size and 0px of distance. Then apply Satin and Gradient Overlay , the colors for the Gradient are #999999 and #E9E9E9

Almost Done. Now you can add texts to it, I added it in white color (#FFFFFF) and
with Verdana font.
After this, you have to divide the menu. Create a line in the selection and fill it with black, next to it fill another with white.

Now reduce the opacity of both lines until something you find ok, I reduced mine to 35%(black) and 50%(white).
Now you can simply duplicate the lines layers and making lots of them to divide the other spaces of the menu.

Your menu is done now, and is looking like the picture:

I hope you enjoyed the tutorial! Thanks.

No comments yet.
TOP