Display Calibration and Color Management for Photoshop Users
Earlier today twinklewitch wrote a post asking for help with instances where the color/brightness of an icon looks different when the icon is viewed in Photoshop vs. viewed in a Web broswer after uploading. This question has come up before and I once wrote a fairly lengthy answer to another user of i_t which helped solve that user's problem. Some of the information I provided in that comment of a few months back was incorrect, though. Since I didn't want to repeat the information from that comment, and also not wanting to type another long comment that might not get seen by a large number of i_t users, I concluded I would write and post a complete tutorial on display calibration and color management.
Though aimed squarely at Photoshop users, (on both PCs and Macs) this tutorial may also be useful to users of Paint Shop Pro and GIMP assuming those two programs have color management capabilities similar to Photoshop. Since I haven't used Paint Shop Pro since 1996 and have never used GIMP I don't know how they manage color, or if they do at all. Nevertheless I encourage users of those two programs to read this tutorial and if such folks find it useful, comment about it. I'll be including links to third-party gamma correction utilities for use by Paint Shop Pro and GIMP users toward the end of the tutorial.
Part 1: Display Calibration
Color management will not work to best effect unless you first calibrate your display. Users of Photoshop on a PC will find a tool in the Control Panel called Adobe Gamma, (possibly under a slightly different name depending on how old your version of Photoshop is) used for display calibration. If you're a Mac user calibrate your monitor using ColorSync by opening System Preferences, selecting Display, and then the Color tab. (Please note that for purposes of this tutorial I'm assuming Mac users are running OS X.)
Adobe Gamma and ColorSync both have simple and advanced modes for calibration. If you're using Adobe Gamma I recommend using the wizard as it's just as thorough as using the single window advanced method, but gives explanations and instructions for each step.
If you're using ColorSync you can try using the simple method, but I've always found it produces unsatisfying results. Run through the simple method and once you have the hang of how it works, turn on Expert Mode. When using Expert Mode, don't be hesitant to experiment, taking time to know how each step changes the look of your display. Run it multiple times until you've got the best results you can achieve.
I note at this point that I'm not providing as specific of instructions as I could for how to manually adjust gamma using the sliders in Adobe Gamma and ColorSync because both utilities do a good job of providing instructions themselves. I will note for Adobe Gamma users that it's better to uncheck the "View Single Gamma Only" option and work with each RGB channel, adjusting and readjusting them until they all lood good at the same time.
In both Adobe Gamma and ColorSync, after tweaking gamma settings manually, you will be offered a choice of what both utilities called "desired gamma" and among the selections will be gamma levels specific to PC displays and Mac displays. The standard Mac gamma level is 1.8. The standard PC gamma level is 2.2.
If you're on a PC your gamma level defaults to 2.2, so leave it be. If for some reason it's set to something else, change it to 2.2 by selecting Windows Default in the dropdown menu.
If you're on a Mac your gamma level defaults to 1.8. Change your gamma level to 2.2, labeled PC Standard in the target gamma window. I suggest Mac users adjust their displays to use the PC gamma level because if you're making graphics, tweaking photos, etc., for Web use, the bulk of users viewing your graphics will be doing so on a PC. Using PC gamma even though you're running a Mac is the first step in insuring your images will look good to most users (with other steps to follow in part 2). If you use Photoshop for purposes other than Web graphics, make two monitor profiles, one using the Mac gamma level and the other the PC gamma level, and switch between the two depending on what work you're doing.
Taking all of the above into consideration, finish up in both Adobe Gamma and ColorSync by completing building of the monitor profile and saving it under a suitable name. The default name is often just fine but if you need to save more than one profile or your concerned about overwrites just save using unique names. Calibrating your display is a dynamic process that doesn't require you to reboot or log out/in, so making new profiles and switching on the fly is easy.
Part 2: Color Management in Photoshop
The window for adjusting color management in Photoshop on both Macs and PCs may be found in menu option Edit » Color Settings... Both windows appear almost identical aside from user interface differences between Mac and Windows GUIs. The example below is from the Windows version of Photoshop CS:
In the example you'll note that the top entry labeled Settings is set to Web Graphics Defaults. This is the correct setting for color management when making the kinds of images folks like to make around here, but not all versions of Photoshop have a setting with that name. If your version of Photoshop doesn't have that setting you can still achieve it by changing Settings to Custom, then changing the other everything else in your Color Settings box to match the settings shown in the example.
In the Working Spaces portion of the Color Settings box the important setting is the RGB dropdown menu. That is best set to the sRGB standard as shown above. The other Working Spaces settings (CMYK, Gray, Spot) are of no particular consequence to making images for web display but I would nevertheless recommend changing the settings to match those in the example, if such settings are available to you.
The Color Management portion of the Color Settings box is where you control how Photoshop deals with pre-existing profiles embedded in images you might acquire from elsewhere and use as source material for icons. In the example image all Color Management Policies are set to Off. This means Photoshop will neither keep the embedded profile, nor will it replace the profile with a new one based on your settings. The Color Management Policies are tied into the checkboxes which ask about profile mismatches and missing profiles. If you don't want Photoshop to ever ask you about what to do with an embedded profile in an image, uncheck the box labeled Ask When Opening. Unchecking that box will cause Photoshop to default to leaving the original profile in place. If you've gone through this tutorial up to this point and are still finding you have problems with colors going funny in an image, there's one more thing you can do.
Change the Color Management Policies as follows: Set RGB to Convert to Working RGB. Then check on all three checkboxes below. It might seem annoying to have Photoshop asking you more questions about what to do with color management profiles embedded in images every time you open an image or do a copy/paste, but answering those questions to the end of embedding your color management profile into the images (replacing the original) increases the likelihood of getting your image colors to be consistent.
Once the color settings are the way you want them you can save them to a file, though I've never bothered to do that. The settings will stick regardless of saving. If you find you have trouble with your Photoshop settings changing by themselves or being altered by gremlins, go ahead and save the color settings so you can reassert them without having to make the changes manually each time.
Part 3: What Not To Do
There's a particular thing you can do in Photoshop that looks temptingly useful for making Web graphics. I even recommended someone do it once. Subsequently I learned that this feature is entirely unnecessary for people doing the sort of stuff folks around here do, especially assuming you've calibrated your display and adjusted your color settings as described in parts 1 & 2 of this tutorial. The feature of which I speak is the Proof function.
There are two menu entries to be concerned with here. View » Proof Setup allows you to select a proofing method to apply to the image you're working with. View » Proof Colors is the command to turn proofing on and off. If Proof Colors is on a checkmark will appear next to the command in the menu. If off, no checkmark. When Proof Colors is turned on your image will look different from when it's turned off, depending on what the current selection is in the Proof Setup submenu. My recommendation? Never turn Proof Colors on. Why? Two reasons:
- Proofing to Windows and Mac RGB is deceptive as it makes you think you're seeing what your image will look like on someone else's monitor. That doesn't work because there's far too much potential for variability among the displays of the millions of computer users surfing the Web. You only fool yourself into believing you have to do yet more color correction in order to make the image you're working on look right. This only leads to doing more work than necessary. If you're monitor is calibrated and your color management settings correct making the image look good on your display is the best thing you can do to ensure the image will look good on as many other displays as possible, whether or not any of the displays used by people out in cyberspace are calibrated.
- The proof feature was originally intended and is legitimately useful for people working in press production, whose work will be printed to paper. The first six preset options in the Proof Setup submenu are all oriented toward print output, and it's with regard to production level printing (not the printing you do on your HP/Canon/Epson/whatever at home or in the office) that a Photoshop user would need to use proofing, so as to see what an image might look like as printed output from a four-color screen printer. This sort of thing simply doesn't apply to people using Photoshop for Web graphics.
The funny thing about turning Proof Colors on is that if it's on and you change the Proof Setup to Monitor RGB, any image you work with will look like it would if Proof Colors is turned off. In this sense, Proof Colors is irrelevant. Just another reason to ignore it.
That's all for the tutorial. I hope y'all will find the instructions for setting up your display and Photoshop color management useful. At the very least, I hope y'all didn't fall asleep before getting to the bottom of the page. :)
If you're a Windows user and run Paint Shop Pro or GIMP and have found that part 2 has some application for changing color management in those programs, that's excellent. But that leaves part 1 up in the air, assuming Paint Shop Pro and GIMP don't come with their own gamma correction utilities like Photoshop does. Assuming they don't, there's still a way to make part 1 work. QuickGamma is a third-party gamma correction tool available via versiontracker that you can use to calibrate your display. I've not used QuickGamma, so can't offer help with it, but it ought to enable you to calibrate your display in a manner similar to Adobe Gamma.
Enjoy your fresh new display!