Her

Home Photoshop Tutorials Web Layout Clean Menu Buttons

Clean Menu Buttons

Author: SweDesignz.com Author's URL: www.SweDesignz.com More by this author

This is the finished product from this tutorial, a nice menu to use on your layouts.

image 1

I am going to show step by step how to do it. First, use the lasso tool (click L) and make a selection just like this one, fill it with any color. (alt+f)

image 2

Now, right click on this layer. Go to Blending options. Their, apply those styles to the button. The color for the gradient is #DCE5EE and #FFFFFF (white). For the Stroke is #778AAB

image 3

image 4

Your button is looking like this now:

image 5

The base for this button is done! Now let's use the custom shape tool (press U) of the Photoshop to make this button more interesting. Chose a shape you like, I chose this one that comes with Photoshop CS.

image 6

image 7

Create a new layer, make a path. Then ctrl+click on this layer to get the selection, create another layer and fill it with color, I used #89B8E9.

On the blending options of this arrow layer. Use:

image 8

Also, make a 1px side centered stroke of color: #747A88

Now, lets add some text. I added a text using Blue Highway Font and color #747A88.

image 9

Now you can simply put all this layer on a folder, and duplicate it many times to make your menu.

image 10

This is an example of it implemented to a design:

image 1

Looks pretty god, and it's very easy to make.

I hope you enjoyed the tutorial. Thanks.