Welcome to web 2.0 Blog

The Last news of the web Development from the world master's

Simple Orange and Black Navigation

Posted by web2.0 Design resourse Tuesday, August 25, 2009 0 comments

Learn how to make those navigations that have been popping up on lots of sites lately, such as Smashing Magazine.

Step 1

First off, create a new document and fill the background with a gradient from #dedede to #ffffff using the Gradient Tool so it looks something like below. Left click about half the down from the document and release about half way down the document.

Step 2

Secondly create a new layer (Layer > New > Layer). Select the Rectangular Marquee Tool. Make a fixed sized selection of 500 by 50 pixels at the top of the document and fill the selection (Edit > Fill) with the colour #212121.

Step 3

Create a new layer and make a selection of 500 by 5 pixels at the top of the document. Fill the selection with the colour #f0690d.

Step 4

On a new layer select the Rounded Rectangular Marquee Tool and make a selection of 90 by 30 pixels with a 5 pixel radius like below and fill with the colour #f0690d.

Step 5

Next up we are going to be doing a similiar rectangle to the orange one, but make the selection to the right of the orange rectangle and fill with the colour #2a2a2a.

Step 6

Repeat step 5 another couple of times.

Step 7

Lastly we are going to be adding some text to the links so we know where the links will be going to ;) Choose a nice and thick clear font for this and just use capitals.


free counters