PDA

View Full Version : Photoshop Working Colour Space



konni
19th May 2005, 11:11 AM
Is there something really different about the way Photoshop displays colour since CS or is it the G5 monitor?

I swear, on my G4 with CRT monitor when I saved an image to web, the colour change was not as grotesque. I still got a good sense that the colours I was choosing were going to convey the same feeling on a web page. But I can't say the same now since using the iMac G5 or Photoshop CS. It's all over the place and I'm not happy with what I'm seeing. :(
I'm not sure which is the culprit.

My settings for Pshop working color space = Web Graphics Defaults / sRGB IEC etc.
CM Policy = RGB Off
Conversion options Engine: Adobe ACE / Intent: Relative Colorimetric
using Black Point Comp. and dither 8-Bit.

Why doesn't Photoshop's RGB websafe colours look the same on screen as the result in Dreamweaver or brower? Is there something I can do about this?

I hope someone can help me.

marc
19th May 2005, 11:21 AM
I've turned colour management off.

I much prefer things that way, and you'll NEVER have problems like this again.

marc
19th May 2005, 11:23 AM
PS: When retouching I look at the numbers a lot...

konni
19th May 2005, 12:24 PM
thanks Marc, but I don't think that's the problem. All CM is off.

I've just been working on a piece that coincidentally has similar tones to your avatar. When I save for web, what I see in the Photoshop dialog box and Dreamweaver are very different set of colours to the actual Photoshop creative/editing view. Instead of purplish-blue tones I get greenish-blue tones.

The thing is that Save-To-Web view is accurate in terms of what I'm going to see on the web. I just don't get why the creative view in Photoshop is so up the creek - that's where I'm creating. Interesting however, is that if I compare the CMYK values of this RGB file to my CMYK swatch book the creative view is a close match.

I just did a test with Fireworks. The greener one is the Photoshop result. The blue one is the file opened in Fireworks, colour adjusted - so you can see why I'm whinging. Maybe I should just give up using Photoshop for the web.
http://www.artandtext.com.au/elearning/how_to/diResource/images/bitsyTestA.jpg
http://www.artandtext.com.au/elearning/how_to/diResource/images/bitsyTestB.jpg

*edit note: fixed changed URL

Kate Clarke
2nd June 2005, 11:24 PM
Hello Konni
Just passing by and saw your post. Hope I dont confuse you. This is a big topic for just one email to cover.

Turning off colour management in PS doesn't actually turn off colour management of that pic/file. It just transfers it to the operating system, which removes your ability to control it. It simply gets rid of that dialogue box that appears when you bring a photo into PS. That will be whatever you set in Coloursync or if you didn't touch that , to the default profile. If thats the generic rgb and you have turned off CM in PSCS you are actually clipping the tones of the pics you show as examples.

When you are editing in PS , sRGB is not the best space to be working in really. Nor is cmyk. They are specific display / printing gamuts, not working spaces. At the least you should do your editing in AdobeRGB 1998 on an rgb file. Conversion to CMYK or sRGB should be the last step. Avoid like the plague jumping from cmyk to rgb.

" My settings for Pshop working color space = Web Graphics Defaults / sRGB IEC etc.
CM Policy = RGB Off
Conversion options Engine: Adobe ACE / Intent: Relative Colorimetric
using Black Point Comp. and dither 8-Bit. "

Try this -
Set your monitor profile to Adobe rgb 1998 if you can. I dont know what choices you have for your monitor. Best of course would be a custom calibration of your monitor. If you do the visual one through system preferences for your display make sure you change the gamma from Macs 1.8 to the PC's standard 2.2. Even better is an eyeone custom calibration.

Set PS working space = AdobeRGB 1998 and turn CM on to preserve embedded profiles and ask when opening everything.
Personally I'd set the rendering intent here to perceptual.

Do your editing in that space but look at what you are doing in the space you are preparing the file for by going to view - proof set up - custom. In the dialogue box that appears the profile drop down box lists your colour spaces . Set the appropriate profile.
Rendering intent can vary but you have a preview buttin here so pick the best between relative and perceptual. Perceptual in my experience is generally the better choice. The Use Black Point Compensation should be ticked. OK.

Now , even though you are editing in a larger space you are seeing the effect as it will appear in your destination space.

You'll see up the top of the window where your file name is eg. Pic 1@ 50% (RGB/8*) now would read Pic 1@50% (RGB/8/sRGB), which is telling you that you are working on an 8bit RGB file in a soft proof view of sRGB.

When you have it as you want for the web got to Image - Mode - convert to profile. A similar dialogue box will appear as the soft proof one before and go OK.

Hope this helps more than confuses.

Kate Clarke

marc
3rd June 2005, 12:28 AM
My experience of all adobe colour management has been that it's a total abortion. Just let me calibrate my screen, and keep the numbers the way I want them is my theory. I'd say the only reason they have it is because Adobe write apps for cross platform support.

marc
3rd June 2005, 12:39 AM
Actually, when you think about it, colour management only exists because of the CMYK process. It's there to match scanner>display>proof>final print. Having any kind of colour management for RGB is bordering on insane.

Disko
3rd June 2005, 12:41 AM
Kate Clarke - i'm not sure, but I think that might have possibly been the greatest first post any user has made on this forum. :)

I've been having this same problem, and I intend to give that a shot at work tomorrow.

neilrobinson
3rd June 2005, 01:13 AM
that was one of the best posts... ever. I am looking forward to some future posts by Kate :)

I learnt a lot out of this one (i am a digital printer, so it relates nicely). Maybe it could be converted into a short tutorial.

neil

marc
3rd June 2005, 10:26 AM
Kate, thanks for the informative post :) I've spent a lot of time retouching "creative" images, but haven't spent too long at the film house side so that's handy info.

However, I still think that for web work turning color management off and either choosing "Discard profile" when the image opens, or Image>Mode>Assign Profile>Don't Color Manage This Document would be a better option. That should force PS to display RGB as exact monitor RGB (ie. identical to Safari).

Please correct me if I'm wrong.

konni
3rd June 2005, 08:54 PM
Kate,
thanks. I realise that my post was very badly worded. So I will try to clarify the steps I've taken following your instructions.

