More Info
									            Optimizing Images with Save for Web & Devices           BC29

     • To select all colors in the Color Table that are already Web safe (or    Bonus
       all those that aren’t Web safe), choose Select All Web Safe Colors or   Chapter 1
       Select All Non-Web Safe Colors from the Color Table’s panel menu.
 2. Select Shift/Unshift Selected Colors to/from Web Palette from the

                                                                                  Prepping Web
    Color Table panel pop-up menu.

You can also select colors in the Color Table and convert them to transpar-
ency by clicking the Transparency button in the Color Table, or lock them to
keep them from being removed by clicking the Lock Color button. To remove
colors from the Color Table, select the colors and click the trash can icon.
BC30   Bonus Chapters
      Bonus Chapter 2: Slicing
      Web Images
      In This Chapter
      ✓ Deciding to use slices
      ✓ Defining slices
      ✓ Selecting and modifying slices
      ✓ Setting slice options

      A    re the images on your Web page an attraction or a distraction? Do
           they invite visitors to explore your page or send them fleeing to the
      Back button? Attractive images that load quickly are the key to captivating
      those who visit your site. Unfortunately, few (if any) visitors will stick
      around to see even the most gorgeous images if they take forever to

      Slicing images is a great tool for improving the download speed of your Web
      pages. Instead of loading up your page with huge pictures that download
      slowly, you can slice your images into byte-sized pieces optimized
      for speed, appearance, and special functions, such as links.
      Photoshop creates the HTML (the language used to create
      Web pages) needed to reconstruct your images on your

      This chapter introduces you to the Slice tool found
      in Photoshop. Photoshop’s built-in slicer-dicer has
      everything you need to get started in segmenting
      your images.

Why Slice?
      Although speedy broadband connections are becoming
      more common, some Internet cruisers are still using slow
      connections. For these users, nothing is more painful than
      clicking a link and watching a blank page laboriously download a
      few pixels at a time. When confronted with a page like this, users are likely
      to click their Back buttons and move on.
BC32   Slicing Up Images

         Your solutions, as Webmaster, fall into several categories:

          ✓ Use images with very small dimensions. Buttons and graphic rules
            download quickly. However, they’re usually ornamental or functional,
            rather than centerpieces of your page design.
          ✓ Select the best format for your image. Choosing the JPEG or GIF format
            when appropriate can make a significant difference in how quickly your
            image downloads. You can find out about these formats and how to
            make this determination in Bonus Chapter 1.
          ✓ Optimize the heck out of the image. One image in a particular format
            can be five or ten times as large as the same image in the same format,
            depending on how you optimize it. You can find out how to optimize
            your images in Bonus Chapter 1.
          ✓ Slice your image into pieces. Individually optimize each piece for its
            intended purpose: appearance, download speed, or a combination of the
            two. With a little care, you can take a complicated image and divide it
            into slices that look as good as or better than the original. Slices also
            enable you to easily apply Web features such as rollovers.

         Another point to keep in mind is that different visitors use different screen
         resolutions. If you’re happily cruising the Internet at quadruple-figure resolu-
         tions, that doesn’t mean you should include really large images on your
         pages (even if sliced and optimized). Other users with the same screen reso-
         lution you use may have set their browser windows to a smaller size or may
         be using displays with a maximum 1024 x 768 pixels or smaller. The ability to
         slice images doesn’t mean you can fill your screen with gigantic graphics.

         Slices also let you treat different parts of an image in different ways, associ-
         ating some with Web links to other images or pages, or optimizing each slice

         Design your Web pages to fit your audience. If your site is geared toward the
         masses, make the pages a maximum of 1024 x 768 pixels. If it’s aimed at a
         specialized high-end audience, then you can go larger — 1280 x 1024 pixels,
         or even larger.

Slicing Up Images
         You can create slices from many different kinds of images. Figure 2-1 shows
         a fanciful fictitious Web page, but with the kinds of images you might want to
                                                      Slicing Up Images           BC33

                                                                                                  Chapter 2

                                                                                                        Slicing Web Images
                                                                                    Schaf Photo
Figure 2-1: Slicing a graphic-intensive Web page enables you to individually optimize
selected areas of your image.

For example, you might be interested in slicing the menu of choices on the
left side of the figure so that you can include links to the individual pages
referenced. The lower image of the four foreign lands offers even more moti-
vation for slicing. Each slice is a candidate for a link that takes visitors to a
page devoted to that particular country.

