Note: You can print this (or any page) from your web browser by selecting File/Print. This information is provided for your personal use only and is not to be redistributed without permission of the author. Copyright 1998 Laurie McCanna, Web Diner Inc.

Laurie McCanna's Photoshop Tip #37

Danger, Will Robinson! Color Problems with
Web Graphics and Photoshop 5

New! Download the Photoshop 5 update for free. This update will walk you through a wizard that will turn off the color conversion features in Photoshop 5 if you select web graphics when asked which type of work you'll be doing with Photoshop 5. This update also fixes the problems Photoshop 5 has with type at small sizes. If you install the update, you won't need to turn off the color management features as described below.

This tutorial explains how to avoid unwanted color shifts with Photoshop 5.

One of the reasons I decided to write this tutorial is because web graphics are almost completely ignored in the Photoshop 5 documentation. One feature in particular is especially unfriendly to indexed graphics. This feature is the new color management system. While there is an entire chapter in the Photoshop 5 User Guide devoted to explaining the new color management system that Photoshop uses, no where does it discuss specifically what to do if you are creating work for the web. The Photoshop 5 manual has only a single page that discusses web graphics, which is an astounding oversight.

This new color management system by default will reinterpret files and can cause serious color shifts. This can be disastrous for you if you have graphics that you've carefully created with specific colors (ie, the web palette) in any program other than Photoshop 5, or in Photoshop 5 on another computer with a different color management setup.

Here's an example. I created a file in Photoshop 4 that contained only the 216 colors used in the web palette:

the original file, which contains 216 colors

I saved the file as both .tif and .psd, and brought the image into Photoshop 5. Then I indexed both files to the web palette. You can see that Photoshop 5 was forced to dither the image, demonstrating that the colors had been shifted from the original files by Photoshop 5:

the same file brought into Photoshop 5, demonstrating the color shift

These color shifts are happening because Photoshop is trying to correct the color for your monitor and printing setup. These color shifts can happen with any file from any application. They don't appear to happen if you've created a gif in Photoshop 5, and open it again in Photoshop 5 with the same monitor and color management settings.

How do you avoid this if you work with any kind of on screen graphics, whether for web or multimedia? You need to turn off all of the RGB color management options in Photoshop 5. If you also do work for print, you might consider having two installs of Photoshop 5, one for print work and one for web work. Either that or remember to reset the color management options when you use Photoshop.

From the Photoshop menu bar, select File/Color Settings/RGB Setup. On the PC, choose sRGB.

On the Mac, choose Apple RGB.

Under Display using Monitor Compensation, uncheck the checkbox .

Home | Guestbook | Tips and Tutorials Menu