Developing an Image Intensive Design

Tables bring the advantage of pre-designing a web page in a graphics software such as Adobe Photoshop and bringing them up in to smaller images, later to be placed in tables.

We will demonstrate with the following image how to break up an image to work as a complex web design. We will utilize both Adobe Photoshop and Macromedia Dreamweaver in order to do this.

Image

Click on the thumbnail to enlarge...

Now look at the image as it is split by guides in Photoshop:

Image

Click on the thumbnail to enlarge...

At this point, the break up of this image may same confusing, but with time and practice it will eventually become simple to do. One thing to be careful about when breaking up an image, however, is to be exact on sizes. With tables, dimensions are split to specific pixel sizes or percentages. When designing a page, you want the dimensions of the table cells to fit precisely to the image it corresponds to.

On to Page 2