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

Alpha channel Transparency FIGURE 30.9 Using transparency helps the image fit better with the background of the Web page... FIGURE 30.10 The Save for Web & Devices utility allows you to

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:

Figure 30.7 shows that the moon is selected in the image.

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

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

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

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

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

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

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

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

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 semitranssemitrans-parent 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.