For weeks now, I’ve been puzzling on-and-off about our Design Director’s problem: JPGs saved using CS3’s “save for web” setting were going through a significant color shift in the process. It was subtle, but especially noticeable on high-color comps: The final colors were lighter and less saturated than in Photoshop. Only after I made the switch to the new iMac did I notice similar issues: Major shifts between in-Photoshop and in-browser colors, to the point where colors set in hex were drastically different from those I saved “for web” in Photoshop.
There were three settings in Photoshop that I eventually found and suspected:
- The Edit > Color Settings profile of the images
- The Save For Web > Convert to SRGB setting when saving
- The ability to “Proof Colors” under the View menu
After checking out a lot of blog posts and purported solutions for the issue, I had some decent compromises, but they all failed my primary test: A rainbow-colored image, saved with “for web” settings, viewed in a browser alongside the same image viewed in Photoshop. While some settings/solutions came close, my test was to screenshot the two side by side, open the screenshot itself, and test color points for match-ups. The logic being: Even if the color profile on the screenshot gets warped on its journey into Photoshop, two identical points should still be reading as identical colors. Getting close didn’t count: I wanted something that was transporting image color from Photoshop to the web with as much control as I could have.
In the end, I found a perfect match using a combination of methods from Tancredi, Gary Ballard, and a few others.
Step 1: Go to Edit / Color Settings in Photoshop. You want to set the top option to “Monitor Color.” You can also turn off “Ask When Opening” under profile mismatches, if you feel like it. Hit OK.
Step 2: You should already be close the the perfect color matching, but in some cases, I find it’s still a touch off. To correct this, you can go to View and change “Proof Setup” to “Monitor RGB.” Then, turn on “Proof Colors” in the View menu.
Step 3: When you go save an image for Web, Photoshop is by default changing the color setup to sRGB. You can fix this by clicking the little arrow next to ‘Presets’ and switching off the “Convert to sRGB” option.
And that’s it! After following these steps, you should be able to appropriately mimic the color on most monitors, as well as maintain consistent colors between Photoshop and your web browser. If you can’t, let me know; I’d love to investigate this further.
(Note: For matching your colors with what users will see on PCs, you’ll need to set your gamma to 2.2 in Display Calibration. I’ve decided to do this for my work computer, but it does tend to kill a lot of detail in the black areas of images…)
Recent Comments