Slicing web pages – Adobe Photoshop CC 2014 v.14.xx User Manual
Page 924

Slicing web pages
Slice types
Slice a web page
Convert auto and layer-based slices to user slices
View slices and slice options
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.
A subslice is a type of auto slice that is generated when you create overlapping slices. Subslices indicate how the image is divided when you save
the optimized file. Although subslices are numbered and display a slice symbol, you cannot select or edit them separately from the underlying
slice. Subslices are regenerated every time you arrange the stacking order of slices.
Slices are created using different methods:
Auto slices are automatically generated.
917