Tài iệu Photoshop cs5 by Dayley part 126 docx

Part IX: Advanced Output Techniques 930 FIGURE 30.6 The Slice Options dialog box allows you to configure the HTML settings, dimensions, and background options for the slice. Adding transparency to images An important aspect of some Web images is the ability to use transparency to help an image seem to belong as part of the Web page. Image files are always rectangular with a height and width dimension. When you place a rectangular image in a Web page, it stands out from the background. The way to solve that problem is to add transparency to the image and save it as a GIF or PNG file. The transparent areas of the image allow the background of the Web page to show through the image, making the image blend with the background. Tip When adding transparency to images that are intended for the Web, keep in mind that PNG and GIF files support only fully opaque or fully transparent pixels. So you want to either use only fully transparent pixels or use a matte color that matches the background color of the Web page. The matte color is used to blend in the partially transparent pixels to fully opaque pixels. n The simplest way to create transparency is to add a layer mask alpha channel to the image that masks the area of the image you want opaque using the following steps: 1. Open the image in Photoshop. 2. Select the area of the image that you want to remain opaque in the Web page. Figure 30.7 shows that the moon is selected in the image. 42_584743-ch30.indd 93042_584743-ch30.indd 930 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 931 3. Click the Add a Pixel Mask option in the Masks panel shown in Figure 30.7. A new layer mask is created using the current selection with a corresponding layer mask alpha channel. The area outside the selection becomes transparent. FIGURE 30.7 To add transparency in an image, simply select the areas that you want to remain opaque and select Add a Pixel Mask in the Masks panel. Selection Figure 30.8 shows the layer mask and alpha channels that result from adding the pixel mask. Notice the transparency in the image that results from the layer mask alpha channel. Because the alpha channel is embedded in a GIF or PNG file, the transparency also is embedded. Cross-Ref You can easily tweak the mask used for transparency using the techniques discussed in the alpha channel section of Chapter 11 and the layer masks section of Chapter 10. This allows you to fine-tune what areas of the image are transparent. n Animating images Another important aspect of Web page images is animation. Animation can be used in a variety of ways, from dancing icons to Web ads. Animation in Web ads is particularly important because you can get much more information to the viewer by changing the text and images displayed in the image. For example, Figure 30.9 shows a simple animated Web ad that updates the text over a period of time to display features of the Web site. 42_584743-ch30.indd 93142_584743-ch30.indd 931 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 932 FIGURE 30.8 Adding a layer mask alpha channel to an image results in transparency that can be embedded in the alpha channel of the image. Alpha channel Transparency FIGURE 30.9 Using transparency helps the image fit better with the background of the Web page. 42_584743-ch30.indd 93242_584743-ch30.indd 932 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 933 Cross-Ref Chapter 28 discusses animation in much more detail than can really be covered here. Please refer to that chapter to understand how to animate the image using the Photoshop timeline. n Outputting Images Using the Save for Web & Devices Utility The most powerful tool that Photoshop provides to output images to the Web is the Save for Web & Devices utility shown in Figure 30.10. This interface has three basic purposes. One is to preview how the outputted image will look and behave. The second is to convert the image to a size, format, and set of colors that are supported in the Web browsers. The third is to save the image to the appropriate format with the needed supporting HTML code to render the image in the browser. To launch the Save for Web & Devices utility, select File ➪ Save for Web & Devices or press Ctrl/ Ô+Alt/Option+Shift+S. The Save for Web & Devices utility has lots going on in it, but don’t be intimidated. After you get the hang of using it, you’ll appreciate how well it is laid out. The following sections discuss the various parts of the interface to familiarize you with the workflow of outputting images to the Web. FIGURE 30.10 The Save for Web & Devices utility allows you to make the necessary adjustments to the file format, size, colors, and other items to prepare images for the Web and mobile devices. Toolbar Preview layout File output settings 42_584743-ch30.indd 93342_584743-ch30.indd 933 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 934 Preview layout and toolbar The preview layout is designed to give you a sense of what the outputted image will look like as you prepare it for the Web. The preview layout offers four tabs that define what version(s) of the image is displayed in the preview pane. The options are Original, Optimized, 2-Up, and 4-Up. The optimized preview shows what the image will look like based on the values in the file output settings to the right of the preview. The 2-Up and 4-Up tabs display either two or four versions of the image. You can select a version by clicking in the preview pane and using the control settings on the right to adjust the values of that version. Using the 2-Up and 4-Up options is a great way of previewing different versions of the image, as shown in Figure 30.11. In the example, we use three file formats, but you could just use the 4-Up view to compare four optimization settings for the same file type. FIGURE 30.11 Using the 4-Up preview, you can compare four versions of the image to see which file output settings are best. 42_584743-ch30.indd 93442_584743-ch30.indd 934 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 935 Notice in each of the preview panes that the file format is listed along with the size and download time. The image size can be very important if you need your Web image to conform to a standard that limits the maximum image size, such as for advertisements. The download rate can be adjusted using the pop-up menu. Below the preview panes you can see the RGB levels as you pass the cursor over pixels in the image. Also displayed on that line are the Alpha, Hex, and Index values of the pixel currently under the mouse. Here’s what those settings mean: l Hex: The Hex value shows the hex value of the pixel. The hex value is very useful if you are trying to match colors in the HTML code with colors in the image. l Alpha: The Alpha value displays the value of the alpha channel, with 255 being completely opaque to 0 being completely transparent. l Index: The Index value is the index in the color lookup table for the pixel directly under the cursor. The following tools, shown in Figure 30.12, are used to control and manipulate the image in the preview: l Hand: The Hand tool moves the image inside the preview pane. This is especially useful if you are zoomed in on an image and want to check out different locations. Using the Hand tool moves the images in all preview panes. l Slice Select: The Slice Select tool works just like the one in the Photoshop Toolbox described earlier in this chapter. You can manipulate the slices using the control handles, right-click to expose the slice options, and double-click the slice to set the HTML options. l Zoom: This tool allows you to zoom in on a specific area of the slice by dragging a rectangle around that portion. l Eyedropper: The Eyedropper tool is used to select colors in the image. The color is selected in the color table, discussed later in this section. l Color: This tool displays the currently selected color. Selecting this tool displays the color chooser. l Slice Visibility: This tool toggles the visibility of slices on and off. You typically want slices to be visible only when you are editing them. l Zoom Settings Level: This tool gives you the ability to quickly set a specific zoom level for the preview pane. 42_584743-ch30.indd 93542_584743-ch30.indd 935 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 936 FIGURE 30.12 The image in the preview pane can be controlled and manipulated using the tools in the toolbar. Hand Slice Select Zoom Eyedropper Eyedropper Color Slice Visibility Zoom Level File output settings The most important aspect of the Save for Web & Devices utility is the ability to convert images from the editing format to a format that is suitable to be displayed on a Web page. The file output settings pane in the Save for Web & Devices utility allows you to define the Web file format and parameters used to convert the image to that format. Each file format provides different output options used in conversion. Figure 30.13 show the options for GIF, PNG-24, and JPEG. (PNG-8 is not shown because the options are identical to GIF with the exception that the Lossy option is omitted.) FIGURE 30.13 The file output settings pane allows you to control options used when converting the image from the editing format to the Web file format. The following list describes each of the output options: l Presets: Provides a list of predefined settings for general purposes such as JPEG High quality or PNG-8 128 Dithered. l File Format: Allows you to specify the output file format. These file formats were discussed earlier in this chapter. 42_584743-ch30.indd 93642_584743-ch30.indd 936 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 937 l Color Reduction Algorithm: Allows you to specify the conversion method used to convert the image from the current format to the Web format. When converting color images to another format, especially one supporting fewer colors, Photoshop must decide what colors to use in the destination file for source pixels that don’t match up. The following list describes how each conversion option maps colors: l Perceptual: Gives priority to colors for which the human eye has greater sensitivity. This option is often the best choice to use because most Web images are intended for viewing only. l Adaptive: Creates a palette from the colors that appear most commonly in the image. This option typically keeps the most detail in the image because there is a wider range of pixels in that area to support detail. l Selective: Similar to the perceptual option, but it favors broad areas of color while preserving the Web colors. This option usually produces images with the highest color integrity, if not the best perceptual integrity. l Restrictive: Uses a standard 216-color color table common to both Windows and Mac OS, ensuring that no browser dither is applied to colors when the image is displayed using 8-bit color. Because this option creates larger files, you should use it only if browser dithering is of high priority. l Custom: Allows you to create your own custom color palette used in converting the image. The color palette is customized in the Color Table pane in the Save for Web & Devices utility. l Black-White: Uses only black and white colors in the output image. l Grayscale: Uses a grayscale color palette to convert the image to grayscale. l Mac OS: Uses the Mac OS color palette to convert the image. This option should be used only for images that will be viewed from Mac OS browsers. l Windows: Uses the Windows color palette to convert the image. This option should be used only for images that will be viewed from Windows browsers. l Color: Specifies the number of colors in the color palette that is used by the conversion algorithm to convert the image. A smaller number here usually results in a smaller file size. l Specify the Dither Algorithm: Allows you to select the method of dithering the image during conversion. Dithering simulates colors not available in the color display system of the computer. Often when you convert an image with continuous color tones to a smaller number of colors, banding is the result. One downside of dithering is that it increases the size of the image. Figure 30.14 shows an example of the banding that occurs in an image when we convert it to 64 colors, as well as the effects that dithering has to simulate more colors by diffusing the pixels on the boundaries. Notice the banding in the non-dithered image and how using diffused dithering results in the appearance of more skin tones than exist in the actual image. 42_584743-ch30.indd 93742_584743-ch30.indd 937 5/3/10 10:53 AM5/3/10 10:53 AM Part IX: Advanced Output Techniques 938 FIGURE 30.14 Using dithering when reducing the number of colors in an image can resolve banding effects and give the visual appearance of more colors in the image than actually exist. No diffusion Diffusion You can specify the following methods for applying dithering to the image during conversion: l No Dither: Applies no dithering to the images. This results in a smaller file size but also may result in banding, as shown in Figure 30.14. l Diffusion: Attempts to smooth transitions by scattering the colors of the two neighboring pixels along the edges. When this option is selected, you can control the amount of dithering by adjusting the percentage value in the Dither option to the right. The higher you increase the Dither setting, the larger the file size that results. l Pattern: Applies dithering by using a predefined pattern of pixels to attempt to produce the intermediate colors between the bands. l Noise: Applies dithering by introducing random pixels in the image. This option usually results in the least appealing results. l Dither: Specifies the percentage of dithering to apply to the image. A larger amount of dithering softens edges and removes pixelization but results in some blurring of the overall image. 42_584743-ch30.indd 93842_584743-ch30.indd 938 5/3/10 10:53 AM5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices 939 l Transparency: GIF and PNG-8 files support transparency, but only in the fully transparent pixels. If the Transparency option is enabled, Photoshop tries to preserve the semitrans- parent information, such as drop shadows, by applying a matte to the semitransparent pixels to create a fully opaque pixel. The color of the matte used is determined by the Matte setting. If the matte color matches the background color of the Web page, the image looks much better when it is viewed on the Web page. If you enable transparency, you also can specify a dithering option in the drop-down menu below Transparency. The dithering options are the same as for the image conversion, but they apply only when adding the matte to semitransparent pixels. l Interlaced: Sends a version image that contains information for every other line of pixels to the browser first so the browser can render a low-resolution copy to the user while the rest of the image is downloaded. This can improve the speed with which Web pages are loaded, but it also results in a larger image file. This option is not used very much anymore because Internet connections are much faster now. l Web Snap: Specifies a tolerance level that is used to shift colors to the closest Web palette equivalents. This prevents the colors from dithering in the browser. The higher the value, the more colors are being shifted. l Lossy: Allows you to control how aggressive the GIF compression algorithm is when compressing the images. The higher the number, the more aggressive the algorithm is, thus reducing the file size. However, the more aggressive the algorithm is, the more data is lost during compression. Typically, you can get away with a value of 5–10 for most GIF images without sacrificing too much quality. l Quality: Specifies the JPEG image quality setting from Low to Maximum. This setting is a tradeoff; the higher the quality, the better the image but the larger the file size. This option also can be controlled by setting a value between 0 and 100, where 100 is the maximum quality. l Progressive: Displays the image progressively in the Web browser. Progressive means that the image is displayed as a series of overlays allowing the browser to display a low-resolution image that progressively gains quality as more of the image is downloaded. Using this option results in a larger file size. l Blur: Specifies an amount of blur that is added to the image. Adding blur applies a Gaussian Blur Filter to the image and allows JPEG images to be compressed more, resulting in a smaller file size. l Optimized: Creates an enhanced JPEG file with a slightly smaller file size. This option is great for reducing the file size, but some older browsers do not support enhanced JPEG images. l Embed Color Profile: Embeds the color profile in the image. 42_584743-ch30.indd 93942_584743-ch30.indd 939 5/3/10 10:53 AM5/3/10 10:53 AM [...]... 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... slices The naming options should be familiar to you by now l Background: Allows you to control if the image is to be viewed as the background for the Web page or just an image You also can specify the color to use as the background for the Web page l Saving Files: Allows you to configure the file naming, compatibility, and location to output images to When Photoshop saves the image, it generates several... 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,... Output Settings dialog box allows you to configure how the image is actually outputted to the Web, including HTML, CSS, slice, background, and other settings 941 42_584743-ch30.indd 941 5/3/10 10:53 AM Part IX: Advanced Output Techniques 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... control how the output is applied to slices in the image FIGURE 30.15 The Optimize to File Size menu option in the file output settings pane allows you to specify a desired output size for the image, and Photoshop automatically sets the output options necessary to result in the specified file size 940 42_584743-ch30.indd 940 5/3/10 10:53 AM Chapter 30: Creating Images for the Web and Mobile Devices l Edit.. .Part IX: Advanced Output Techniques Cross-Ref Color management is an important aspect of Web images because the images will be viewed on a variety of displays You want the images to appear the same on . 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. understand how to animate the image using the Photoshop timeline. n Outputting Images Using the Save for Web & Devices Utility The most powerful tool that Photoshop provides to output images to. Attempts to smooth transitions by scattering the colors of the two neighboring pixels along the edges. When this option is selected, you can control the amount of dithering by adjusting the percentage