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

In this tutorial, we will take the graphic we created in part 1 and save the images so we can use them when we code the site in part 3.

Step 1

Create a folder named ‘images’ in your root folder of where you will store this tutorial. For instance c:\sites\header-tut\images (this is just an example, but just note where you will store files and make a folder to put your images in).

Step 2

Open up the photoshop document you completed in part 1. Hide all the layers (click the eye to the left of the layer name), except the background layer, clouds layer and the nav bg folder.

Step 3

Save the clouds. Click File->Save for Web & Devices. Select png for the image type, click OK and name the file ‘header’, and place it in the images folder you set up.

Step 4

Hide all the layers except for ‘acme’ and ‘WIDGETS’. Grab the crop tool (shortcut ‘c’ on the keyboard). Crop around the logo. Save the file in the same way, as a png. Call it ‘logo’.

Step 5

Save the slogan in exactly the same manor. Title it, what else, ‘slogan’.

Step 6

Now we move onto the navigational pages. Hide all the layers except for the nav words and the nav lines. Drag out two guides to either side of the text, to help with spacing. The lines that already exist will also help.

Step 7

Turn on snap, so that we can snap to the guides and the nav lines. View->Snap. Now grab the crop tool and crop home from the guide, to the beginning of the first nav line. Be careful to snap to the beginning of the nav line and not after. When you crop ‘about’, crop it so you snap to the left side of the first nav line and to the right side of the second one. It is important to maintain this pattern throughout all these crops. Save each piece as a .png file. (ie home.png, about.png, etc…)

Now that you’ve saved all the components for the header and navigation, that’s all for this part. In part 3, we will look at how to take these images and use html and CSS to put them into a functional web page header and navigation.

Designing/Coding a Website Header & Navigation

• Part I – Design – Website Header & Navigation
• Part 2 – Preparing Images – Website Header and Navigation
• Part 3 – Code – Website Header and Navigation