Color TableThe 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 col
Trang 1Color 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
Trang 2FIGURE 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 toPalette 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
Trang 3animation 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
Trang 4FIGURE 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
Trang 5The 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
Trang 6FIGURE 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
Trang 7You 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