Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Photoshop Color Management Confusion!!

ppc_michael

ppc_michael

Guest
Original poster
Apr 26, 2005
1,498
2
Los Angeles, CA
Yarrrgh!

I am having a horrible time figuring out how to make exported Photoshop colors look the same as they do within Photoshop.

Example that set me off!: I'm doing a website, and so I used Save For Web to export some graphics to JPEG. These graphics had transparencies, so I matted it to the website's background color, #1a1a1a. But then when I actually put the graphic on the website, the background in the image is brighter than the site's background. It's no longer #1a1a1a!!

I've tried Convert To Profile, Assign to Profile, Cmd+Y, all this silliness. I just want the colors to NOT CHANGE.

How do I do this? It's killing me, and has been for quite some time.

I'm running CS3 now, but I've been having this problem since CS1.
 
Should you keep them on the web safe palette? Is there an option to keep web safe during export?
 
irishgrizzly said:
Should you keep them on the web safe palette? Is there an option to keep web safe during export?
Click to expand...

Yes there is the option, it doesn't really do anything for me. Besides, this happens with everything, not just the Save For Web feature. There's like a gamma shift and color shift in everything that comes out of Photoshop.
 
How do you calibrate your monitor? You may be asking your monitor to show you your images one way and then asking photoshop to show them another. I wouldn't get too bogged down in this color shift, the important thing is what comes out at the printers.
 
Make sure your editing in sRGB color space, if you are in adobeRGB then it will have brighter more saturated colors in photoshop and then display them differently in your browser. Also might want to check embed color profile when saving as web to ensure sRGB is the color profile.
 
irishgrizzly said:
How do you calibrate your monitor? You may be asking your monitor to show you your images one way and then asking photoshop to show them another. I wouldn't get too bogged down in this color shift, the important thing is what comes out at the printers.
Click to expand...

He's doing a website, printing is the least of his concerns man.....

Test the site on different browsers, it might be a browser issue here......not sure what else to suggest other then that. I've experienced the same problem before and the only way that I solved it is to designate the transparent image as a PNG format, works well with transperencies.

Try that, png-24. When saving for web in photoshop, make sure that you check the transparency box.

The file size will increase but it will presrve your transparency.
 
adamzx3 said:
Make sure your editing in sRGB color space, if you are in adobeRGB then it will have brighter more saturated colors in photoshop and then display them differently in your browser. Also might want to check embed color profile when saving as web to ensure sRGB is the color profile.
Click to expand...

For my "Working RGB" I am using sRGB. My monitor is an Apple Cinema Display HD, and is using the appropriate monitor calibration, so when I create new Photoshop documents, I set the document's color profile to Cinema HD as well. Is this correct? I am confused between Working Color Profiles and Document Color Profiles.

switters00 said:
Try that, png-24. When saving for web in photoshop, make sure that you check the transparency box.
Click to expand...

Thanks for responding. I've tried it in WebKit, Mozilla, Konqueror and Internet Explorer 6 & 7. All of these show the annoying color shift I'm having trouble with.

I was indeed using PNGs just as I was programming the site, but most of our viewers still use IE6, which has no PNG transparency support, so I kinda need to support them. I know there's the PNG hack, but some of these images are background images from the CSS files, so the hack wouldn't work either.

I don't get it. If MSPaint can do it, why doesn't Photoshop?
 
For my "Working RGB" I am using sRGB. My monitor is an Apple Cinema Display HD, and is using the appropriate monitor calibration, so when I create new Photoshop documents, I set the document's color profile to Cinema HD as well. Is this correct? I am confused between Working Color Profiles and Document Color Profiles.
Click to expand...

When you set your documents profile it needs to be in an editing colorspace such as sRGB or adobeRGB, colormatch,etc... by setting your documents colorspace to the Cinema HD colorspace you are not including parts of the color spectrum or "gamut". Always set your documents colorspace to an editing RGB space, and use your cinema HD profile for your monitor in os x preferances.

Try this,
Set working space to sRGB if it isn't already "Edit>Color Settings" and then create a new RGB document, fill with your color, save as web and then open in your browser.

