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. ToneElectronic 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, and e-commerce will flounder. With so much money riding on this, you'd think that there would already be good commercial solutions to ensure accurate color. Unfortunately, the tough part is getting the person-on-the-street to create custom monitor profiles on their machines. While the display on some computer monitors is darker than on others, monitors connected to a Macintosh tend to display images lighter than those on a PC (see Figure 14-1). You can compensate for this to some extent by choosing an appropriate RGB space for your images (see 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. Figure 14-1. Monitor gamma and image tone
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. Given the current state of the art, the best you can do is to choose an aim point appropriate for the audience you're trying to reach. We suggest you choose one of the following alternatives.
All three approaches have their strengths and weaknesses, and each of these three strategies optimizes the image for a different set of users. Tip: Work in a Big Space Even if every image you create is for the Web, we still suggest setting the RGB popup menu in your Color Settings dialog box to a reasonable color space, like Adobe RGB (if you don't know what we're talking about here, check out 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. ColorNot 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.
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. Figure 14-2. Web-safe colorsThere 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). ResolutionOne 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 to HTML 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. |