Slicing Images

If your Web graphic is going to be big (in terms of its width and height), or if parts of it should serve as links to different pages within your site (or to other Web sites entirely), you may want to slice the image. By slicing a large image into rectangular chunks, you can make a large image load faster, because each chunk is actually a smaller image file that loads more quickly than the whole image would if you left it intact. When all of the sliced chunks load, their finished appearance looks just like the unsliced original ” in fact, unless the individual slices appear one at a time, or if the site visitor checks the HTML source code (by choosing View Source from the browser menu), the fact that the image is made up of slices is invisible to the site visitor.

Illustrated in Figure 14-26, slices are rectangular containers that act like children's building blocks, each of which contains just enough of the original graphic to fit together into a seamless whole. The two blocks marked in blue are the user slices, the ones that were drawn manually, using the Slice tool. The remaining blocks are auto slices , which Photoshop creates automatically to fill in the gaps around the user slices. In the figure, a total of four slices (two user and two auto) are needed to build the entire image.

Creating slices

Photoshop provides two slice tools, one for drawing slices and one for editing them. Press the K key to select the Slice tool (highlighted in Figure 14-26), which lets you draw slices. That tool shares a flyout with the Slice Select tool, which you use to move and scale slices.

Draw a rectangle around the portion of the image that you want to slice into an independent image; Shift+drag to constrain the shape of the slice to a square. For each slice that you create, a number appears in the upper-left corner of the slice, as shown in Figure 14-26. Here are a few other things you should know:

• As you draw your user slices, Photoshop automatically fills in the auto slices, which it differentiates using dotted outlines. The program also numbers the slices from left to right and then top to bottom. User slice numbers appear in blue, and auto slice numbers appear in gray.

• Simple tables are reliable tables. This means you want to draw as few slices as absolutely necessary. Avoid overlapping slices and avoid having two slices that almost, but don't quite, touch, because both result in Photoshop having to draw extra auto slices.

  Tip  

  If you need help aligning your slices, choose View Snap To Slices to snap one user slice into alignment with another. Although this option is off by default, it's hard to think of any reason not to always have it on.

  Tip  

  You can also align slices on the fly. While drawing a slice, press and hold the space- bar to move the slice as you drag. Release the spacebar to put the slice down and return to sizing it.

• To create a slice that surrounds everything on a particular layer, select the layer in the layers palette and then choose Layer New Layer Based Slice. If you later change the layer's contents, Photoshop redraws the slice boundary as necessary to include the new pixels.

  Tip  

  Use this technique when saving slices that contain layer effects, such as drop shadows. This way, you can edit the effect without having to worry about redrawing the slice manually if the new effect takes up more space.

• Photoshop can also make slices from guides. First drag one or more guidelines from the horizontal and vertical rulers (View Rulers) to establish divisions inside your image. Then select the Slice tool and click the Slices From Guides button in the Options bar.