I chose to use calibrate my own profile and then set PS working space to Adobe RGB 98 with settings as you've suggested. Then reopened the file in question, discarding the embedded profile. I also started a new test canvas and copied the colour (#3366CC) and even dragged one of the textured layers from original file for comparison. So far I note that there has been a minor shift in colour but not sure whether it's the calibration or settings.

I then followed the 'proof set up - custom' (haven't done that before!) and tried a few different settings ending finally with sRGB. If anything the blue has become more saturated. I then compared this to the test PNG file.

Oh yes. I'm very confused. The PNG gives an exact match of the image colours when saved as JPG and viewed in a browser - has that slightly green tinge. The "convert to profile" sample (converted to sRGB but not exactly sure that is what you were suggesting) is slightly brighter with tint of purple.

When I then 'save for web' the image preview showing in the Image Ready dialog box is slightly greener again.

This is fascinating me. I would like to know why Fireworks is displaying the image as it would be seen on a browser and Photoshop doesn't seem able to do that until I move into the 'save for web' dialog box preview?

Disko - is your problem the color shift as well?

marc
3rd June 2005, 10:38 PM
konni, have you tried my suggestion?

El Guardo
4th June 2005, 12:00 AM
konni - hopefully Kate's post has provided the solution you require - but I did notice a similar problem currently exists with iPhoto. It appears to relate to the OS's use of colour profiles and there are a couple of threads tracking both complaints and responses which I've posted links to below (following the most pertinent quote to date on the issue):


It appears to be a colorsync problem.
It appears that when you edit, iPhoto converts the image to the display profile for editing, then (back) to Generic RGB for saving. The BUG seems to be that the last step isn't actually a conversion, but just a tagging of the display profile color data with the Generic RGB profile. (I'd also consider using the display profile as a working space a bug, but that is a design decision of the iPhoto developers.)
Evidence: The closer your display profile is to Generic RGB, the less color shift there is. Pick sRGB and you will mainly see a tonal shift as sRGB is very similar to Generic RGB except for being 2.2 versus 1.8 gamma. Pick a wide-gamut profile and you will see a desaturation at each edit. Pick a whacky profile--LCD profiles, laptops in particular, fit this category--and you get whacky color shifts.
Evidence: You can get the same color shift in Photoshop by CONVERTING an image to your display profile, then ! ASSIGNING the Generic RGB profile. Repeat and watch the colors shift just as they do in iPhoto with repeated editing.
Mystery: Even with the display profile set to Generic RGB, I still notice a very slight tonal shift with each edit.


MacInTouch Thread:
http://www.macintouch.com/iphoto13.html#jun03
Apple Discussion Thread:
http://discussions.info.apple.com/webx?128...14U.0@.68aebc62 (http://discussions.info.apple.com/webx?128@231.8mK3aKPA14U.0@.68aebc62)

AusMac
4th June 2005, 12:39 AM
Thanks Kate

marc
4th June 2005, 11:17 AM
Hahahah. You guys can totally ignore me if you like, but I have it sussed at this end.

konni
4th June 2005, 11:41 AM
Hahahah. You guys can totally ignore me if you like, but I have it sussed at this end.
:lol: Not totally ignoring you. Yes, I tried out your suggestion too - but nothing changed. I've just spent the morning writing up a detailed webpage (http://www.artandtext.com.au/elearning/how_to/imResource/colorshift.html) to document what I'm discovering. If you can show me how your solution works - then I'll be able to complete the page with your solution - that'd be great.

ps. for anyone who wonders whether worrying about a slight shift in colour is totaly anal, I wonder if anyone else is as sensitive to colour as I am? I liken it to playing music. When I play bass guitar through a crappy amp it affects how I play, when I hear a rich, deep and full tonal sound coming back at me everything about the way I play feels right. I think the same goes for designing with colour.

*edit notes: fixed broken URL

billybob
6th June 2005, 11:03 AM
NEVER set your monitor profile to a working space profile like sRGB. Doing this shows a fundamental misunderstanding of colour management and how to use it.

billybob
6th June 2005, 12:26 PM
Kate,

setting your display profile to a working space profile is a sure way of screwing up a colour managed workflow. Profiles are used to describe the amount of colours each device is capable of working with and a working space profile is exactly what it sounds like - a set of parameters you use when working on (editing) your images. They are completely different to and have a wholy different function to Display profiles.

Marc,

Colour Management exists for a reason, and when used properly it works extremely well. yes, it is complex and difficult to get your head around but giving the advice to turn it off to someone who is trying get it working properly and understand what is going on is pretty flip and irresponsible. Read on below for why I found this, and your other comments bewildering.

Lets take this example of a fully colour managed workflow.

Joe Citizen sits down at his scanner and makes a scan. As do all imaging devices, the scanner has a gamut and that gamut has been defined when he previously calibrated the scanner. Joe utilises and embeds the scanner profile into his file. Joe is now ready to do some editing in Photoshop. Previously Joe has defined his preferred working space in Photoshop as AdobeRGB. When Photoshop opens the file it recognises the embedded profile and uses it as the basis to convert the document’s data to the working space. So far, using a well managed colour workflow, Joe has moved his data from the profiled scanner space to his preferred working space. He has done this accurately and effortlessly.

Once the image file has been converted to the chosen working space it needs to be displayed on the monitor. Joe’s monitor is another device with it’s own gamut and Joe, being concerned with getting accurate colour, regularly calibrates his monitor. Photoshop passes the image data through the monitor profile in order to accurately map the data to the monitor’s gamut. If Joe doesn't use a good monitor profile, has not set his monitor profile at all or has mistakingly set the wrong profile for his display what he is seeing on screen will not be an accurate representation of the data in his image! Consequently all the changes and corrections he makes will be based on bad information. The end result could end up looking like anything.

As a side note, users should be aware that this conversion to your monitor space makes no permanent changes to the data in your image file. The conversion is made on the fly only in order to display it accurately on screen.

After making his desired changes Joe can safely archive his image or print it. As a printer is yet another device it also has it’s own gamut and must therefore have a well-made and accurate profile in order for Joe to obtain accurate and optimal results.

In terms of Photoshop these are the settings you should be using for a properly set up colour managed workflow - (These are based on PS7 but should be similar for CS and CS2)

In colour settings put your settings on Custom and put a tick in the advanced mode box.

