Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Photoshop

  • Print
  • + Share This
From the author of

[Part 7 of 8]

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.
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.

slice toolsImageReady's slice tool (left)
and slice select tool

Slice window
Selecting the first of the three contiguous
slices in ImageReady's Slice window

Layers palette
mouse states
Changing the visibility in ImageReady's Layers palette to define the mouse-down state
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.

Previewing the buttons in Internet Explorer
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.

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. Wow!

Saving HTML and images

  • + Share This
  • 🔖 Save To Your Account