IT IS PART 34,35,36,37,38,40

More Info
									              Optimizing Images with Save for Web & Devices                     BC19

Tools panel             View image                                         Settings            Bonus
                                                                                              Chapter 1

                                                                                                 Prepping Web
Figure 1-9: The Save for Web & Devices dialog box offers four previews of various optimiza-
tion settings.

Tools panel and image preview
At the left edge of the dialog box is the Tools panel, which includes tools and
a preview box that closely resemble their counterparts in the main Photoshop
program. Here’s a quick rundown, from top to bottom, of the Tools panel
options, with the keyboard shortcut in parentheses:

 ✓ Hand (H): Select this tool and then drag in the Preview pane to move the
 ✓ Slice Select (C): Use this tool to select slices. For more information on
   creating slices, see Bonus Chapter 2.
 ✓ Zoom (Z): To zoom in, use this tool or just press spacebar+Ctrl
   (spacebar+Ô on the Mac) to zoom in. To zoom out, hold down Alt
   (Option on the Mac) and click, or just press spacebar+Alt
   (spacebar+Option on the Mac).
    If you’re using the Hand tool, hold down Alt or Ctrl (Option or Ô on the
    Mac) and click to zoom out and in, respectively.
BC20   Optimizing Images with Save for Web & Devices

          ✓ Eyedropper (I): Use the Eyedropper tool to sample colors in the preview
            image. If you’re sampling in a GIF or PNG image, the Color Table is avail-
            able and, if shown, highlights the color you sample in the table. For
            more information on GIF, PNG, and JPEG file formats, see the section
            “Choosing the Right File Format,” earlier in this chapter.
          ✓ Eyedropper Color: This patch shows the color most recently sampled
            by the Eyedropper tool. Click the patch to access the Color Picker and
            select a color of your choice.
          ✓ Toggle Slices Visibility (Q): Click this icon to turn the display of slices
            on or off.

         The Save for Web & Devices dialog box also lets you control your view of
         images. Along the bottom of the window, you see these options:

          ✓ Zoom Level: Choose a zoom level from 6% to 1600%, or select Fit on
            Screen, Fit in View, or Actual Pixels.
          ✓ Status bar: This bar shows the RGB values of the color under the cursor,
            the value of any alpha channel, and the hex values and Index (in refer-
            ence to the color table).
          ✓ Default Browser preview: Click the Preview button to view the image in
            your default browser. Click the down-pointing arrow to select another
            browser from the drop-down list.
          ✓ Device Central: Click the Device Central button to access Adobe’s mini-
            application for preparing graphics for display on cellphones and other
            mobile devices. For more info, see Book I, Chapter 3.

         The majority of the Save for Web & Devices dialog box shows you a preview
         of the image you’re working with:

          ✓ Preview panes: The tabs near the top of the dialog box show the origi-
            nal image, or one of three other optional views. See the “Introducing
            Preview options” section, later in this chapter.
          ✓ Preview status: This area shows the size of the original image, as well as
            various parameters of optimized images, such as file format, download
            speed, and number of colors.

         Change settings
         Along the right side of the Save for Web & Devices dialog box, you can make
         adjustments to the various color, file, and size settings for your image.
         Here’s a rundown of what you see:
            Optimizing Images with Save for Web & Devices             BC21

 ✓ Save/Cancel/Done buttons: Use these buttons, at the bottom of the dia-        Bonus
   log box, to save an optimized image, cancel the operation, or indicate       Chapter 1
   that you’re done optimizing.
 ✓ Preset: You can select settings, including the type of file. I describe

                                                                                   Prepping Web
   these settings in detail in sections later in this chapter.

 ✓ Color Table: Shown only when you select a GIF or PNG-8 image in the
   Preview pane, this section displays the Color Table for the optimized
 ✓ Image Size: Enter values in this section to resize your image.
 ✓ Animation: This option enables you to select frames and play the anima-
   tion as an animated GIF.

