Photoshop 6 for Windows Bible- P30 pdf

But before you can save a color image in the GIF format, you have to reduce thenumber of colors using Image ➪ Mode ➪ Indexed Color.. Using the Indexed Color command Choose Image ➪ Mode ➪

prepare your images To that end, the next few sections discuss the do’s and don’ts

of Web imagery

The smaller, the speedier

If you have any experience with the Web, you know that small images are speedy

images By “small,” I don’t mean small in physical size (although that often helps)

I mean small in terms of disk space A 20K image that fills your screen takes less

time to download and display than a 50K file no larger than a sticky note It’s the

act of getting the data through the cables and phone lines that takes the time;

by comparison, the time it takes your browser software to interpret the data

is insignificant

Therefore, this chapter emphasizes ways to control file size How can you squish

the finest graphics you’re capable of creating into the smallest amount of disk space

with the least amount of sacrifice? This is the single most important challenge facing

Web artists today And while the Web-wide world is certain to change by the time

you read this, I have a sneaking suspicion that small and speedy will remain the

watchwords for some time to come

Mac and PC monitor brightness

Many Web artists come from a background in print media, and while much of what

they’ve learned while preparing printed photographs is equally applicable to online

artwork, there are differences Foremost among the differences, you never need

worry about converting images to the CMYK color space All Web graphics are

RGB (or a subset of indexed colors or gray values) This is extremely good news

because it means that for once in the history of electronic publishing, what you

see on screen is really, truly what you’re going to get

Well, almost Ignoring the differences in the ways people perceive colors and the

variances in ambient light from one office or study to the next, there are measurable

differences between monitors Some monitors produce highly accurate colors,

others — especially older screens — are entirely unreliable But more importantly,

some screens display images more brightly than others

For example, the typical Macintosh user with an Apple-brand monitor is cursed

with a very bright screen Apple monitors — and many non-Apple brands developed

for the Mac — are calibrated to a gamma of 1.8 Meanwhile, most PC monitors are

calibrated to 2.2, which is roughly equivalent to a standard television

Higher gamma values translate to darker displays because they indicate degrees

of compensation By compensating less (1.8 versus 2.2), images appear lighter on

the Mac

Figure 19-1 shows a test image subjected to various brightness settings The

upper-left example shows how the image looks when corrected for a typical PC screen The

upper-right example shows that very same image displayed on a typical Macintosh

Note

monitor While it may be safe to assume that most folks who visit your Web pageown PCs, the graphics community is still very large and active on the Mac side

So it pays to keep both Mac and PC users in mind when preparing your artwork

Figure 19-1: An image corrected for a PC screen lightens up

dramatically when viewed on a typical Macintosh monitor

The solution is to strike a compromise Choose Image ➪ Adjust ➪ Levels (Ctrl+L)and lower the gamma (the middle Input Levels value) to between 0.8 and 0.75.Although the result will look a tad bit dark on your screen, it strikes a nice balancebetween PC darkness and Mac brightness The bottom two examples in Figure 19-1show what happens when I lower the gamma to 0.75 and display the image on a PCscreen (left) and a Mac screen (right) A little dark on one, a little light on the other,but ultimately an equitable compromise

Corrected on PC Washed out on Mac

Slightly dark for PC Slightly light for Mac

You can use the Photoshop 6 color management options to preview how your

image looks on a foreign monitor After selecting color profiles and other options

in the Color Settings dialog box, as I explain in Chapter 16, choose View ➪ Proof

Setup ➪ Macintosh RGB To switch between the preview and original, press

Ctrl+Y, which toggles the Proof Colors command on and off

More rules of Web imagery

Here are a few more items to remember when creating Web graphics:

✦ Resolution doesn’t matter Regardless of the Resolution value you enter into

the Image Size dialog box, the Web browser displays one image pixel for everyscreen pixel (unless you specify an alternative image size in your HTML file)

All that counts, therefore, is the pixel measurements — the number of pixelswide by the number of pixels tall

In the future, however, browsers may end up paying attention to the tion information, in which case the graphic would get scaled down to thedimension you specify

resolu-✦ Save in GIF or JPEG GIF and JPEG are the file formats of choice for Web

