Photoshop "Save For Web" Color Shift problem


I'm a starter practicing front end web design. I'm having hard time finding solution with the Photoshop "Save for Web" function improperly displaying color. The colors of the Save For Web window do not match my Photoshop document.

I've already followed the recommendations of Doug Avery in this link which corrects the monitor view and sRGB thing in PS but the output in the browser doesn't change.

The image I cropped has a white-colored layer as background in the wrapper, another layer for the brown gradient in the upper and lower edge, a brownish layer for wood color, and another layer for its woody texture.

I made the image output in jpg run in my browser but has same incorrect color result. I used Chrome and Firefox and both browsers are displaying the same desaturated color.

Here are my questions:

  1. Is there something wrong with what I've created in Photoshop?
  2. Are there any other tools I can use for more accurate output of elements when migrating from a psd to an html file?


12/11/2012 1:11:00 PM

There have been some rather long comments/discussions here regarding color shifting in Save for Web.

I happen to think at NO TIME should Photoshop's color settings be set to your Monitor RGB. It's simply as wrong as wrong can get. Primarily because you are the only person who will ever see your monitor. So creating artwork in a closed, canned color space is just haphazard. Doug Avery and his link are grossly incorrect in my opinion.

Set the RGB profile to sRGB and tick the "Convert to sRGB" option in Save for Web if you want accurate colors across devices and browsers. This has worked for me for years and years, but I know there are a couple others here which disagree.

12/10/2012 6:35:00 AM