By Kurt Nimmo (nimmo@pcc.net)

In the old days, when Photoshop was an application intended primarily for print media designers, the task of slicing up a graphic for insertion in an HTML table was laborious. It made sense to draft up the table like a floor plan on paper, plotting which segment of the graphic would fit in a particular cell or row of the table. One mistake, one miscalculation, and you had to not only redesign the table, but often go back and cut the graphic up again. All of this, to say the least, was time consuming and frustrating.

Enter Photoshop 5.5, which now comes bundled with ImageReady 2.0, a sister application designed with Web developers in mind. Slicing up graphics and putting them in tables is now easy - almost too easy - and you no longer need to take out paper and pencil and sketch a floor plan before actually slicing up the graphic for insertion in a table. Life for the harried Web developer suddenly became a little easier and less taxing.

In this article, I will show you how to render your graphics into tables with Photoshop and ImageReady. I assume that you already know HTML and are familiar with previous versions of Photoshop.

For the example here, I created three buttons to be used as navigation links on a Web page. These were created with standard techniques, using layers and text (Figure 1). It is important that we include guides, since these will be used to slice the graphic with ImageReady 2.0. It is helpful to imagine these guides as the rows and cells of the table where the sliced graphics will eventually go. This should be a familiar concept to you if you have used guides in the past to cut up graphics for table insertion.

Figure 1: Three button navigation graphic with guides