graphics GIF supports just 256 colors, so it’s better for high-contrast artworkand text JPEG applies lossy compression, so it’s better for photographs andother continuous-tone images The upstart format is PNG, which is essentially

a 24-bit version of GIF designed for small full-color images that you don’t want

to compress

✦ Index colors with a careful eye Before you can save an image in the GIF

for-mat, you must reduce the number of colors to 256 or fewer Photoshop uses a

technique called indexing, which reassigns colors according to a fixed index,

serving much the same purpose as the index in the back of this book InPhotoshop, you can create custom color tables so that the indexing processleaves many of the original image colors intact, thereby improving the appear-ance of your graphics

✦ Save essential data only If you save your Web images via the standard Save

or Save As command instead of the Save For Web dialog box, you can reduceyour file size by turning off all nonessential options — annotations, alpha channels, and so on Also, for the sake of previews, go into the Saving Filespanel of the Preferences dialog box (press Ctrl+K and then Ctrl+2) and setImage Previews to Ask When Saving Then turn off the previews when savingthe files

By recognizing which formats to use when, and how best to reduce colors, you

can better ensure that visitors to your Web site will spend less time sitting on their

hands and more time enjoying your site I explain the fine points of the file formats

and color indexing in the following sections

Tip

Caution

6

Photoshop 6

Saving JPEG Images

When it comes to saving photographic images, no format results in smaller file sizesthan JPEG As explained in gory detail in Chapter 3, the JPEG format decreases thefile size by applying a lossy compression scheme that actually redraws details inthe image Inside the JPEG Options dialog box, select lower Quality settings to putthe screws to the image and squish it as low as it will go But in doing so, you alsosacrifice image detail (Revisit the second color plate in this book, Color Plate 3-2,

to see an example of JPEG compression at work.)Just to show you how well the JPEG format works, Figure 19-2 shows a series ofimages saved in the JPEG and GIF formats, along with their file sizes The original fileconsumed 62K in memory Yet by lowering the Quality setting to Medium, I was able

to get the file size down to 28K on disk To accomplish similar savings using the GIFformat, I had to reduce the color palette to 3 bits, or a mere 8 colors (For the record,this same file saved in the PNG format consumed 63K on disk.) As you can plainlysee in the enlarged details, applying JPEG compression has a less destructive effect

on the appearance of the image than reducing the color palette

Figure 19-2: JPEG compression produces smaller file sizes with less impact than

reducing the color palette and saving in GIF The number in parentheses indicates the Quality value entered into the JPEG Options dialog box

Maximum (8), 43K High (6), 34K Medium (3), 28K

8 bits/pixel, 71K 5 bits/pixel, 44K 3 bits/pixel, 26KJPEG

GIF

When judging small differences in file size, right-click the file at the desktop level

and choose the Properties command Then check the Size item listed in bytes For

example, the Size item in Figure 19-3 reads 16KB (16,551 bytes), 32,768 bytes used

The value in parentheses is the true reading, accurate to the byte The second

value — in this case, 32,768 bytes — is measured in drive blocks, which are the

smallest parcels of disk that the system can write to This makes for a misleading

measurement that is invariably larger than the actual file size and that grows in

proportion to the capacity of the hard drive (or drive partition) Whatever you do,

don’t believe the size listed in the preview box at the far-left end of the status bar

This is the size of the image in memory, but where Web graphics are concerned,

all that counts is the size of the file on disk

Figure 19-3: To gauge the true size of a file — accurate to the

byte — right-click it at the desktop level, choose the Properties

command, and observe the value in parentheses

You can save an image to JPEG using either the standard File ➪ Save As command

or the Save for Web command, which I explore later in this chapter When you save

via File ➪ Save As, Photoshop displays file size information at the bottom of the

dia-log box, assuming that you select the Preview check box, as shown in Figure 19-4

Tip

The stated size reflects an approximate indication of the file size you’ll get if youuse the current JPEG options What’s more, Photoshop estimates how long the filewill take to download at a given modem speed, which you select from the Size pop-

up menu Although these values are just approximations, they give you a good idea

of how much compression you need to apply to the image to keep it at a reasonabledownload time