Types of slices
Photoshop enables you to create several different types of slices:

 ✓ User slices: You create these slices by defining areas of the image.
BC34   Slicing Up Images

          ✓ Layer slices: Photoshop creates these slices from layers of an image.
          ✓ Auto slices: Photoshop creates these slices automatically to account for
            the rest of the image after you slice a bit out of it.

         You can find out more about the differences between these kinds of slices
         throughout the rest of this chapter.

         Creating slices
         To slice an image into user slices, just follow these steps:

          1. Select the Slice tool from the Tools panel.
             You can also press C, or Shift+C if another tool is active, to activate it.
          2. Drag with the Slice tool to select the part of the image you want to
             For example, I selected the entire Japan area in the lower edge.
             A solid slice selection box appears around the new slice, with handles at
             each corner and at the sides, top, and bottom. Photoshop assigns the
             slice a number and icon in the upper-left corner of the slice.
          3. Repeat Step 2 to slice the image into as many individual portions as
             you want.
             For example, I continued to select the other countries to slice the image
             into individual portions.
             Photoshop assigns each of your user slices its own slice number and
             icon, as shown in Figure 2-2.

         Figure 2-2: A solid selection box and number appear when you slice your image.
                                               Slicing Up Images      BC35

Slicing options                                                                     Bonus
                                                                                   Chapter 2
The steps in the preceding section show the slicing operation in its simplest
form. You do have some additional options, however, as I describe in the

                                                                                         Slicing Web Images
following list:

 ✓ Use a fixed size or fixed aspect ratio (proportion). From the Style pop-
   up menu on the Options bar, select Fixed Size and type a width and
   height in pixels in the Width and Height boxes. Or select Fixed Aspect
   Ratio and type the relative proportions that you want to use (that is, 1:2,
   3:4, and so forth) in the Width and Height boxes. Photoshop constrains
   the Slice tool to the size or proportions you specify.
    You might want to use Fixed Size to create equal-sized slices in an
    image, especially an image composed of similar-sized elements, and
    Fixed Aspect Ratio to create slices that have similar proportions.
    If you’ve already created a slice that’s the right size to apply to another
    portion of your image, you can duplicate the slice by dragging the slice,
    with the Slice Select tool (in the Tools panel on the same flyout menu as
    the Slice tool), while holding down the Alt key (Option key on the Mac).
    Drag the new slice to the location where you want to apply it.
 ✓ Create a square slice. Hold down the Shift key while you drag a slice’s
   boundaries to create a slice in a perfect square when the Slice or Slice
   Selection tool is active. You can also hold down Alt (Option on the Mac)
   to draw from the center out.
 ✓ Create slices from guides. You can create horizontal and vertical guides
   that mark the boundaries of your desired slices. Then, click the Slices
   from Guides button on the Options bar to automatically slice the image
   by using these guides.
 ✓ Put each slice in its own layer. You can put each portion of the image
   you want to define as a slice in its own layer. Then, just select the layer
   and choose Layer➪New Layer Based Slice. This is how you create a roll-
   over state (an action taken on a Web page when the mouse passes over,
   clicks, or leaves a defined area). You can create rollovers in programs
   such as Dreamweaver.

Auto slices are slices that Photoshop creates to account for the area that you
haven’t defined as a user slice or layer slice. They’re shown onscreen as dot-
ted lines to differentiate them from the solid lines that define user slices and
layer slices. Auto slices also have gray slice numbers and icons, as opposed
to the blue numbers and icons used to represent their nonautomatic sib-
lings. If you want to change an auto slice to a user slice (say, it encompasses
an area you were going to slice anyway), select the slice with the Slice Select
tool and select Promote from the Options bar.
BC36   Selecting and Modifying Slices