Also maybe you can post a screen shot of the problem that could help as well.
 
Hello Everyone

Apologies for digging up and old thread here but I have the same problem and came across this on a search.

Having read the thread, in my opinion, I am not sure Michael's question was answered completely.

My problem is very similar:

When I save an image out of photoshop and save it for web the resulting image looks lighter in preview than the PS file does. This is due to the fact that they are being viewed in different colour profiles. My PS workspace is set to sRGB and my monitor is running the apple cinema display profile which is what adamzx3 proposed as the right way to do it. This is what I have always believed to be the correct way to do it as well but it is these settings that cause the problem.

When I view the image in PS I am seeing it in sRGB space
When I view the image in preview I am seeing it in ACD space
SRG is a "darker" space than "ACD" so images look darker in PS.

For example: I created a doc in PS and filled it with R35 G35 B35. Confirm PS eyedropper info says colour is R35 G35 B35. Now open Apple Digital Colour Meter (applications>utilities) - on mine it says colour is actually R27 G27 B27. When I save this image for web as a jpeg and open the jpg in preview and put it next to the PS version, the preview jpg looks a lot lighter. However DCM says it is 35 35 35 which is correct.

• If I make my PS working profile the same as my monitor profile (ACD) the PS version lightens so that it looks the same as the preview jpg
• If I make my monitor profile sRGB then the preview jpg and the rest of the screen darken to match the PS version which stays the same

Doing either of these solves the problem of exported graphics appearing lighter than they look in PS. However, I am not sure either is the right solution. What I do know is that if I use sRGB for PS working space and ACD for my monitor then what I see in PS and what gets exported are different which is not a good way to work. The only way to get consistency is to use the same profile for both.

Sorry for the essay - can anyone shed light on this? thanks.
 
Yes, spiritlevel, you have described my situation as well. I'd really appreciate some advice on this.
 
OK... Here is how to do what you want to do. Keep in mind that the produced documents will not have a color profile, and can (an probably will) look a bit different on different machines/displays. But at least you will be able to have your exported picture look the same as the picture in the Photoshop window! :)

1) In Photoshop, go to Edit > Color Settings...
2) In the Settings drop down menu choose Color Management OFF
3) After Profile Mismatches, deselect the checkbox next to Ask When Opening

OK... Now that all that is done...

4) Go to File > Save for Web & Devices...
5) This is the confusing part... To the right of the Presets drop down menu (where you would choose JPEG High, Gif 128 Dithered, etc.) there is a little round button with a triangle in it. This is the Optimize Menu. Click on it and deselect Convert to sRGB.
6) That's it

Remember that although things should look consistent on your computer/display, it probably won't be consistent on other machines. Of course most consumer machines/displays are probably not calibrated correctly anyway... so I don't think this should be a problem.

Sorry to the pros out there that this will bother, but it seems to be what people are asking for.
 
I have had a similar problem before, and actually something that is bizarre and possibly along the same lines happen to me just the other day! I had a website comp with a white bar across the top. For some reason, i could vaguely make out that part of it was appearing grey, part of it white like it should be (this problem also helped me find the OSX contrast settings stupidly located within Universal Access!).

Anyway, i'm not retarded and there was NO way that there were any grey objects/layers in that top area, yet sure enough if i color picked around that area, the grey came back as a value #f1f1f1!

