adv banner
Photoshop  Home Photoshop Web Layout Clean Blue Menu
rss

Clean Blue Menu

Author: SweDesignz.com More by this author


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

Clean Blue Menu  Tutorial: Final Result (Click to enlarge)
Click to enlarge

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.

image 2

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.

image 3

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

image 4

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.

image 5

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.

image 6

Click to enlarge
Click to enlarge

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

image 8

image 9

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.

image 10

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:

Clean Blue Menu  Tutorial: Final Result (Click to enlarge)
Click to enlarge

I hope you enjoyed the tutorial! Thanks.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Clean Blue Menu"