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

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.


Post a Comment


free counters