Set Up The Studio

To begin, open a new document 600 pixels wide x 500 pixels tall. The Web page you’re creating will be 600 pixels wide. Specify a transparent background. Save the file as testweb.psd.

Click the color picker on the Tools palette and select contrasting foreground and background colors as a color scheme for your Web site. We’ve chosen orange and green. Now select Show Ruler from the View menu and Show Layers from the Window menu.

Draw The Banner

Let’s start by creating a banner that curves into a left-hand menu bar. To “draw” with the pen tool, simply click to create anchor points; Photoshop draws the lines between points.

Select the Pen tool (the calligrapher’s nib icon). In the Pen menu, click the Create New Work Path button. Uncheck the Rubber Band box.

You’ll draw a large upside-down “L” shape, which will become your banner and left-side menu. Start by clicking in the uppermost left-hand corner of the document. This sets the first anchor point of the shape. Next, click in the upper-right corner. Photoshop draws the connecting line. Hold down the SHIFT key for a straight line.

Now, with an eye on the ruler, place an anchor point along the far-right side of the document at 100 pixels down. This is how tall the banner will be.

Again using the ruler, click to set a point at 150 pixels across and 100 pixels down. The next line is the curve, so this time when you set the point, keep your finger on the mouse. Click at 100 pixels across and 150 down. Now pull down with the mouse. There’s the curve. But don’t let go of the mouse. Press the SHIFT key to straighten the line. Let go of the mouse when you’re satisfied.

Move the cursor to the very bottom of the document, 100 pixels from the left-hand edge, and set another point. Then click in the bottom-left corner, and finally close the shape by clicking the starting anchor point.

To add color to the shape you’ve drawn, right-click the shape and select Fill Path. Select your foreground (or background) color, then OK.

Text For Title & Menu

In the Layers palette, click the Create A New Layer button (the notepad icon). Click the Type tool (the “T” icon). In the text menu, choose a font style, size, and color. Then place the cursor on the page and type a menu across the top of the banner. Alter font style and size by highlighting words and experimenting. We’re using Jokerman font in all caps, size 14. Between each menu item we add four spaces. When you’re finished, use the Move tool to arrange the text layer on the page.

When adding text in a layer, keep in mind that although Photoshop does a good job spacing text horizontally, it does not space text well vertically. So, for example, to properly space our two-line page title"Mike’s Page,” we use two layers.

When our design becomes a real Web page, the left menu will vary depending on which section of the site you’re in, and to create graphics for all those sections would be too time-consuming. So we won’t use graphics. Instead we’ll type them later, in HTML (Hypertext Markup Language).

Conversion To Web

Converting your Photoshop design to HTML is like packing, moving, and unpacking a large work of art. First, flatten the image to combine all layers into one. Be sure to save the original PSD (Photoshop’s default document file format) file, however, to preserve those layers. Then you’ll break up the banner into sections, copy each section, and save them as Web graphics.

Although Photoshop provides a Slice tool for breaking the banner into sections, it is actually simpler to do it manually. To make sure your selections are perfect, use Photoshop’s page guides to divide your design into manageable sections. Be sure to select the View/Snap To Guides option beforehand.

Finally, reassemble the sections in an HTML table. Using your favorite HTML editor, create a table with cells to hold your banner images. Then use Photoshop’s Rectangular Marquee tool to select, copy, and paste each section into a corresponding HTML table. Keep in mind the banner corner section.

Photoshop’s Web design features are certainly not limited to banners and menus. Use multiple layers for sophisticated mockups to place logos, graphics, and dummy text.