Introducing Preview options
You have four Preview options, as indicated by tabs in the upper-left portion
of the Save for Web & Devices dialog box:

 ✓ Original: Fills the Preview with the original image, giving you a chance
   to review it, zoom to the desired size, or select the image slices to be
   optimized separately.
 ✓ Optimized: Fills the Preview pane with the optimized version of the orig-
   inal image. If you like, you can make all your optimization settings with
   only this view available. You can compare your results with the original
   by clicking the Original tab.
 ✓ 2-Up: Divides the Preview area in two and shows the original on the left
   and the optimized version on the right (or the original on the top and
   the optimized on the bottom), with information about each in the status
   box below the Previews.
 ✓ 4-Up: Divides the Preview area into four panes. The original image is
   shown in the upper-left corner, and three different optimized versions
   are shown in the other three panes. (Refer to Figure 1-9.) If the image is
   vertical and thin in orientation, Photoshop stacks them four across.

Optimizing your image
Before getting into the nitty-gritty of working with the tools and options in
the preceding sections, I give you a quick overview of using the Save for Web
& Devices dialog box. To optimize an image, you follow these steps:

 1. Open the image in Photoshop.
 2. Choose File➪Save for Web & Devices.
BC22   Optimizing Images with Save for Web & Devices

          3. In the Save for Web & Devices dialog box, select the kind of preview
             you want to use by clicking one of these four tabs: Original,
             Optimized, 2-Up, or 4-Up.
             For now, try the 4-Up tab.
             Although the upper-left pane displays the original image by default, you
             can select this pane and change it into a fourth optimized preview.
          4. Click in any of the four panes and, in the Settings area of the dialog
             box, select the kind of optimization you want to apply to that version.
             I explain these options in detail throughout the rest of this chapter.
          5. After you fine-tune the optimization settings and are satisfied with the
             results, select one of the Preview options and click Save.
             Your image is stored on your hard drive with those optimization
          6. Repeat Step 5 to create as many different versions as you like, using a
             different optimization method for each.

         JPEG options
         To optimize an image as a JPEG, choose the file format by doing one of the

          ✓ Select one of the preset JPEG optimization settings from the Preset pop-
            up menu:
              • JPEG High: High quality (low compression)
              • JPEG Medium: Medium quality (medium compression)
              • JPEG Low: Low quality (high compression)
             If you save your own presets for optimization settings, they appear in
             the same list.
          ✓ Select the JPEG file format from the Optimized File Format pop-up menu
            and select Maximum, Very High, High, Medium, or Low from the
            Compression Quality pop-up menu, as shown in Figure 1-10.

         After you select the JPEG format and quality, select any or all of these

          ✓ Progressive: This option creates a low-resolution version of the image
            that downloads quickly (much like an interlaced GIF), and that’s fol-
            lowed by progressively detailed overlays until the full image is shown.
            Not all browsers can benefit from this setting.
              Optimizing Images with Save for Web & Devices                       BC23

                                                        Compression Quality pop-up menu          Bonus
                                                                                                Chapter 1

                                                                                                   Prepping Web
Figure 1-10: Choose your desired file format and compression quality settings in the Save for
Web & Devices dialog box.

 ✓ Embed Color Profile: Select this option to embed the ICC color profile
   of the image in the JPEG file. Very few browsers can correct the colors
   they display based on this information, and because it adds about 3K to
   your file size, you’re better off leaving it deselected. For more on color
   management, see Book II, Chapter 3.
 ✓ Optimized: This option creates a JPEG file that’s occasionally a little
   smaller at any quality setting (and often doesn’t change the size at all),
   but not all browsers can display images with this type of optimization. If
   you feel many users with older browsers will view your page, you might
   want to forego this option.
 ✓ Quality: You can specify an exact quality/compression level by using a
   slider or by typing a value into the text box.
 ✓ Blur: Images that are slightly blurred can be squeezed more thoroughly
   by using the JPEG compression scheme. If your image still looks good
   with a tiny bit of blur applied, you can use a setting of 0.1 to 0.5 to gain a
   smaller file size. However, you most likely don’t want to sacrifice image
   detail; in which case, it’s better to go with a higher rate of compression
   and leave the blur setting at 0.
