Real World Adobe® Photoshop® CS2 [Electronic resources] : Industrial-Strength Production Techniques

Preparing Images

No matter whether an image is destined for print or for screen, we always recommend that you do the tonal correction, color correction, and sharpening in Photoshop. But the kind of correction and sharpening you need for on-screen images is almost always different than for printed images.

Ultimately, the one rule that almost always applies to images for the screen is that no matter what the image looks like on your screen, it will look different on everyone else's. Preparing images for multimedia and the Internet is an exercise in frustration for anyone who is used to print production; even the whims of a web press seem trivial compared to the variations from one person's screen to another on the Web.

Tone

Electronic commerce demands that Web color get more consistent; the number one reason for merchandise returns is, "it wasn't the color I saw in the catalog." Without an easy way for people to characterize their monitor and for images to be compensated on the fly, customers will never be able to tell whether the shirt they're looking at is a dark burgundy or a light red, Chapter 5, Color Settings); but it's unlikely that the people who view your images will have calibrated monitors, so the above gamma numbers are no more than a general guideline.

There are several strategies for dealing with this mismatch. All involve some compromises. Since the destination monitor is essentially an unknown, you can be fairly certain that until self-calibrating monitors are ubiquitous and all browsers support system-level color management, your images are going to look much better (or worse) on some systems than on others. Ultimately, it's simply impossible to produce images that will look good to every Web user.

Chapter 5, Color Settings, we discussed the sRGB color space, developed by several industry giants to describe the general characteristics of the "typical" Windows monitor. Of course, the sRGB color gamut excludes many of the intense colors that you may want to display. (Ironically, the logo color of one of sRGB's main proponents, Hewlett-Packard, lies outside the sRGB gamut.) Also, we doubt that the majority of monitors on the market actually display sRGB. Still, you can convert your edited images into the sRGB space before saving them, accepting its inherent limitations.

Given the marketing muscle behind sRGB, it's probably the most sensible choice unless you're trying to sell color-critical merchandise or show fine art on the Web. However, there are many good reasons to work in a better RGB workspace and only convert to sRGB just before saving the file (see "

All three approaches have their strengths and weaknesses, and each of these three strategies optimizes the image for a different set of users.

Chapter 5, Color Settings). Then, if you want to convert your images to the sRGB space before saving them, you can use Convert to Profile (from the Edit menu) to convert from your RGB space to sRGB. If you use the smaller sRGB space as your RGB working space, you're limiting your color options unnecessarily when editing your images.

Color

Not only can you rarely predict tonal shifts in images for the screen, you can't assume anything about color. Most graphic arts professionals have 24-bit color ("true color") monitors, but just because you have one doesn't mean that your audience will. In fact, some users of older computers can only view 256 colors at a time, due to the constraints of their video hardware (or the games they like to play on their computer). The occasional computer user only has a grayscale screen, so they won't see color at all.

What's worse, even two people with the same kind of screen and computer system will probably see the same image differently on each of their monitors. Again, monitor calibration can help considerably, but it's too rare to depend upon. (And a thoughtless quick twist of the brightness or contrast knobs means that the color is even further off.)

However, there are a few rules you can generally trust.

It's usually more important to retain the contrast between colors than the particular colors themselves. Image details that result from subtle changes in color (like the gentle folds in a red silk scarf) are often lost in translation.

Solid areas of color, including text, should be set to one of the 216 "Websafe" colors (see "Tip: Web-Safe Colors," below) so that they won't dither on old 8-bit screens.

If you built your image on a 24-bit color monitor (which is a good idea, even when making Web graphics), switch your monitor to 8-bit color (256 colors) to test how less-well-equipped folks will see your image. (Or, use the Browser Dither feature in the Save For Web dialog box, which we talk about later in this chapter.)

While you're testing, also try looking at your image on both Macintosh and Windows systems. You can also select Windows RGB or Macintosh RGB from the Proof Setup submenu (under the View menu), and then turn on Proof Colors (press Command-Y) to see how they change. This isn't perfect, but it should give you a general idea of how the image may look on a different system.

Images for multimedia and the Web should always be in RGB or Indexed Color mode.

Tip: Web-Safe Colors

There is a myth that people making GIF images should always save them using Web-safe colors. The problem is that "Web-safe" really should be called "Save for 8-bit monitors" because this is only relevant when viewing images on a monitor set to 8-bit color (256 colors). The vast majority of computers on the planet now display 16-bit ("thousands of colors") or 24-bit ("millions of colors" or "true color") color, so Web-safe just isn't that important anymore.

However, if you do use a non-Web-safe color in your image, itby necessitygets dithered using the system palette's colors when viewed on an 8-bit color monitor (see Figure 14-2). The dithering is distracting in many images (especially images with text), but is usually unavoidable in pictures that contain anti-aliasing, gradients, or photographic images.

There are various ways to choose Web-safe colors for a Photoshop image, but the easiest is simply to turn on the Only Web Colors checkbox in Photoshop's Color Picker dialog box. Or, you could open the Swatches palette and choose any of the Web-safe palettes from the palette's popout menu (any palette that begins with the word "Web" or "Visibone").

By the way, if you do the math, you'll find that all the Web-safe colors are in 20-percent steps within the 256-level scale. That is, a typical Web-safe color might be 20-percent red and 60-percent green. You might be tempted with this knowledge to change your Color Picker (in the Preferences dialog box) in order to specify colors by percentage. Don't do it! Photoshop translates these values based on the RGB profile in the Color Settings dialog box, so you won't get the proper values at all. Instead, if you want to type specific numbers into the Color Picker dialog box, use 0, 51, 102, 153, 204, or 255 (these correlate directly with 0, 20, 40, 60, 80, and 100 percent).

Resolution

One of the wonderful advantages to working on images for screen display is that resolution is almost always 72 ppi, making for very small images (relative to prepress sizes, at least). A 4-by-5-inch image at 72 ppi takes up 300 K, where the equivalent prepress image might consume over 4.5 MB of disk space and RAM. With smaller file size come faster processing times and lower RAM requirements. You can actually use any resolution you want, but when it comes time to put the image on screen, each image pixel is mapped to a screen pixel. A 300-ppi image will become enormous on screen!

Of course, similar to the vagaries of color and tone on the Internet, you rarely know what resolution screen your images will be viewed onyour 72-ppi illustration quickly becomes much smaller if someone views it on a high-resolution monitor. Because you cannot assume monitor resolution, it's often a good idea to design your 72-ppi images slightly larger in size so they'll look okay on a higher-resolution screen. The "standard" resolution of most Windows and Macintosh monitors is around 96 ppi. Bruce runs a 22-inch monitor at 1920-by-1440-pixel resolution, which is close to 125 ppi! (This makes all Web images on his screen appear about half the size they were intended.)

Note that when scanning images destined for the screen, we still almost always scan them at a higher resolution (often the full optical resolution of the scanner) and then downsample them in Photoshop.

Tip: Pages to Graphics

People spend a lot of time trying to figure out how to get their InDesign or QuarkXPress pages up on the Internet. Converting t208 is one option, though the page almost never looks the same as it did originally. Saving in the PDF format is another option, but then people need Acrobat Reader to view the page, which is a hassle.

Our favorite method of getting pages from XPress or InDesign (or any other program) up on the 'Net is to make a picture out of each one. Adobe InDesign CS lets you export a document page as a JPEG file (select Export from the File menu). If you're using XPress, an earlier version of InDesign, or some other program, here's what to do:

By turning the page into a picture, anyone with a Web browser can see it on the Internet. And surprisingly, even a full-page "page image" can be made very small if it's mostly text.