PNG color shift from Photoshop CS2 ‘Save for Web’ solution

File Info window from Photoshop CS2This issue has plagued me for years. I’m pretty sure the issue came about from messing with color profiles on my Mac. I switch between web and print graphic work a lot, so somewhere along the way I must have checked the wrong box, thus leading to color shifts when saving PNGs using Photoshop CS2′s Save for Web.

The symptom is commonly as follows. Using CSS, you have set an area to have a solid background color, say #333333. Using Photoshop, you’ve created a graphic whose background color is #333333 to match your area’s background. But, when the PNG is rendered in a browser, the backgrounds don’t match. In my case, using Apple’s Digital Color Meter shows that the background color of the PNG is actually #434343 in Firefox.

I finally found an easy fix on the Polar Bear Lamps blog. This amazing post describes in easy detail how to open a PNG after saving, strip it of meta data, and re-save it.  Apparently, the embedded Gamma meta data from Photoshop causes the shift.  Delete that meta data, and the shift disappears.

The post comments also reference tools for drag and drop use. I downloaded GammaSlamma 1.1, and its working nicely.

Thanks so much to Polar Bear Lamps for quelling that buzzing in the back of my mind.

Related Posts Plugin for WordPress, Blogger...

  • Wembaster

    Thank you! I’ve been tearing my hair out for 3 hours now with a png sprite for a Joomla template that kept color shifting when I saved with either IR or PS CS2. Used GraphicConvertor to strip the resource fork and all is well!!!

  • http://daynw.com/ Dayn

    You’re welcome! Wow, this is an old post!nnIt’s worth noting that I no longer have to strip gamma data from my PNGs. I’m not sure when it fixed itself, but I’m on CS5 now and on a different Mac. What are you using?