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



Author's URL: AbTuts.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 "Simple Horizontal Menu"

Captcha