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

Clean Menu Buttons


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

Clean Menu Buttons Tutorial: Final Result

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:

Clean Menu Buttons Tutorial: Final Result

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

I hope you enjoyed the tutorial. Thanks.



Author's URL: SweDesignz.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Clean Menu Buttons"

Only registered users can write comment

No comments yet...