Photoshop  Home Photoshop Web Layout Simple Horizontal Menu
rss

Simple Horizontal Menu

Author: AbTuts.com More by this author


Step 1

Under Foreground color set #83C7DA. Take the Rounded rectangle tool with 5px radius and create the shape like me.

image 1

Step 2

On a new made shape, add the following styles:

Drop shadow

image 2

Inner shadow

image 3

Gradient overlay

image 4

Stroke

image 5

Our menu now looks like this:

image 6

Step 3

Now, we will add links. I have used Trebuchet MS regular font, with smooth stroke of 1px.

image 7

Step 4

Create a new layer.

Step 5

Take the Rectangular marquee tool, and create the selection around each link (one by one ), like it is shown on the picture below.

image 8

Step 6

Fill the selection with white color and under that layer set fill on 0%.

Step 7

Now, we will add the gradient on previous layer. See the picture below.

image 9

After that, decrease the opacity on 50%.

Our menu now looks like this:

image 10

Repeat this process for every other links, and we're done! :)

Simple Horizontal Menu Tutorial: Final Result



Author's URL: abtuts.com

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 "Simple Horizontal Menu"