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.
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:
To add a text header:
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