calibrate your monitors on each system correctly and that shouldn’t occur.
First thing to check is that you’ve converted your image to sRGB before exporting with Save For Web. (You can do that manually, or just check that "convert to sRGB" is checked in the SFW options menu.) If you still see a colour shift, then read on.
The SFW preview window is NOT colour managed — that is, it will not use info from your monitor profile to compensate for your monitor’s specific colour characteristics. This is good, because most web browsers are not colour managed, so the way your image looks in SFW is the way it will look in a web browser ON YOUR monitor. It will probably look different on other monitors, but that’s beyond your control.
Images should be converted to sRGB before exporting with SFW. If you still see a colour shift in that case, then you are seeing the difference between your monitor profile and the sRGB colour space. Most monitors are pretty close to sRGB, and so you won’t see much of a shift. If you do still see a major shift, either your monitor is not properly calibrated, or it IS properly calibrated but it differs significantly from sRGB.
Hopefully just converting to sRGB solves your problem. If that doesn’t work, it starts to get pretty messy.
good explaination raven plenty!
Dave, Raven,
Thanks so much for your replies. I’m not quite sure I’ve got it figured out completely, but you’ve definitely put me on the right track. I’ve gone in and checked the "Convert to sRGB" setting and it had already been checked. However, when I unchecked it, the color of the image in the preview box shifted back to what it should be (darker) and now looks correct. This happens with my working color space set to either Monitor or sRGB). From your very helpful post, I can see that I have to try and understand the relationship between Photoshop’s color settings and the sRGB settings in the SFW module. While understanding it completely is important to me, at least now I can output the animated gifs properly and finish my project on time.
Thanks again for your quick help – you saved the day!!!
Todd, a question: When you view your GIF in a web browser, does it look the same as it did in SFW, or the same as in the normal Photoshop view?
It appears, in both cases (shifted and non-shifted) the same way it appears in the SFW preview window. In other words, when "Convert to sRGB" is checked, it appears light in the preview window and also in IE. when it’s not checked, it appears correct (same as original) in both the preview window and in IE.
Web work is kinda funky…we have no control over what things will look like on any other monitor, so we have to properly calibrate our own monitors, make it look good in Photoshop, then ignore any changed appearance in SFW or web browsers.
Here’s the thing: proper colour management depends on an accurately calibrated and profiled monitor AND software that can use that profile to display an accurate image. Save For Web does not use colour management, presumedly because most web browsers don’t either. (Safari by the way is colour managed and will recognize ICC profiles embedded in images.) So even if your monitor is properly calibrated and profiled, you STILL might not see an accurate representation of your image in a web browser.
Photoshop is colour managed — if your image uses sRGB colour space, Photoshop knows this and combined with it’s understanding of your monitor’s colour space, it can display an accurate image.
SFW and most browsers are not colour managed — they don’t know what colour space your image is supposed to be using, so they just take the RGB values and throw them up to the monitor with no context to guide them. Furthermore, of course our web images will look different on different peoples monitors.
Assuming your monitor is accurately calibrated and profiled, then the colour managed environment of Photoshop (not including SFW) is the only TRUSTWORTHY view you can use. Make it look good in Photoshop and ignore the rest. One day perhaps the web will be a more colour-managed place.
Whew! Wordy. Hope that all makes sense. It’s taken me a loooong time to wrap my head around some of those concepts.
May I ask what model of monitor you’re using?
Well, your time and advice are GREATLY appreciated. Just knowing about the "Convert to sRGB…" setting in the SFW module menu (and even realizing there was a menu there) is a real help in overcoming the color shifting that was happening.
I’m a web Designer and Animator and have only a passing knowledge of color spaces and color management which I’ve kind of ignored until now, thinking they were only relevent to print. But the settings are clearly effecting my work, whether I ignore them or not, and as with most deep programs like Photoshop there’s always something new to learn.
Thanks again!
I’m using a Dell LCD flatscreen, but I don’t believe it’s the monitor, calibrated or not, because when I am in the SFW module, I always view in 4-up mode, and can clearly see the difference between the original view and each of the three other preview windows. I’m not viewing the original in Photoshop on one monitor and then the resulting gif on another monitor.
Ah ha! I thought so. The only reason I can speak on this topic at all is because of what I was forced to learn when I started using a Dell LCD flatscreen.
As mentioned earlier, most monitors are pretty close to sRGB, which made web work somewhat easier. However, it seems recently some so-called "wide gamut" monitors have come to market, including the recent crop of Dells. The new Dells can produce a gamut that is closer to Adobe RGB than sRGB. This means — speaking loosely — it can produce brighter and more saturated colours than an "sRGB" type monitor.
RGB numbers, in the context of a defined colour space, represent an "actual" real life colour. A very bright red in sRGB colour space may be represented by r255b0g0, but that same "actual" red colour is represented in the wider Adobe RGB colour space by r219b0g0. Adobe RGB, being wider than sRGB, can include still brighter reds than sRGB’s brightest red, hence where sRGB hits a roof at r255, Adobe RGB can keep going higher.
Imagine two ladders, each with ten steps on it. The Adobe RGB ladder is taller than the sRGB ladder, even though they both have ten steps. The 9th step is higher (i.e. brighter) on the Adobe RGB ladder than on the sRGB ladder. So if an image contains the RGB values of r219b0g0, well if you assign it to sRGB, it will not be a very bright red. If you assign it to Adobe RGB, it will be a brighter red, because that "ladder step" (like the 9th step) is higher than the same step in sRGB.
This is why your image appears brighter when viewed in SFW and in web browsers. Photoshop knows it’s supposed to be using sRGB colour space, but SFW and web browsers DOESN’T, and so it just assigns your monitor colour space, which with these Dell monitors is wider than sRGB.
I think the Dell monitor is fine…I still highly recommend purchasing some type of hardware calibration utitily (one that has a thingy that attaches to the screen to measure the light being emitted). Properly calibrate and profile your monitor, trust what you see in Photoshop, convert to sRGB for web images, and forget the rest. Either way, your images will look "good" on some people’s monitors and "bad" on others.
I think the Dell monitor is fine…I still highly recommend purchasing some type of hardware calibration utitily … Properly calibrate and profile your monitor, trust what you see in Photoshop, convert to sRGB for web images, and forget the rest.
yes. 🙂
(nobody reads post #1! 😉 )
