Basic Slicing

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 content 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 (auto, 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.
• User slices are created with the Slice tool.
• Layer-based slices are created with the Layers palette.

Create Slices from Guides

An esay way to crate slices on your file is to use guides.

1. Add guides to an image.
2. Select the Slice tool, and click Slices From Guides in the options bar.

When you create slices from guides, any existing slices are deleted.

Often when using ‘Slices From Guides’, you will also edit your slices using combine and divide.

Divide user slices and auto slices

Use the Divide Slice dialog box to divide slices horizontally, vertically, or both. Divided slices are always user slices, regardless of whether the original is a user slice or an auto slice.
Note: You cannot divide layer-based slices.

1. Select one or more slices.
2. With the Slice Select tool selected, click Divide in the options bar.
3. Select Preview in the Divide Slice dialog box to preview the changes.
4. In the Divide Slice dialog box, select one or both of the following options:

Divide Horizontally Into
Divides the slice lengthwise.

Divide Vertically Into
Divides the slice widthwise.

Define how you want to divide each selected slice:

1. Select and enter a value for Slices Down or Slices Across to divide each slice evenly into the specified number of slices.
2. Select and enter a value for Pixels Per Slice to create slices with the specified number of pixels. If the slice cannot be divided evenly by that number of pixels, the remainder is made into another slice. For example, if you divide a slice that is 100 pixels wide into three new slices each 30 pixels wide, the remaining 10-pixel-wide area becomes a new slice.
3. Click OK.

Combine slices

You can combine two or more slices into a single slice. Photoshop determines the dimensions and position of the resulting slice from the rectangle created by joining the outer edges of the combined slices. If the combined slices are not adjacent or have different proportions or alignments, the newly combined slice may overlap other slices.

The combined slice takes the optimization settings of the first slice in the series of slices you select. A combined slice is always a user slice, regardless of whether the original slices include auto slices.
Note: You cannot combine layer-based slices.

1. Select two or more slices.
2. Right-click (Windows) or Ctrl-click (Mac OS) and choose Combine Slices.

Create a Slice with a Slice Tool

Using the Slice Tool takes some care and attention must be taken to not accidentlly create unwanted extra guides.

1. Select the Slice tool . Any existing slices automatically appear in the document window.
2. Choose a style setting in the options bar:

Normal : Determines slice proportions as you drag.

Fixed Aspect Ratio : Sets a height-to-width ratio. Enter whole numbers or decimals for the aspect ratio. For example, to create a slice twice as wide as it is high, enter 2 for the width and 1 for the height.

Fixed Size : Specifies the slice’s height and width. Enter pixel values in whole numbers.

Drag over the area where you want to create a slice. Shift-drag to constrain the slice to a square. Alt-drag (Windows) or Option-drag (Mac OS) to draw from the center. Use View > Snap To to align a new slice to a guide or another slice in the image. See Move, resize, and snap user slices.

Create a Slice from a Layer

A layer based slice encompasses all the pixel data in the layer. If you move the layer or edit the layer’s content, the slice area automatically adjusts to include the new pixels.
A layer-based slice is updated when the source layer is modified.

Layer-based slices are less flexible than user slices; however, you can convert (“promote”) a layer-based slice to a user slice. See Convert auto and layer-based slices to user slices.

1. Select a layer in the Layers palette.
2. Choose Layer > New Layer Based Slice.

Don’t use a layer-based slice when you plan to move the layer over a large area of the image during an animation, because the slice dimension may exceed a useful size.

Slices in the Save for Web & Devices Dialog Box

If your image contains multiple slices, you must specify the slices to be optimized. You can apply optimization settings to additional slices by linking the slices. Linked slices in GIF and PNG-8 format share a color palette and dither pattern to prevent the appearance of seams between the slices.

To show or hide all slices, click the Toggle Slices Visibility button .
(Photoshop only) To show or hide auto slices, choose Hide Auto Slices from the Preview pop-up menu.

To select slices in the Save For Web & Devices dialog box, choose the Slice Select tool , and then click a slice to select it. Shift-click or Shift-drag to select multiple slices.

Note: In the Save For Web & Devices dialog box, unselected slices are dimmed. This does not affect the color of the final image.

To view slice options in the Save For Web & Devices dialog box, select the Slice Select tool, and double-click a slice.

To link slices, select two or more slices and choose Link Slices from the Optimize pop-up menu (to the right of the Preset menu). The link icon appears on the linked slices.

To unlink a slice, select the slice, and then choose Unlink Slice from the Optimize pop-up menu.

To unlink all slices in an image, choose Unlink All Slices from the Optimize pop-up menu.

Slice Options Dialog Box

Display the Slice Options dialog box

Do one of the following:

* Double-click a slice with the Slice Select tool.
* With the Slice Select tool active, click the Slice Options button in the options bar. This method is not in the Save For Web & Devices dialog box.

Specify a slice content type

You can specify how the slice data appears in a web browser when exported with an HTML file. The available options vary according to the slice type you select.

Image slices contain image data. This is the default content type.

No Image slices let you create empty table cells that can be populated with text or a solid color. You can enter HTML text in a No Image slice. If you set the “Text is HTML” option in the Save for Web & Devices dialog box, the text is interpreted as HTML when viewed in a browser. Slices of type No Image aren’t exported as images and can be previewed in a browser.
Note: Setting options for an auto slice promotes the slice to a user slice.

1. Select a slice. If you are working in Photoshop, double-click the slice with the Slice Select tool to display the Slice Options dialog box.
2. In the Slice Options dialog box, select a slice type from the Type pop-up menu.

Choose a background color for a slice

You can select a background color to fill the transparent area (for Image slices) or entire area (for No Image slices) of the slice.

Photoshop does not display the selected background color—you must preview the image in a browser to view the effect of selecting a background color.

1. Select a slice. If you are working in the Photoshop Save For Web & Devices dialog box, double-click the slice with the Slice Select tool to display the Slice Options dialog box.
2. In the Slice Options dialog box, select a background color from the Background Color pop-up menu. Select None, Matte, Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (using the Adobe Color Picker).

Assign URL link information to an Image slice

Assigning a URL to a slice makes the entire slice area a link in the resulting web page. When a user clicks the link, the web browser navigates to the specified URL and target frame. This option is available only for Image slices.

1. Select a slice. If you are working in Photoshop, double-click the slice with the Slice Select tool to display the Slice Options dialog box.
2. In the Slice Options dialog box, enter a URL in the URL text box. You can enter a relative URL or absolute (full) URL. If you enter an absolute URL, be sure to include the proper protocol (for example, http://www.adobe.com, not www.adobe.com). For more information on using relative and full URLs, see an HTML reference.
3. If desired, enter the name of a target frame in the Target text box:

_blank
Displays the linked file in a new window, leaving the original browser window open.

_self
Displays the linked file in the same frame as the original file.

_parent
Displays the linked file in its own original parent frameset. Use this option if the HTML document contains frames and the current frame is a child. The linked file appears in the current parent frame.

_top
Replaces the entire browser window with the linked file, removing all current frames.The name must match a frame name previously defined in the HTML file for the document. When a user clicks the link, the specified file appears in the new frame.
Note: For more information on frames, see an HTML reference.

Add HTML text to a slice

When you choose a slice of type No Image, you can enter text to be displayed in the slice area of the resulting web page. This can be plain text or text formatted with standard HTML tags. You can also select vertical and horizontal alignment options. For more information on specific HTML tags, see an HTML reference.

Photoshop does not display HTML text in the document window; you must use a web browser to preview the text. Be sure to preview HTML text in different browsers, with different browser settings, and on different operating systems to confirm that your text is displayed correctly on the web.
Note: The amount of text in a No Image slice can affect the layout of an exported page.

1. Select a slice. Double-click the slice with the Slice Select tool to display the Slice Options dialog box. You can double-click the slice in the Save For Web & Devices dialog box to set additional formatting options.
2. In the Slice Options dialog box, select No Image from the Slice Type menu.
3. Type the desired text in the text box.
4. (Save For Web & Devices dialog box only) If the text includes HTML formatting tags, select the Text Is HTML option. If you don’t select this option, HTML tags are ignored and all text appears as unformatted plain text on the resulting web page.
5. (Save For Web & Devices dialog box only) If desired, select options in the Cell Alignment section of the dialog box:

Default
Uses the browser’s default for horizontal alignment.

Left
Aligns the text to the left side of the slice area.

Center
Aligns the text to the center of the slice area.

Right
Aligns the text to the right side of the slice area.

Default
Uses the browser’s default for vertical alignment.

Top
Aligns the text to the top of the slice area.

Baseline
Sets a common baseline for the first line of text in cells in the same row (of the resulting HTML table). Each cell in the row must use the Baseline option.

Middle
Centers the text vertically in the slice area.

Bottom
Aligns the text to the bottom of the slice area.