Slices  are the method by which you slice or cut up images to generate HTML Tables  for precise Layout.  By default, an image is surrounded by one Slice, or a table with only one column and row.  As you add custom Slices, ImageReady generates a Table with a variety of columns, rows, and GIF spacers.  There are two types of Slices, User-Slices which you, the user, create and modify, and Auto-Slices which ImageReady generates to create the HTML Table.  To create User-Slices you use the Slice Tool .

Slice Tool

Use the Slice Tool  to create User-Slices .  Select from Normal (freehand), Constrained Aspect Ratio , and Fixed Size Styles  to determine the behavior of the Slice Tool.

Slice Select Tool

Use the Slice Select Tool  to move Slices  and modify Slice size by {Clicking} and dragging size handles.

You’ll notice the moment you select the Slice Tool  the default Auto-Slice is made visible around the image.  Auto-Slices  are distinguished by a gray box containing the Slice number (Slices are numbered from left to right and top to bottom.)  Before you Slice “navbar” it’s a good idea to crop it.  Use the Crop Tool  to resize the canvas.  Remove as much empty space as you possibly can without affecting either the buttons or their drop shadows.

Select the Slice Tool  and {Click} and drag a Slice around the “contact” button.  User-Slices  are distinguished by a blue box displaying the Slice number as well as the Image Slice indicator.  You’ll also notice ImageReady has generated other Auto-Slices to create an HTML Table.

Use the Slice Tool  to create two more User-Slices  around the “about” and “links” buttons.  Use the Slice Select Tool  to fine-tune the size and location of your Slices.  To manage Slices you use the Slice Palette.

The Navigation Bar  with User Slices .

Slice Palette
The Slice Palette consists of a Slice Thumbnail displaying the Slice contents and current Image Type (JPEG, GIF, PNG), the Type (Image, No Image), Name (defaults to image title, underscore, Slice number), URL, Target, and BG (Background Color ).

The Slice Palette

Type
Select Image if the Slice contains image information or No Image to input text.

Name
Accept the default naming convention or enter a custom name.  The name determines the name of the actual image file when you save the images and HTML.

URL
Enter an absolute or relative URL if you know at this point in the production  where your button will link too.

Target
Enter the name of the target Frame if you’re using Framesets in your web site.

BG
Select a Background Color  to be applied to the image when you save the optimized version.  None defaults to a white background.

Select the “contact” Slice and rename it “contact” in the Slice Palette.  Select the “trips” and “links” Slices  and rename them accordingly in the Slice Palette.

Reselect the “contact” Slice.  Select the Rollover Palette and add a new State.  Use the Layers  Palette  to change the text from white to black and turn the visibility of the Drop Shadow  off in the new Rollover State.  Leave the mouse event at Over.  Do the same for the “trips” button and the “links” button.