Slice types, Slicing web pages, About sliced web pages – Adobe Photoshop CS4 User Manual
Page 510
503
USING PHOTOSHOP CS4
Web graphics
Last updated 1/10/2010
Slicing web pages
About sliced web pages
Slices divide an image into smaller images that are reassembled on a web page using an HTML table or CSS layers. By
dividing the image, you can assign different URL links to create page navigation, or optimize each part of an image
using its own optimization settings.
You export and optimize a sliced image using the Save For Web & Devices command. Photoshop saves each slice as a
separate file and generates the HTML or CSS code needed to display the sliced image.
Web page divided into slices.
When you work with slices, keep these basics in mind:
•
You can create a slice by using the Slice tool or by creating layer-based slices.
•
After you create a slice, you can select it using the Slice Select tool
and then move, resize, or align it with other
slices.
•
You can set options for each slice—such as slice type, name, and URL—in the Slice Options dialog box.
•
You can optimize each slice using different optimization settings in the Save For Web & Devices dialog box.
Slice types
Slices are categorized by their content type (Table, Image, No Image) and by the way they are created (user, layer-
based, auto).
Slices created with the Slice tool are called user
slices; slices created from a layer are called layer-based slices. When you
create a new user slice or layer-based slice, additional auto slices are generated to account for the remaining areas of
the image. In other words, auto slices fill the space in the image that is not defined by user slices or layer-based slices.
Auto slices are regenerated every time you add or edit user slices or layer-based slices. You can convert auto slices to
user slices.
User slices, layer-based slices, and auto slices look different—user slices and layer-based slices are defined by a solid
line, whereas auto slices are defined by a dotted line. In addition, user slices and layer-based slices display a distinct
icon. You can choose to show or hide auto slices, which can make your work with user-slices and layer-based slices
easier to view.