[jasonsRX7]

I'm hoping someone can help me solve a problem I'm having with Photoshop CS3. When I create an image, and go to Save For Web, the entire image gets much lighter and washed out.

I've done a lot of Googling, but the only consistent answer I've seen involves calibrating the monitor and changing it to 2.2 gamma. I've tried that, but it ends up making everything look way, way too dark on my screen. It really looks terrible, AND it doesn't even solve the problem.

I don't care if it is color managed for print, and I don't care if it looks lighter or darker on different computers or monitors. I just want Photoshop to save the image exactly how it appears when I'm editing it, so that opening the saved file in Preview looks the same as it does in Photoshop. If I do a screenshot of the open document in Photoshop, and open the screenshot in Preview, it looks correct. Is there any way to make this work?

BTW, I'm using a MBP with a 30" Cinema display sometimes, and the integrated 15" screen other times.

[Thorzdad]

Before you "Save for Web", you must convert the image to the sRGB color profile. Image > Mode > Convert to Profile. Select "sRGB IEC61966". Then you can Save for Web.

Have you actually calibrated your monitor? That entails more than merely changing the gamma to 2.2. I'm going to assume you don't have an actual calibration tool. You should get SuperCal and do an actual monitor calibration. It's the best software-only solution out there. SuperCal will write a custom color profile for your monitor which the system will use to display color.

Color management is a tricky, but necessary, thing if you're doing graphics. Photoshop's color preferences are quite detailed and too involved to go into here.

[jasonsRX7]

Hey Thorzdad, thanks for responding. I was initially using the built in calibration tool, but then I tried SuperCal and it did a much better job, although I see more banding than I did before. I thought about getting a Spyder2, but since I didn't have this problem on previous versions of Photoshop, I figured I'd see if there was a way to restore the old behavior before I spent the money. I'm not doing anything but some simple graphics for our intranet anyway, nothing that has to be too precise, but the huge color shift is annoying.

[Thorzdad]

Banding? You will probably need to go into your MBP's System Preferences and adjust the monitor profile when you are running the 30" monitor. You should have separate profiles for both the MBP and the 30", and switch between the profiles depending on which screen you are using.

[jasonsRX7]

I haven't calibrated the Cinema display yet. I was just comparing the MBP's default profile to the profile I created in SuperCal, both on the laptop display. The banding is more noticeable with the SuperCal profile, which I am sure is just because I can't eyeball it good enough, but it did result in the PS document looking much closer to the Save For Web output. Still not exactly the same, though.

[Thorzdad]

Is the MBP displaying in Millions or Thousands of colors?
The 15" screen isn't exactly the best screen for accurate color work. In fact, there is quite a bit of buzz on the street that Apple is actually utilizing 6-bit displays plus dithering to achieve the appearance of "millions" of colors...but not really. Apps like Photoshop, it is said, exposes this limitation in the screens...and it is seen as banding of colors. You can read a bit about a lawsuit over this here.

[jasonsRX7]

It's in millions. I've heard that the MBP screen isn't so great, but the nature of what I'm doing doesn't require terribly accurate color. I would just like what I output to match what I see inside Photoshop on the same screen, even if it looks slightly different on other computers/monitors.

Did something change in CS3 in regards to the way it manages color? I don't remember ever having this problem before. I would like to understand why it is happening, in addition to how to fix it. What reason is there for PS to change the saturation when a Save For Web is done?

Thanks for your help, btw. I'm a network admin, not a designer, so I'm not on top of all this stuff. I just decided to take on the responsibility of making the intranet look better, since no one else seems interested in doing it.

[Thorzdad]

Originally Posted by jasonsRX7 

...Did something change in CS3 in regards to the way it manages color? I don't remember ever having this problem before. I would like to understand why it is happening, in addition to how to fix it. What reason is there for PS to change the saturation when a Save For Web is done?

Since I'm still using CS1, I can't really say what, if anything, changed in CS3's color engine. Have you compared the Photoshop preference settings in CS3 to whatever previous version you were using?

There are so many things that can affect color. What is the color space of the original image you're using? Ideally, it would be an RGB image. If you're starting with a CMYK image and then converting to RGB, you can often see huge color shifts in the image, depending on various factors.

In an ideal, simple world, you would be editing the image in Adobe RGB space, then converting to sRGB once you are done editing, then saving for web.

You might want to rummage around the Adobe User Forums and see if anyone has posted a similar question.

[Oisín]

I’ve had the same thing happen to me in CS2, so it’s not just a CS3 thing; rather, it’s a Save for Web thing.

I had a perfectly regular RGB image [don’t know if it was Adobe RGB or sRGB or someotherRGB, though] with only one colour plus a drop shadow (it was a simple logo). Yet when put next to some text on the website that was the same colour (both were specified as hexadecimals), they were vastly different.

After lots of tinkering and frustration, I saved it the regular way, instead of Saving for Web, and voilà! the image colour was completely identical with the text colour next to it. Try saving with a Save As... instead of Save for Web, and see if that helps.

I assumed it had something to do with Photoshop reducing/simplifying the colour palette when Saving for Web, even though this was a 24-bit PNG image with transparency and all. Then again, I don’t know much

[sarahmacbook7]

I have the same problem. I'm using a MacBook OS X Tiger and CS3.