BC24   Optimizing Images with Save for Web & Devices

          ✓ Matte: This setting lets you specify a color for filling in pixels that were
            completely or partially transparent in the original. Partially transparent
            pixels are blended with the color you select. Select a color from the pop-
            up menu or click the color swatch to select a color from the Color Picker.

         You can save any customized JPEG settings you make by choosing Save
         Settings from the dialog box’s panel menu. Your stored settings then appear
         in the Preset menu for reuse.

         GIF options
         The GIF options, shown in Figure 1-11, are generally different from those
         available for JPEG, as befits the very different nature of the GIF image.

                                                                          Transparency Dithering algorithm

                                                              Color Reduction algorithm
                                                                   Dithering algorithm

                                                                                         Corbis Digital Stock
         Figure 1-11: When saving a GIF, select your desired color reduction and dithering algorithms.
              Optimizing Images with Save for Web & Devices           BC25

File format                                                                        Bonus
To optimize an image as a GIF, choose the file format by doing one of the         Chapter 1

                                                                                     Prepping Web
 ✓ Select one of the preset optimization settings from the Preset pop-up

   menu. You find presets for GIF 128, GIF 64, and GIF 32 (both dithered
   and undithered), plus GIF Restrictive. The figures represent the number
   of colors in the GIF image.
 ✓ Choose the GIF file format directly from the Optimized File Format

Color Reduction algorithm
The Color Reduction Algorithm menu includes three categories of options
for creating a panel for the Color Table:

 ✓ Dynamic: The options in this category include
     • Perceptual: Favors colors the human eye is most sensitive to.
     • Selective: Weights the colors toward those considered Web-safe.
     • Adaptive: Builds a Color Table emphasizing the portion of the spec-
       trum containing the colors that are most commonly found in the
       image — for example, greens in scenic photos or flesh tones in
     • Restrictive (Web): Also called Web-safe. Uses a 216 Windows panel
       and a 256 Mac panel. Ensures that the browser doesn’t dither 8-bit
       color images. Be warned that it can create larger files.
        With the dynamic options, a new panel of colors is collected every
        time you change or optimize the image.
 ✓ Fixed: These options include Mac OS and Windows (the panels used by
   the Mac and Windows operating systems, respectively), Grayscale, and
   Black and White. The colors available are fixed, but the actual colors
   used vary with the image they’re applied to.
 ✓ Custom: This option uses a fixed color table created by the user, but it’s
   not updated automatically when the image is modified.

