How to Build a Web Page Template from Scratch - dummies

How to Build a Web Page Template from Scratch

By Lisa Lopuck

The standard tool across digital agencies and in-house departments for building website graphics is Adobe Photoshop. Although Fireworks is optimized and purpose-built to produce web-graphic source files, it just has not caught on, probably because of the massive re-training effort it would entail to make whole departments make the switch. To set up a new web-comp template:

  1. Launch Photoshop.

  2. Choose File→New.

    In the dialog box that appears, enter a canvas dimension of 1,200 pixels wide by 1,000 pixels high. Resolution should be set to 72 dpi (pixels per inch, actually). The color mode should be RGB color. The background color can be white. Click OK.

  3. From the Photoshop menu, select Preferences→General.

    On the left, select the Units & Rulers option. Then, in the main window area, for Rulers, select “pixels” from the drop-down menu. Click OK.

    You will be using guides. To do so, you must first turn on the Rulers from the View menu, as shown in Step 4.

  4. Select View→Rulers from the menu.

    After you see the rulers, click the left side ruler and drag a vertical guide and drop it at the 100-pixel mark.


  5. Reset the 0,0 marker.

    In the very top-left corner of your document, at the intersection of the two rulers is a small square with dotted lines in it. Click that square and drag to your guide at the 100-pixel mark, but be careful to stay at the top of the page. What you’re trying to do is keep 0 at the top of your page (where it is now), but set your current 100-pixel guide mark to 0 instead. If you do it properly, you’ll see the numbering update in your top ruler.

  6. Set the second guide marker.

    Click the left ruler again and drag out another guide. Drag this new guide across the page and drop it on the 1,000-pixel mark. If you’ve done Steps 1–6 properly, you should have a 100-pixel margin on either side of your two guides. Save the document.

  7. Turn the background into a layer.

    In the Layers panel, you should have just one layer called “Background” in italics. Double-click it to turn it into a layer that’s capable of transparency, and of being moved into layer sets that you’ll create. In the window that appears, leave the name as Layer 0 for now and click OK.

  8. Create four layer sets.

    At the bottom of the Layers panel you’ll see a folder icon. Click it four times to create four distinct layer sets (folders that can contain layers). They’re a great way to help keep you organized. Here are the steps:

    1. Double-click the Group 1 text of the bottommost layer set and rename it to BACKGROUND in all caps.

      Use all caps for folder names and lowercase for layer names to help distinguish them.

    2. Click and drag the Layer 0 layer into the BACKGROUND layer set.

    3. Double-click the Group 2 text and rename it FOOTER.

    4. Rename the other two layer sets CONTENT and NAVIGATION.

    These layer sets are just your starting point, and you may need fewer or more as you go. Save your template.


You now have a blank canvas ready for your creative inspirations. As you create new layers to work on different parts of your comp, name them right away and make sure they are dragged into the appropriate layer set. Not only will that help you stay more organized, any other designer who picks up your comp to make changes — as well as the developer who has to use it to build the HTML version of it — will be better able to make sense of it.