Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Clean Blue Menu

Clean Blue Menu


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

image 1
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

image 7
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:

image 1
Click to enlarge

I hope you enjoyed the tutorial! Thanks.



Author's URL: SweDesignz.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Clean Blue Menu"

Captcha