Under working spaces select your preferred working space. In most instances Adobe RGB will be the preferred choice. There are larger colour spaces available but it's not always wise to use them whith web based output.

Unless you are specifically working in CMYK or gray then you can ignore these settings. Konni isn't.

Under Color Management policies the traditional settings are to have "Preserve embedded profiles" selected for all. All the checkboxes below should be ticked. Hover over the setting so see an expanation in the description box.

In conversion options the engine should be "Adobe (ACE)" This is generally considered the best conversion engine. I have the Intent set for Relative Colormetric. This choice is normally driven by the type of image you are working on and, to a small degree, personal preference.

Black point compensation should be ticked. It doesn't really matter if use dither is or not.

The two choices under advanced Controls should be unticked.

For me, when working on something in Adobe RGB I find it's best to convert to sRGB just before using "Save for Web". To do this go to Image>Mode>Convert to Profile...
Select sRGB as your destination space. Then Save for Web. (Make sure that the icc profile box in the Save for Web window is ticked, this will make sure that the sRGB profile is embedded into your image so that other profile savvy apps can use it.)

The importance of having an accurate display profile (ergo a properly calibrated monitor) should also be apparant from the example given above.

marc
6th June 2005, 01:59 PM
billybob, while I totally agree for CMYK and other colour sensitive work that moves between colour spaces (RGB scanning from transparency, CMYK file and editing, CMYK proofing on paper, then CMYK offset printing), I think colour management is overrated for web design work.

Think about the process.

You're working on the computer screen, for something that's being displayed on the computer screen. Sure, everyone's screen will look different, but you can't account for that, and you really don't have to. If they have their display profile set differently, then that's the way they want things to look. The workflow is infinitely simpler than print workflow.

The requirements for web work: All colours must look the same in Photoshop as they do in Safari
All eyedropper values in photoshop must match the same colour values as the actual images appear in Safari (as they may be used in code that must match the images)
Even if scans are going to be used, they should be corrected so that they look good on screen, not so they output well (the opposite of print work)
For me, the simplest option seems to be to ask Photoshop to strip any profiles, and not do any on screen correction. Plus, you'd want to leave you're system display profile as the same as everyone else (Probably "Apple Studio Display" if you have an Apple monitor). Then, the only thing you'll have to deal with is that things will look different on a PC, but what can you do.

I really don't see the need to overcomplicate the process. Colour management was never designed to be used for web work.

billybob
6th June 2005, 02:59 PM
Originally posted by marc@Jun 6 2005, 01:59 PM
billybob, while I totally agree for CMYK and other colour sensitive work that moves between colour spaces (RGB scanning from transparency, CMYK file and editing, CMYK proofing on paper, then CMYK offset printing), I think colour management is overrated for web design work.

Think about the process.

You're working on the computer screen, for something that's being displayed on the computer screen. Sure, everyone's screen will look different, but you can't account for that, and you really don't have to. If they have their display profile set differently, then that's the way they want things to look. The workflow is infinitely simpler than print workflow.

The requirements for web work:
All colours must look the same in Photoshop as they do in Safari

All image output must match the same colour values as the eyedropper in Photoshop as how the actual web values will display in Safari (as they may be used in code that must match the images)

Even if scans are going to be used, they should be corrected so that they look good on screen, not so they output well (the opposite of print work)


For me, the simplest option seems to be to ask Photoshop to strip any profiles, and not do any on screen correction. Plus, you'd want to leave you're system display profile as the same as everyone else (Probably "Apple Studio Display" if you have an Apple monitor). Then, the only thing you'll have to deal with is that things will look different on a PC, but what can you do.

