Design a Website Header & Navigation

By   |  Stashed in Design & Drawing

Header and Navigation Final

Designing/Coding a Website Header & Navigation Part 1 of 3

This part I of a Website Header and Navigation tutorial has been rewritten as of 7/14/08, to make the header and navigation coding a little easier to follow.

This is the first of a three part series on the basics of how to create a website header and navigation using Photoshop and Dreamweaver. The image above is the graphic we are going to be recreating.

When creating a website, it’s important to get a clear idea of what the main components of your site will be. In general a site can be broken down into a header, navigation, body and footer. I always begin with an interview with the client to get the best possible idea of what they want. Then I take their ideas and draw out the components and start to sketch the site in a notepad. Once I get something I like, I begin to mock up the design in Photoshop, (although I may transfer to Fireworks, as that program is probably even better suited for website mockups).

So let’s say that our company, Acme Widgets (c’mon, you would’ve used that name for a sample company too :) ) wants the following pages: home, about, services, products and contact. You’ve already interviewed the client, and drawn out what you want; it’s time to open up Photoshop and put your ideas into motion.

Step 1

Decide on the size you want your header to be, I made mine 1024×204. The rational behind 1024px for the width goes something like this… The minimum screen resolution that you should build for is 800×600, although many people are pushing that standard up to 1024 as monitor sizes continue to increase. For the purposes of this sample we will use a width of 1024px, this doesn’t accomadate for the scrollbars and sidebars, but the right and left sides simply fade to light blue, so this will suffice. You can find more info on this topic through this article written by Cameron Moll. Additionally, more useful information can be found at w3schools. Below is a chart courtesy of W3Schools that charts monitor size usage for the last 9 years.

Monitor Sizes

Step 2

Select your background color and change it to the color at the edges of the picture. You can sample that color using the eyedropper tool. I used #0071b2. Hit ‘ctrl, backspace‘ to fill the background with your color.

Blue Background

Step 3

Download the picture you are going to use and open it up in Photoshop. I found the picture below from stock.xchng. You can download it here.

Clouds

Step 4

Grab the move tool (shortcut ‘v’ on the keyboard). Click and drag the clouds pic to your header-nav document. This will place the clouds on their own layer. Rename that layer ‘Clouds’.

Step 5

Resize the clouds to fit in your image. Hit ‘ctrl, t’ to bring up the free transform tool. You will need to zoom out far enough to see the corners, as the clouds image is rather large. Grab a corner and click and drag the image smaller, hold shift as you do so to keep the proportions. When you have it at an appropriate size, hit enter to accept the tranformation.

Step 6

Add a layer mask to the clouds layer. Layer->Layer Mask->Reveal All. Grab the gradient tool and set the blend to linear, then double click the gradient editor and make the blend go from black to white to black again. Click and drag that gradient on your layer mask in order to fade the image to light blue along both sides.

Gradient Stops

Clouds Faded

Step 7

Next up, we need a logo for Acme Widgets. Grab the text tool (shortcut ‘t’ on the keyboard) and change to your favorite font. I used Qlassik bold, which was one of the fonts I wrote about in the 30 Incredible Free Fonts Every Design Should Have article. Type in ‘acme’ somewhere in the top left portion of the header. Don’t worry about the color for now, we will use a layer style to handle that in the next step. Hit ‘ctrl, t’ to bring up the free transform tool and resize your text accordingly, remember to hold down shift if you’d like to maintain your proportions.

Acme Logo

Step 8

Now we are going to let some of the clouds from the layer beneath show through. Change the blend mode to soft light and the opacity to 77%.

Acme Logo

Step 9

Now let’s add some style to our text. Double click next to the layer name (‘acme’) in the layers palette to bring up the layer styles window. Click to check on a color overlay and within the options change the color to #00406a. A good, quick way to find a color that’s suitable is to grab the eye dropper tool and sample a portion of the image that you like the color; in this case I used one of the darker parts of the sky, then darkened it up just a touch more. Next, add a slight white stroke, change the size to 1px and keep the opacity at 100%. Lastly, add an outer glow, change the color to white, the opacity to 67%, the spread to 14% and the size to 17px. You should end up with something like the image below.

Acme Logo Stylized

Step 10

Drag out two guides at either side of the word ‘acme’ to help us position the word ‘widgets’. To do so, make sure your rulers are being shown (view->rulers). Then click on the vertical ruler and drag out each guide, like below.

Guides

Step 11