• To hide and show the slice boundaries, press Ctrl+H ( z +H on the Mac). By default, this hides all on-screen aids, including selection outlines and guides. (If it doesn't, choose View Show Show Extras Options and then turn on the Slices check box and try again.) To toggle the slice boundaries on and off independently, choose View Show Slices.

• After you get your slices just so, choose View Lock Slices to fix them in place. That way, you won't accidentally alter a slice boundary. To delete all slices, choose View Clear Slices.

Editing slices

Need to change a slice boundary? Grab the Slice Select tool (Shift+K) and click a slice to select it. You can also Shift+click and drag in the image window to select multiple slices, and then edit the slice or slices as described in the following list.

Tip  

To temporarily access the Slice Select tool while the Slice tool is active, press and hold Ctrl ( z on the Mac). This means you can Ctrl+click ( z +click) on a slice with the Slice tool to select it. Conversely, if the Slice Select tool is active, holding Ctrl ( z ) gets you the Slice tool.

• A selected user slice displays corner handles. Drag a handle to change the size and shape of the slice. You can also drag inside a selected slice to change its location. Press Backspace (or Delete) to delete it.

• To duplicate a slice, press the Alt (or Option) key and drag the slice.

• When the Slice Select tool is active, you can promote an auto slice to a user slice. Click on the auto slice, click the Promote to User Slice button in the Options bar, and then adjust the boundaries of the slice as desired. If the Slice tool is active, right-click on an auto slice (on the Mac, Control+click) and choose Promote to User Slice.

  Tip  

  This may make you wonder , "Hey, how do I change a user slice to an auto slice?" That's easy ” just delete it.

Setting slice options

Double-click a selected slice with either of the slice tools to display the Slice Options dialog box (see Figure 14-27), which lets you assign a name to the slice image file, add a link, and set other slice attributes described in the following list. You can also access a version of this dialog box with slightly different options (as we'll see) by double-clicking a slice inside the Save For Web window.

Figure 14-27: Double-click a slice with the slice tool to name the slice file thatPhotoshop eventually saves to disk, assign a hyperlink, and insert a status bar message.

• Slice Type: You can fill a slice with either an image or text. To keep the slice an image, leave this option unchanged. If you would prefer to fill the slice with text, select No Image. Photoshop then gives you a box into which you can enter text. Click inside it and press Ctrl+V ( z +V) to paste text copied from, say, a word processor, or simply type the text directly into the box shown in Figure 14-28. Although Photoshop cannot preview this text correctly inside the standard image window, it will save the text when you choose File Save As. Then open the resulting HTML page in your favorite browser to see the text in place.

  
  Figure 14-28: Select the No Image option to fill a slice with text andHTML tags.

  Tip  

  You can likewise insert HTML tags into the text-entry area, but if you do, things get a bit trickier. In Figure 14-28, an <a href> tag ( colorized for emphasis) is placed around a portion of the text. This should turn the word into a hyperlink, but instead, the Web page merely ends up displaying the tags as text. The solution is to visit the Save For Web dialog box, double-click on the slice, and select an option not otherwise found in Photoshop, Text Is HTML. Highlighted in Figure 14-29, this option correctly interprets HTML tags and, after you select it, remains selected as long as you work on the image.

  
  Figure 14-29: Available only when you double-click inside a slice in the Save ForWeb dialog box (andImageReady), the TextIs HTML check box can be selected to properly interpret HTML tags in the text-entry area.

• Name: Photoshop automatically names the slices after the saved image followed by an underscore and number. If you want to override the automatic naming convention, enter your preferred slice name here. (Note that this option and the four that follow apply only when you select Image as the Slice Type.)

• URL: To turn the slice into a link, enter the URL for the page that you want the slice to link to. If you want to link to a page stored in the same folder as the slice, a simple file name will suffice, such as page.html . For files inside other folders, enter the path name. To link to an outside Web page, enter the full URL, such as www.photoshopbible.com .

• Target: If your page includes frames , enter the appropriate frame tag in this option box.

• Message Text: Enter a message to appear in the status bar at the bottom of the browser window when a visitor hovers the cursor over the slice. For those familiar with JavaScript, Photoshop handles this using an onMouseOver="window.status" tag.

• Alt Tag: To provide a text alternate for a button, enter the text into this option box. This is generally used only if a visitor has his or her browser set to display only text ” for people with slower (dial-up) connections to the Web, not displaying graphics was, at one time, considered a way to load content faster. Given the preponderance of graphics, however, and the fact that there may not be any text at all on some pages, very few people turn graphics display off in their browser anymore.

• Dimensions: To specify the exact placement and size of a slice boundary, enter the pixel coordinates into the X and Y options and the dimensions into the W and H options. This can be useful when trying to delete auto slices by getting the user slices into exact alignment.

• Slice Background Type: If your image contains transparent areas, you can fill them with a color selected from this pop-up menu. The Matte option uses the matte color specified in the Save For Web optimization settings. Choose Other to select a color from the Color Picker. Note that you can't preview this background color in Photoshop; you must use a browser.

  Tip  

  When working with text, the background color fills the entire slice. To make sure you have the right color in place, select the Other option; then, after the Color Picker dialog box opens, click a color or click with the eyedropper outside of the Picker to select a color from within your sliced graphic.

Saving slices

After you create and edit your slices to absolute perfection , you'll want to perform both of the following kinds of saves:

• Save the image itself. To save your original image with all slice information, layers, and other bells and whistles intact, choose File Save As and select either the Photoshop (PSD) or TIFF format. (Depending on your platform, other formats may also store slices, but PSD and TIFF are the safest.) When you reopen the image, choose the Slice tool to redisplay the slice boundaries and make any further changes.

• Save the HTML table and slice files. To output the image in Web-ready form, choose File Save For Web. This command enables you to save all the slices as individual image files and create the HTML page that will reassemble the slices in the Web browser.