Creating and viewing slices

Creating and viewing slices

A slice is a rectangular area of an image that you can use to create links rollovers and animations in the resulting Web page Dividing an image into slices lets you selectively optimize it for Web viewing.

About slices

DC

Web page divided into slices:

A Image slice B Layer-based slice C No Image slice D Slice that contains a rollover

You set how the Photoshop or ImageReady application generates HTML code for aligning slices-either using tables or cascading style sheets-in the Output Settings dialog box. You can also set how slice files are named (See "Setting output options on section 442 Types of slices

Slices you create using the slice tool are called user slices; slices you create 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. User slices layer-based slices and auto slices look different-user slices and layer-based slices are defined by a solid line while auto slices are defined by a dotted line In addition, each type of slice displays a distinct icon. You can choose to show or hide auto slices, which makes your work with user- 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 will be 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.

Creating user slices

You can create user slices with the slice tool or from guides and in ImageReady from a selection.

To create a slice with the slice tool:

Select the slice tool . Any existing slices automatically display in the document window.

Choose a style setting in the options bar:

Normal to determine slice proportions by dragging.

Fixed Aspect Ratio to set 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 to specify 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 snap to align a new slice to a guide or another slice in the image (See "Moving and resizing user slices on section 374

To create slices from guides:

Add guides to an image (See "Using guides and the grid on section 45

Do one of the following:

(Photoshop) Select the slice tool and click Slices From Guides in the options bar.

(ImageReady) Choose Slices > Create Slices from Guides.

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

To create a slice from a selection (ImageReady):

Select a portion of the image.

Choose Select > Create Slice from Selection.

ImageReady creates a user slice based on the selection marquee If the selection is feathered the slice covers the full selection (including the feathered edges) If the selection is nonrectangular the slice covers a rectangular area large enough to enclose the full selection.

Creating layer-based slices

When you create a slice from a layer the slice area 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 encompass the new pixels.

Example of how a layer-based slice is updated when the source layer is modified

Layer-based slices are especially useful when working with rollovers If you apply an effect to the layer-such as a drop shadow or glow-to create a rollover state the slice automat- ically adjusts to encompass the new pixels However do not 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.

To create a slice from a layer:

Select a layer in the Layers palette.

Choose Layer > New Layer Based Slice.

Converting auto slices to user slices

You can move duplicate combine divide resize delete arrange align and distribute user slices. You can also apply different optimization settings to user slices In contrast all auto slices in an image are linked and share the same optimization settings. This is because auto slices are regenerated every time you create or edit a user slice or layer-based slice. Converting an auto slice to a user slice prevents it from being changed when regeneration occurs Dividing combining linking and setting options for auto slices automatically converts them to user slices.

To convert an auto slice to a user slice:

Select an auto slice In ImageReady you can select multiple slices (See "Selecting slices"

on section 373

Do one of the following:

(Photoshop) With the slice select tool selected click Promote to User Slice in the options bar.

(ImageReady) Choose Slices > Promote to User-slice(s).

Converting layer-based slices to user slices

Because a layer-based slice is tied to the pixel content of a layer the only way to move, combine divide resize and align it is to edit the layer. You can convert a layer-based slice to a user slice to unlink it from the layer.

To convert a layer-based slice to a user slice:

Select a layer-based slice In ImageReady you can select multiple slices (See "Selecting slices on section 373

Do one of the following:

(Photoshop) Click Promote to User Slice in the options bar.

(ImageReady) Choose Slices > Promote to User-slice(s).

Viewing slices

You can view slices in Photoshop the Photoshop Save for Web dialog box and ImageReady. The following characteristics can help you identify and differentiate between slices:

Slice lines Define the boundary of the slice Solid lines indicate that the slice is a user slice or layer-based slice dotted lines indicate that the slice is an auto slice.

Slice colors Differentiate user slices and layer-based slices from auto slices By default, user slices and layer-based slices have blue symbols while auto slices have gray symbols. In addition ImageReady and the Photoshop Save for Web dialog box use color adjust- ments to dim unselected slices. These adjustments are for display purposes only and do not affect the final image s color By default the color adjustment for auto slices is twice the amount of that for user-slices.

Slice numbers Slices are numbered from left to right and top to bottom beginning in the upper left corner of the image If you change the arrangement or total number of slices slice numbers are updated to reflect the new order.

Slice symbols Indicate whether a user slice has Image or No Image content;

if the slice is a layer-based slice if the slice is linked or if the slice includes a rollover effect .

To show or hide slices:

Do one of the following:

Choose View > Show > Slices. To hide and show slices along with other items use the

Extras command For more information see "Working with Extras on section 47

(ImageReady) Click the Toggle Slices Visibility button .

To show or hide auto slices:

Do one of the following:

Select the slice select tool and click Show Auto Slices or Hide Auto Slices in the options bar.

(ImageReady) Choose View > Show > Auto Slices.

To show or hide slice numbers (Photoshop):

Do one of the following:

In Windows and Mac OS 9.x choose Edit > Preferences > Guides Grid & Slices.

In Mac OS X choose Photoshop > Preferences > Guides Grid & Slices.

Under Slices click Show Slice Numbers.

To show or hide slice numbers and slice symbols (ImageReady):

Choose Edit > Preferences > Slices.

Under Numbers and Symbols select a size for display symbols:

None to display no numbers or symbols.

The small icon to display small numbers and symbols.

The large icon to display large numbers and symbols.

For Opacity enter a value or choose a value from the pop-up slider to change the opacity of the numbers and symbols display.

To show slice lines only (ImageReady):

Choose Edit > Preferences > Slices.

Under Slice Lines select Show Lines Only.

To change the color of slice lines:

Do one of the following:

(Photoshop) In Windows and Mac OS 9.x choose Edit > Preferences > Guides Grid & Slices in Mac OS X choose Photoshop > Preferences > Guides Grid & Slices.

(ImageReady) In Windows and Mac OS 9.x choose Edit > Preferences > Slices in Mac

OS X choose ImageReady > Preferences > Slices.

Under Slice Lines choose a color from the Line Color pop-up menu.

Changing the color of slice lines automatically changes the color of selected slice lines to a contrasting color.

To change slice color adjustments (ImageReady):

Do one of the following:

In Windows and Mac OS 9.x choose Edit > Preferences > Slices.

In Mac OS X choose ImageReady > Preferences > Slices.

Enter a value or choose a value from the Color Adjustments pop-up slider for User slices Auto slices or both ( The User slices option controls color adjustments for both user slices and layer-based slices.)

The value determines by how much the brightness and contrast of unselected slices are dimmed.