Click on the text tool again and type out ‘WIDGETS’. I used Qlassik medium for this font. Hit ‘ctrl, t’ and resize the text so it lines up with the guides you drew out. Change the letter spacing to 200. This option is within the character palette.

Widgets Letter Spacing

Step 12

Change the blend more to soft light and the opacity to 77%. Then copy the layer styles you created for the ‘acme’ layer and paste them to the ‘WIDGETS’ layer. To do so; right click on the ‘acme’ layer and choose copy layer style from the list of options, then right click on the ‘WIDGETS’ layer and choose paste layer style. Your header should be something like the one below.

Acme Widgets Logo

Step 13

Grab the text tool once again and type in your company’s slogan. In our case: ‘a business made out of thin air’. I used gill sans and gill sans bold for the font here. Use the free transform tool to resize the text (ctrl, t). Also, I left justified the text and skewed the bottom line over to the right a bit. The blend mode is set to normal and the opacity to 75%. I also added a cover overlay of #001e31, and a white stroke of 1px at 38% opacity.

Slogan Stylized

Step 14

Let’s add a small separator between our logo and slogan. Change your foreground color to white and grab the line tool, which is hidden by default under the rectangle tool, to open up the options click and hold on the rectangle tool and select the line tool from the options that appear. I also dragged out two guides at the top and bottom of the logo, to help align the separator.

Line Options

Step 15

Start at the top guide you drew, in between the logo and the slogan and click and drag, while holding shift to the bottom guide. This will give us a straight white line.

Step 16

Let’s fade out this line, it looks a little overwhelming. Click to add a layer mask. Then grab the gradient tool, change the mode to linear and double click to get into the gradient editor.

Gradient Tool Options

Step 17

While in the gradient editor set the color stops to go from black to white (2 stops) back to black. You can change the color of the stops by double click on the icon to bring up the color picker, and you can add a stop by clicking anywhere along the gradient. Your gradient should look like the one below.

Gradient Stops

Step 18

With your new gradient selected and while on the mask for the line layer click and drag the gradient from the top guide to the bottom. This will make the line fade out at the edges. Also change the blend mode to soft light. You should have something like the image below.

Acme with Line

Step 19

OK that looks pretty good for our logo and slogan, now let’s get started on the navigation bar. Add a new layer and call it ‘Nav BG’. Grab the rectangle marquee tool. Drag out a rectangle the width of the image from just below the logo to the bottom.

Marquee Selection

Step 20

Change your background color to white, and hit ‘ctrl, backspace’ to fill the selection with your background color. Change the opacity to 25%.

Nav Background

Step 21

Add another new layer to the top of your layers palette, call this one ‘Nav Top’. Drag a guide to the top of the navigation background you just drew and another right in the middle. Use these guides to help you draw another rectangle marquee selection for the top half of the navigation bar. Fill your selection with white, change the opacity of this layer to 25%. You should end up with a pretty slick looking navigation bar like below.

Nav Background Finished

Step 22

Click on the text tool, and change the font to Gill Sans bold again. Type out the pages (home, about, services, products, contact). I used 8 spaces between each word. I also copied and pasted the layer styles from the slogan layer. I dropped the opacity to 75% and used a free transform to size the text and to place it in the right spot.

Navigational Categories

Step 23

In the layers palette, click to add a folder, call it ‘Nav Lines’ and place it below the ‘Nav BG’ layer.

Nav Lines Folder

Step 24

Change your foreground color to black and grab the line tool. Hold down shift and click and drag a line vertically, just short of the full length of the nav background, between home and about.

Nav Line 1

Step 25

Just like the other line we are going to fade this one at the edges. Add a layer mask and use the same gradient you made before. Click and drag the gradient over the mask. Drop the opacity of this layer to 75%

Nav Line Faded

Step 26

Copy that line layer you just created and paste out three more. Use the move tool (shortcut ‘v’ on the keyboard) while holding shift to place the new lines to keep them on the same plain.

Header and Navigation Final

That completes the graphic look of our header and navigation. If this were a real project I would then send the client a PDF to take a gander at, and hopefully approve, but alas, in the real world it would probably come back with changes.

In part II, we will slice and optimize our header and nav, and finally in part III, we will take our work over to dreamweaver and write up some HTML and CSS to make this work. Stay tuned for those!

Designing/Coding a Website Header & Navigation

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://novgorod-realty.ru grom

    Thanks for the information. It will be useful for many.

  • Fabrizio

    Thanks. So useful :)

  • Praful Agarwal

    Useful information. Thanks a many !!