Dithering algorithm
Choose the dithering scheme used to simulate colors that can’t be repre-
sented by the hues in the Color Table. Your choices are Diffusion (a random
type of dithering), Pattern (a regular, halftone screen-like pattern), Noise (a
random pattern that doesn’t spread across pixels), and No Dither. You can
also choose the amount of dithering to allow by using the Dither slider or
text box.
BC26   Optimizing Images with Save for Web & Devices

         Transparency and matte
         Choose Transparency and Matte options to control how transparent pixels
         are handled during optimization. Choose a matte color from the menu, or
         click the matte color patch and select a hue from the Color Picker. You want
         the matte color to match the background color of the Web page as closely as
         possible. Here are your options:

          ✓ Select transparency and a matte color. This option keeps transparent
            pixels in the original image transparent and blends partially transparent
            pixels with a matte color you select.
          ✓ Select transparency and no matte color. Choosing None from the Matte
            menu makes transparent pixels and those that are more than 50 percent
            transparent fully transparent and renders pixels that are 50 percent or
            less transparent as fully opaque.
          ✓ Select no transparency and a matte color. Deselecting transparency
            and choosing a matte color fills pixels that are completely transparent
            with the matte color you select and blends them.

         Consult an HTML manual to find out how to determine the hexadecimal val-
         ues of the background colors of the page. You can find a description of hexa-
         decimal colors in the section “So, what are hexadecimal colors?” earlier in
         this chapter.

         Transparency dithering
         Set the options for transparency dithering, which determine how Photoshop
         dithers pixels that are partially transparent:

          ✓ No Transparency Dither: Leaves partially transparent pixels in the
            image alone.
          ✓ Diffusion Transparency Dither: Adds a random pattern to partially
            transparent pixels. Like diffusion dither, the pattern is spread across
            adjacent pixels. You can specify the degree of dithering with the Amount
          ✓ Pattern Transparency Dither: Applies a halftonelike pattern to the pix-
            els that are partially transparent.
          ✓ Noise Transparency Dither: Applies a random, nondiffused pattern to
            the semitransparent pixels.

         Specify the amount of transparency dithering by moving the Amount slider
         or entering a value.

         Choose whether you want the image interlaced (to appear gradually in the
         browser when it downloads) or not interlaced.
               Optimizing Images with Save for Web & Devices                 BC27

Lossy                                                                                Bonus
Select the amount of lossy file compression allowed in the Lossy slider or          Chapter 1
text box.

                                                                                       Prepping Web

Select the number of colors in the image from the Colors list. Select a spe-
cific number of colors from 2 to 256, or select Auto to let Photoshop choose
the number of colors automatically, based on the colors in the Color Table.

Web Snap
Use the Web Snap slider or text box to specify a tolerance level that auto-
matically changes pixels that are within that tolerance level of a Web-safe
color to that Web-safe hue. The higher the value, the more Web-safe colors
the image has.

PNG options
If you elect to create a PNG file, two sets of options are available for the two
types of PNG files: PNG-8 (256 colors) and PNG-24 (16.7 million colors).
There’s also a PNG-8 preset that consists of 128 dithered colors.

The PNG-8 options, shown in Figure 1-12, are similar to the GIF options
(described in the section “GIF options,” earlier in this chapter), with the
exceptions that lossy compression isn’t available for PNG-8.

Figure 1-12: The PNG-8 optimization settings are similar to those of GIFs.
BC28   Optimizing Images with Save for Web & Devices

         The PNG-24 options include only interlacing and the transparency/matte
         options described in the section “GIF options,” earlier in this chapter.

         Image size
         The Save for Web & Devices dialog box
         includes its own version of the Image
         Size dialog box, which resides in a sep-
         arate section next to the Color Table
         section, as shown in Figure 1-13.
         Although slightly different in appear-
         ance, it operates the same as the
         Photoshop Image Size dialog box. You
         can specify a new width and height for
         the image or change the size by a per-
         centage. You also can select the type of
         resampling performed when resizing
         the image, although you almost always
         want to use the default Bicubic Sharper
         algorithm. For more information on
         changing image size, see Book II,
         Chapter 1.

         Optimizing colors                            Figure 1-13: Image-sizing options in the
         You can manually shift one or more col- Save For Web & Devices window appear
         ors toward Web safety. You can also         in their own version of the Image Size
         change specific colors in an image that dialog box.
         has already been converted to 256 col-
         ors (see Book II, Chapter 2 for details) to make them Web safe. Just follow
         these steps:

          1. With the Color Table visible, shown in
             Figure 1-14, select the colors you want to
             These are your options:
              • Click an individual color in the Color Table
                to select only that color.
              • Hold down the Ctrl key (or Ô key on the
                Mac) and click to add more colors to your     Figure 1-14: The Color Table
                selection.                                    enables you to choose the
              • Hold down the Shift key and click an addi- color you want to convert to
                tional color to select all the colors between Web safe.
                 the last color selected and the additional

To top