Step 1

We are going to start off by making a background for our navigation. Using the Radient Gradient Tool make a gradient using #6b0100 and #3f0000. To do this you set the foreground and background colours to the ones we want our gradient to have, and then select the Radial Gradient Tool. Now left click somewhere at the top right and drag to the bottom right of the document and release.

Step 2

Now on a new layer make a white box at the bottom (dimensions are 540 by 20 pixels) using the Rectangular Marquee Tool to make the selection and going Edit > Fill to fill the selection.

Step 3

Next we are going to be making the active link background. Create a new layer and select the Rounded Rectangle Tool and make a selection of 100 by 50 pixels with a radius of 5 pixels, and fill this selection with white.

Step 4

Now we are going to be making the other link backgrounds. On a new layer make three more selections of 100 by 50 pixels using the Rounded Rectangle Tool. Fill the selections with a Linear Gradient from #9c0303 at the top to #750202 at the bottom.

Step 5

We are now going to be adding a Gradient Overlay layer style to this layer so go Layer > Layer Style > Gradient Overlay.

Your navigation should be looking something like below now

Step 6

Move your first white layer above all of the other layers.

Step 7

Our last step is to add the text. The font type that I have used here is Tahoma, Bold and Regular, 14 pt, None, #3f0000 and #ffffff.

Categoría: Web Layouts |