Figure 19-4: If you turn on the

Preview check box, Photoshopdisplays the approximate file sizeand download time of the image

at the current settings

The other dialog box options work as follows:

✦ Matte: Unlike GIF, JPEG does not support transparency So if your image

contains transparent areas, Photoshop needs to know what color to fill themwith Select the desired color from the Matte pop-up menu Keep an eye onthe background image to make sure that you like the effect Be aware thatJPEG compression may cause the actual matte color to differ somewhat from the color you choose from the menu

✦ Quality: If you’ve ever seen the movie This Is Spinal Tap, you may recall the

scene in which lead guitarist Nigel Tufnel demonstrates how he can crank

up the dials on his amplifier to 11, one beyond the standard maximum of 10.When asked, “Why not just make 10 louder and make 10 the top number?”Nigel blanks for a moment and finally concludes, “This goes to 11!” In thatsame vein, I present you with the Quality value, which once topped out at

10 and now extends to 12 Why not simply make 10 better quality and make

10 the top number? You don’t need a computer science degree to figure out the answer to that question: “This goes to 12!”

At any rate, use the Quality option to specify the amount of compressionapplied to your image Lower values mean smaller file sizes and more JPEG

compression gook Many experts say Medium (3) is the best setting for Webgraphics, but I think it looks pretty awful, especially on screen I prefer aQuality value of 5 or better.

✦ Format Options: Most Web browsers support two variations on the JPEG

format The so-called baseline (or sequentially displayed) format displays images in line-by-line passes on screen The progressive JPEG format displays

an image on screen in multiple passes, permitting visitors to your page to get

an idea of how an image looks right off the bat, without waiting for the entireimage to arrive

To save a baseline image for use on the Web, select Baseline Optimized Thisformat includes better Huffman encoding that makes the file even smallerthan Baseline (“Standard”) You can generally reduce the file size by 5 to

10 percent by using this option

✦ Scans: If you select the Progressive radio button, you can pick a number of

passes from the Scans pop-up menu A higher value results in a faster display

of the initial image on your page, but it also takes longer to display completely

on screen because of all the incremental refreshing (although some browsersare smart enough not to redisplay individual JPEG scans if they already havereceived data for subsequent ones) A medium value of 4 is probably best ifyou choose to create progressive images

There’s a fair amount of debate over whether you should use progressive JPEG (and

other incremental display options such as GIF interlacing) I used to be a fan of the

option because it gives the viewer the early right of refusal But I’ve become aware

of enough compatibility issues that I now advise people to turn the option off

Preparing and Saving GIF Images

So much for JPEG; on to GIF The GIF format came into being during a time when

only the super savvy owned 1200-bps modems It supports a maximum of 8 bits

per pixel (256 colors), and it uses LZW compression, just like TIFF GIF comes in

two varieties, known by the snappy monikers 87a and 89a, with the latter

support-ing transparent pixels

Frankly, GIF is getting a little long in the tooth Most online pundits figure PNG

will replace GIF in the next few years But for the time being, GIF is an extremely

popular and widely supported format And despite its obvious limitations, it has its

uses GIF is a much better format than JPEG for saving high-contrast line art or text

Figure 19-5 shows two versions of the same image; the top image was saved in the

JPEG format, and the bottom one was saved in GIF As you can see, the JPEG

com-pression utterly ruins the image And I had to reduce the Quality setting to 0 — the

absolute minimum — to get the file size down to 16K Meanwhile, saving the image

in the GIF format sacrificed no detail whatsoever and resulted in a file size of 18K

GIF’s LZW compression is well suited to high-resolution artwork with large areas

of flat color

Caution

Figure 19-5: The JPEG format creates weird patterns in high-contrast images

(top) and saves relatively little space on disk Meanwhile, GIF keeps the sharp edges very much intact (bottom)

But before you can save a color image in the GIF format, you have to reduce thenumber of colors using Image ➪ Mode ➪ Indexed Color The following sectionexplains how this command works

Using the Indexed Color command

Choose Image ➪ Mode ➪ Indexed Color to display the dialog box shown in Figure19-6 This command permits you to strip an image of all but its most essential colors Photoshop then generates a color look-up table (LUT), which describes the few remaining colors in the image The LUT serves as an index, which is

