Slice Tool in ImageReady 2.0
Now that you've completed your brilliant composition in Photoshop and are ready to move out of the seemingly endless tweak mode, you need to translate your design to a Web-usable form. Most seasoned Web designers will tell you that there are many variables that have an impact on the look of your design, such as file size, the efficiency of your table structure, and the use of JPEGs vs. GIFs. ImageReady expedites the process and provides a canvas for speedy experimentation.

While in Slice mode, you can distinguish image slices from empty slices by the small blue icon to the right of the slice number.

Switching to Slice Mode
To move and edit slices, you'll need to switch to the Show Slices mode. When your image is open, just press the Q key or the Slice mode button on the toolbar. Once in Slice mode, use the Knife and Slice Move tools to create your ideal layout quickly. Once you get the hang of it, ImageReady will save you a great deal of time optimizing images and establishing an efficient layout for your design.

Quick and Painless Table Structures
Use the Slice tool as a great visual starting point for complex table structures. If you have areas that are similar, such as navigation buttons, you can use the Duplicate option in the Slice palette to copy slices. You can assign URL links, ALT tags, and different compression settings to each slice. For example, in an image map or navigation table, you might apply JPEG compression to a photographic area, but use GIF compression for text and solid colors.

1. Open your file. 
2. Switch to Slice mode. 
3. Drag the Knife tool around your image to section off the areas of your layout. 
4. In the File menu, go to Save Optimized to export your layout to HTML. ImageReady will generate the code and slice the images to fit your tables. Experiment with the options in the Save dialog box to get the code that fits your preferences. 
5. Open and edit the HTML file with your favorite editor.

Export Code Without Images
By default, ImageReady fills every <TD> with an image. We all know that it's not efficient Web design to fill white space with a large white image. You have the option to switch off this default and export a <TD> without an image in it. In fact, you can switch all the slices to No Images and export an HTML file as a frame for complicated table work.

Here's how to export code without images:

1. Open your file. 
2. Select a slice. 
3. In the Slice palette, choose No Image in the Type pull-down menu to make the selection empty. You can even enter text if you plan on using this <TD> for a type column. 
4. In the File menu, go to Save Optimized to export your layout to HTML. Again, experiment with the options in the Save dialog box to get the code that fits your preferences.