Color proof correction in Photoshop
I have been plagued with this problem for literally 4 years. I’ll work on a design in Photoshop for days, only to save the dang thing for the web and get a washed out, off color piece of crap result. Finally, today, I have the answer: one change of the Proof Setup setting will finally match your working space with your output images.
See below. The rich dark chocolates and deep reds of the Carl Bloch painting are washed out when you Save for Web in Photoshop:
OK so sure, most can’t tell the difference. Still infuriating.
Chris mentioned the above image was a bit washed out, and when met with a fury of whining from yours truly about the issue, calmly pointed me to the View menu (Photoshop CS4). You have to first click “Show All Menu Items” (reason #54 why you should never hire an interface designer with Adobe on their resume). You then are greeted with “Proof Setup” at the very top:
There you have the problem: Photoshop ships with the Proof Setup as “Working CMYK.” Because if you use Photoshop you must be a print designer.
For those of us who aren’t just print designers, simply change it to match your project and machine. In my case, Macintosh RGB, and voila:
Unfortunately, your new view of a current document will now be washed out. But at least it reflects reality! Now you can fix it accurately, and if you save your workspace, your settings should apply for all new projects, ridding you of this problem forever.
Google, you may now point everyone with Photoshop color problems to this article.
Update: See Josh Bryant’s comment below for a more complete set of steps to solve your Photoshop color headaches.
15 comments
I’ve known of the solution for a long time, but I can’t ever get it to stick. I created a saved workspace, which adds an option to the bottom of my Window » Workspace menu, but its sketchy, and only seems to remember sometimes. I don’t see a way to change the default either.
Anyone out there no more than me?
comment by Pete 1 hour later
Nice design! Just one thing: I think the design is too big. I like having lots of left and right margin space on web pages… which is necessary for small screens and for people who don’t like to browse full-screen… just a thought.
comment by Samuel 2 hours later
@Samuel, thanks! The design uses a 960px width, so the site fits into a 1024px browser quite nicely. The background is larger than 960 and is designed to delight on a large display as well.
comment by Jason Lynes 3 hours later
I noticed this annoyance in Photoshop as well but now I see what the problem is! Thanks for this post!
comment by Diane Faye Zerr 7 hours later
I found this link a few months back that takes your fix a few steps further. http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/.
comment by Lehi Sanchez 7 hours later
Another thing to do is to adjust your gamma to 2.2 (which is what it is on any machine that isn’t a Mac). You can do this in DISPLAYS » COLOR » CALIBRATE
Also, be sure that your workspace (in COLOR PREFERENCES) is set to sRGB.
Man, I hate ADOBE.
comment by Silus Grok 9 hours later
Thanks for sharing. This has been bugging me for a while.
comment by Chad 9 hours later
Dave talked about this color shifting madness just a little while ago. Some useful information in the post and in the comments.
comment by Carl Peterson 10 hours later
Good thing Apple’s changing their gamma to 2.2 with Snow Leopard… ;)
comment by Ty Hatch 10 hours later
Hopefully google won’t point everyone here, because there’s quite a bit of missing information from this article on the true problem and true solution :)
The article from Dave Shea along with the comments that Carl linked to above has a bit more info.
You’re dealing with four things:
1. The colour profile of your screen (often calibrated for that particular screen) 2. The colour profile of the document you’re working on in Photoshop (if you created it from scratch it will be whatever profile you have set in Edit > Colour Settings) 3. The colour profile of your image after you export it. Depending on your Save for Web preferences it can either strip out the colour profile, leave it in, or convert it to sRGB 4. Your browser – some support colour profiles and some don’t.
Not to mention #1 is not a constant since typically documents can be passed around to different machines.
It’s less of an issue with the image you referenced above because you can get it pretty close just by working on it, saving it and loading it in your browser. If you’re happy with the result then you should be good to go. The real problems surface when you’re creating a graphic that has to sit next to colour-matched CSS.
So far the best solution the community has come up with so far I believe is:
1. Calibrate your screen or set the colour profile of your screen in System Preferences that appears to be best to you. 2. Set your photoshop colour profile settings to sRGB 3. Set your proof setup to your monitor RGB … so technically the document is still sRGB but Photoshop is going to show you what that looks like on your screen outside of photoshop. 4. In Save for Web leave the “Convert to sRGB” setting off.
comment by Josh Bryant 11 hours later
I’ve always used the method that Josh Bryant described – calibrating the screen, sRGB and proofing in Monitor RGB.
comment by John Dilworth 11 hours later
@Josh, thanks for the in-depth instructions. My problem is, without the Proofing step, calibrating my screen and setting a color profile never solved this problem. This proofing step is a simple step – clearly one of many – to make sure what you see in Photoshop is what’s exported and seen in the browser.
comment by Jason Lynes 11 hours later
My other PS color issue is when a new document is forced to SRGB. Anyone know how to fix it?
comment by Ben Willis 16 hours later
There’s a good article on The Mysterious “Save for Web” Color Shift on Viget, complete with 200 comments of debate to sift through. The article was helpful though.
comment by Mike Metcalf 4 days later
Thanks, this just may fix the color match problems that have so frustrated me!
comment by rachel 181 days later
Comment preview
comment by you less than a minute ago