14
Jul
Preparing Images - Website Header & Navigation
written by: Andrew Houle // stored in: Tutorials

Header and Navigation Final

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.

Hide Layers

Clouds Background

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.

Save For Web

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’.

Logo Cropped

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.

Guides

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…)

Home Crop

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

Related Posts:

About Andrew Houle

Andrew is the originator and primary contributer for this blog. He is a web and graphic designer with a passion for helping aspiring designers develop their skills.

Leave a Reply