Slicing Your Images - Part 2
Using Fireworks
Slicing in Fireworks works much the same way. Simply, open your rulers and drag your guides into position on the image. Select File > Export. This opens Export Preview where you can compare which file format best suits your graphic. Press Next and the Export dialog box should open. Select Save a HTML file and Slicing > Slice Along Guides.
Make sure to adjust the image paths in the code if you store your graphics in a different directory to your HTML files. Also, keep an original copy of your image. If things go wrong you can always start again.
Using Photoshop
Once again, open your image and select View > Show Rulers. You must set pixels as the unit of measurement by selecting File > Preferences > Units & Rulers. Select View > Snap to Guides. This helps to snap your selection exactly to the positions you have set.
Use the rectangle marquee tool to select each area of the image. (Make sure feathering and anti-aliasing are turned off). Take careful note of the pixel measurements for each section. You will be needing them to construct your table. You will find these in the Info palette.
Copy and paste each section into a new file. Flatten the images, and be sure to develop a numbering system that will make sense when you are writing the table code. After that it's just a matter of putting the pieces in place.
Writing your Table
This is an example of a table for an image with two rows and six graphics.
<table cellpadding="0" cellspacing="0" border="0" width="340">
<tr>
<td><img src="row1a.gif" width="50" height="60" border="0"></td>
<td><img src="row1b.gif" width="80" height="60" border="0"></td>
<td><img src="row1c.gif" width="50" height="60" border="0"></td>
</tr>
<tr>
<td><img src="row2a.gif" width="50" height="60" border="0"></td>
<td><img src="row2b.gif" width="80" height="60" border="0"></td>
<td><img src="row2c.gif" width="50" height="60" border="0"></td>
</tr>
</table>
To put your image back together seamlessly, take care when writing your code. Set the <table> width to an absolute pixel value, and be sure to have: cellpadding="0" cellspacing="0" border="0".
Make sure that there aren't any line returns in any of the table cells. Set the width and height values in pixels for each graphic, and set border="0". Also be sure to set the width and height values in pixels for every cell to match the graphic it is going to hold.