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

Selecting Slices

Selecting Slices
Slice Select Options Palette in Photoshop
Slice Select Options Palette in ImageReady

Selecting Slices

Slices are selected by the Slice Select Tool in either Photoshop or ImageReady. Figure 10.5-3 shows the yellow handles that surround a selected slice (in this case, slice 02).

Photoshop and ImageReady use different Slice Select Options palettes; however, many of the tools overlap. We'll begin with the Photoshop Options Palette, and then move into the options available in ImageReady.

Figure 10.5-3: Slice Select Example

Slice Select Options Palette in Photoshop

Figure 10.5-4 shows the Photoshop Slice Select Options Palette. This palette is visible once the Slice Select tool is selected.

Figure 10.5-4: Photoshop's Slice Select Tool Options Bar

The Photoshop Slice Select Options Palette includes the following selection tools. The first four selection tools relate to overlapping slices.

Bring to Front -- Brings the selected slice to the front of the stacking order
Bring Forward -- Brings the selected slice one layer forward in the stacking order
Send Backward -- Sends the selected slice one layer backward in the stacking order
Send to Back -- Sends the selected slice to the back of the stacking order
Slice Options -- Displays Slice Options dialog box
Promote to User Slice -- Changes an auto slice to a user slice (user slices have more editing options)
Divide Slice -- Displays Divide Slice dialog box
Hide Auto Slices -- Toggles the auto slices on (visible) and off (not visible)

Slice Select Options Palette in ImageReady

Figure 10.5-5 shows the ImageReady Slice Select Options Palette. As in Photoshop, this palette is visible once the Slice Select tool is selected.

Figure 10.5-5: ImageReady's Slice Select Tool Options Bar

Notice the first four options in the ImageReady Slice Select Tool Options Palette are the same as those found in Photoshop.

Bring to Front -- Brings the selected slice to the front of the stacking order
Bring Forward -- Brings the selected slice one layer forward in the stacking order
Send Backward -- Sends the selected slice one layer backward in the stacking order
Send to Back -- Sends the selected slice to the back of the stacking order

The next set of options relate to aligning user slices. Aligning user slices can eliminate the need for numerous auto slices, thus making the sliced image more efficient. To use the align options, more than one slice must be selected by Shift-clicking the additional slices with the Slice Select tool.

From left to right, the align options are:

Align Top Edges
Align Vertical Centers
Align Bottom Edges
Align Left Edges
Align Horizontal Centers
Align Right Edges

The distribute options follow the align options . Distribute options allow user slices to be distributed evenly along a horizontal or vertical axis. This helps prevent unnecessary auto slices, therefore making the sliced image more efficient. From left to right, the distribute options are:

Distribute Top Edges
Distribute Vertical Centers
Distribute Bottom Edges
Distribute Left Edges
Distribute Horizontal Centers
Distribute Right Edges

The last two options in ImageReady's Slice Select Options Palette are:

Bring the Slice Palette Forward -- Brings the Slice Palette forward in the window it shares with the Animation and Image Map palettes
Hide Auto Slices -- Toggles the auto slices on (visible) and off (not visible)

Additional Information

Although ImageReady does not offer the Promote to User Slice option from the Slice Select Options Palette, a layer-based slice can be promoted to a user slice by choosing the following menu steps:

Slices > Promote to User Slice

Demonstration or Practice Activity

Open the slices.psd image created previously.
Cut the image into several user slices using the Slice Tool.
Use Photoshop to explore the various slice selection options available with your image, including selecting slices, moving slices forward and backward in the stacking order, etc.
Use ImageReady to explore the various slice selection options available with your image, including selecting slices, aligning slices, distributing slices, etc.