Creating Slices in Adobe Photoshop CS5
Note: This excerpt does not include the lesson files. The lesson files are available with purchase of the book.
From the book
From the book
From the book
When you define a rectangular area in an image as a slice, Photoshop creates an HTML table to contain and align the slice. Once you create slices, you can turn them into buttons, and then program those buttons to make the web page work.
Any new slice you create within an image (a user slice) automatically creates other slices (auto slices) that cover the entire area of the image outside the user slice.
Selecting slices and setting slice options
You’ll start by selecting an existing slice in the start file. We created the first slice for you.
- In the Tools panel, select the Slice Select tool (
) tool, hidden under the Crop tool (
).
)
When you select the Slice or Slice Select tool, Photoshop displays the slices, with their slice numbers, on the image.
The slice numbered 01 includes the upper-left corner of the image; it also has a small icon, or badge, that resembles a tiny mountain. The blue color means that the slice is a user slice—a slice we created in the start file.
Also notice the gray slices—02 to the right, and 03 just below slice 01. The gray color indicates that these are auto slices, automatically created by making a user slice. The symbol indicates that the slice contains image content. See “About slice symbols” for a description.
About slice symbols
The blue and gray slice symbols, or badges, in the Photoshop image window and Save For Web And Devices dialog box can be useful reminders if you take the time to learn how to read them. Each slice can contain as many badges as are appropriate. These badges indicate the following:
(
) The number of the slice. Numbers run sequentially from left to right and top to bottom of the image.
(
) The slice contains image content.
(
) The slice contains no image content.
(
) The slice is layer-based; that is, it was created from a layer.
(
) The slice is linked to other slices (for optimization purposes).
- In the upper-left corner of the image, click the slice numbered 01 with the small blue rectangle. A gold bounding box appears, indicating that the slice is selected.
- Using the Slice Select tool, double-click slice 01. The Slice Options dialog box appears. By default, Photoshop names each slice based on the filename and the slice number—in this case, 13Start_01.
)
Slices aren’t particularly useful until you set options for them. Slice options include the slice name and the URL that opens when the user clicks the slice.
- In the Slice Options dialog box, name the slice Logo. For URL, type #. The pound sign (#) lets you preview a button’s functionality without programming an actual link. It’s very helpful in the early stages of website design, when you want to see how a button will look and behave.
- Click OK to apply the changes.
)
Creating navigation buttons
Now you’ll slice the navigation buttons on the left side of the page. You could select one button at a time and add navigation properties to it. But you can do the same thing a faster way.
- In the Tools panel, select the Slice tool (
), or press Shift+C. (The Crop tool, Slice tool, and Slice Select tool share the C key as their keyboard shortcut. To change
which of the three tools is selected, press Shift+C.)
Notice the guides above and below the words on the left side of the image.
- Using the guides on the left side of the image, drag the Slice tool diagonally from the upper-left corner above About Museo Arte, to the bottom guide below Contact, so that all five lines are enclosed.
)
A blue rectangle, similar to the one for slice 01, appears in the upper-left corner of the slice you just created, numbered slice 04. The blue color tells you that this is a user slice, not an auto slice.
The original gray rectangle for auto slice 03 remains unchanged, but the area included in slice 03 is smaller, covering only a small rectangle above the text. Another auto slice, numbered 05, appears below the slice you created.
The gold bounding box indicates the bounds of the slice and that it’s selected.
- With the Slice tool still selected, press Shift+C to toggle to the Slice Select tool (). The options bar above the image window changes to include a series of alignment buttons.
Now you’ll slice your selection into five separate buttons.
- Click the Divide button in the options bar.
- In the Divide Slice dialog box, select Divide Horizontally Into, and type 5 for Slices Down, Evenly Spaced. Click OK.
)
You’ll name each slice and add a corresponding link.
- Using the Slice Select tool, double-click the top slice, labeled About Museo Arte.
- In the Slice Options dialog box, name the slice About; type about.html for URL; and type _self for Target. (Be sure to include the underscore before the letter s.) Click OK.
)
The Target option controls how a linked file opens when the link is clicked. The _self option displays the linked file in the same frame as the original file.
- Repeat steps 6 and 7 for the remaining slices in turn, starting from the second slice, as follows:
- Name the second slice Tour; type tour.html for URL; and type _self for Target.
- Name the third slice Exhibits; type exhibits.html for URL; and type _self for Target.
- Name the fourth slice Members; type members.html for URL; and type _self for Target.
- Name the fifth slice Contact; type contact.html for URL; and type _self for Target.
- Choose File > Save to save your work so far.
Creating slices based on layers
In addition to using the Slice tool, you can create slices based on layers. The advantage of using layers for slices is that Photoshop creates the slice based on the dimensions of the layer and includes all its pixel data. When you edit the layer, move it, or apply a layer effect to it, the layer-based slice adjusts to encompass the new pixels.
- In the Layers panel, select the Image 1 layer. If you can’t see all of the contents of the Layers panel, drag the panel from its dock, and expand it by dragging the lower-right corner.
- Choose Layer > New Layer Based Slice. In the image window, a slice numbered 04, with a blue badge, appears over the image of the boy. It is numbered according to its position in the slices, starting from the top-left corner of the image.
- Using the Slice Select tool (), double-click the slice, and name it Image 1. For URL, type image1.html. Type _blank for Target. The _blank Target option opens the linked page in a new instance of the web browser. Click OK.
)
)
Be sure to enter these options exactly as indicated, to match the pages you’ll be linking the slices to.
Now you’ll create slices for the New Wing and Image 2 layers.
- Repeat steps 1–3 for the remaining images, as follows:
- Create a slice from the New Wing layer. Name it New Wing; for URL, type newwing.html; and type _blank for Target. Click OK.
- Create a slice from the Image 2 layer. Name it Card; type card.html for URL, and type _blank for Target. Click OK.
You may have noticed that the dialog box contains more options than the three you specified for these slices. For more information on how to use these options, see Photoshop Help.
- Choose File > Save to save your work so far.