Anyway i noted my settings from my PC at work and checked PS on MaC - both using sRGB IEC61966-2.1.
In System Preferences > Display > Color i just set it to the same; things got a bit darker all over (and now i can't tell it was ever any different), and my photoshop document accurately chooses #ffffff when i sample the top area.
 
sseaton said:
OK... Here is how to do what you want to do....
In the Settings drop down menu choose Color Management OFF
Click to expand...

Or you can save the image with the option to include "ICC Profile" deselected (as should be the case for Web work).... I assume we are talking about JPEG here.
 
spiritlevel said:
Hello Everyone
When I save an image out of photoshop and save it for web the resulting image looks lighter in preview than the PS file does. This is due to the fact that they are being viewed in different colour profiles. My PS workspace is set to sRGB and my monitor is running the apple cinema display profile which is what adamzx3 proposed as the right way to do it. This is what I have always believed to be the correct way to do it as well but it is these settings that cause the problem.

When I view the image in PS I am seeing it in sRGB space
When I view the image in preview I am seeing it in ACD space
SRG is a "darker" space than "ACD" so images look darker in PS.

For example: I created a doc in PS and filled it with R35 G35 B35. Confirm PS eyedropper info says colour is R35 G35 B35. Now open Apple Digital Colour Meter (applications>utilities) - on mine it says colour is actually R27 G27 B27. When I save this image for web as a jpeg and open the jpg in preview and put it next to the PS version, the preview jpg looks a lot lighter. However DCM says it is 35 35 35 which is correct.

• If I make my PS working profile the same as my monitor profile (ACD) the PS version lightens so that it looks the same as the preview jpg
• If I make my monitor profile sRGB then the preview jpg and the rest of the screen darken to match the PS version which stays the same

Doing either of these solves the problem of exported graphics appearing lighter than they look in PS. However, I am not sure either is the right solution. What I do know is that if I use sRGB for PS working space and ACD for my monitor then what I see in PS and what gets exported are different which is not a good way to work. The only way to get consistency is to use the same profile for both.

Sorry for the essay - can anyone shed light on this? thanks.
Click to expand...

Generally speaking, you should not set your monitor profile to sRGB.
Your monitor profile should accurately describe the properties of your
monitor, and sRGB won't do that.

Here's why the image looks lighter for you. When you edit the image
in PS it is color managed. It has a profile attached and this profile is
respected when the image is shown on your display. When you save
for web, the profile is discarded. Preview doesn't know what profile
the image originally had, so it guesses and the guess is wrong :)

You can re-attach a profile to an image with Colorsync. Choose
assign profile and sRGB IEC61966-2.1 (on the assumption the image
was in sRGB space when it was saved).

If you are saving for web there's an "ICC Profile" option for jpgs.
If you select that, the sRGB profile will be embedded in the file
and the image will look the same, or very similar, in PS and
Preview. That will increase the file size though.

I hope that helps. Feel free to ask further questions.
 
I'm having a similar issue.

Here are my settings (I'm using CS3 on a MacBook Pro):

OS-X Monitor Profile: Color LCD (MacBook Pro default, but I've calibrated it)
Photoshop Working Space: sRGB IEC61966-2.1

Here's my problem:

1. I edit a photo or design a graphic, getting the colours how I like it.
2. I save the image as a jpg using Save For Web (the ICC Profile box is checked)
3. I open the jpg in Preview and/or Safari and it looks as expected
4. I open the jpg in Firefox and it the colours are much less saturated.

Some people have suggested that I do away with colour management completely, so I did this:

1. Changed my Photoshop Working Space to Color LCD
2. Saved For Web (with the ICC Profile box unchecked)
3. Opened the jpg in Firefox and, again, the colour looks washed-out.

There must be a solution! Any suggestions?
 
Colour management

Okay I may be going over old ground here but this is my setup and I don't have these problems:
Forget about your monitor profile - this is irrelevant in this situation.
Photoshop (and preferably Creative Suite in it's entirety) should be set to use sRGB as its working RGB profile - or turn off colour management completely.
You open a new empty document, making sure that its profile is set to sRGB - or has no profile.
You create your graphic, choosing hex values accordingly.
You use Save for Web and at this point you DON'T want to include the profile. Why? Because you have defined colours according to hex values. You want these hex values to remain constant. You don't want the values to be interpreted by any devices down the line (apart from the individual's monitor profile, which you don't have any control of).
You add Matte value to match the background of the space you are placing the graphic in - hex values again - let's say it's a table cell or div with a fill of #CCCCCC. You set your Matte to #CCCCCC.
Save and you are done.
The only issues come if:
A. You created the graphic in a different colour space to start with.
B. You created the graphic in a different colour space then 'converted to' sRGB (and thereby changing the values to compensate) instead of 'assign' sRGB.
C. You created the background image or other components of the web page in a different colour space.
Hope this helps:)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back