Photoshop cs quickstep - part 10 potx

280 PC QuickSteps Getting to Know Your PC

11 12 13 due to the fact that PNG uses lossless file compression. Characteristics of these common file types include: • GIF (Graphic Interchange Format) Images in this format use Indexed Color mode, containing a maximum of 256 colors. Images with large areas of solid color and sharp detail work best as GIFs, such as with icons and animations. GIF also supports transparency, allowing the area under the transparent portions of the GIF to be visible.

• JPEG (Joint Photographic Experts Group) This format compresses an image,

using lossy compression, to reduce the file size. When images are compressed in this

format, data is lost—specifically, similar colors are removed from the image during

compression. The amount of data lost depends on the amount of compression applied.

JPEG supports 24-bit color, which yields approximately 16 million colors. This works

well for web images.

• PNG (Portable Network Graphic) This format comes in two varieties: PNG-8, which

is similar to GIF; and PNG-24, which is similar to JPEG but uses lossless compression

(no colors are removed). PNG files are often used to contain transparent image areas.

Using Photoshop, the files are reduced to a single layer, and retain no alpha channel or

image resolution information, unlike TIFF and other less-optimized image file formats.

• WBMP (Wireless Application Protocol Bitmap Format) This format is ideal for

optimizing images to be used for mobile instruments. It is 1-bit-per-pixel color mode,

and thus color images are reduced to either black or white pixels.

You set the file type, number of colors, and resolution when you save images.

Optimize Using the Save

For Web & Devices Dialog Box

Photoshop uses the Save For Web & Devices dialog box to optimize files for the

Web. You can display four file versions of an image, optimizing each and then

saving all four or one, if you choose. You can apply certain other adjustments

in this dialog box, such as to change image size or to apply transparency. As

you set the optimization options, the estimated file size and download time are

shown below the preview window, as shown in Figure 13-1. Here are the steps

and possibilities:

1. With an image open in Photoshop, click File | Save For Web & Devices. The Save For

Web & Devices dialog box appears, as shown in Figure 13-1.

TIP

The Save For Web & Devices dialog box automatically

converts the image resolution to 72 pixels per inch (ppi),

long considered the highest resolution needed for web

work. If you wish to use a different image resolution, you

must use Save As instead of Save For Web & Devices.

NOTE

When you save an image for the Web, you can consider

resizing the image to web-friendly dimensions. Most

users today run 1024×768-pixel screen displays. When

posting to online galleries, you can prep your work

to accommodate the host’s gallery space, minus any

headers a web page might have. Essentially, if you’re

posting to a gallery, you could and should go 900 pixels

wide and as high as the page will accommodate: 600 is

usually fine.

13

280 Photoshop CS4 QuickSteps Preparing Your Images for the Web

PC QuickSteps Getting to Know Your PC 281

13 12 11

2. Click the 2-Up tab so that you can see the original and modified images side by side

as you set the options.

3. Depending on your image type, read one of the following sections to learn how to

optimize your image. The optimization options vary by file type.

OPTIMIZE A GIF OR PNG-8 IMAGE

GIF and PNG-8 images are similar and use an indexed color panel. Previewing

the settings you choose is the key to a small, good-looking GIF or PNG export.

The optimization options are shown in Figure 13-2.

Figure 13-1: This Save For Web & Devices dialog box shows the 2-Up tab selected.

Zoom

image

Preview the image with the

selected optimization options

in the default browser

Optimized

image details

Original

image details

Shows the color

selected by the

Eyedropper tool

The Eyedropper

tool selects a color

The Zoom tool changes

the magnification

Shows or hides

slice borders

The Slice Select tool

selects slices in the

current image

The Hand tool

moves the image in

the selected window

CAUTION

Don’t tinker around with color modes in Photoshop when

you’re preparing a photo for the Web. Using File | Save

For Web & Devices can handle all your color mode needs

automatically on a copy of your original.

13

Photoshop CS4 QuickSteps Preparing Your Images for the Web 281

282 PC QuickSteps Getting to Know Your PC

11 12 13

To optimize a GIF or PNG-8 image in Photoshop:

1. Click the Optimized File Format down arrow and choose GIF or PNG-8.

–Or–

Click the Preset down arrow, and click one of the GIF options or PNG-8. The options

particular to this file format are displayed. (If the GIF is intended as an animated GIF,

the animation preview controls will also be available.) Notice that if you choose a GIF-24

to GIF-128 option, the Color Table preview displays the closest match of original image

colors to new color approximations for the limited palette of unique colors.

Figure 13-2: Optimization options for GIF and PNG-8 images

Original file

type and size

Optimized file

type, size, and

transfer speed

Select the

Interpolation

method

Scale the

image by exact

measurements

or percentage

Lossy sets the

degree of color

reduction (for

GIF only)

Web Snap sets

the degree of

matching to the

Web-Safe panel

Specify Transparency

Dither Algorithm to

select the type of

transparency

Dither combines various

colors to smooth or

avoid banding

Colors sets the

number of colors

in the image

Use Color Reduction

Algorithm to select the

type of color panel

Saved Sets of

Optimized Settings

contains preconfigured

optimization settings

Use the Preset or the

Optimized File Format

to select the file format

NOTE

An algorithm is a procedure or formula for solving a

problem. Photoshop uses algorithms for color reduction

and dithering, among other things.

13

282 Photoshop CS4 QuickSteps Preparing Your Images for the Web