Tài iệu Photoshop cs5 by Dayley part 125 pptx

Creating Images for the Web and Mobile Devices IN THIS CHAPTER Preparing images for the Web Slicing images to enable hot spots Adding transparency to Web images Adding animated images t

Creating Images for

the Web and Mobile

Devices

IN THIS CHAPTER

Preparing images for the Web Slicing images to enable hot spots

Adding transparency to Web images

Adding animated images to Web pages

Converting images to Web formats

Adding zoomable images to Web pages

Although Photoshop is not typically thought of as a tool used for

creating Web pages, Photoshop does have some powerful features that can aid graphic designers in preparing images for Web applications

One of the biggest obstacles to overcome when preparing images for the

Web is adjusting the size and file format to support the limited capabilities of

Web browsers That’s where Photoshop comes in

This chapter discusses some of the basics of how and why images are prepared

for viewing on the Web, such as color settings, slicing images, and adding

transparency and animation We also discuss the Save for Web & Devices

utility to prepare and output images in formats that are supported on the

Web with the necessary supporting HTML data

Preparing Images for the Web

You can prepare images for use on the Web in many ways Web browsers

support only a limited number of file formats, so images must be converted

to one of these formats You also likely need to resize images to reduce them

to reasonable sizes that can be supported by the limited network bandwidth

The following sections cover the basic Web formats, how to use color

management to ensure consistency between browsers, adding animation to

images, and adding transparency to make images flow better with Web page

backgrounds

Understanding Web image formats

One of the most basic decisions that you face when preparing images for the Web is the file format

of the image You should decide on the file format before you make too many changes to the image, because they vary in color and transparency support The following list describes the most common file formats used for the Web:

Cross-Ref

For more information about different file types, see Chapter 3 n

l GIF: Graphic Interchange Format (GIF) images were the standard format for Web images

for a long time because they are very small in file size relative to the image size GIFs support only 256 colors, which is good for Web icons, logos, and text but not so good for pictures GIF images also support embedded animation that is triggered when the file is loaded Another advantage of GIF files is that they support transparency, which allows the background color and patterns on the Web page to show through parts of the image

Tip

If you are planning on creating GIF or PNG-8 images, you should change the color mode to Indexed color,

because that’s the basic format of these file types This keeps the colors in the image limited to the 256 colors

of the indexed color table that are supported when you save the file, so you won’t be editing colors that won’t

exist in the final image n

l JPEG: Joint Photographic Experts Group (JPEG) images support 16.7 million colors, so

they are much better for displaying photographs or colorful images They are supported

by most Web browsers, so they easily can be embedded in Web pages or viewed as a standalone file JPEG images do not support animation or transparency, so they aren’t commonly used for buttons, logos, and icons

Another downside to using the JPEG format is that unless you specify a lossless JPEG compression algorithm, JPEG images can result in artifacts in the images

l PNG-8 and PNG-24: Portable Network Graphic (PNG) images were created to replace

GIF and, to an extent, JPEG images PNG-8 is similar to the GIF format in that it is 8-bit and supports only 256 colors PNG-8 also supports transparency and animation just like GIFs

PNG-24 is similar to JPEG in that it supports the same number of colors However, because PNG-24 files use a lossless compression, file sizes are larger than JPEGs, but they

do not exhibit the same types of artifacts A big advantage of PNG-24 is that they support transparency in the image using an alpha channel

l WBMP: Wireless Bitmap (WBMP) files use a 1-bit format that is widely supported by

mobile devices that can display only black and white pixels Most current devices support color images, such as JPEG and PNG, but if you are creating an image that needs to be displayed on all devices, you may want to create a WBMP copy along with the color copy

Selecting the right color profile

When working with images that are intended for the Web, you want to use the RGB color mode by selecting Image ➪ Mode ➪ RGB Color from the main menu You want to use RGB because it’s the color mode that computer screens use to display images in Web browsers

You should use the sRGB color profile when editing images for the Web The colors are limited to ones that are supported on most displays, so your images look the same for every person no matter what computer is accessing the Web

Tip

You can proof the way that images will look on the Web by selecting View ➪ Proof Setup ➪ InternetStandard

RGB and then using the View ➪ Proof Colors menu option to toggle proofing on and off For more information

about proofing and color profiles, see Chapter 29 n

Slicing images for Web use

Another task you may need to perform when preparing images for the Web is to slice them up

Slicing images involves assigning areas of the image as hot points that have meaning in the Web page These hot points can be assigned descriptions that pop up when the mouse hovers over that area of the image and even links that allow users to navigate to different Web pages by clicking different areas in the image

The following sections discuss the different types of slices that can be created and the tools that you can use to create and define the slices in the image

Understanding slices

Photoshop provides four types of slices that vary in their behavior and how they are created Slices are designated by a bounding box with an icon in the upper-left corner The icon and color of the bounding box designate the type of slice The following list describes the types of slices, and Figure 30.1 shows the icons used for each:

FIGURE 30.1

The User, Layer Based, and No Image slices are designated by different icons in the top-left corner The

Auto slices are designated by a gray bounding box and icon

User Slice Auto Slice Layer Based Slice

No Image Slice