I really don't see the need to overcomplicate the process. Colour management was never designed to be used for web work.
I dont know how much real world color critical work you do (I'd suggest none if they are the methods you use) but color management and profiles is a way of moving your images from one device to another and knowing that they will display the same.

Every device has different characteristics, so the only way to confidently move your image from one to the other is with profiles. This applies to moving an image from a camera or a scanner to a computer, displaying it

I've done this experiment so I may phrase things with a little bias but think about the question.

Take two high end displays, the same make and model. Both brand new, unopened and straight from the shop. If you plug one into a computer do you think it will display colour the same as the other? The answer is no, they will be far from the same, even being from the same manufacturer and being the same model. They are different physical devices, they have different characteristics.

Question 2 is Do you think they are capable of displaying the same thing? Definately. Profile them them individually, set up your computer to use that profile with that display and you can be confident that what you see on screen is an accurate representation of the data in your file. (Based on what your monitor is capable of displaying)

With that much variation in monitors of the same make and model you can be dead set certain that there is even more variation among different manufacturers. Also add in again the natural drift that is inherent in all these devices. Then there are the variations in video cards, sytems themselves etc and you have an almost infinate number of variables.

So to bring this post back to being close to on topic, how do you make sure that the thing you have designed on your screen is what John Public sees when they open it? What if you take a shot on your digital camera that has some nice detail in the dark shadow area's? This detail is critical to your picture. How can you be sure that everyone will be able to see that detail? Or that vivid red in the shot, are people seeing that red or an innefectual pinky magenta? How do you know?

You don't, but by following good colour management practises you can dam well be sure that the other guy who has things set properly will definately be seeing what you are seeing. By not following good colour management practises you are basically garanteeing that everyone will see something different. Kind of silly for a visual medium dont you think?


Originally posted by marc+Jun 6 2005, 01:59 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (marc &#064; Jun 6 2005, 01:59 PM)</td></tr><tr><td id='QUOTE'>Think about the process.[/b]
I do, every hour of every day. I run a digital bureau and make my living with the stuff. That&#39;s why I harp on about how important it is.

<!--QuoteBegin-marc@Jun 6 2005, 01:59 PM
Sure, everyone&#39;s screen will look different, but you can&#39;t account for that, and you really don&#39;t have to.[/quote]
You can and you should. if you are serious about what you produce you want to give it every chance of being displayed the way you want it to rather than just throwing your hands in the air and deciding it&#39;s all just to hard to deal with. Doing what you can means using good colour management so at least some people experience what you want them to experience.

If I put something together here on my machine I know that on the other side of the room my business partner will see the exact same thing on his machine because we both calibrate all our devices regualry and use color management correctly. No I cant do anything about the people who dont but I can ensure that the people who do all have the same experience. That gives you peace of mind.

marc
6th June 2005, 04:08 PM
I dont know how much real world color critical work you do (I&#39;d suggest none if they are the methods you use) but color management and profiles is a way of moving your images from one device to another and knowing that they will display the same.
I&#39;ve been retouching for over 10 years, been interviewed in magazines and on TV and been involved in many print campaigns with heavy retouching that have won awards all over the globe. Some of this work has been very colour critical (food & automotive etc). I certainly do not disable profiles or Photoshop&#39;s colour management when retouching for print.

I accept that most of the work I&#39;ve done hasn&#39;t been in an environment where consistent colour management is as crucial as it sometimes can be (ie. for catalogue work where a strict workflow must be adhered to).

In reading your posts I definitely respect your view on colour management, and I think you have a far deeper understanding of it than I do. But trust me, I&#39;m not just some chump who&#39;s decided to turn all management off and delete profiles at random. I understand the need for them, and I respect what they&#39;re there for.

However... we&#39;re talking about web design, and it carries very different requirements to print work. Every single post you&#39;ve made has been generic colour management info, not specific to web design.

As far as I know, there&#39;s no way to embed a colour profile with either a web site, or the images used for that web site (I&#39;m talking GIF, PNG and Flash documents). Plus, if it is possible, I&#39;ve never seen a site utilize it. If no profile can be embedded, then you can forget about all the calibration/profile building you&#39;ve done.

Please take a look at the essential requirements: All colours must look the same in Photoshop as they do in Safari
All eyedropper values in photoshop must match the same colour values as the actual images appear in Safari (as they may be used in code that must match the images)
Can you honestly look me straight in the eye and say that your technique will be able to easily meet all these requirements? The fact that Safari has different colour management (ie. only uses the system&#39;s display profile) to Photoshop instantly dismisses your method.

The most important thing here is consistent colour on the web designers computer, and not consistent colour across all computers as profiles are not embedded in web pages.

It&#39;s all about the colour numbers remaining unchanged, and profiles disrupt this in a massive way.

964RSCS
6th June 2005, 04:41 PM
billybob, I have followed your advice and settings in p&#39;shop cs, and when I import the images from my camera (Canon 20D) it gives me the option to convert document colours to match workspace, which is what I do...

I&#39;m wondering though what does Colour Temp refer to on my camera? Any suggestions to what this should be set to, and how does it effect the image? I now have the camera set to Adobe RGB, as opposed to previous setting of sRGB.

The custom White Balance setting is also one I&#39;m not sure on how it should be set... Is this purely an exposure issue with the photo, or does it also relate to colour space?

Any help greatly appreciated, from anyone :)

Cheers

964RSCS
6th June 2005, 04:51 PM
Perhaps it should also be mentioned that you can save various colour space settings in photoshop, and reload them when required. So you could have a setup for print, and a different one for web for example...

marc
6th June 2005, 07:41 PM
Originally posted by 964RSCS@Jun 6 2005, 04:51 PM
Perhaps it should also be mentioned that you can save various colour space settings in photoshop, and reload them when required. So you could have a setup for print, and a different one for web for example...
Definitely. I will say it again... My advise is only for working with RGB images for web development.

Some info on colour temperature. (http://www.mediacollege.com/lighting/colour/colour-temperature.html) Colour temp settings are used to match the current lighting conditions to the film/filter (that includes digital filters, like inside your camera) so that you end up with natural, neutral shots. In simpler terms, it changes whether you&#39;ll end up with warm, cold, or neutral looking photos.

marc
7th June 2005, 06:35 PM
I am doing a whole load of tests now and will post the results when I get time.

PhilA
7th June 2005, 07:09 PM
Originally posted by 964RSCS@Jun 6 2005, 04:41 PM
billybob, I have followed your advice and settings in p&#39;shop cs, and when I import the images from my camera (Canon 20D) it gives me the option to convert document colours to match workspace, which is what I do...

I&#39;m wondering though what does Colour Temp refer to on my camera? Any suggestions to what this should be set to, and how does it effect the image? I now have the camera set to Adobe RGB, as opposed to previous setting of sRGB.

The custom White Balance setting is also one I&#39;m not sure on how it should be set... Is this purely an exposure issue with the photo, or does it also relate to colour space?

Any help greatly appreciated, from anyone :)

Cheers
Are you shooting JPEG or RAW?

If JPEG then the white balance and colour temp info is incorporated into the image. If RAW then neither is used (but the info is used to give the starting point in ACR).

Colour temp is the warm tone you get at sunset for example. Or the bluish tone in shade.

White balance is where the neutral tones are carrying a colour cast. A white shirt being lit by light reflected off a green wall.

Both are seperate to colour space concerns.

marc
8th June 2005, 01:13 PM
For this test, I created a new RGB document in Photoshop after setting my colour preferences like so:

http://www.obliquemusic.co.uk/forumimages/ps_colman.png

With no profile assigned to the image (btw, a profile of Working RGB: Apple Studio Display seemed to yield identical results assuming that&#39;s how you have your display prefs set up):
http://www.obliquemusic.co.uk/forumimages/ps_assign.png

I used PNG images for all my tests as it seems like the new web standard, and is less likely to colour shift due to compression (unlike JPEG or GIF might if you have images with a lot of colours (GIF) or low quality settings (JPEG)).


The initial file:
http://www.obliquemusic.co.uk/forumimages/ps_firstpng.png

Original PSD :: Top left = FF0002, Top right = 00E9E8, 4 down from right = E3EB00, 4 across from top right = 5003FF.

Saved PNG :: Top left = FF0002, Top right = 00E9E8, 4 down from right = E3EB00, 4 across from top right = 5003FF.

That&#39;s good news. Photoshop is opening the saved PNG with the same look and numbers as the original file. We&#39;re part of the way there. Now it&#39;s time to open in Safari (btw, I also tested OS X&#39;s Preview—it was always consistent with Safari so I excluded it from the results). I tested the colours in Safari 2 ways. #1 was using DigitalColor Meter (Applications/Utilities), and #2 by taking a screen grab then opening in Photoshop.


Safari with DigiColor Meter :: Top left = FF0013, Top right = 00EBE6, 4 down from right = DCF000, 4 across from top right = 6000FF.

Safari Screengrab with Photoshop eye dropper :: Top left = FF0013, Top right = 00EBE6, 4 down from right = DCF000, 4 across from top right = 6000FF. (ie. consistent with DigiColor Meter.)

Both gave the same results. Unfortunately the results do not match what Photoshop reports for the PSD, or the PNG. They&#39;re close, but still not identical (ie. not good enough).

So who&#39;s to blame?

I then created some HTML code to see if Safari was displaying colours as they should be.


&#60;&#33;DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01 Transitional//EN&#34;
&#34;http&#58;//www.w3.org/TR/html4/loose.dtd&#34;&#62;
&#60;html&#62;
&#60;head&#62;
&#60;title&#62;Web colour test&#60;/title&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=iso-8859-1&#34;&#62;
&#60;/head&#62;

&#60;body&#62;
&#60;table width=&#34;200&#34; border=&#34;0&#34;&#62;
&#60;tr&#62;
&#60;td bgcolor=&#34;FF0002&#34;&#62;&#60;/td&#62;
&#60;td bgcolor=&#34;00E9E8&#34;&#62;&#60;/td&#62;
&#60;td bgcolor=&#34;E3EB00&#34;&#62;&#60;/td&#62;
&#60;td bgcolor=&#34;5003FF&#34;&#62;&#60;/td&#62;
&#60;/tr&#62;
&#60;/table&#62;
&#60;/body&#62;
&#60;/html&#62;
Web page here (http://www.obliquemusic.co.uk/forumimages/coltest.htm)


Dreamweaver with DigiColor Meter :: Top left = FF0002, Top right = 00E9E8, 4 down from right = E3EB00, 4 across from top right = 5003FF.
The same as PS&#33;

Time to now check Safari and the code.


Safari Code with DigiColor Meter :: Top left = FF0002, Top right = 00E9E8, 4 down from right = E3EB00, 4 across from top right = 5003FF.
The same as PS again&#33;

So WTF is happening to our PNGs in Safari? Let&#39;s try a GIF.

Reopening it in Photoshop give the same results as the original PSD and the PNG. Let&#39;s try it in Safari.

Safari GIF with DigiColor Meter :: Top left = FF0002, Top right = 00E9E8, 4 down from right = E3EB00, 4 across from top right = 5003FF.
Looks like a PNG issue&#33;

Now let&#39;s try a JPEG.

Safari JPEG with DigiColor Meter :: Top left = FF0002, Top right = 00E9E8, 4 down from right = E3EB00, 4 across from top right = 5003FF.
Perfect.

I&#39;m a bit stumped as to why the PNG isn&#39;t right. I might submit it to Apple and Webkit bug list.

Additional notes: For my "Proof Setup" I had either "Proof Colors" set to off, "Working Space: Monitor RGB" (identical to OFF), and I also tried "Macintosh RGB". Proof OFF gave the closest results to the numbers, but wasn&#39;t perfect. Here&#39;s the results.


Original PSD with DigiColor Meter and Proof OFF :: Top left = FF0001, Top right = 00E9E8, 4 down from right = E3EB00, 4 across from top right = 5001FF.

Comments?

marc
8th June 2005, 02:18 PM
Btw, I&#39;m especially interested in comments from billybob and kate.

964RSCS
8th June 2005, 09:40 PM
Thanks for the info marc and PhilA.

Generally shooting in both jpg and RAW - camera automatically does both. I haven&#39;t used just RAW yet as it is by far the largest file size, and uses the full 8.3 megapixels - only been testing and experimenting so far, no large prints required just yet&#33;

The combination RAW/jpg files allow for small medium and large pic sizes, with high and low settings for quality... With only a 512 card atm I&#39;ve been using either medium or small sizes so far.

Edit - appreciated your test marc, will be interested to follow this topic and see what answers you get from people here and from Apple and Webkit&#33;

marc
9th June 2005, 09:20 AM
964RSCS :: I&#39;m going to make an assumption that your camera works the same way others I&#39;ve used do... The JPEG and RAW images should be the same pixel size (ie. if you save them both as uncompressed TIFFs from Photoshop they&#39;ll end up the same file size). The only difference between the two will be the compression (JPEG compression).

The differences between the highest JPEG setting and RAW will be minimal (but they do exist). They should both be 8.3MP images though.

billybob
9th June 2005, 12:42 PM
Originally posted by marc@Jun 8 2005, 02:18 PM
Btw, I&#39;m especially interested in comments from billybob and kate.
You shouldn&#39;t have your working space set to a monitor profile. You will not be seeing an accurate representation of the colour in the file on your screen. (Having the wrong or no display profile set will not alter the numbers in the file, it will only mean that what you are looking at on screen will not be an accurate representation of those numbers.)

In the color tab of the Displays preference pane you should make sure you have an up to date and accurate profile set for your monitor. In Photoshop you should set your working space to AdobeRGB and your colour management policies to the settings I mentioned in my previous post. When you create a new document it will already be in the AdobeRGB colourspace. If your final destination for the file is web and you are creating something from scratch it would be better to use sRGB as a working space, this will save doing a conversion before saving.

When you save the file you must make sure you save it with the colour profile embedded and to a file format that supports colour profiles. (PNG, PSD, TIFF, JPG - Yes, GIF - No)

When you are looking at the files you have displayed in browsers you have to keep in mind something. Does the browser support colour profiles? Safari does (although I am not sure if it supports profiles in png files, you might have to double check that or do your tests with jpgs) Later versions of IE now support profiles as well.

A couple of questions about what you are measuring on screen. A screen capture will garble results as it&#39;s capturing what is displayed on screen. and it&#39;s including the translation from the numbers through the display profile. Then there&#39;s the question of wether or not the screen capture is colour managed or even accurate in the first place.

Secondly is that the Digital Color Meter works similary as in it measures what&#39;s on screen, the numbers that are used to display colour on screen. (everything has been passed through the display profile as well. It tells you that by displaying the profile name at the bottom of the window.)

Note that the numbers on screen will not be the same as the numbers in the file as monitor profiles are used to display an accurate representation of the numbers in the file based on the capabilities of your monitor. The profile is a description of the gamut of your display and value 255 0 0 might not display as that as your monitor may not be capable of displaying that but using the profile it will display the closest value it can. (Unprofiled monitors will not).

marc
9th June 2005, 05:02 PM
You shouldn&#39;t have your working space set to a monitor profile. You will not be seeing an accurate representation of the colour in the file on your screen
Once again your post screams "I&#39;ve only done print work, not web work&#33;". Your monitor IS your output. The result you see in Safari is KING. The aim of this entire thread is to match Photoshop&#39;s display to Safari. Anything less is FAILURE.


When you save the file you must make sure you save it with the colour profile embedded and to a file format that supports colour profiles. (PNG, PSD, TIFF, JPG - Yes, GIF - No)
This is for WEB GRAPHICS&#33; TIFFs and PSDs are no good to anyone.

GIF = YES, A REQUIREMENT&#33;
PNG = YES, A REQUIREMENT&#33;
RGB JPEG with no profiles = YES, A REQUIREMENT&#33;

Practically every site in the history of the internet is built using these file formats&#33;

"Save for web" strips the profile as well as some other useless stuff for web output images (try it for yourself if you don&#39;t believe me). I will say it again. I have never seen profiles used for web pages or web graphics, EVER. They&#39;re simply not needed. If you monitor displays 666666 with more cyan than it should, then that&#39;s something that should be sorted out with the display settings NOT with a profile inside an image.


A couple of questions about what you are measuring on screen. A screen capture will garble results as it&#39;s capturing what is displayed on screen. and it&#39;s including the translation from the numbers through the display profile. Then there&#39;s the question of wether or not the screen capture is colour managed or even accurate in the first place.
I know this, but that doesn&#39;t affect my results. OS X&#39;s display profile sits nicely on top of everything, just like it should. If you read my post properly you&#39;ll realise that I used several different ways to measure and I can vouch that screen capture does match everything else.

And also, a screen capture contains the same profile as you&#39;re using for your screen (no surprises there). What do you think happens when you display an image with the same profile as is being used for the display it&#39;s being viewed on? Yes, that&#39;s right. NOTHING&#33;


Note that the numbers on screen will not be the same as the numbers in the file as monitor profiles are used to display an accurate representation of the numbers in the file based on the capabilities of your monitor.
Yes, but the numbers shown by the digital color meter and the screen grab are done pre-display profile adjustment. So, they will represent what is on the file perfectly. My tests prove this. Please read my post&#33;


The profile is a description of the gamut of your display and value 255 0 0 might not display as that as your monitor may not be capable of displaying that but using the profile it will display the closest value it can.
You&#39;re not making sense at all. You&#39;re confusing absolute display light values being projected from your monitor with what&#39;s sitting in video ram. Once again, you&#39;re making this 1 million times more complex than it needs to be.

Let&#39;s make it even simpler.

I make a web site. Across the top is a red box. I have a logo in it that sits in the box. The logo background needs to match the box colour or it&#39;ll look like poo. If my image has colour management, do you think it&#39;ll match my red box that doesn&#39;t? No. Not a chance.

Case closed.

(Btw, if you wish to see if any websites use colour management, choose "View>View Source" in Safari. There&#39;s nothing in the web code that suggests they do.)

(Btw 2, did you even read my post? Feel free to do some tests of your own and post them.)

964RSCS
9th June 2005, 07:14 PM
Originally posted by marc@Jun 9 2005, 09:20 AM
964RSCS :: I&#39;m going to make an assumption that your camera works the same way others I&#39;ve used do... The JPEG and RAW images should be the same pixel size (ie. if you save them both as uncompressed TIFFs from Photoshop they&#39;ll end up the same file size). The only difference between the two will be the compression (JPEG compression).

The differences between the highest JPEG setting and RAW will be minimal (but they do exist). They should both be 8.3MP images though.
Yep, tend to agree marc, having just re-read the instruction booklet&#33;

It&#39;s a little ambiguous, they seem to be trying to compare the compression/file size with equivelant number of megapixels, and then on to say what size prints you can expect at reasonable quality for each compression setting. The combined RAW and jpg images are only marginally bigger than straight RAW format. Total RAW only on 256MB card is approx 27 shots, then RAW + Large/highest qual jpg is approx 18 shots, down to 25 for RAW + small/lowest qual...

It seems that what I&#39;ve been shooting so far is jpg only, at the various size and compression settings... All 8.3 megapixels though it would seem.

cheers

billybob
10th June 2005, 04:11 PM
Originally posted by marc@Jun 9 2005, 05:02 PM
Once again your post screams "I&#39;ve only done print work, not web work&#33;". Your monitor IS your output. The result you see in Safari is KING. The aim of this entire thread is to match Photoshop&#39;s display to Safari. Anything less is FAILURE.
I&#39;m posting information which is print or web independant. You are just not understanding the theory or how to apply it practically. Go and do some more reading about display calibration, how it works and what it does.


This is for WEB GRAPHICS&#33; TIFFs and PSDs are no good to anyone.

GIF = YES, A REQUIREMENT&#33;
PNG = YES, A REQUIREMENT&#33;
RGB JPEG with no profiles = YES, A REQUIREMENT&#33;

Practically every site in the history of the internet is built using these file formats&#33;

"Save for web" strips the profile as well as some other useless stuff for web output images (try it for yourself if you don&#39;t believe me). I will say it again. I have never seen profiles used for web pages or web graphics, EVER. They&#39;re simply not needed. If you monitor displays 666666 with more cyan than it should, then that&#39;s something that should be sorted out with the display settings NOT with a profile inside an image.
Why is GIF & PNG a requirement? Why is an untagged jpeg a requirement? For filesize? Isn&#39;t the most important requirement to get the colours right....? Doesn&#39;t this rule out GIF and PNG and make a jpg with a profile essential...?
(Mentioning TIFF&#39;s and PSD&#39;s were only in relation to their capability of utilising profiles and not a suggestion to use them for the web. it&#39;s a shame you couldn&#39;t see that.

Save for web does NOT strip the profile if you go to a jpeg file. If you are working on something colour critical and are working with file formats that do not support colour management then you are shooting yourself in the foot to start with.


(Btw, if you wish to see if any websites use colour management, choose "View>View Source" in Safari. There&#39;s nothing in the web code that suggests they do.)
That&#39;s not how colour management works on the web. Profiles will be used in images. A properly managed colour workflow used to create the images combined with a colour managed system viewing them. At most you might see people using the ColorInfo tag (http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/q182/4/84.asp&NoWebContent=1) in their html.


You&#39;re not making sense at all. You&#39;re confusing absolute display light values being projected from your monitor with what&#39;s sitting in video ram. Once again, you&#39;re making this 1 million times more complex than it needs to be.
The numbers in your file are not what you are going to see on your monitor&#33; Weather it&#39;s calibrated or not, weather you are using profiles or not. Technology isn&#39;t there yet. A good monitor profile allows you to view the most accurate version of what your monitor is capable of displaying. What part of that, or the paragraph that you quoted dont you understand?


Let&#39;s make it even simpler.

I make a web site. Across the top is a red box. I have a logo in it that sits in the box. The logo background needs to match the box colour or it&#39;ll look like poo. If my image has colour management, do you think it&#39;ll match my red box that doesn&#39;t? No. Not a chance.
Complete and utter nonsense. At your suggestion I even did it for you. Below is the html code for it and attached is the image. The reds match identically, you can not see the difference between the red of the background and the red of the image. If you do it&#39;s an indication that your monitor is not profiled and set properly. So much for your petty little "Case Closed" jab.

(As an aside, if you open up Internet Explorer and load up the page created by the code below you can visibly see IE apply the profile, this is because IE applies it after it has loaded the image rather than while it is loading the image.)

The biggest problem is how browsers treat images that are untagged. Different browsers react differently to this situation, if you want any sort of control over what people are seeing the last thing you want to do is leave you website images untagged.

If the picture doesn&#39;t have an embedded profile Safari assumes the colour space of the monitor. This is a bad thing, it would be better if it assumes sRGB which would be a closer match.
If the picture doesn&#39;t have an embedded profile IE on Mac assumes the colour space of sRGB.

Be aware that the information above correct for versions of Safari that came with 10.3. Versions of Safari that came before that were abysmal with colour management. I&#39;m not sure what has changed when it comes to later or current versions. I haven&#39;t kept up to date but some quick research on your part should answer any outstanding questions.

For people on PC&#39;s you can use the ColorInfo tag (http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/q182/4/84.asp&NoWebContent=1) to specify a color space for IE viewing if you are using untagged images. You are still relying on people having the sRGB profile installed on their PC&#39;s but it&#39;s better than nothing.


&#60;&#33;DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01 Transitional//EN&#34;&#62;
&#60;html&#62;
&#60;head&#62;
&#60;title&#62;Untitled Document&#60;/title&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=iso-8859-1&#34;&#62;
&#60;/head&#62;

&#60;body&#62;
&#60;table width=&#34;34%&#34; border=&#34;0&#34; cellspacing=&#34;1&#34; cellpadding=&#34;1&#34;&#62;
&#60;tr&#62;
&#60;td height=&#34;234&#34; bgcolor=&#34;FF0000&#34;&#62;&#60;div align=&#34;center&#34;&#62;&#60;img src=&#34;red.jpg&#34; width=&#34;200&#34; height=&#34;200&#34;&#62;&#60;/div&#62;&#60;/td&#62;
&#60;/tr&#62;
&#60;/table&#62;
&#60;/body&#62;
&#60;/html&#62;

marc
10th June 2005, 05:54 PM
Why is GIF & PNG a requirement? Why is an untagged jpeg a requirement? For filesize? Isn&#39;t the most important requirement to get the colours right....? Doesn&#39;t this rule out GIF and PNG and make a jpg with a profile essential...?
Yes, file size is important. GIF, PNG and JPEG are the web standard image formats. If you use anything else you&#39;ll have compatibility problems.

In fact, GIF is by far the most used image format and it doesn&#39;t support profiles.


Save for web does NOT strip the profile if you go to a jpeg file
Yes it does. TRY IT&#33;

Create a new image, assign a profile, "Save for web" then open it up again. POOF&#33; Profile&#39;s gone.


If you are working on something colour critical and are working with file formats that do not support colour management then you are shooting yourself in the foot to start with
No you&#39;re not. They&#39;re not required for web work. Yes, I realise that web pages I create will look different on someone else&#39;s computer. Big deal. Setting up display calibration like you&#39;re suggesting requires a certain level of skill AND software that almost no typical user has.

Name ONE site that uses colour management like you&#39;ve suggested. Just 1&#33; Try it&#33;


That&#39;s not how colour management works on the web. Profiles will be used in images.
They will, but they&#39;re not.

You can be as theoretical as you like and you can make mile long posts until the cows come home, but I&#39;m telling it like it actually is.


The reds match identically, you can not see the difference between the red of the background and the red of the image. If you do it&#39;s an indication that your monitor is not profiled and set properly.
But using my setup those reds will always match, no matter how the user has their system set up, which you don&#39;t seem to be able to guarantee.

Plus, you didn&#39;t mention which profile you saved the JPEG with, or supply a link to the image for me to test it. And... if you used "Save for web", then the profile would have been deleted, so of course it matches&#33;

Image gamma is saved, but that&#39;s a far cry from colour profiles.


At most you might see people using the ColorInfo tag in their html.
After a Google search I could only find info for IE. Is that W3C compliant code? I don&#39;t have much respect for IE. Find me the same info for FireFox or Safari and I might come around.


The numbers in your file are not what you are going to see on your monitor&#33; Weather it&#39;s calibrated or not, weather you are using profiles or not. Technology isn&#39;t there yet. A good monitor profile allows you to view the most accurate version of what your monitor is capable of displaying. What part of that, or the paragraph that you quoted dont you understand?
This isn&#39;t about what the user sees, it&#39;s about matching Safari images and code with Photoshop.

The initial question was "Why doesn&#39;t Photoshop&#39;s RGB websafe colours look the same on screen as the result in Dreamweaver or brower? Is there something I can do about this?"

I&#39;ve provided an answer for that which works perfectly, and is compatible with ALL browser versions on ALL platforms.

Just to clarify (again), I do not subscribe to this theory for print work. I&#39;m sure we&#39;d both agree at least partially on colour management for that.

marc
10th June 2005, 06:21 PM
Btw, I just checked images on Adobe and Apple&#39;s web sites... no embedded profiles.

billybob
13th June 2005, 02:44 PM
You really need to make sure the statements you make are correct. All you are doing is highlighting how much you dont understand about color management, and Photoshop as well it seems.

Even after the forum changes the filename the red box image attached to my last post still has the sRGB profile embedded. When you do a Save for web use the "icc profile" check box. Save for web does strip out some other metadata but if you tell it to it keeps the profile embedded. (See image attached to this post.)

In case you still dont believe me double check the image attached to my last post, did you even bother to check it in the first place before saying what you said? Combined in the image attachemnt is the warning you will get if you have your color settings set up as I suggested.

PS This image attached also has the sRGB profile embedded.

Do yourself a favour, employ a consultant for a little while to teach you about this stuff, or go on a few courses. It might cost a little initially but it will save you lots of time (and therefore money) in the long run.



Originally posted by marc@Jun 10 2005, 05:54 PM
Create a new image, assign a profile, "Save for web" then open it up again. POOF&#33; Profile&#39;s gone.


Plus, you didn&#39;t mention which profile you saved the JPEG with, or supply a link to the image for me to test it. And... if you used "Save for web", then the profile would have been deleted, so of course it matches&#33;

marc
13th June 2005, 05:22 PM
I&#39;m sorry, I totally missed the fact that "save for web" could embed profiles for JPEGs (it&#39;s JPEGs only though). I&#39;m quite happy to admit a mistake. It seems like you&#39;re not though, as you&#39;ve totally ignored every other point in my post.


All you are doing is highlighting how much you dont understand about color management, and Photoshop as well it seems.
I don&#39;t think that warrants a real response.


In case you still dont believe me double check the image attached to my last post, did you even bother to check it in the first place before saying what you said?
How about you supply a link to a mini site that you&#39;ve built that works as you suggest it should rather than just posting an image. That&#39;d be much harder to fake.


Do yourself a favour, employ a consultant for a little while to teach you about this stuff, or go on a few courses. It might cost a little initially but it will save you lots of time (and therefore money) in the long run.
Hmmm. Whatever.

Now, here&#39;s the bits you need to respond to that you seemed to skip over before:

</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE ("1")</td></tr><tr><td id='QUOTE'>In fact, GIF is by far the most used image format and it doesn&#39;t support profiles.[/b][/quote]
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE ("2")</td></tr><tr><td id='QUOTE'>Name ONE site that uses colour management like you&#39;ve suggested.[/b][/quote]
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE ("3")</td></tr><tr><td id='QUOTE'>After a Google search I could only find info for IE. Is that W3C compliant code? I don&#39;t have much respect for IE. Find me the same info for FireFox or Safari and I might come around.[/b][/quote]

marc
13th June 2005, 06:10 PM
Btw, you&#39;re right, I suck at Photoshop. (http://www.elephant.net.au/kingswim/fishkids_reuben.jpg)

billybob
15th June 2005, 04:21 PM
Why don&#39;t you just come straight out and ask me to do the job for you? You want to be hand fed everything else&#33;


Originally posted by marc@Jun 13 2005, 05:22 PM
Now, here&#39;s the bits you need to respond to that you seemed to skip over before:

marc
15th June 2005, 05:57 PM
No, I have it all sorted at this end and don&#39;t need any help. Everything works perfectly and lives in harmony.

What I&#39;m asking you to do is prove that your method is both possible and exists on the net somewhere. I don&#39;t think that&#39;s too much to ask given the ferocity of your previous posts.

konni
21st June 2005, 07:01 PM
I spent quite a few hours reading this thread, researching and testing this stuff - I can now deliberate and obtain a color space that matches the web output and I&#39;ll lay down the steps for anyone else following this thread.

Marc - thankyou for persevering on focussing on the initial and pertinent issue (to me at least) – that is I wanted to have the Photoshop canvas display identical colours to those that will be output to web.

Marc you&#39;ll be interested in this snippet from the Adobe Help Files...

RGB color display can also vary between Photoshop and ImageReady. In Photoshop, you can select from several RGB color spaces when editing images. As a result, images created in Photoshop may use an RGB color space that differs from the monitor RGB color space used by ImageReady. You can adjust the RGB color display during image preview to compensate for differences between Photoshop and ImageReady.

Billybob - thankyou, you&#39;ve gone to lengths to explain the relevance of embedded profiles. For those who want to adhere to working in the same space as the source was created - you are quite right to &#39;harp&#39; on about how important that process is. I&#39;m glad you did because I have been researching like a mad person and I think I understand part of the process.

Anyway at this point in time I&#39;ve gleaned:

1. choose a monitor display profile (or calibrate but "never use a working space profile")
Firstly, I was told and have read in Photoshop&#39;s help files that sRGB is a good working space for web output. It was ignorance on my part to apply that as a monitor profile (I promise I will never go there again ;) ).

2. choose a color working space in Photoshop
Just about everything I read points to Adobe RGB 1998 (device independent) profile.

3. set the Proof to Monitor RGB (view menu)
To get accurate web colors to display on the Photoshop canvas. If I don&#39;t do this, no amount of stuffing around with all possible settings, will display websafe colors accurately unless I go to Image Ready (save for web) and I tick &#39;uncompensated color&#39; in the preview menu.

4. using Digital Color Meter to test values
Shows how dead accurate Fireworks displays the color #3366CC in the existing file created in Photoshop (without Soft Proof on). Firefox web browser displays the color as #3367CD. Changing the monitor display profile makes no difference to the color values as measured by the color meter. Furthermore, even the colors in the Photoshop color picker do not measure up accurately when I have the Color settings set as suggested by Kate and BillyBob.

There are a number of things I still don&#39;t understand about Photoshop that books, online resources and help files haven&#39;t answered as yet. Testing has been laborious but poses for me some things I really need to be sure of:

a) when opening a file that has a profile: if I convert to my working space or discard profile does this permanently alter the embedded profile - or only if I then resave the file?

B) when I save a new file as PSD &#39;embed Color Profile: sRGB IEC61966-2.1 is ticked by default&#39;. What profile is saved if I untick this option?

c) just what does it mean to &#39;preserve color numbers&#39; because I note that when the soft proof is set to Monitor RGB it is the same as setting a custom Proof and choosing my monitor display Profile and preserving the color numbers.