Optimizing Images with Save for Web & Devices BC19 Tools panel View image Settings Bonus Chapter 1 Prepping Web Graphics 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 image. ✓ 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. Graphics ✓ 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. ✓ 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 settings. 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 following: ✓ 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 options: ✓ 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 Graphics 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 following: Prepping Web ✓ Select one of the preset optimization settings from the Preset pop-up Graphics 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 menu. 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 portraits. • 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 box/slider. ✓ 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. Interlaced 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 Colors Graphics 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 convert. 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 color.
Pages to are hidden for
"ADOBE PHOTOSHOP DESIGN CS5 38"Please download to view full document