Adobe Education

Adobe Web Tech Table of Contents:

Lessons revised for CS2

Lessons revised for CS

Original lessons

Student working on a computer

Unit 10: Intermediate Graphics

Lesson 10.5: Slicing Images

Creating Slices

Creating User Slices
Creating Layer-Based Slices

Creating User Slices

User slices are those slices defined by the Slice Tool in either Photoshop or ImageReady. ImageReady's Slice tools can be made into a separate toolbar by clicking the bottom row of the slice options.

User slices are identified by a blue symbol and use solid lines to create an outline around the slice. Auto slices are those areas left over (not defined by the Slice Tool). They are identified by a grey slice symbol and dotted outlines. Notice the symbols are numbered to help track the slices. To put these slice symbols into a context, Figure 10.5-1 shows an image with two auto slices and three user slices.

Figure 10.5-1: Slice Example

User Slices in Photoshop and ImageReady

To create a user slice, follow these steps:

Open Photoshop or ImageReady.
Open the image to be sliced.
Select the Slice Tool.
Select the desired options in the Slice Tool Options Palette (see Figure 10.5-2).

Figure 10.5-2: Photoshop's Slice Tool Options Palette

The palette's Style drop-down box includes three options:
- Normal (default) — Sets the slice area by dragging the Slice tool
- Fixed Aspect Ratio — Sets a height to width ratio
- Fixed Size — Sets both the height and width of the slice to a specific number of pixels
Drag over the area of the image to be defined as a user slice.
- The slice area can be constrained to a square by holding the Shift key while dragging.
- The slice area can be drawn from the center by Alt-dragging (Windows) or Option-dragging (Mac).

Additional Information
Slices can be aligned with each other (edge-to-edge) by enabling the Snap option from the View menu.

Demonstration or Practice Activity

Using Photoshop or ImageReady, create a new document.
Draw a simple, colored rectangle with a size of approximately 2 x 3 inches.
Add three text layers to the document (e.g., Football, Basketball, Baseball). Be sure to change the text color before creating the text layers.
Arrange the text layers within the rectangle so that it can be divided into three pieces (i.e., don't overlap the three words).
Save the document as slices.psd.
Select the Slice Tool. What do you notice about the image when the Slice Tool is selected? If the image contains a background, is the background contained within the image slices? If so, what might you do to slice only the desired image (i.e., if you did not want the background to become part of the sliced image that will end up on a Web page)?
Review the options in the Slice Options bar.
Create one user slice by dragging over one of the text sections created in step 3 above.
In similar fashion, create two additional slices.
Examine the slices in terms of their numbering, user slices versus auto slices, etc.
Close the document without saving the changes related to adding slices.

In addition to creating user slices by using the Slice Tool, Photoshop and ImageReady both allow slices to be created from guides. (To review the basics of using guides, revisit the Illustrator's Document Window and Artboard section of the Illustrator Basics lesson; guides work similarly in Illustrator, Photoshop, and ImageReady.)

To create user slices from guides, follow these steps:

Open Photoshop or ImageReady.
Open the image to be sliced.
Add guides to the image as desired.
Follow the directions below for the desired program:
- In Photoshop:
  1. Select the Slice Tool.
  2. Select Slices From Guides in the Options bar.
- In ImageReady, perform the following menu selections:
  Slices > Create Slices from Guides

Demonstration or Practice Activity

Using Photoshop or ImageReady, open the previously created slices.psd document.
Add guides to the image, dividing it into three text sections.
Create three slices from the guides.
Close the document without saving the slice-related changes.

ImageReady Only User Slices

ImageReady includes the option to create user slices from a selection; Photoshop does not provide this option. If the selection is not rectangular, ImageReady will create a rectangular slice area large enough to enclose the entire selection.

To create a user slice from a selection in ImageReady, follow these steps:

Open ImageReady.
Open the image to be sliced.
Select a portion of the image by using the Rectangular Marquee tool.
Follow these menu steps:
Select > Create Slice from Selection

Demonstration or Practice Activity

Using ImageReady, open the slices.psd document.
Use the Rectangle Marquee tool to select the center text section of the image.
Create a slice from the selection.

Creating Layer-Based Slices

To create a layer-based slice in either Photoshop or ImageReady, follow these steps:

Open Photoshop or ImageReady.
Open the image to be sliced.
Select the layer within the Layers Palette to be used as a slice.
Follow these menu steps:
Layer > New Layer Based Slice

Layer-based slices encompass all the pixel data in the layer, eliminating transparent pixels. Photoshop and ImageReady use the smallest rectangle slice possible to include all the image data from the layer.

Demonstration or Practice Activity

Using Photoshop or ImageReady, create a new document.
Draw three small, non-overlapping, colored squares, each on its own layer.
Save it as slice_layers.psd. You will reuse this image file later.
Select one of the layers.
Create a slice based on the selected layer.
In like manner, create slices based on each of the layers.

Accessibility Alert

Alternate text should be added to any slice created. To add alt text to a slice, follow these steps:

Choose the Slice Select Tool.
Select the desired slice.
Add alt text using one of the following options:
- Select the Slice Options button from Photoshop's Options Palette and enter the desired alt text.
- Select the Slice Palette in ImageReady. If the Alt Text field is not visible, click the flyout menu button and select Show Options; enter the desired alt text in the Alt field. Double-clicking the Slice tab of the palette will toggle through palette displays.