- Working with Smart Objects
- Working with Sliced Images
- Smart Sliced Images
- Using Save for Web with Slices
- Importing Other Sliced Images
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using Save for Web with Slices
At this point, most of the typical Save for Web settings are inactive, because your image has become a set of multiple images. Use the Slice Select Tool and choose a slice to work with. Shift-click multiple slices to select them, or click and drag with the Slice Select Tool; any slices within the selection marquee are highlighted.
TIP: Opitimizing Individual Slices Glitch
It would appear that you can apply different settings to each slice, but in fact this only works once. To see an extreme example, bring in a sliced JPEG image, then set one slice as a 1-bit (2 color) GIF. When you click OK, the image looks correct in GoLive, with one slice showing up as black and white. However, if you try to apply settings to more than one slice, the entire image assumes the settings. As a workaround, create separate versions of the sliced image in the formats you prefer, then sort them manually.
To preview the image without the overlay indicating where slices occur, click the Toggle Slices Visibility button; clicking a sliced area with the Slice Select Tool automatically displays the overlay again.
Applying properties to slices.
While in the Save for Web dialog, double-click a slice to bring up the Slice Options dialog box. Although the settings here can also be applied in the Layout Editor, doing it in Save for Web means they are retained in the event that the original image changes. Slices show up with dark blue outlines if they have attributes applied.
You can modify a slice in several ways: change its name, add a link to it, set a target for it, specify its Alt text, and compose a message that can be shown when a user rolls their cursor over the slice in some browsers (see Figure 4). If transparency is applied, you can also set a background color for a slice.
){kind=link}
Slice options
In addition to Image, the popup menu at the top of the dialog offers a No Image option. Frequently, designers use sliced images in order to create areas within the image to swap text or other images into. Type some text into the Text Displayed in Cell field, or leave it blank for none. In the Layout Editor, GoLive uses a Layout Text Box to hold the text.
TIP: Edited Text Not Updated
In the Layout Editor, you can freely edit the text placed into a blank cell, but if you go back into Save for Web and double-click that slice, your new text does not appear, only what was entered in the dialog the last time.
If you choose No Image and leave the text field blank, any color you specify in the Background popup menu won't appear. Add a space to the Text Displayed in Cell field to see the background color.
TIP: Text Styling, No Image
The Text Displayed in Cell field only lets you type in straight text… or does it? Although you can't access any of GoLive's text formatting features, feel free to type HTML tags to customize the display of the text.
TIP: Return Slices after No Image
Images with slices set to No Image aren't permanently stricken. Switching the popup menu back to Image restores the image data from the original file.
Save for Web Output Settings.
Taking an original image and creating slices involves managing not only several files, but also the HTML code used to display them. As you would expect, GoLive includes settings for controlling every last tag and filename involved. (We swear, Save for Web is the most Swiss-Army-knife-like software feature we've seen in a long time.)
With the Save for Web dialog open, click the Output Settings button. The popup menu at the top takes you to the four categories of options, or you can use the Prev and Next buttons (see Figure 5 on next page).
){kind=link}
-
HTML. Do you like to be very particular about the output of your HTML? The HTML section controls tag and attribute case, style of line endings, whether to quote attributes, and whether HTML comments are included. However, keep in mind that these settings apply to the HTML file that Save for Web generates and saves with the slices. This HTML is then brought into GoLive. GoLive's HTML formatting options prevail over any HTML choices you might have made here. The Slice Output section gives you the choice between using Cascading Style Sheet positioning to place the slices, or a standard table framework.
-
Background. The Background setting lets you specify an image or color for the HTML file generated by Save for Web.
-
Saving Files. Use the popup menus in the File Naming section to specify file names when working with rollover images. The Optimized Files options lets you define a folder for the generated images, copy the background image you specified in the Background section, and embed an optional copyright notice.
-
Slices. The Default Slice Naming option in this section determines how slices are named when the image is converted. As with the previous section, use the popup menus to set which information (including datestamps) is incorporated into the title.
Output Settings