why the process is called indexing.

For some reason, Photoshop doesn’t let you apply the Indexed Color command

to Lab or CMYK images And although you can apply Indexed Color to a grayscaleimage, you don’t get any control over the indexing process; Photoshop doesn’t let you reduce the image to fewer than 256 colors, for example So if you want toindex a Lab or CMYK image or custom-prepare a grayscale image, choose Image ➪Mode ➪ RGB to convert the image to the RGB mode and then choose Image ➪Mode ➪ Indexed Color Alternatively, you can use Save for Web to save and indexyour images at the same time (See the section “Optimizing JPEG and GIF Images,”later in this chapter, for more information.)

Figure 19-6: Use the Palette

options to select the kinds of colorsthat remain in the image Use theColors option to specify how manycolors remain

Don’t expect to be able to edit your image after indexing it Most of Photoshop’s

functions — including the gradient tool, all the edit tools, and the filters — refuse

to work Others, like feathering and the paintbrush and airbrush tools, produce

undesirable effects If you plan on editing an 8-bit image much in Photoshop,

convert it to the RGB mode, edit it as desired, and then switch back to the

indexed color mode when you finish

Now that I’ve gotten all the warnings and special advice out of the way, the

following sections explain how to use the options inside the Indexed Color dialog

box Adobe gave the dialog box an overhaul in Version 5.5, adding helpful options

for locking down important colors, choosing from more naturalistic palettes, and

applying transparency

Specifying the palette

The first pop-up menu — Palette — tells Photoshop how to compute the colors in

the look-up table The following list explains how each of the options works:

✦ Exact: If the image already contains fewer than 256 colors, the Exact option

appears by default This only occurs if you’ve created an extremely

high-contrast image — such as a screen shot — or you’re working from an image

that originally started out as grayscale If Exact is selected, just press Enter

and let the command do its stuff No sense messing with a good thing

✦ System: Photoshop offers two System options, which are used by the

Macintosh and Windows operating systems The only reason to select

either of these options is if you want to add a bit of imagery to the system

For example, it’s a good idea to select the System (Windows) option when

creating a background pattern, a wallpaper image, or some other item that

appears at the desktop level Color Plate 19-1 shows examples of a 24-bit

image downsized to the Mac and Windows system palettes

Tip

✦ Web: Just to make things as confusing as possible, Web browsers subscribe to

their own variety of color palette According to folklore, this 216-color LUT is

an intersection of colors found in the Mac and Windows system palettes But

in fact, the Web palette includes those 216 colors whose R, G, and B values aredivisible by 51 That means each primary color can be set to 0, 51, 102, 153,

204, or 255 Calculate all possible combinations, and you get 216 colors.When displaying an image on an 8-bit screen, the browser invariably changesall colors to those in the Web palette Therefore, converting your colors to theWeb palette ensures that what you see on your screen is what your guests see

as well But for most folks, I still argue in favor of Adaptive if indexing must

be done An image with an adaptive palette will look far better on 16-bit andbetter monitors, and these days, high-color screens are in the majority (Thenotable exceptions are portables, which often max out at 8-bit screens Butthese LCD screens hardly do your color graphics justice, so it seems silly tolet such lowest-common-denominator concerns dictate your work.)

✦ Uniform: This is the dumbest option of them all It merely retains a uniform

sampling of colors from the spectrum I’ve never heard of anyone finding ause for it — but as always, I welcome your suggestions

✦ Adaptive: This option selects the most frequently used colors in your image,

which typically delivers the best possible results Because it ignores all systemand Web palettes, images downsized with Adaptive look best on high-colormonitors, as I mentioned previously To demonstrate just how much betterthey look, the bottom row of Color Plate 19-1 shows three images subject tothe Adaptive palette at various Color Depth settings Even with a mere 64 and 16 colors, the middle and right images look as good or better than the 256-color system-palette images above them

In Photoshop 6, Adaptive comes in two flavors, Local and Selective ChooseLocal (Adaptive) if you want Photoshop to consider the colors in the currentimage only If you have several images open and want to create a palettebased on all the images, choose Master (Adaptive)

