Using an Imaging Tool TO Design a Web-Site Interface

To accommodate the varied resolutions on the Web, very conservative Web designers use the 640x480 pixels per screen rule. If you subtract from that the parts of the browser that eat up space, such as the scroll bar, you're left with a safe area of 585x295 pixels to work with. However, developers are designing for other resolutions these days-which are often dictated by what their statistics report about the resolutions of their audiences' browsers. Create a file with the dimensions best suited to your audience's needs.

Ideally, you'll be working with an imaging program that lets you create a new layer for each element of your page. Creating a new layer for each element ensures that you have optimum control of that element. I'm going to give the step-by-step instructions for Photoshop 5.5 here, but the process in other imaging programs is likely to be similar.

1. With your new image active, choose Layer, New, Layer.
2. Select your background color using the eyedropper tool and color palette, which you can open by selecting Window, Show Color.
3. Fill the layer with the proposed browser-safe color selection you want by choosing Edit, Fill. Make sure you select Foreground and uncheck the Transparency box in the Fill dialog box.
4. Create a new layer, following the directions in Step 1.

To this layer, you can add a background pattern if you'd like. Save the pattern image in the native Photoshop format as background.psd. Then:

1. Open your background image file.
2. Choose Select, All.
3. Choose Edit, Select, Define Pattern.
4. Move to your new layer on the workspace.
5. Choose Edit, Fill, Pattern, and let your image fill the layer.

To add a text header:

1. Select the type tool from the tool bar, and click on your canvas to bring up the text dialog box.
2. Now choose your typeface, size, leading, and spacing. In most cases you'll want to be sure you've checked the Anti-Aliased checkbox or select None if you're using version 5.5.
3. Click on OK.
4. Place the text where desired by using the Move tool.

Continue creating layers and adding elements as you want.

After you have a page design with which you are satisfied, save it as a Photoshop file (choose File, Save, PSD). If you're using a different imaging program that has layers, save to that program's native format. I like to do this so that I can keep the layers intact, enabling me to come back later and make any necessary adjustments to the fonts, colors, and positions of my elements.

You can now use this layout not only to make adjustments to the design, but actually to generate the individual graphics for the Web page by cutting or copying and pasting each element individually and saving it using the Save For Web feature in Photoshop 5.5, or other export available options. --MH