< Back
Page 7 of 7
Like this article? We recommend
12 Slicing the buttons apart. Open ImageReady's Slice window (Window,
Show Slice) and click the Original tab in the main window to display the panel
of buttons. Choose the slice tool and turn on Snap To Slices in the Slice menu.
Then drag the slice tool across the leftmost button to create the first slice.
We dragged all the way to the left edge of the middle button to select enough
of the white background so that the glowing edge of the middle button's mouse-down
state wouldn't have room to show. Similarly, create a slice for the middle button,
and another for the rightmost button.
13 Assigning states. When all the slices are set, click the first
button slice with the slice select tool to make it active. Open the Rollover palette
(Window, Show Rollover) and you'll find the first button in its rest, or Normal,
state waiting for you. Duplicate this button by clicking on the New Rollover State
icon next to the trash icon at the bottom of the window; the duplicate becomes
the Over state. Then click in the visibility column of ImageReady's Layers palette
to make visible the rollover state layer of your buttons file. This will change
the Over image in the Rollover window. Duplicate the Over state by clicking the
New Rollover State icon, and change the visibility in the Layers palette so the
mouse-down buttons layer is visible as the Down state in the Rollover window.
14 Previewing and saving. When you finish this process, you can preview
the operation of the buttons in your browser from within ImageReady: Choose File,
Preview In, and choose the browser. You can move the cursor and press the mouse
button to check the rollover and mouse-down states, although the entire panel
of buttons will act like one big button. If the states look the way you want them
to, export the buttons slice-by-slice: Click the first slice with the slice select
tool, and choose File, Save Optimized As. In the Save Optimized dialog box (below),
enter a name for this button (we called ours "LeftBut") and turn on all three
saving options: Save HTML File, Save Images, and Save Selected Slices Only.
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
[Part 7 of 8]
| PREVENTING OVERLAP |
| With Snap To Slices turned on in ImageReady's View menu, dragging a side handle snaps the slice edge to the one next to it, so that slices won't overlap. Another way to ensure that slices won't overlap is to turn on the rulers (View, Show Rulers) and drag guides from the left ruler to provide snapping lines for the slices. |
ImageReady's
slice tool (left)
and slice select tool
Selecting the first of the three contiguous
slices in ImageReady's Slice window
  Changing the visibility in ImageReady's Layers palette to define the mouse-down state |
 Previewing the buttons in Internet Explorer |
Select each of the other slices and save them in the same way. Then work in
your Web editor to combine all the elements and set the final links. 
Saving HTML and images
< Back
Page 7 of 7