Part IX: Advanced Output Techniques 942 Color Table The Color Table pane in the Save for Web & Devices utility allows you to control and manipulate the color palette used for GIF and PNG file conversion. Only colors in the color palette will exist in the outputted image, so manipulating the colors in the Color Table pane lets you control the colors in the outputted image. You can select colors in the table by clicking the table with the mouse or by clicking in the image using the Eyedropper tool. You can select multiple colors in the table by holding down the Shift key while you click them. After you have colors selected in the table, you can use the following options, shown in Figure 30.17, to control the color palette: l Number of Colors: Displays the number of colors in the color table. l Map to Transparent: This maps the currently selected color(s) in the Color Table to transparent pixels. The pixels that are this color will be transparent in the outputted GIF or PNG-8 image. This can be useful if you have solid colors in the image that you want to make transparent. l Shift to Web Palette: If the currently selected color is outside the Web palette, it will be shifted into the Web palette. If the currently selected color is already shifted into the Web palette, it is “un-shifted” back out. l Lock Colors: This locks the currently selected color so it isn’t dropped from the outputted image. This option is especially useful if you have a specific mono-color item—such as a logo or symbol—that you want to ensure remains in the original color in the outputted image. l Add to Palette: This adds the color from the Color tool in the preview area to the color palette. This option allows you to define specific colors that you want included in the color palette. l Remove from Palette: This removes the selected color(s) from the color palette, allowing you to add additional colors. Image Size settings The Image Size pane in the Save for Web & Devices utility, shown in Figure 30.18, allows you to control the size of the outputted file without affecting the size of the original. The Image Size pane allows you to set a specific height and width for the image using the H and W settings. If the lock icon is selected, height and width changes are proportional. You also can set the size of the output image using the Percent option when 100% is the original size. When changing the size of the image, Photoshop must interpolate the values of pixels that either didn’t exist in the original image because the size is growing or are the result of multiple pixels if the size is decreasing. The Quality option allows you to specify which of Photoshop’s interpolation algorithms to use. The options are Nearest Neighbor, Bilinear, Bicubic, Bicubic Smoother, and Bicubic Sharper. 42_584743-ch30.indd 94242_584743-ch30.indd 942 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 943 FIGURE 30.17 The Color Table pane allows you to use the color palette to manipulate the colors and transparency that will be included in the outputted image. Remove from Palette Map to Transparent Shift to Web Palette Add to Palette Lock Colors FIGURE 30.18 The Image Size pane allows you to control the size of the outputted image without affecting the size of the original image. Cross-Ref Image resizing, including the various algorithms used in the Quality setting, is discussed in more detail in Chapter 3. See the resizing section of that chapter when making a determination of which algorithm to use. n Animation controls The Animation pane in the Save for Web & Devices utility provides two features. The first is to set the Looping Options that get embedded with the animated image. The Looping Options can be set to Once, Forever, and Other. If Other is selected, a dialog box is displayed that allows you to set the number of times to loop the animation. How many loops you choose is purely subjective. Playing the animation too many times can get annoying with some images but is necessary in others. 42_584743-ch30.indd 94342_584743-ch30.indd 943 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 944 The Other feature of the Animation pane, shown in Figure 30.19, allows you to preview the animation in the preview pane. The Play, Rewind, and Fast Forward options allow you to see each of the frames in the animation and preview the behavior. FIGURE 30.19 The Animation pane allows you to preview the animation as well as control the number of times the animation is played when the image is viewed. Previewing output in a browser A great feature of the Save for Web & Devices utility is the ability to quickly preview the image in a Web browser by clicking the Preview button. When you click the Preview button, the image is displayed in the Web browser based on the output settings. All the supporting Web code is displayed below in the image, as shown in Figure 30.20. The HTML files also are created in the output directory so you can actually test the images in the Web browser. Note The list to the right of the Preview button allows you to configure a list of Web browsers to test and to select the Web browser used by the Preview button. This allows you to quickly test Web images against a series of browsers. n Using Adobe Device Central to preview images on devices The Save for Web & Devices utility also allows you to quickly preview the image on mobile devices by clicking the Device Central button to launch the Device Central application. When you click the Device Central button, the image is loaded into Device Central and you can view how it looks on different mobile devices with various settings, as shown in Figure 30.21. 42_584743-ch30.indd 94442_584743-ch30.indd 944 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 945 FIGURE 30.20 The Preview button in the Save for Web & Devices utility launches a Web browser that allows you to quickly preview the look and behavior of the image before saving the image. Note Images with slices cannot be emulated in Device Central. If you are previewing images for both the Web and mobile devices, make sure you save a separate file with the slices for the Web version. n Device Central provides a list of devices as well as display, scaling, and alignment tabs that allow you to see the image based on different device settings. Using Device Central goes beyond the scope of this book, so it is not covered. However, documentation is available at the Adobe Web site that you can reference for information on how to use it beyond previewing images. 42_584743-ch30.indd 94542_584743-ch30.indd 945 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 946 FIGURE 30.21 The Device Central button in the Save for Web & Devices utility launches Device Central, which allows you to quickly preview the image on various devices. Using Zoomify to Add Zoomable Images to Web Sites Photoshop provides the Zoomify plug-in as an additional feature to output images to the Web. Zoomify, shown in Figure 30.22, carves an image up into a series of JPEG tiles that can be used by a Flash browser utility to quickly zoom in and out, as well as pan images in a Web page. By breaking the image up into a series of tiles, less data needs to be sent to the Web browser, so the performance in viewing images is very good. To launch the Zoomify tool, select File ➪ Export ➪ Zoomify from the main menu in Photoshop. The Zoomify utility allows you to specify the output location and a base name to use for the output files. You also can define the JPEG quality using the Image Tile Option settings. The Browser Options allow you to set the width and height in pixels that the Zoom utility takes up in the browser. 42_584743-ch30.indd 94642_584743-ch30.indd 946 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 947 FIGURE 30.22 The Zoomify utility is used to carve up a high-definition image into a series of smaller JPEG tiles so the image can be easily zoomed in/out and panned using a Flash Player in a Web browser. The following is a list of the files/folders that will be generated by the Zoomify tool in the Output Location. You can transfer these files/folders to your Web browser to be included in your Web site: l <Base Name>.html: The HTML file based on the Base Name setting that is used to display the Zoomify Flash Player utility. The appropriate code in this file can be cut and pasted into your Web page code to include the image on your Web site. l <Base Name>: A folder based on the Base Name setting that contains the following items: l ImageProperties.xml: Specifies data necessary for the Zoomify Flash Player. l zoomifyViewer.swf: Zoomify Flash Player utility that renders the images and provides the controls in the browser to zoom in and out on the image. l TileGroup#: A series of folders that contain the JPEG tiles of the image. Each tile is named using the #-#-#.jpg filename format. Each number represents a location in the image and zoom scale, and the numbers are used to display the zoomed portions of the image. Figure 30.23 shows how a Zoomified image appears in a Web browser. Using the utility, we are able to easily zoom in and pan to an individual balloon. Note When you click the OK button in Zoomify, a Web browser launches to display the Zoomified image. You may need to enable the Zoomify activeX application when the browser launches. n 42_584743-ch30.indd 94742_584743-ch30.indd 947 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 948 FIGURE 30.23 You can easily zoom in on and pan around a high-resolution image that has been Zoomified. Summary Photoshop provides several powerful features that can aid graphic designers in creating and preparing images for Web applications. Photoshop provides the tools necessary to convert image formats to formats supported by Web browsers, set the size of images to reduce the bandwidth they require for download, and apply color profiles to ensure that the image colors are consistent across multiple Web browsers. Photoshop also provides features that allow you to quickly add animation and transparency to give your images a much better look and feel. This chapter discussed the Save for Web & Devices utility that allows you to quickly configure image file formats, preview output, convert images, and generate the HTML output necessary to support them. In this chapter, you learned these things: l How to convert images to file formats that are supported by Web browsers. l Using color profiles ensures that image colors remain consistent between Web browsers. l How to add transparency to Web images so they flow better with the Web page. l Using Zoomify is a simple way to add high-resolution images than can be zoomed and panned to Web pages. l The Save for Web & Devices utility allows you to control what image metadata is included in Web images so you can show copyright information but hide camera settings. l How to preview images in Web browsers and Device Central before outputting them to the new file format. 42_584743-ch30.indd 94842_584743-ch30.indd 948 5/3/10 10:53 AM5/3/10 10:53 AM . select colors in the table by clicking the table with the mouse or by clicking in the image using the Eyedropper tool. You can select multiple colors in the table by holding down the Shift key. up into a series of JPEG tiles that can be used by a Flash browser utility to quickly zoom in and out, as well as pan images in a Web page. By breaking the image up into a series of tiles,. 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 948 FIGURE 30.23 You can easily zoom in on and pan around a high-resolution image that has been Zoomified. Summary Photoshop provides several