Website Navigation

Step 1

Create a new document, I used 400px by 400px, fill the background with a light colour or whatever you like best, we'll be creating a dark navigation, now draw a vertical rectangle.

Step 2

Before filling the rectangle let's add some smooth edges, go to 'Select > modify > Smooth > 5px' and fill it with a colour, I've used #383333.

Step 3

Create a new layer and once again go to 'Select > Modify' but this time select 'Contract', do something around 4-5 pixels this way the edges don't get distorted, fill this with a lighter colour than the previous.

Step 4

Drop Shadow

Inner Shadow

Outer Glow

Gradient Overlay

Now use these settings for the first layer you created, this will be the border of the navigation, you should have something like this.

Step 5

Now create a rectangle with a decent size for some text to fit into, I then used a slight gradient overlay to make it more exciting than just a blank colour, then i added a 1pixel line underneath the recent created rectangle, this is to separate this from the next image, just simply duplicate this layer down till it's full(some may need adjusting, the top and bottom because of the curving edges)

Step 6

Now it should look something like this, you can add some more blending options to the link backgrounds if you wanted, I added a inner shadow and a glow to make it look a little better, just play around and add links / images depending on your site.

Final preparations

I'm going to add some extremely basic things to the navigation such as text and maybe some images, such as ones found on tutorial websites, just to make the navigation look complete.

Depending on your background of your website, some settings could need tweaking!