When you use the Local option, you can influence the performance of theAdaptive option by selecting an area of your image before choosing theIndexed Color command Photoshop favors the selected area when creatingthe palette For example, before indexing the image in Color Plate 19-1 down

to the 8-color palette (bottom right), I selected the fellow’s face to avoid losing all the flesh tones If you have more than one image open, Photoshopconsiders the selection in the active image and the entire palettes in the other images

✦ Perceptual and Selective: These two options, added in Photoshop 5.5,

are variations on Adaptive But where Adaptive maintains the most popular colors, Perceptual is more intelligent, sampling the colors that produce thebest transitions The Selective option tries to maintain key colors, includingthose in the so-called 216 “Web-safe” palette

Tip

6

Photoshop 6

That said, here’s some advice: Select Perceptual for images where smoothtransitions are more important than color values Use Selective when animage contains bright colors or sharp, graphic transitions And if an imagecontains relatively few colors — and you want to maintain those colors asexactly as possible, go for Adaptive.

As with Adaptive, choose the Local version of Perceptual and Selective if youwant the palette created solely on the basis of the current image The Masterversions take all open images into account

✦ Custom: Select this option to travel to the Custom Table dialog box, where

you can load a look-up table from disk, or to create and save a custom table

This is useful when creating multimedia content, but rarely serves any purpose for Web graphics I explain how to save a custom palette later

in this chapter, in the section “Editing indexed colors.”

✦ Previous: This option uses the last look-up table created by the Indexed

Color command If you’re trying to create a series of high-contrast graphicsthat you want to look as homogeneous as possible, use this option ThePrevious option is dimmed unless you have used the Indexed Color command at least once during the current session

Colors

Like all computer programs, Photoshop measures color in terms of bit depth

As I’ve mentioned elsewhere in this book, an 8-bit image translates to 256 colors

Photoshop computes this figure by taking the number 2 and multiplying it by the

number of times specified by the bit depth 24-bit means 2 to the 24th power, which

is 16 million; 4-bit means 2 to the 4th power, which is 16

Before Photoshop 5.5, you controlled the number of colors in the palette by choosing

a particular bit depth Now you simply enter the actual number of colors into the

Colors option box The idea is that scaling colors by an entire bit depth — 8-bit for 256

colors, 7-bit for 128, 6-bit for 64, and so on — isn’t really necessary to achieve smaller

file sizes, so you might as well free your mind and enter the exact number of colors

you deem fit Still, it was a valuable option, and I would have preferred to see it stay

Sacrificing an entire bit does sometimes make a difference, after all

As you can guess, fewer colors result in smaller GIF files I generally start with 64

colors With the Preview check box turned on, I can see the effect of this palette in

the image window If the image looks okay, I try going even lower It’s all a matter of

getting the colors as low as they can go without becoming ugly The bottom row in

Color Plate 19-1 shows examples of the same image with 256, 64, and 16 colors

Note

6

Photoshop 6

Tip

If you choose Custom, you can select the colors that you want to lock in When you select Custom, Photoshop opens the Forced Colors dialog box You see a colorswatch for each color locked by the previously selected setting To add anothercolor, click an empty swatch and then select the color from the Color Picker dialogbox Click an existing swatch to replace it with another color And to unlock a color,Ctrl-click the swatch You can save your settings as a color table by clicking theSave button (Forced colors files use the file extension act.) Save the file in theOptimized Colors folder, located inside the Presets folder Load existing settings

by clicking the Load button

Transparency

If an image is set on a layer against a transparent background, selecting this checkbox maintains that transparency Bear in mind, however, that transparency in a GIF file is either on or off; there are no soft transitions as in a Photoshop layer

If you apply the Indexed Color command with the Transparency check box turned

on, the familiar checkerboard pattern appears in the transparent portion of theimage, as shown in Figure 19-7 What’s unusual about this is that Photoshop flattensthe file when you first choose the Indexed Color command, as indicated by the sin-

gle Background layer pictured in the figure Furthermore, you cannot add new layers

to the file This makes an indexed image the only kind of Photoshop document thatcan accommodate transparency without layers

