Next I would take my second image. For the sake of demonstrating how the page will begin to look, we will place the images in a table with 0 border, 0 cellpadding, and 0 cellspacing. We will seperate the two images in to two different dimensions in 1 row. The widths of the two dimensions should be specified to the width of the images. The width of the first image is 130 pixels and the width of the second image is 270 pixels. They should already have the same height after you broke them up in Photoshop. For me, their height was 128. Here's the table:

The next "addition" on to this row becomes more complex. In fact, because of the way percentages work in HTML, you'll need to do the next two images at the same time. Create your new table with 4 dimensions in the 1 row, once again with 0 border, 0 cellpadding, and 0 cellspacing. This time, also give the table an overall width of 80%. Make the first two columns with widths of 130 and 270 again, respectively. Now the third column should be specified to be a width of 100%, meaning it will stretch to all the width that it is allowed. Since it will be surrounded by two constrained pixel amounts, it will lock in to the area. Before doing the third column of the first row, we need to make a clearpixel image. I also suggest doing the fourth column first, anyway. The width of my fourth column ended up being 290 pixels. Insert your fourth image, and then we will move on to the clearpixel and stretching the third column.

Making a Clearpixel Image

When making a page that requires stretched images (which this design does), I always like to make an image that is completely transparent that I can place anywhere to take up space. This type of image is called a clearpixel image. It's a 1x1 image and I usually call it clearpixel.gif. To make one of these, open Photoshop, go to File->New, set the width and height both to 1 and sent the Contents field to "Transparent". Once the image is created, simply go to File->Save As and save it as a .GIF file named anything you want. As I mentioned, clearpixel.gif is a common name, and it will be the name of the image I refer to for the rest of the tutorial. Here's a sample of what the File->New window should look like in Photoshop when you are creating the clearpixel:

Image

Click on the thumbnail to enlarge...

Back to Page 2 | On to Page 4