Building the Page in the Image Editor

Many Theme designers will first build a layered image of the wrap-around theme in a drawing or image editing program like Corel Draw (r) or Adobe Photoshop (r). In this tutorial we will use Adobe Photoshop 6. 

Using a program like Photoshop provides the designer the flexibility of laying out the page regardless of table layout constraints. This approach also allows the designer to show his customer a mock up of web page before committing resources to the complete implementation.

Building the Page in Photoshop 6

First, we build a replica of the web page using the design constraints decided on in the previous section. The bevel and shadow tools in Photoshop were used to develop the interesting visual components in the design. 

Layered web page image designed in Photoshop

Once the design is complete, pieces of the image are sliced out to make the design work in the table on the page. In the picture above, note the different pieces of the design were made in different layers. 

Slicing Images in Photoshop

Once the area to slice is determined (see borders section), the layer is selected and the "Layer->New Layer Based Slice" menu item is selected. The Slice Tool can then be used to setup up the slice area for output. 

Once the slice is setup, the "File->Save to Web..." menu item is selected in Photoshop to make the slices into compact GIF images.

Save for Web Dialog in Photoshop using the slice image capability