Selecting and Modifying Slices                                                   User slice
         The number assigned to each slice is dynamic,
         starting with the slice at the top-left corner of
         the image and going from left to right and top to
         bottom. When you rearrange slices, Photoshop                            Layer slice
         updates the numbers. Each slice also receives an
         icon that reflects its type, as shown in Figure 2-3.
                                                                 Figure 2-3: Identify slice types
         Showing/hiding slices                                   by their icons.

         and slice numbers
         You can show or hide slices and their numbers:

          ✓ Show or hide slices. Choose View➪Show➪Slices.
          ✓ Show or hide slice numbers. Choose Edit➪Preferences➪Guides, Grid, &
            Slices (or Photoshop➪Preferences➪Guides, Grid, & Slices on the Mac)
            and select or deselect the Show Slice Numbers option.

         When the Slice Select tool is selected, you can also hide auto slices by
         clicking the Hide Auto Slices button on the Options bar.

         Changing the color of the lines
         To change the color used to represent slices, choose
         Edit➪Preferences➪Grid, Guides, & Slices (Photoshop➪Preferences➪Grid,
         Guides, & Slices on the Mac) and select a color from the Line Color pop-up
         menu in the Slices area.

         Selecting slices
         To make any changes to a slice, you must first select it. You can select a
         slice by clicking any visible portion of the slice with the Slice Select tool.
         Here are a few tips for using this tool:

          ✓ Switch from the Slice tool to the Slice Select tool. Press Shift+C when
            the Slice tool is active. The Slice Select tool becomes the active tool.
          ✓ Alternate between the Slice tool and the Slice Select tool. Hold down
            the Ctrl key (Ô key on the Mac) to temporarily activate the other tool.
            For example, if you’re busy slicing images and want to quickly select a
            slice, hold down Ctrl (or Ô) and click the slice you want to select. When
            you release the key, the Slice tool becomes the active tool again.

         To remove a slice, select the slice and press the Delete or Backspace
         key (Delete on the Mac). To remove all slices from an image and start
         over, choose View➪Clear Slices. To protect slices from accidental
         modifications, choose View➪Lock Slices.
                                      Selecting and Modifying Slices                BC37

Resizing and moving slices                                                                        Bonus
                                                                                                 Chapter 2
You can easily resize a user slice or move it to a new location. If you want to
resize or move a layer slice, first select it and then click the Promote button

                                                                                                       Slicing Web Images
on the Options bar to change it into a user slice. Here’s how to resize or
move slices:

 ✓ Move a user slice. Select the slice and position the cursor inside the
   slice’s borders. Then, drag to its new position. To help keep slices
   aligned evenly, you can hold down the Shift key while you drag to
   restrict movement horizontally, vertically, or to 45-degree angles.
 ✓ Place a slice at specific coordinates in your image. Click the Set
   Options for Current Slice button on the Options bar, as shown in Figure
   2-4, or activate the Slice Select tool and double-click inside the slice you
   want to position. The Slice Options dialog box, as it appears with an
   image slice, is shown in Figure 2-5. In the X box, type the number of pix-
   els you want between the left side of the slice and the left border of the
   image. In the Y box, type the number of pixels you want between the top
   edge of the slice and the top border of the image.

                                                             Set options for the current slice

Figure 2-4: Most slice options appear only when you select the Slice Select tool.

 ✓ Resize a user slice in any
   direction. Grab one of the corner
   or side handles of a selected slice
   and drag.
 ✓ Use dimensions to resize a user
   slice. Activate the Slice Select tool
   and double-click inside the slice
   you want to resize. Then, type the
   width and height, in pixels, in the
   W and H boxes.
     To simplify positioning slices,      Figure 2-5: Specify your slice’s exact
     choose View➪Snap To and select       position in the Slice Options dialog box.
     Guides and/or Slices to tell
     Photoshop you want to snap slices
     to guides or other slices. Then, choose View➪Snap to turn on the
     snapping feature.
 ✓ Duplicate a slice. Select the slice with the Slice Select tool and then
   Alt-drag (Option-drag on the Mac).
BC38   Selecting and Modifying Slices

         Dividing a slice
         You can further divide a slice you’ve made by following these steps:

          1. Using the Slice Select tool, select the user slice or auto slice you want
             to divide.
          2. Click the Divide button on the Options bar.
             The Divide Slice dialog box appears, as shown in Figure 2-6.

             Figure 2-6: For large graphics, you may want to further divide your slice.

          3. Select the appropriate check box(es) to divide the slice horizontally,
             vertically, or both.
          4. Enter a number in the Slices Down, Evenly Spaced text box or the
             Slices Across, Evenly Spaced text box to split your slice into that
             number of equal slices.
             Alternatively, specify a size per slice in the Pixels per Slice box.
          5. Select the Preview option if you want to view the new slices in the
             document window.
          6. Click OK to divide the slice.

         Stacking slices
         Slices can overlap, but the top slice in a stack of overlapping slices defines
         the area allocated to them. You can usually resize slices so that they closely
         fit the areas you want to define, but overlapping allows you to create custom
         rectangle-shaped slices. You might want to change the stacking order of
         slices so that the slice encompasses the exact area you want to define.

To top