TutorialFriend.com

In this tutorial I will be teaching you how to make a nice navigation box like this one:

STEP 1

Create a new document, I suggest using 300*300, might need some room if somthing unexpected arrives!
Give it a white background.

STEP 2

We are now going to create the outline of the navigation box. I suggest doing it around this size, you can always change it later if needed.

STEP 3

Lets make the heading of the navigation box, we’ll call this one… Navigation!!
So create a rectangle inside the big rectangle, like this:

Time to add some color! Go into Blending Options of the rectangle you just drew. (Right Click Layer > Blending Options).
Select Gradient Overlay and apply the following gradient.

Now we need to change the color of the small rectangle to orange, you can do this by clicking the color next to the name (inside the layers palete), use a nice light orange, i suggest #ffcc00.

Remember how in Step 2 we made the outline of the rectangle? Well now we are going to change the color of that, open rectangles blending options, and change the color to the bottom color of what the little rectangle is.
Yours should now look similar to this

STEP 4

Now we have the colors pretty much sorted, it’s time to do the text. In step 3 i told you we will call this one Navigation, so we will.. select your text tool and draw a text box in the middle of the small rectangle, make the text white, size around 21, and the font Verdana. type ‘navigation’, move it into the center, and now we’ll add a small 1px stroke to it. Use the color of the bottom color of your small rectangle like you done for the stroke of the small rectangle. it should now look somthing like this:

STEP 5

Now it’s time to do the body text, amongst all this orange, we’re going to put black text for the main part, because it’s good design principle - black on white is very easy to read.
It is strange doing regular size text in PhotoShop, as it appears blurred and bulky, if you are going to code this with XHTML and CSS, don’t worry, verdana will look alright!
But if you are going to keep it as an image, I suggest using a pixel font, these are meant for small text. My favourite is Visitor (Click here to get it).

Create a text box covering most of the left over rectangle. use Visitor (or w/ever you want to use) size 14 and black.

Put down some headings, I will put

Home
About
Contact
heading
- sub heading 1
- Sub heading 2
Header
Services

Here is my finished product!

But I always want to make some changes once I’ve finished and I think theres too much room between the navigation box and the outline box, so I’ll just make it bigger.

So theres my finished product, I’m pretty happy with it, make some alterations until your happy with yours!

Click here to download .PSD
PLEASE POST YOUR OUTCOMES! I’D LIKE TO SEE THEM!

NEED HELP? JUST LEAVE A COMMENT HERE AND ME OR SOMBODY ELSE CAN ANSWER YOU!