website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Tabbed Horizontal Menu
rss

Tabbed Horizontal Menu

Author: AbTuts.com More by this author


Step 1

Start off by creating a new photoshop document, dimension 395x80px.

Step 2

Take the Rounded Rectangle Tool (U)

image 1

and create the shape using the following settings:

image 2

Shape:

image 3

Step 3

On a new made shape we will apply the following styles.

Drop Shadow

image 4

Gradient Overlay

image 5

Stroke, add the white stroke, size 2px.

Our menu now looks like this:

image 6

Step 4

Under Foreground color set this color: #D1F700 and take again Rounded Rectangle Tool.

Then, create the shape for first link, like it is shown on the picture below.

image 7

Step 5

Now, it's time to add a gradient with following settings.

image 8

image 9

Step 6

Press Ctrl+A key on the keyboard, while your previously shape for link is still selected.

image 10

We will expand the selection for 1px.

Choose Select > Modify > Expand and under Expand by: type 1px.

See the picture below.

image 11

Step 7

Create a new layer, and using drag and drop technique, move it beneath the shape layer.

image 12

Step 8

Select the new layer and fill the selection with white color.

Step 9

Then, select the top part of layer like it is shown on the picture below and press delete key to cut the top part of layer.

image 13

Step 10

Finally, we will add the shadow.

image 14

Our menu now looks like this:

image 15

Step 11

Create a new layer, take the Marquee Tool and create the selection, like it is shown on the picture below.

image 16

Step 12

Fill it with any color, Fill layer set to 0%.

image 17

And add the gradient with the following settings on that layer.

image 18

Step 13

Copy that layer and set it on the shape border.Our menu now looks like this:

image 19

Step 14

Only one thing that we must to do is to add a link text and we're done.

image 20

I have used Trebuchet MS bold font, size 12px, color #5D6E00 and it is set up on Smooth. Repeat steps 3-5 for all other links in menu.

Tabbed Horizontal Menu Tutorial: Final Result

Have a nice day!



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