I read that it had something to do with the applications ability to color manage. Like if I view the image on Firefox, it is washed out, just like how it is after saving in CS3, and yes, it is saved in sRGB. If I view the same image on Safari, which color manages, it is almost like the working file on CS3 but I notice sometimes the contrast is too dark.
Anyway, same thing if I view the images between Xee and Preview. Xee = Firefox, Preview = Safari.

Now, the only trick I know that works is to assign the working image file with the monitor's profile. Choose Edit >> Convert to Profile. Then from the dropdown list, choose the profile you are using for your monitor. I'm not sure if this is good because I read somewhere that it's not advisable to set the image's color profile the same as your monitor's. But for me, I think my monitor looks almost the same as the sRGB files. I'm saying this because I saved the files and viewed them in both Firefox and Safari and since Safari can color manage.. the image I saved using my Monitor's color profile looks close enough.

Samples: (I'm sorry these images don't show dramatic differences in colors)
The first image is via SAVE AS + MONITOR'S COLOR PROFILE. The second one is via SAVE FOR WEB + CONVERT TO sRGB. You will see difference in saturation.



The images, if viewed in Firefox, will look different because Firefox doesn't color manage. The sRGB (second image) looks washed out. If you view using Safari, the second image will appear to be more saturated. I think I got my monitor calibrated close to what sRGB colors look like (or something about colors...). I know it's still a bit off, but I think it's better that it shows with more color when viewed in applications that don't color manage (like Firefox which is widely used).

Now this is a sample of how the images differ when I have it open in Photoshop and after I saved using SAVE FOR WEB, which converts to sRGB. This shows how the image look washed out if viewed in applications like Firefox and Xee.

As you see, the saved file looks a bit paler.

If anyone has any other advise/explanation to correct this color management thing.. I'm ready to listen!!!

[jasonsRX7]

Originally Posted by sarahmacbook7 

If anyone has any other advise/explanation to correct this color management thing.. I'm ready to listen!!!

I'm still struggling with it myself. No matter what I do, I can't get the Save For Web output to match what I see when I'm working in the document itself.

Here's a screenshot of Save For Web opened on top of the working document. The upper image is the document window, the lower image is the Save For Web window. The colors in the lower one are much more washed out. There's got to be a way to make Save For Web output exactly how it appears in the document, but I can't figure out how.

[Thorzdad]

Originally Posted by jasonsRX7 

I'm still struggling with it myself. No matter what I do, I can't get the Save For Web output to match what I see when I'm working in the document itself...

Okay. Let's do this step-by-step and see if we can find the problem. This is my work process for producing rgb images for web use. This is for CS1 under OSX 10.3.9, but the steps/controls should be similar to what you have to work with.

First...Have you calibrated your screen? If not, go get SuperCal immediately and do a thorough calibration. Make sure you do it in as neutral light conditions as possible. Once you have a color profile created, make sure you select it in your Displays control panel:


Now, open your ColorSync utility. This is in the Applications/Utilities folder. I keep mine set in the following way:


Now, set your Photoshop color preferences. This controls your working space. Here is how I have mine set.


This should give you a fairly accurate working space to begin with.
Now, once you're finished with your editing and you want to save the image for web use, you need to first convert it to a proper web color space (Remember, if you set your color prefs the way I illustrated, you've been working in Adobe RGB...a much broader color space than web space.) Select [b]Image > Mode > Convert to Profile...[b] and select sRGB IEC1966-2.1 from the Destination Space > Profile drop-down. Doing so will convert your image to a more compatible web space.

Now, go to the File > Save for Web control. You will see two images. The first is the source image as it appears in Photoshop. The second image is how the image will look after being saved for the web (based on any adjustments you make on the far right) If everything has been set-up properly, you shouldn't see any difference, color-wise, between the two (unless, of course, you mess with the right side controls to really reduce the quality of the image)

This has been my working process for years and can't remember the last time I had serious color issues that wasn't the result of something fixable (like needing to re-calibrate my monitor) Hope this helps.

[jasonsRX7]

My ColorSync Utility looks a bit different and I can't find a default profiles option. So I'm not able to do that step with you.

I just calibrated with SuperCal again. I left the gamma set to 1.8 because when I select anything higher, it gets very dark and looks terrible. I've heard some people suggesting using Windows gamma but I don't see how they could stand to look at the screen like that.

I've set the settings in Photoshop almost exactly how you have them. The one difference is that I had to select "Adobe RGB (1998)" instead of "ColorSync - Adobe RGB (1998)" I'm guessing since my ColorSync util doesn't have the option to select it like yours does.

I still can't get Save For Web or Save As to output a file that matches what I see on screen. It's always more washed out looking. I've tried creating new documents with different color profiles, and changing the color profiles of exist documents. And I've tried it on three separate SuperCal calibrated monitors, a 20" Benq at work, the MBP display, and a 30" Cinema display. They all look the same.

Edit: I just downloaded the Pixelmator demo, and I can create gradients like the one above that look exactly the same in Preview, Safari, and Firefox as they do in Pixelmator. So it's got to be something that Photoshop is doing, and not the monitor.

[godzookie2k]

Double check that you have view > Proof colors checked and view > Monitor RGB selected in photoshop.