Slicing the image in ImageReady

You’ve already learned several ways to create and work with slices in Photoshop, all of which can also be done in ImageReady. Although the options sometimes appear in different locations in the two applications, you can also use either Photoshop or ImageReady to create slices from guides or layers and to optimize individual slices.

In this part of the lesson, you’ll use ImageReady to convert a layer into a slice, create a No Image slice, and create a precisely shaped slice from a selection. Later in the lesson, you’ll work with the Rollovers palette—a feature unique to ImageReady—to build interactivity into your images.

You’ll start by jumping directly from Photoshop to ImageReady. When you use the Jump To feature to go back and forth between Photoshop and ImageReady, the currently active file also jumps with you, opening in the target application.

1.	In the Photoshop toolbox, click the Jump to ImageReady button (). The 15Start.psd file opens in ImageReady.
2.	Choose Window > Workspace > Reset Palette Locations to make sure that the palettes are in their default positions.

Notice that the ImageReady menu bar includes a Slices menu, and that a Slice palette tab appears in the Animations palette group in the lower left area of the workspace. This menu and palette group appear only in ImageReady, not in Photoshop.

Creating a custom workspace in ImageReady

To prepare for your ImageReady work with slices and rollovers, you’ll streamline the work area by closing the palettes you won’t need for these tasks and then resizing and arranging the ones you do need. By removing the clutter of unneeded palettes, you maximize your efficiency for these types of tasks. You’ll save this arrangement as a custom workspace that you can reuse later.

To get a sense of the workspace arrangement you’re aiming for, see the illustration with the final steps of this procedure.

Experimenting with slices created from guides

In Photoshop and ImageReady, you can convert all the areas between guides into user slices. When you convert guides into slices, the entire image is sliced and you lose any preexisting slices.

1.	Choose File > Save, and then choose View > Show > and make sure that checkmarks appear by both Slices, Autoslices, and Guides commands. If not, select those commands now, as needed.
2.	In the toolbox, select the slice select tool (), and then select the Designs_button slice in the image window. In the Slice palette, notice that the slice name, URL, Target, and Alt text that you entered in Photoshop appear in this ImageReady palette.
3.	Choose Slices > Create Slices From Guides. This is a quick method for creating slices for every rectangular area between the guides.
4.	Use the slice select tool to select the Designs_button slice again. Notice that the options in the Slice palette for the Designs_button slice have changed to a default name based on the filename and slice number, and you’ve lost the options you set in Photoshop. Because that isn’t what you want to happen, you’ll undo this process.
5.	Choose Edit > Undo Create Slices From Guides.
6.	Choose View > Show > Guides to deselect the Guides command and hide the guides.

In Photoshop, you can perform this same task by selecting the slice tool () in the toolbox, and then clicking the Slices From Guides button on the tool options bar.

Creating a layer-based slice

Another method for defining slices in Photoshop and ImageReady is to convert layers into slices. A layer-based slice includes all the pixel data in the layer. When you edit the layer, move it, or apply a layer effect to it, the layer-based slice adjusts to encompass the new pixels. To unlink a layer-based slice from its layer, you can convert it to a user slice.

You’ll create a slice based on the Copyright Strip layer, and then apply a layer effect to it so you can see how the slice adjusts to the new effect.

1.	In the Layers palette, expand the Copyright Strip layer set and select the Strip Background layer. The Strip Background layer contains the white strip that goes across the bottom of the banner.
2.	Choose Layer > New Layer Based Slice. ImageReady replaces the auto slices with one layer-based slice for the entire layer. Notice the icon () in the upper left corner of the slice that indicates that the slice is layer-based. Note You can still apply layer styles to the layer that you used to create the layer-based slice. The dimensions of the slice automatically increase to accommodate any extra space required to show the effect.
3.	Choose File > Save to save your work in ImageReady.

Creating No Image slices

In ImageReady and Photoshop, you can create No Image slices and add text or HTML source code to them. No Image slices can have a background color and are saved as part of the HTML file.

The primary advantage of using No Image slices for text is that the text can be edited in any HTML editor, saving you the trouble of having to go back to Photoshop or ImageReady to edit it. The disadvantage is that if the text grows too large for the slice, it will break the HTML table and introduce unwanted gaps.

Now you’ll convert the Copyright Strip slice into a No Image slice and add text to it.

1.	Make sure that the layer-based slice that you created for the copyright information is selected in the image window.
2.	In the Slice palette, choose No Image from the Type pop-up menu.
3.	Enter some copyright information for your banner in the Text box. (We used ©2003 architech art and structure.) You can add a copyright symbol by pressing Alt+0169 on the numeric keypad (Windows) or Option+G (Mac OS). Because you chose No Image for the slice type, the layer of placeholder text (“place copyright info here in slice”) that you do see in ImageReady will not appear in the Web page. The text that you typed will appear in the Web page; however, it does not appear in your sliced image in ImageReady or Photoshop.
4.	In the Layers palette, click the arrow to collapse the Copyright Strip layer set.
5.	Choose File > Save.

Previewing in a Web browser

To make sure that the text you type will fit in the table cell, you’ll preview the image in a Web browser.

1.

In the toolbox, click the Preview In Default Browser button ( or ) or choose a browser from the button’s pop-up menu. The image appears in the browser window, and the HTML source for the preview appears in a table below the image. Without pressing the mouse button, move the pointer over the buttons. Note To add your browser to the Preview In Default Browser button, drag its shortcut (Windows) or alias (Mac OS) into the Preview In folder located inside the Helpers folder in the Photoshop 7.0 folder.

2.

When you’re done previewing the copyright text, quit the browser to return to ImageReady.

Creating slices from selections

In ImageReady, the easiest way to create a slice for a small or unusually shaped graphic element is to select the element and use the selection as the basis for the slice. This is also a useful technique for slicing objects that are crowded closely together. For graphic elements that are distinctly colored, the magic wand tool () may be a good choice for making the initial selection. In this procedure, you’ll use a keyboard shortcut to select a graphic element that is on its own layer.

You can choose URLs that you’ve already entered previously from the URL pop-up menu in the Slice palette.