Photoshop plays an undeniably important role in web-development. In this tutorial I’ll show you how to create on of the most essential parts of a website, a navigational menu, in Photoshop. Well-designed navigational menus are key to developing an enjoyable user experience on any website.

Check out the final product below:

Step 1 – Creating the Background

We will start off by creating a stylish, gradiented background for our navigation menu. Using the gradient tool, create a gradient that ranges from dark gray (#232323) to black (#000000) on the background layer.

Step 2 – Creating the Box

Next, we will create a box in which we will place the navigational elements. Using the Rounded Rectangle tool, create a box with the dimensions of 200x200px and a radius of 5px and place it in the center of the image as demonstrated in the image below:

Now we will use Photoshop’s layer styles to customize the look of this box. Make the following adjustments to the box’s layer style:

The gradient is comprised of the colors (#7dbe0a) and (#a2d93f).

Next, take the text tool, and with a font of your choice, type “Menu” or “Navigation” and place the text near the top of the box. Please note that the text’s color should be white.

Now you should have something like the image below:

Step 3 – Filling out the Navigational Elements

Now we will create a line divider like the one below:

To do this, take the line tool and create a straight, 1px line (hold down shift while drawing the line). Then, set the layer’s blend mode to “Exclusion” and make the following layer style modification.

Now, we will duplicate this line a few times. Hold down Shift + Control + Alt and press the Down arrow key on your keyboard. Release the Alt key and with Shift and Control still held down, tap the Down arrow key two more times. This process will create a duplicate of the line and move it exactly 30 pixels down (each down arrow tap will move it down 10 pixels) while keeping it in line.

Repeat the above duplication process until you have 5 lines as depicted in the image below:

Now to add some text, using the same font you used for the header, create some smaller text and duplicate it using the duplication technique explained above, changing the text to match your needs.

Feel free to get a little creative, I’ve added a copyright and a privacy policy link at the bottom. This is your navigation menu, make it unique!

Step 4 – Adding the Highlights

Our menu looks great as-is, but let’s add one final effect to accentuate the text and make the menu a bit more visible.

Take the rectangle tool, set the foreground color to black and create a rectangle from the line above “Home” to the line below it. Then set the layer’s opacity to 10%.

Next, use the really handy duplication technique explained in Step 3 (Shift + Ctrl + Alt and the down arrow, release Alt, and press down twice more) to make a copy of this highlight layer. Remember to place the text layers above the highlight so as not to dampen the brightness of the text.

Congrats! You have successfully created your very own stylish navigational menu, one of the most important elements in web design. If you enjoyed this tutorial, feel free to give us a vote through social media applications such as digg or stumbleupon. Thanks!

You might also like:

• Web 2.0 Search Bar Tutorial
  …In this tutorial, I’ll outline the steps required to create a stylish, web 2.0 search bar. Photoshop…
• Creating Glowing Line Art in Photoshop
  …PSD Nation is proud to present our latest tutorial, which deals with creating light effects in photo…
• Creating Photoshop Text Effects – Tutorial
  …Photoshop is a powerful tool when it comes to creating spiffy-looking text effects. In this tutorial…