Ok, this stime lets make a stylish yet very simple navigation menu for your website. I am doing this menu to represent 5 links, all with the same dimensions, to a full site width of 750px. So each link will be exactly 150px wide. Lets start by creating our file:

Now lets add up some guides to separate the 5 buttons. I will use these guides to make perfect rectangles (150px wide). To add those guides go to the VIEW menu and choose NEW GUIDE. For starters you need 4 vertical guides placed at 150,300,450 and 600px.

Before drawing your rectangle add an horizontal guide too, placed at 50px. Well draw our rectangles inside this guide so we can make a small arrowlike image below each button.

Now, lets draw our firts button. Select the RECTANGLE tool from the tool box and make sure that you have SHAPE LAYERS mode on.

Be sure to draw between the vertical and horizontal guides, like this:

Ok, the first part of the button is ready. Now lets add up a gradient to that button. I’m not going to add the gradient to the full button area. I am going to leave, lets say, 5px around the top, left and right edges and 15px from the bottom. So, lets add some new guides. Firts, the left margin: a new vertical guide at 5px. For the right margin you’ll need a vertical guide at 145px (150-5=145). For the horizontal guides, you need one guide at 5px and another at 35px. So go on and add those guides:

Now for the gradient. I will choose the same red as the button and white.

Choose the gradient tool from the toolbox:

Click on the top (where the gradient spectrum shows) and you’ll get a dialog box with some gradients allready created.

The first gradient is the one we want. Choose it and apply it to our image. But before you need a new layer or else you wont be able to draw to gradient. Why? Because the last layer was a vector mask (the rectangle in shape layers mode) and you cannot mix up different layer types. So create a new layer by clicking on the new layer icon and on this new layer, between the guides, draw a selection. You need the selection first or the gradient will be applied to the whole layer. Draw your selection with the RECTANGULAR MARQUEE tool :

Ok, now apply the gradient. Be sure to start from bottom to top, as we want the red at the bottom and the white at the top. After applying the gradient, choose layer opacity of 50%:

This is the result:

Ok, so now for the triangle below the button. I am designing this triangle with the pen tool. To make sure the triangle gets the right dimensions i’m doing some calculations first. Lets see:

• Width of button: 150px
• Center of button: 75px (150/2=75)

If the triangle is 20px wide then we need 10 px to each side of the center (75px) to draw it. Lets add the guides on these dimensions to draw the perfect triangle. We need 3 new guides, all vertical, at 75px, 65px and 85px. Go on and add them, here’s the firts:

And there they are, the 3 new guides:

Now, grab the pen tool and draw a triangle like the one below. Be sure to draw this is a new layer. So add a new layer first and the choose the pen tool and click the points to create the triangle. Be sure to close the traingle when drawing it, by clicking at the end on the starting point to close it.

And here’s the triangle:

Ok, your button is now ready. All you have to do now is repeat the process 4 more time, and add a text layer to each button.

Here’s my final menu:

Hope you enjoyed this tut. If you need any help just leave a comment or drop me an email. Also if you have any doubts be sure to leave a comment or an email and maybe, just maybe, i’ll throw a tut for you. Have fun!