Matte

The Matte option works in collaboration with the Transparency check box (If there

is no transparency in an image — that is, all layers cover one another to create aseamless opacity — the Matte option is dimmed.) When you select Transparency, thespecified Matte color fills the translucent pixels in the image When Transparency

is turned off, the Matte color fills all translucent and transparent areas To ensuresmooth transitions, select the Matte color that matches the background color

of your Web page

Note

Figure 19-7: An indexed image is unique in

that it can accommodate transparency inside

a flattened document

Dither

This option controls how Photoshop mimics the several million colors that you

asked it to remove from an image:

✦ None: Photoshop maps each color in the image to its closest equivalent in the

look-up table, pixel for pixel This results in the harshest color transitions But

as I explain in a moment, it is frequently the preferable option

✦ Diffusion: This option dithers colors randomly to create a naturalistic effect,

as shown in the lower-right example of Figure 19-8 and the last image in Color

Plate 19-2

✦ Pattern: Pattern dithers colors in a geometric pattern, which is altogether

ugly Look to the lower-left example of Figure 19-8 and the middle image in

Color Plate 19-2 for examples

✦ Noise: Added in Photoshop 5.5, the Noise option mixes pixels throughout the

image, not merely in areas of transition

Figure 19-8: The results of converting an image (upper left) to the System

palette using three of the Dither options: None, Pattern, and Diffusion

After looking at Figure 19-8 and Color Plate 19-2, you may think that Diffusion is the option of choice And in many cases it is, especially because you can controlthe amount of dithering using the Amount value, discussed next But often, None

is the better option First of all, None results in smaller GIF files (as Color Plate 19-2shows) Because LZW is better suited to compressing uninterrupted expanses ofcolor, harsh transitions mean speedier images Second, if a guest views your page

on an 8-bit monitor, the system dithers the image automatically (assuming that you selected one of the Adaptive options from the Palette pop-up menu) Systemdithering on top of Diffusion dithering gets incredibly messy; system dithering

on its own, however, is acceptable

When you choose Diffusion as the dithering mode, you can modify the amount of

dithering by raising or lowering this value Lower values produce harsher color

transitions, but lower the file size It’s a trade-off Keep an eye on the image

window to see how low you can go

Preserve Exact Colors

The Preserve Exact Colors check box is available only when the Diffusion option

is selected from the Dither pop-up menu When turned on, this option turns off

dithering inside areas of flat color that exactly match a color in the active palette

Say that you’ve created some text in a Web-safe color The text is antialiased, but

the letters themselves are flat color By selecting Web from the palette pop-up

menu and selecting the Preserve Exact Colors check box, you tell Photoshop

to dither around the edges of the letters but to leave the interiors undithered

As I mentioned before, you may often get better looking images if you apply no

dithering But if you decide to dither, turn Preserve Exact Colors on Even if you

can’t see a difference on your screen, it may show up on another screen

Editing indexed colors

As I said earlier, Adaptive is generally the best choice when creating Web graphics

because it scans each image for its most essential colors But even the Adaptive

option doesn’t get things 100-percent right On occasion, Photoshop selects some

colors that look wildly off base

To replace all occurrences of one color in an indexed image with a different color,

choose Image ➪ Mode ➪ Color Table The ensuing Color Table dialog box, shown

in Figure 19-9, enables you to selectively edit the contents of the LUT You can get

to this same dialog box by choosing Custom from the Palette pop-up menu in the

Indexed Color dialog box, discussed in the preceding sections The table also

appears in the Save For Web dialog box, explored in the upcoming section

“Optimizing JPEG and GIF Images.”

To edit any color, click it to display the Color Picker dialog box Then select a

different color and press Enter to go back to the Color Table dialog box Press

Enter again to close the Color Table dialog box and change every pixel colored

in the old color to the new color

The Color Table dialog box also enables you to open and save palettes and select

predefined palettes from the Table pop-up menu What the Color Table dialog box

doesn’t let you do is identify a color from the image For example, if you’re trying

to fix a color in your image, you can’t display the Color Table dialog box, click the

color in the image, and have the dialog box show you the corresponding color in

the look-up table