l User Slice: User slices are the basic slices that you draw yourself They are designated by

a blue bounding box and the icon shown in Figure 30.1

l Auto Slice: Auto slices are slices that Photoshop automatically generates and assigns to

the areas of the image that are not defined as user, layer based, or no image slices Auto slices are designated by the same icon as user slices but have a gray bounding box instead

of blue

l Layer Based Slice: Layers based slices are created by selecting a layer in the Layers panel

and then selecting Layer ➪ New Layer Based Slice from the main Photoshop menu This creates a square slice the size of the content of the layer A great feature of layer-based slices is that the slice boundary is automatically adjusted if you change the size of the content in the layer or add a drop shadow

l No Image Slice: A no image slice instructs Photoshop to treat that region in the image as

HTML-encoded text The text that is displayed in the Web page is configured using the Slice Option dialog box, discussed later in this chapter

Using HTML-encoded text areas in the image keeps the text crisp even if the display size

in the browser is changed Another important benefit is that the encoded text is readable

by search engines, making the content available for Web searches

Creating slices

The Slice tool, shown in Figure 30.2, is used to quickly carve up the image into slices Using the Slice tool, slices can be created in one of three ways, as shown in Figure 30.3:

FIGURE 30.2

The Slice tool allows you to quickly carve up an image into slices manually or by using guidelines

l Manually: Slices can be created manually by dragging the Slice tool across the image to

create the bounding box The Style setting in the Slice tool options menu allows you to control how slices are created The Normal style allows you to create a simple rectangle by dragging the cursor Holding down the Shift key while dragging creates a box The Fixed Aspect Ratio style forces the rectangle to match the ratio specified by the Width and Height settings The Fixed Size style creates a bounding box the exact size specified by the Width and Height settings

Figure 30.3 shows how the slices are created by dragging the Slice tool Notice that the area selected is defined into a user slice and the rest of the area is automatically sliced up into auto slices

l Using Guidelines: A great way to create slices is to define guidelines in the document by

selecting View ➪ New Guide from the main menu After all guidelines are created, you can click Slices From Guides to create a set of slices based on the guidelines Figure 30.3 shows

l From Layers: As mentioned earlier, a slice can be created by selecting a layer from the

Layers panel and then selecting Layer ➪ New Layer Based Slice Figure 30.3 shows how a layer-based slice is created from a layer that contains an image Notice that a layer-based slice is created around the image, and the rest of the document is carved up into auto slices

FIGURE 30.3

Slices can be created manually by dragging the Slice tool, automatically based on guidelines, or from a

layer

Manually creating slices

Slices from layers Slices from guidelines

You should use the fewest slices you can to keep the HTML code as simple as possible Avoid having slices

overlap each other, and try not to leave gaps between the slices because these force Photoshop to create auto

slices to fill those areas It might help to select View ➪ Snap To ➪ Slices to have the slices snap to each other to

avoid the gaps as you draw them n

Configuring slices

The Slice Select tool, shown in Figure 30.4, is used to select, manipulate, and configure the slices after they have been created Using the Slice Select tool, you can change the size of the slices by selecting them and dragging the control handles on the bounding box

FIGURE 30.4

The Slice Select tool allows you to quickly carve up an image into slices manually or by using guidelines

Slice Options Alignment

Ordering

Note

You can access most of the slice configuration options by right-clicking the icon in the upper-left corner of

the slice to display the Slice pop-up menu From this menu, you can change the order of the slice as well as

promote, delete, and divide it n

You can select one or more slices and use the following options in the Slice Select tool Options bar

to organize and configure the selected slices:

l Order: These options adjust the order of the selected slices either to the top, up one,

down one, or to the bottom

l Promote: Clicking the Promote button promotes an auto or layer slice to a user slice.

l Divide: Clicking the Divide button launches the Divide Slice dialog box, shown in Figure

30.5 From the Divide Slice dialog box, you can specify either evenly spaced or fixed slice divisions to be added to the current slice The result is that the current slice is divided into the specified set of slices, as shown in Figure 30.5

FIGURE 30.5

Using the Divide option, you can divide a slice horizontally and/or vertically into a set

of equally spaced slices

l Align: The Align option allows you to quickly align the selected slices with each other

Only the selected slices are affected

l Hide Auto Slices: The Hide Auto Slices option hides the auto slices from the document

display window This allows you to more easily see the interaction with the other slices

l Slice Options: The Slice Options button launches the Slice Options dialog box shown in

Figure 30.6 From the Slice Options dialog box, you can set the type of the slice to Image,

No Image, and Table When you set the slice to Image, you can configure the HTML tag information for the image slice, as shown in Figure 30.6 When you select No Image, you can set the text that is converted to HTML-encoded text

You can set the dimension of the slice in the Dimension setting The X and Y options specify the coordinates of the top-left corner of the slice box The W and H settings set the width and height in pixels

The Slice Background Type option allows you to set the background type to black, white,

or a custom color You also can set the background to matte The Matte setting is used for the partially transparent areas in images PNG and GIF files support only fully opaque or fully transparent pixels, so the matte color is used to blend in the partially transparent pixels to fully opaque Typically, you would set the matte color to the same color as the background of the Web page

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.