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

Simple Horizontal Menu


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

Only registered users can write comment

No comments yet...