Sleek Dark Navigation

Web Layouts

In this tutorial I am going to be teaching you how to create a horizontal navigation menu.

Step 1

Firstly create a new document – the size I’ve chosen to use is 600 pixels wide and 210 pixels high. Although if you are turning this into a web layout, you might want to have it larger. Fill the background with a dark radial gradient, I’ve used the two colours #282c30 and #1b1b1b.

Step 2

On a new layer make a selection of 550 pixels by 50 pixels in the middle of the document. The easiest way to make this selection is to use the rectangular marquee tool and use the fixed size option.

Step 3

Select the gradient tool and fill the selection from top to bottom with a linear gradient using the colours #161616 and #0a0a0a.

Step 4

Now apply an outer glow to this layer using these settings. Right click the layer and go blending options to adjust the layer styles.

Step 5

We are now going to be adding a shine effect to the navigation bar. On a new layer make a selection on the top half using the rectangular marquee tool (fixed size of 550 pixels by 25 pixels).

Step 6

Fill the selection with a linear gradient from white to transparent. Set the opacity to 10%.

Step 7

Now we are going to be adding a highlight to the bottom of the bar to give it some colour. Make a selection of 550 pixels by 3 pixels at the bottom of the bar.

Step 8

Fill the selection with the colour #74ab00. To fill a selection simply go Edit > Fill with colour.

Step 9

Using the text tool add in some text to act as links. The font I’ve chosen for this is Verdana.

Step 10

Lastly, we’ll be adding a hover effect for one of the links. Create a new layer. Using the rectangular marquee tool make a selection around one of the links.

Step 11

Fill the selection with a linear gradient from white to transparent. Set the blend mode to Overlay and the opacity to 75%. To learn how to turn this .psd file into an html file read this tutorial.



Download all of the PSD and source files, view exclusive CSS & Photoshop tutorials and learn how to code WordPress themes! Premium Membership

Comments (21)

  1. Sergio says:

    Great tut !!! =)


  2. James says:

    Thanks for your comment Sergio (:

  3. Jared says:

    Thanks for the tut! This is definitely useful.

  4. Awesome tut! I linked to your tutorial too as a genuine link! =)

  5. great tutorial. love the buttons…

  6. Romany4 says:

    Very nice! Please, make a tuto, how to create a rollover with these buttons :)

    • James says:

      Thanks for your comments.

      @Romany4: if you know the basics of css/html then you can just make an unordered list and give the links backgrounds, and the hovered link the different background (slightly lighter).

  7. Luka says:

    Very nice man!!

    Luka :P

  8. Romany4 says:

    2James: Hm… To be sure, it was guess:) No wonder, because I am a beginner. Thank you for your board

  9. Pahvi67 says:

    I somehow can make a navigation bar for my website, but how do I make it to HTML ? All these tutorial only shows how to make the pics.

  10. Oktigh says:

    thanks!!!! good tutorial :D
    we want more tutorials!!!! -> Web Layouts

    • James says:

      More tutorials are coming, it just takes a while to make and I’ve got other things on. I’ve already made a few web layout tutorials, so I’ll try to make tutorials on the other topics, but there will be some more web layout tutorials this month.

  11. DeJaaaN says:

    Great tutorial!

  12. Jerannie says:

    Wow..this so great…tnx 4 the tutorial..i’m just 19 yrs of age and i want to be a web i am finding a site like this..i really lyk it..

  13. Burak says:

    veryy nice :)

  14. Roman says:

    Thanks!! easy and nice

  15. Thats one sharp looking menu. Top Job!

  16. Daliana says:

    This tutorial was really helpful!
    Thank you so much to share your knowledge! :D

  17. MyBB says:

    Thanks for the tut! This is definitely useful.

Add a Comment



URL (Optional)