33 Replies Latest reply on Oct 17, 2009 6:46 PM by complexity

    Help me to get to bottom of my web designing color management work flow gremlins! PSCS3

    complexity Level 1

      Hi all I have been designing fairly high quality webpages now for a number of years but have always been a little uncertain about my own exact color management setup.

       

      I'm running a Dell 2407WFP-HC monitor (1920X1200 resolution/highest 32bit color windows setup) on a Geforce 8600GT video card.

       

      ICC Profile loaded is the default monitor Dell 2407WFP-HC (file name 2407WFPHC.icm) and I have run Adobe Gamma but found it to be fairly even to the default profile so have just left the gamma as the default.


      Now in the past I have been designing webpages using the RGB Adobe 1998 (knowing I should really be in SRGB IEC61966-2.1) RGB color space simply because when I am designing on the screen, once I output the graphic via the Save For Web command (in gif/jpg/png) the final image that appears inside the browser (IE, FF, Safari) appears close to what was shown back on my Photoshop CS3 screen. Where as if I design in the SRGB IEC61966-2.1 RGB color space the final image I see in the browser is not what I see back in the Photoshop CS3 screen. (The final image in the browser appears a lot more vivid and bright compared to the Photoshop screen where the design and colors feel duller and faded).

       

      If someone could please explain what is going on here. The actual final result in the browser comparing both images back to back (one in Adobe 1998 and one  in SRGB) after using the save for web command is almost exact. And when testing on other machines the colors and pretty well spot on how I like them to appear.

       

      Could anyone could please exlain what his phenomina I am experiencing and the best way to go about correcting it would be greatly appreciated. I'd love to be able to design in the SRGB color space but for this reason it makes it hard.

       

      A few questions, am I the only one that does design in Adobe 1998 for webpages? Also does the Save For Web command convert images into the SRGB color space if they are not already in that color space?

       

      Any help would be great

        • 1. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
          Ramón G Castañeda Level 4

          complexity wrote:

           

          ICC Profile loaded is the default monitor Dell 2407WFP-HC (file name 2407WFPHC.icm) and I have run Adobe Gamma but found it to be fairly even to the default profile so have just left the gamma as the default.

           

          Before getting "to the bottom", let's start at the top.

           

          Get a decent hardware calibrator package, then calibrate and profile your monitor accurately and set the resulting profile as your monitor profile.  Until you do that, you're flying blind.  Calibrate and profile your monitor regularly and often.

           

          Start learning about color management here:  http://www.gballard.net/psd/cmstheory.html

          • 2. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
            Rick McCleary Level 3

            A few questions, am I the only one that does design in Adobe 1998 for webpages?

            I'm sure you're not alone. Working in Adobe98 is fine as long as you convert to sRGB when saving for web. The only thing you need to know is that there's a significant wedge of the blue and cyan spectrum contained in Adobe98 that is not in sRGB. So, what you see may not be what you get. Working in soft-proof mode (View > Proof Setup > Custom > sRGB) will show you what your Adobe98 file will look like in sRGB.

            Also does the Save For Web command convert images into the SRGB color space if they are not already in that color space?

            In the Save For Web dialog, there's a check box where you can choose to have the file converted to sRGB.

             

            Ramon's suggestions to make sure you're working in a well-color managed environment are fundamental/ That's where you should start.

            • 3. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
              Printer_Rick Level 4

              One's things for sure complexity, listen to these guys they know what they're talking about.

               

              I'm not familiar with web design, I know way less than you. But it's something I want and need to learn, and soon for upcoming projects.

               

              I have replicated your problem but I'm not sure if my conditions match yours. One question I would ask: what are your Photoshop color settings? You're problem may be related to those, just a guess...

              • 4. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                complexity Level 1

                Hello guys thanks for the interest and the posts.

                 

                So your saying that I should go pick up a device such as the Spyder3Elite or Pantone ColorMunki Design

                 

                http://spyder.datacolor.com/product-mc-s3elite.php

                http://www.pantone.com/pages/products/product.aspx?pid=711&ca=2

                 

                ???

                 

                I have been eyeing off one of these device for a long time now, I guess if I want my colors accurate I had better just dip out and pick one up?

                 

                What devices do you guys own or recommend? and what monitors do you use? The reason I went the Dell 2407WFP-HC was because at the time is was meant to have a fairly high color gamut for a LCD, I think it was 92% color gamut range at a pretty decent price. I'm now also looking at going a new version of that monitor Dell 2408WFP which is supposed to have 110% color gamut. (I thought 100% was the highest?) and set it up so that I have a dual head setup along with my 2407WFP-HC although some people say to never have a dual setup running different monitors.

                 

                Just checked my save for web optimize settings and yes the convert to sRGB option is checked. For how long has that been the default setting for save to web as I've been outputting images for the web from photoshop since version 7!

                 

                Printer RIck my color setting are set to the Web Graphic Defaults but instead of sRGB as mentioned I had been using Adobe RGB (1998)

                 

                Color Management Policies, RGB, CMYK and Gray are all Off, Conversion Options: Engine Adobe (ACE), Intent Relative Colometric, Use Black Point Compensation and use Dither (8-bit/channel images) are both checked.

                • 5. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                  Ramón G Castañeda Level 4

                  complexity wrote:

                   

                  So your saying that I should go pick up a device such as the Spyder3Elite or Pantone ColorMunki Design

                   

                  I know you're replying to someone else (whom I have plonked, so I don't know what he wrote), but what I suggested was to get a decent hardware calibrator.  The ColorMunki does not qualify, the Spyder does.  Even better is the EyeOne.

                  • 6. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                    complexity Level 1

                    Hi Ramon yeah the above post was to all in the thread really.
                    So your suggesting a Xrite Eye-One Display 2?
                    I don't seem to be able to find anyone in my country (Australia) selling the pro version. What monitor setup do you use?

                    • 7. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                      Printer_Rick Level 4

                      complexity wrote:

                       

                       

                       

                      Printer RIck my color setting are set to the Web Graphic Defaults but instead of sRGB as mentioned I had been using Adobe RGB (1998)

                       

                      Color Management Policies, RGB, CMYK and Gray are all Off, Conversion Options: Engine Adobe (ACE), Intent Relative Colometric, Use Black Point Compensation and use Dither (8-bit/channel images) are both checked.

                       

                       

                      Whoa. I think Rick McCleary can help with this one, if I can't. Why are all your policies off? You are effectively decalibrating images in Photoshop.

                       

                      Here is what is happening with your working space as aRGB, and RGB policy off. If you open up an sRGB image, you're discarding the sRGB tag. In the color settings, profile mismatches - do you have "ask when opening" enabled?

                       

                      Do me a favor, as a test. Temporarily change your color settings to North America general purpose. Open up some of your RGB images. Look to the right of the image name in the window - do you see a pound sign,  or asterisk?

                       

                      The other Rick can check behind me on this one. With your policy off, you are re-assigning a new color space (your working RGB color space) to images. With an image open, go to assign profile. Use this to switch back and forth between sRGB and aRGB.

                       

                      I believe this may represent the color shifts you are experiencing between Photoshop and ICC ignorant applications.

                       

                      The proper thing for you to do for web work is (possibly) using North America General purpose, or North America Web/Internet. There are differences which I can explain in more detail if you want.

                       

                      To replicate what you are currently doing with your existing color settings, change to North America General Purpose. Open up several images, until you find one that is sRGB (to see if it is sRGB go to assign profile). Once you find one, re-assign Adobe RGB. This is what you are doing to your images.

                       

                      You may in fact like this, but re-assigning is considered bad practice. The proper thing (probably) is to leave the image profile as is, and use proof preview as Rick McCleary described to see the image in sRGB color space. If you do not like the image appearance, the conventional wisdom is you should color correct the image. And yes you should convert to sRGB when doing save for web. If the image is already sRGB no conversion is performed.

                       

                      Re-assigning is considered random color. There was a huge discussion about it in Ps mac forum "Assign Profile vs Convert to Profile", which I started, I more or less got ripped to shreds.

                       

                      And yes do get your monitor properly calibrated as suggested.

                      • 8. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                        Rick McCleary Level 3

                        Yes, I think Printer_Rick has this exactly right.

                         

                        Change your Color Management Policies to "Preserve Embedded Profile". When you set the policies to "Off", the color management chain is broken right from the start. That's the source of your problems.

                         

                        The best thing would be to choose the North America Web/Internet preset. It has you working in sRGB right from the beginning which is correct for web images.

                        • 9. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                          complexity Level 1

                          Web Graphics Deafults turns all color management policies off by default I actually didnt go and turn them all off in CS3 for me (I'm fairly sure North America Web/Internet) was the setting I was using before CS3.

                           

                          I've opened up a few sRGB images (the ones that I saved for web).

                          When I've opened up some of these .gifs I get a dialog box with the indexed color document "name.gif" has a file format that does not supported embedded color profiles, what would you like ot do. Leave as is, Assign working RGB: sRGB or assign profile.

                           

                          I presume it says this because it is a gif (I thought because I would have used save for web command that it would have embedded the sRGB? Or don't gif have that capability?


                          and when I've gone to open up some of my .jpgs that would have been saved via the save for web command I get the docment "name.jpg" does not have an embedded RGB profile, what would you like to do? Leave as is (don't color manage), assign working RGB: sRGB or Assign profile.

                           

                          If I go to the leave as is option, once opened next to where the file name is shown there is name.jpg (RGB/8#)

                           

                          If I go to the assign working RGB opention, once opened next to where the file name is shown there is name.jpg (RGB/8).

                           

                          Thanks for the assistance Ricks X2.

                          • 10. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                            Printer_Rick Level 4

                            complexity wrote:

                             

                             

                             

                            I've opened up a few sRGB images (the ones that I saved for web).

                            When I've opened up some of these .gifs I get a dialog box with the indexed color document "name.gif" has a file format that does not supported embedded color profiles, what would you like ot do. Leave as is, Assign working RGB: sRGB or assign profile.

                             

                            I presume it says this because it is a gif (I thought because I would have used save for web command that it would have embedded the sRGB? Or don't gif have that capability?


                            and when I've gone to open up some of my .jpgs that would have been saved via the save for web command I get the docment "name.jpg" does not have an embedded RGB profile, what would you like to do? Leave as is (don't color manage), assign working RGB: sRGB or Assign profile.

                             

                            If I go to the leave as is option, once opened next to where the file name is shown there is name.jpg (RGB/8#)

                             

                            If I go to the assign working RGB opention, once opened next to where the file name is shown there is name.jpg (RGB/8).

                             

                            Thanks for the assistance Ricks X2.

                            Above you mention opening the web output in Photoshop. I'm not sure if there is a good reason for doing that. My understanding is you have working files for Photoshop, and gifs or jpegs resulting from the save for web. I would probably check the web output images in a browser.

                             

                            You are correct, the gif format does not support embedded profiles. You can embed the sRGB when saving JPEGS using the  Save for Web, there's a check box for that. I'm not sure if it's necessary to do that, the other RIck might know better. You should definitely enable the "convert to sRGB"

                             

                            If you do open the jpeg output and it doesn't have a profile, if your Photoshop working RGB color space is sRGB then you won't have an issue choosing "don't color manage". If your working space is aRGB you could choose "don't color manage" but you would have to select Proof Setup, sRGB, preserve numbers (but this would ONLY apply to untagged (#) sRGB Web output. For working files you would NEVER enable preserve numbers).

                             

                            By working files I mean images you edit, then Save for Web. I would not open any of your Save for Web images (JPEG, GIF) and then Save for Web again.

                             

                            Having your working space as aRGB could get very confusing, since your output is not aRGB. You would always have to do proof setup to see sRGB color. I would avoid opening your web output (JPEG, GIF) in Photoshop unless your working space is sRGB...

                            • 11. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                              complexity Level 1

                              Hi Rick points noted, you see opening up images in my default file browser (windows photo gallery) opens up another can of worms as the colors shown in that program are just awful. I think I started a thread a long time ago regarding that but could never get to the bottom of it, to do with windows color management setup. (Im on Vista). Just gotta get used to using the bridge as the default browser I think.

                               

                              About to put on order the i1Display 2 or Spyder 3 Elite, still not sure which one to go for yet.

                              • 12. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                Rick McCleary Level 3

                                About to put on order the i1Display 2 or Spyder 3 Elite, still not sure which one to go for yet.

                                I can't vouch for the Spyder device, but the i1Display 2 works very well.

                                 

                                (I don't use it with the EyeOne Match software, but with dedicated NEC software on my NEC 2690WUxi.)

                                 

                                [edit - typo]

                                • 13. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                  complexity Level 1

                                  Hi again Rick. Another question regarding color management.I notice when I open up a CMYK image and go to save to web and try and save it as a jpeg all of the colors are greatly intesified compared with the original CMYK image. But if I make a new sRGB canvas and simply copy and paste a copy of the CMYK image into the sRGB canvas the colors remain as shown in the CMYK image despyte being in a sRGB canvas?

                                   

                                  What is going on there? I would have thought that when I am in the CMYK image and go to save for web the end result (jpg) would be the same as copying and pasting into a sRGB space? (again I have convert to sRGB on by default in the save for web command).

                                  • 14. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                    complexity Level 1

                                    Also when saving a screenshot of a webpage and then bringing it back into photoshop (via copy and paste from the  snipping tool) all of the colors fade when pasting back into a sRGB canvas????

                                    • 15. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                      Printer_Rick Level 4

                                      What you are describing is somewhat complicated. My first question would be, "Why do you have CMYK in the first place?" for web design. But if CMYK is what you are given, that is understandable.

                                       

                                      You are right to convert to sRGB when doing save for web. When the image is opened in a non-ICC app, the app uses your monitor profile to display color. To see this in Photoshop, you could open the web output image, then assign your monitor profile - the color should then match what you see in the other app. But remember, re-assignment is bad practice, and it is also bad practice to use your monitor profile as a working RGB color space in Photoshop.

                                       

                                      Also remember that if, when the web output image is opened in Photoshop, and there is a pound sign in the title bar, the image is being displayed using your working RGB. If that is not sRGB, it is like a re-assignment.

                                       

                                      The color management scenarios can get very confusing when you go back and forth and back again. At this point I'm not sure what method you should use to proof your final web page. I would think you'd have to use a browser, but then if images do not have sRGB profile embedded (that is an option on save for web) AND the browser is ICC ignorant, then the display relies on your monitor profile.

                                       

                                      The other Rick may be able to give you additional guidance for this issue. Perhaps it's best to soft proof your web output images with Photoshop, using sRGB as your working space. Then again you could embed the sRGB profile when saving for web. Certain browsers (such as Safari on a mac) are not ICC ignorant and will honor the sRGB profile.

                                      • 16. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                        complexity Level 1

                                         

                                        Hi guys got my Eye One 2 but are having a few issues getting a good calibration setup.


                                         

                                        Again my monitor is the Dell 2407WPC-HC (specs: 92% of the NTSC colour gamut, Brightness 400 cd/m2, Contrast ratio: 1000:1)  (My system is Vista ultimate and video card is Nvidia Geforce 2 8600 256mb)


                                        The default settings on the monitor for brightness and contrast were both set at 50 (on a scale of 0 to 100), so exactly middle for both and I was running the default Dell .icc profile that came with the monitor.


                                         

                                        Prior to calibration I had Adobe Gamma installed but have disabled that via windows defender and rebooted before doing the calibration.  (no other video card software etc)


                                         

                                        My first calibration setting were:

                                        White Point: Native White Point

                                        Gamma: 2.2

                                        Luminance: 120


                                         

                                        In the ambient light check it measured. Colour Temp at 2800K and luminance at 64Lux.

                                        After setting contrast to 100% I ended up with the setting of 71% to get the bar directly in the middle of the green.

                                        When doing the luminance measurement the target is 120 but before I even adjust the brightness it tells me the current measurement is 310, now when I try and get the black line into the green zone I can’t, I move my brightness setting all the way down to 0 and it tells me the current rating is 163!


                                         

                                        And at that setting the monitor is very dull and the white is almost grey and the monitor a bit bluish

                                        Here’s the results of the first calibration summary (see TFDfirstprofile_160709_749PM.JPG)


                                         

                                        Here’s the result of my second calibration summary. Again the monitor is very dull and the white is almost grey and this time it was a bit reddish.
                                        White point 6500K

                                        Gamma 2.2

                                        Luminance: 100


                                        See (see TFDfirstprofile_160709_839PM.JPG)

                                         


                                         

                                         

                                        On both tries I had that same issue with the luminance (0 brightness setting was not enough to get the indicator into the green zone and this obviously made the screen quite dull and the whites almost grey).


                                         

                                        Not sure I am doing something wrong, I did notice that if I opened the default ICC Profile supplied by dell (on the calibration setting screen, second screen in) the White Point would be set to Native White Point, Gamma set to Native Gamma and Luminance no change.


                                        Am I supposed to do that and load the default .icc to get these settings? (I did try it but again that same luminance issue)

                                         

                                        Any help would be great

                                         

                                         

                                        • 17. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                          Lou Dina Level 3

                                          Complexity,

                                           

                                          Depending on the monitor, video card and software, some controls will be available and some will not.  For instance, when I use i1Match to calibrate my LCD (hooked up to the DVI port), I have one, and only one, control from the front of my monitor....the brightness of the backlight.  The other controls are disabled and cannot be adjusted.  This makes it easy. Eye One Match software disables all active profiles before calibrating (you probably saw your monitor shift at some point before or after you put your puck on the screen).

                                           

                                          I have heard that some monitors actually switch the functions of the Brightness and Contrast controls.  Try reversing the two controls and see if that works.  If not, you may have to play with both controls to lower the super bright luminance of your monitor to hit your targets.  In the final analysis, you simply want to hit your targets for white luminance, black luminance, gamma and color temp.  If your i1 and software do that accurately, you will be fine.

                                           

                                          FWIW, here are my target settings:  5200K, 90 cd/m2 (white luminance), 0.3 cd/m2 (black luminance), 2.2 gamma.  My target settings are designed for matching monitor to print, working in a dimly lit room. For web based work, you probably have about the right settings...6500K, 2.2g, 120 cd/m2, let the blackpoint get as dark as you wish...0, or 0.1 is fine.

                                           

                                          A little tip once you get things worked out.  Rename you profile something easy and consistent that makes sense to you instead of using those dates.  You'll just end up with a bunch of useless outdated profiles in your color profiles folder that way.  I name the profile for my main monitor, "Monitor 5200K 2.2g 90CD".  This way, I know exactly what my settings are.  I overwrite it each time I reprofile.

                                          • 18. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                            Lou Dina Level 3

                                            Complexity,

                                             

                                            A little more feedback..... I have two monitors hooked up to my computer, both are LCDs and both are hooked up via digital connections (DVI).  My main monitor (where I display full sized images in Photoshop) disables contrast, color and gamma on the monitor controls.  Only the brightness can be adjusted.

                                             

                                            My second monitor (also a Samsumg LCD digital, but a different model) allows me to adjust brightness, contrast, color, gamma, etc.  I use this monitor to display my Photoshop Palettes so I don't clutter up my main monitor.  But, I want them to match.

                                             

                                            Unless you have an expensive, higher end monitor, ALL adjustments are written to your video card LUT (look up table), whether you use the controls on your monitor or let your monitor profiling software do it automatically.  They all end up in your video card.  With my primary monitor, I can ONLY adjust brightness and the profiling software takes care of the rest.  Easy.

                                             

                                            My secondary monitor allows me to fiddle with controls all I want.  Before profiling, if I initially adjust red, green and blue channels to 100%, and set brightness and contrast to 100%,  I will have a VERY bright monitor with a very cyan cast.  If that is your starting point, i1Match will have you lower your contrast and brightness significantly to compensate.  If you cannot get your monitor dark enough, then you can lower all three RGB set points to 50, or 70, or whatever.  It really doesn't matter all that much, since all adjustments are written to your video card anyway.  Of course, if you set R,G,B to "0", you may not be able to get it bright enough.  I don't even bother adjusting my monitor to hit my target color setting (in my case, 5200K) since the software will do it for me, and like I mentioned, they all end up written to the video card anyway.  The only real analog control most LCD monitors have is the backlight brightness, and that is NOT written to the video card.

                                             

                                            I calibrated my secondary monitor a few different ways and got the same result.  First, I cranked everything up to 100% and then adjusted the brightness and contrast when asked my i1Match.  Since everything was cranked way up, the brightness was adjusted to 30 and the contrast to 12.  If I had set my R, G, B controls to 50 (ie, less bright), the brightness and contrast would have been set higher to compensate.  I didn't bother adjusting my RGB values to hit my target.  Regardless, I got the same final calibration each time.  The final readout was nearly identical and the end result was what I wanted.  This was set as the default profile in the O/S.

                                             

                                            Since today's monitors are generally very bright and contrasty, it's just a matter of adjusting them sufficiently so you can hit the targets you spedcified when you fired up your profiling software.

                                             

                                            I hope this helps some.

                                             

                                            Lou

                                            • 19. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                              Rene-) Level 1

                                              complexity wrote:



                                              Could anyone could please exlain what his phenomina I am experiencing and the best way to go about correcting it would be greatly appreciated. I'd love to be able to design in the SRGB color space but for this reason it makes it hard.

                                               

                                              A few questions, am I the only one that does design in Adobe 1998 for webpages? Also does the Save For Web command convert images into the SRGB color space if they are not already in that color space?

                                               

                                              Any help would be great

                                              What is it you want?

                                               

                                              An exact color match between Photoshop and your browser? That's not going to happen, unless you browse color managed.

                                               

                                              For web design there is another issue, depending on what browser you use.

                                              If you use a non color managed browser (FF2 for instance) or a fully color managed browser (FF3.0 with color management enabled) you'll have no problems, but if you browse using either Safari or FF 3.5 with default settings, you will experience Wonkiness.

                                               

                                              Your best option might be (depending on what you want) to either use color management and sRGB or (gasp) turn off color management in PS (by choosing "Monitor color" in the color settings.

                                              The last option will not ensure exact colors, but will ensure that your images look identical in PS and a non color managed browser. Note however that you'll have no idea whatoever how the image / web page will look on someone elses system...

                                               

                                              If you use sRGB, you do have control over how an image appears in someone elses browser (provided they browse color managed and have a calibrated screen)

                                               

                                              Whatever it is you want, using AdobeRGB is not a good idea.

                                               

                                              The screen you are using (2407WFP) is a wide gamut screen if I'm correct? That's going to give all kinds of problems unless you browse color managed:

                                               

                                              First, it means that an sRGB image will look oversaturated in a non color managed application on your screen. That's also why an AdobeRGB image might look "closer" on that screen. However, most of the world are still using "normal" screens (not wide gamut), so an sRGB image will look "more or less okay" and an AdobeRGB image will look "Dull" in a non color managed application.

                                              It also means that a web site that looks about "nice" on a non color managed browser on your screen will look "dull" on a color managed browser or a non color managed browser on a small gamut screen (say: a laptop)

                                               

                                              There's no simple answer, untill everybody starts using calibrated monitors and color managed browsers...

                                              If I were you, I'd start working color managed. And that includes using a color managed browser and calibrating your screen.

                                              I'd recommend FireFox3.0. (not 3.5 at this moment), with the color management add on.

                                              That way you'll know that you've done all that's possible to work accurate.

                                              • 20. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                complexity Level 1

                                                Hello people, I am back again to try and get a resolution to this.
                                                Ok, first thing I've done away with trying to correctly profile my monitor with the i1Display2 just could not get a correct match for the software to be happy, I will continoue trying to get that sorted at a later stage. Am now using the default profile that cmae with the monitor.

                                                 

                                                I've done some screen shots and labelled them to show you exactly some of the gremlins I am having.

                                                 

                                                Again at present I'm on Vista, have CS3 suite installed Photoshop/Bridge CS3.

                                                 

                                                Now to replicate whats going on, I've loaded up a few of my browsers (Firefox 3.5 with Color management disabled by me, I had the washy color issue many others have had as soon as I started using 3.5, I disabled color management and the colors became vivid again), next to that I've loaded Apple Safari 4.0 which has color management on by default I believe (I'm not sure you can disable that in that program I believe).

                                                 

                                                I have saved an image from the apple website (Iphone graphic) with some nice blues in it and then have that image selected in bridge, and have also opened it up in Wiindows Photo Gallery and have opened it up in the Windows Explorer with thumbnails enabled.

                                                 

                                                See the first attachment.blue_compare1.jpg

                                                 

                                                 

                                                 

                                                Firefox 3.5 color management off = correct blue

                                                Safari 4 colormanagement on = correct blue

                                                Windows Explorer thumnails turned on = correct blue

                                                Bridge CS3 = incorrect blue

                                                Windows Photo gallery = incorrect blue

                                                Photoshop CS3 open the image from HDD

                                                - leave as dont color manage (the file does not have an embedded RGB profile) = incorrect blue
                                                - if I try assign working RGB: sRGB IEC61966-2.1 = incorrect blue

                                                Photoshop CS3 if I go to file/Open, browser through the thumnails it shows the correct blue, if I click on the image to get the slightly enlarge preview from photoshop at the bottom of the screen it then shows the incorrect blue (see image bleow/attachment 2)

                                                 

                                                blue_compare_11.JPG

                                                So at this stage in no Adobe product am I able to open the file that I saved from the browser (safari 4) and open it with the blue that was shown in that browser!

                                                 

                                                My color management settings are attached in one of the attachements and regarding the Creative Suite Color Settings I have applied my profile to it. See image below attachement 3.

                                                 

                                                 

                                                blue_compare_3.jpg

                                                 

                                                 

                                                The main thing I am trying to do is get consistant color across my workflow, and obviously If I cant open a file from my web browser and see those same colors in photoshop I think that is probably the biggest thing that is throwing me out and making me go literally insane/crazy/mad.

                                                 

                                                Any help would be great!

                                                • 21. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                  Rene-) Level 1

                                                  Any help would be great!

                                                   

                                                  Gosh. Where to begin?

                                                   

                                                  First: Randomly messing about is not the best way to solve a problem.

                                                   

                                                  The image you are looking at does not have an embedded profile.

                                                  http://img.skitch.com/20090822-g1xpsjbtxkmnn6eewhba4emh6a.jpg

                                                   

                                                  So both Safari, FF 3.5 with color management set to default and FF 3.5 with Color management off will show it identical. Which is pretty much oversaturated on your screen if it's a wide gamut screen. (which I think it is, but you still haven't answered yet)

                                                   

                                                  So all blue you call "incorrect" is in fact "correct"!

                                                   

                                                  If you set "convert to working RGB", photoshop will convert any image with an embedded profile to sRGB. That's okay.

                                                  An image without embedded profile will by default be show assuming the working RGB. sRGB in your case. The image will be displayed identical to what FF 3.0 or FF 3.5 with full color management would show. Again, this is the correct color by the way.

                                                   

                                                  Your screenshots are pretty meaningless as far as judging color is concerned: They hve sRGB embedded. Either because Windows doesn't know better or (more likely) because of your color settings in PS and doing the wrong thing when you get the "missing profile" dialog box...

                                                  (Screenshots should have monitor profile assigned / embedded or be converted from monitor RGB to sRGB)

                                                   

                                                  The only way to get the image to look in PS as what you see in Safari (which, again, is incorrect) would be to assign your monitor profile.

                                                   

                                                  When I look at the iPhone image in my (fully color managed) browser on my (calibrated) screen, I see a correct blue.

                                                  • 22. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                    complexity Level 1

                                                    Hi Rene thanks for the reply, and yes my monitor is a wide gamut 92%.

                                                     

                                                    Okay I now see that if I put my monitor profile in as the RGB working space I get the exact same colors as shown in my browsers I understand that now (the browser uses my systems set monitor profile), so should I be leaving the RGB space as sRGB IEC61966-2.1 and simply soft proofing / proof setup, custom profile, my monitor profile whenever I create anything for web output?

                                                     

                                                    Why wouldnt the Apple image have a sRGB profile embedded in it's image?

                                                     

                                                    Under my control panel, color management, my Windows Color System Default profile is set to sRGB ICE61966-2.1, which is I presume why my Windows Photo Gallery is showing the duller actually correct blue. Would you leave it set to that?

                                                    • 23. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                      Rene-) Level 1

                                                      complexity wrote:

                                                       

                                                      Hi Rene thanks for the reply, and yes my monitor is a wide gamut 92%.

                                                       

                                                      Okay I now see that if I put my monitor profile in as the RGB working space I get the exact same colors as shown in my browsers I understand that now (the browser uses my systems set monitor profile), so should I be leaving the RGB space as sRGB IEC61966-2.1 and simply soft proofing / proof setup, custom profile, my monitor profile whenever I create anything for web output?

                                                       

                                                      Why wouldnt the Apple image have a sRGB profile embedded in it's image?

                                                       

                                                      Under my control panel, color management, my Windows Color System Default profile is set to sRGB ICE61966-2.1, which is I presume why my Windows Photo Gallery is showing the duller actually correct blue. Would you leave it set to that?

                                                      Do not set your monitor profile anywhere in Photoshop. Otherwise color management is out the window.

                                                       

                                                      IMO, a wide gamut screen is not a good choice if you are doing web design, unless you know what you are doing color wise.

                                                      If you browse non-color managed, you'll see everything way more saturated then (rough guess) 80% of your clients who are using a non-wide gamut screen. So the only choice you have is to browse color managed: Use either Safari or Firefox 3+. Same goes for softproofing: If you softproof for your monitor, you'll not be seeing what the rest of the world is seeing.

                                                      (Give it a try: Open an image in a non color managed application on your desktop and on a laptop (assuming you have one) or a "normal" display.)

                                                       

                                                      Safari or Firefox 3.5 (gfx.color_management.mode.=2) have their own problems for web designers. Again, something to be aware of.

                                                       

                                                      Windows should use your display profile. As far as I know Windows Photo Gallery (Vista) is color managed. Not sure though.

                                                      Windows Picture and Fax viewer (XP) is not color managed: It doesn't use the monitor profile, but instead assumes an sRGB monitor (stupid)

                                                       

                                                      Many web designers use sRGB images, but strip the .icc profile to save (a tiny bit of) space. Nothing wrong with that, provided everybody uses Firefox 3.0, or FF 3.5 with gfx.color_management.mode=1. If people use Safari, the web designer has a problem if he didn't embed sRGB and needed accurate displaying of images.

                                                       

                                                      Advantage of not embedding sRGB is that *any* browser will display a web site consistently: No more Safari Wonkiness. Disadvantage off course is that images aren't displayed accurately in Safari or FF 3.5 at default.

                                                       

                                                      As a general rule, I'd strip .icc profiles from images that need to blend in with a background, and embed a profile on images that need to be displayed accurately. (There's no help for people who browse non-colormanaged)

                                                       

                                                      For instance, typing this, I remembered that on my one site I have an sRGB image embedded in the background image, on the other, I stripped the profile. Should have changed that a long time ago but forgot. As an exercise for the reader: Which is which?

                                                      http://www.getcolormanaged.com/   http://www.damkot.com/

                                                      (I'll leave the one with profile until sometime monday)

                                                      • 24. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                        complexity Level 1

                                                        Hi guys I still have not come up with a solution to my initial problem on this thread. At the moment I have a file I have been working on for about a month but with my setup it is just coming out (when saved as a jpg, or saved via save for web) way oversatured/hot in Internet Explorer and Firefox 3.5 gfx mode set to "0" but perfect in Safari 4.

                                                         

                                                        My current photoshop setup for this file is:

                                                        RGB: sRGB IEC61966-2.1

                                                         

                                                        All I want is a consistancy across the three browsers like when I go to apple.com and test in each browser I get exactly the same image.

                                                         

                                                        Rene you say to do that I simply strip the .icc information how do I do that exactly. Do you mean in save for web uncheck the convert to srgb option?

                                                         

                                                        Are there any services out on the web that lets me view the color information of images in webpages? If I simply save the image then oipen in bridge and view isnt that doing the same thing?


                                                        Pulling my hair out, any help would be great.

                                                        • 25. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                          Printer_Rick Level 4

                                                          complexity wrote:

                                                           

                                                           

                                                          Rene you say to do that I simply strip the .icc information how do I do that exactly. Do you mean in save for web uncheck the convert to srgb option?

                                                           

                                                          You would uncheck the "Embed Color Profile" option, this would result in uncalibrated output (no ICC profile)

                                                           

                                                          For web you would want "Convert to sRGB" enabled. If the image is already sRGB there will be no conversion, but you should still check on the sRGB option (it's good practice).

                                                           

                                                          As far as the browsers showing different results – some browsers are ICC ignorant. Safari is not. Perhaps you have embedded profiles in the web output, and Safari is honoring those and the other browsers don't. Browsers that are not ICC compliant will display the images using your monitor profile. To simulate this in Photoshop you could open the image, then View: Proof Setup: Monitor RGB.

                                                           

                                                          Under normal circumstances, soft proofing with a monitor profile is a bad idea. The only advantage in doing it is it makes you aware that your monitor color gamut is different from the gamut of the image. Any colors that shift when you soft proof with Monitor RGB are colors that your monitor cannot render (these colors still exist in the file however).

                                                           

                                                          This is somewhat confusing, maybe the other posters can contribute better information.

                                                          • 26. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                            Rene-) Level 1

                                                            complexity wrote:

                                                             

                                                            All I want is a consistancy across the three browsers like when I go to apple.com and test in each browser I get exactly the same image.

                                                            The only way to get the image to display consistent (but wrong on your monitor: More saturated then it should be, or would appear on my laptop for instance) is to not embed an icc profile.

                                                            Colors will be oversaturated then in all browsers (on your monitor), except the one that handles files as it should: FF 3.0 with color management enabled (and FF 3.5 with CM set to "full")

                                                             

                                                            You have to understand color management a bit to understand what's going on. It's not that difficult:

                                                             

                                                            On an image without embedded profile Safari will assume monitor profile, which is nearer AdobeRGB in gamut in your case.

                                                            The image will look like you had assigned your monitor profile in PS (or softproofed for "monitor"): Identical to FF without color management or another non color managed browser like IE: Too saturated (on your monitor)

                                                            An image with embedded profile will be displayed correct (what you may call "dull") in Safari and FF3.x with CM set. It will display oversaturated in other browsers. (on your monitor)

                                                             

                                                            Again: If you want images to look like they should for people who use a decent (color managed) browser & calibrated screen, convert to and embed sRGB. If you want images to look consistent (with a background, or over different browsers for whatever reason), then convert to sRGB, but do not embed the profile.

                                                             

                                                            If you don't embed a profile, then you have absolutely no idea how the image will apear to the rest of the world, except for those using FF3.x with full color management. If you do embed a profile, then at least all color managed browsers (including Safari and default settings on FF 3.5) will display the image correct.

                                                             

                                                            If you want an image to look identical in color managed software and non color managed software on your monitor only, convert to your monitor profile. (Might be good for desktop images on XP, I'd know of no other reason)

                                                             

                                                            Nothing wrong with embedding or not embedding sRGB for web images: It's a personal choice. Either way, you're in good company. As long as you understand the consequences.

                                                             

                                                             

                                                            Hope this helps.

                                                            • 27. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                              complexity Level 1

                                                              Hi Rene and Ricks thanks for getting back to me. Okay yes I fully now understand that I need to make sure that I do not include the color

                                                              profile when saving to get the same image across all browsers. When I use save for web with convert to sRGB as selected no color profile is

                                                              embeded in my image, I have checked the images in bridge.

                                                               

                                                              I think the issue I am having which is what you have touched on in earlier posts is to do with my wide gamut monitor.

                                                               

                                                              What I did was save 2 versions of the one graphic:
                                                              1st via the Save As command in photoshop which embeds the color profile sRGB IEC61966-2.1 into the image.
                                                              2nd via save for web with convert to sRGC checked and there is no color profile embedded in that image.

                                                               

                                                              I put both of the images into a webpage and went and tested on IE8, FF3.5 with gfx="0", Safari 4 and Chrome.

                                                              From all of that testing the only image that is shown to be correct (the same as what I see back in where I created it in photoshop CS3) was in

                                                              Safari 4 and it was the image with the embeded sRGB profile, all of the other images are way hot/over saturated.

                                                              So yes that seems to be going along the lines with what you have said.

                                                               

                                                              Next I went and tested this webpage on a different computer, my Dell Laptop M2010 20inch glass screen but I believe it is not a super high gamut

                                                              monitor.
                                                              The image it shows appears to be some where in the middle of my normal and hot images (when compared to my high gamut Dell monitor), one suprise however was that when tested in Safari (version 3.2 on that machine not 4) there is no difference between the embedded color profile image and non embeded profile image, unlike what I was getting on my original high gamut Dell.

                                                               

                                                              So where does this leave me, I'm still baffeld on how to create an image in photoshop and have it show up pretty well spot on as a image

                                                              (without color profile) in a webpage? Do I ditch the high color gamut Dell, if I buy an Apple Cinema display or an Ezo/more graphic based type

                                                              monitors will I be in the same boat? (remembering i bought the i1Display2 to calibrate the monitor but could not get a successful calibration

                                                              because the monitor was apparently just too high in its settings).

                                                               

                                                              And what do I do with this current file I am working on, leave it as is and just expect the people with high color gamut monitors to put up with

                                                              the hot / over saturation or do I use a layer adjustment at the very top of my layers to desaturate it just a touch, or do I just go back and

                                                              recreate the file in a Adobe RGB workspace (because it was giving me the most accurate color) but apparantly that would not be a wise move.

                                                               

                                                              Any help and advise is greatly appreciated

                                                              • 28. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                                Rene-) Level 1

                                                                complexity wrote:

                                                                 

                                                                 

                                                                So yes that seems to be going along the lines with what you have said.

                                                                I'd hope so

                                                                 

                                                                complexity wrote:

                                                                 

                                                                 

                                                                Next I went and tested this webpage on a different computer, my Dell Laptop M2010 20inch glass screen but I believe it is not a super high gamut

                                                                monitor.
                                                                The image it shows appears to be some where in the middle of my normal and hot images (when compared to my high gamut Dell monitor), one suprise however was that when tested in Safari (version 3.2 on that machine not 4) there is no difference between the embedded color profile image and non embeded profile image, unlike what I was getting on my original high gamut Dell.

                                                                I'm assuming the laptop isn't calibrated? And uses sRGB as monitor profile? Safari will assume the display profile (sRGB in that case) so it will display identical in both cases. But wrong in both cases, since the screen isn't calibrated.

                                                                 

                                                                complexity wrote:

                                                                 

                                                                 

                                                                So where does this leave me, I'm still baffeld on how to create an image in photoshop and have it show up pretty well spot on as a image

                                                                (without color profile) in a webpage?

                                                                You won't. Ever. You'll always see the difference between your monitor profile and sRGB.

                                                                You could of course turn CM off for PS, but then you'd have no way to get accurate color.

                                                                 

                                                                There's a difference between consistency and accuracy. You'll have to decide which matters more.

                                                                 

                                                                complexity wrote:

                                                                 

                                                                Do I ditch the high color gamut Dell, if I buy an Apple Cinema display or an Ezo/more graphic based type

                                                                monitors will I be in the same boat? (remembering i bought the i1Display2 to calibrate the monitor but could not get a successful calibration

                                                                because the monitor was apparently just too high in its settings).

                                                                You'd still have the same problem, but a smaller difference between color managed and non color managed, since the ACD will have a gamut closer to sRGB.

                                                                complexity wrote:

                                                                 

                                                                And what do I do with this current file I am working on, leave it as is and just expect the people with high color gamut monitors to put up with

                                                                the hot / over saturation or do I use a layer adjustment at the very top of my layers to desaturate it just a touch, or do I just go back and

                                                                recreate the file in a Adobe RGB workspace (because it was giving me the most accurate color) but apparantly that would not be a wise move.

                                                                 

                                                                Any help and advise is greatly appreciated

                                                                People with a wide gamut monitor will either browse color managed, or be used to over saturated images I'd think (since they always see the www so).... If you use AdobeRGB for web, the image will look "flat" to anybody browsing non color managed with a "normal" screen: I'd guess about 80% of the world.

                                                                 

                                                                All you can predict is what an image will look like on a calibrated screen in a color managed browser.

                                                                There's no way to predict how an image will look to someone browsing non color managed with an uncalibrated display anyway... So I'd go with the majority, which does not have a wide gamut screen. Either embed or don't embed a profile, depending on what matters most: accuracy or consistency. Either way, use sRGB.

                                                                • 29. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                                  complexity Level 1

                                                                  Okay Rene thanks for all your help on this it's much appreciated. So when designing something for the web do you make sure you go to  proof setup, custom and device to simulate set it to your monitor?

                                                                  • 30. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                                    Rene-) Level 1

                                                                    No.

                                                                    I work (and browse) color managed. I don't care what it looks like on my screen in a non color managed browser, since it tells me nothing about what anybody else will see in a non color managed browser, let alone with a non calibrated screen.

                                                                     

                                                                    I post a grayscale on my site, and state "All photos on this website are sRGB, with embedded profile, so using a calibrated screen and colour managed browser ensures correct viewing.

                                                                    If your screen is not calibrated, please have a look at the grayscale below here: You should be able to see all steps, and the difference between the grayscale and the surrounding should be visible."

                                                                    • 31. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                                      complexity Level 1

                                                                      Hi Rene,

                                                                       

                                                                      I thought you might be interested, there is a 700+ post thread about the very issue I was experiencing and guess what the people experiencing the issue all had the same monitor I have Dell 2407WFP-HC

                                                                       

                                                                       

                                                                      Photoshop CS3 color management "Save for Web" problem

                                                                      http://forums.adobe.com/thread/368853?start=0&tstart=0

                                                                       

                                                                       

                                                                      After reading through the 700+ posts there wasn't really a 100% explaination, but it seems as though the Dell 2407WFP-HC really way oversatures in the Save for Web option when the design monitor profile is sRGB in comparison to other monitors. I mean I could put up with the way oversatured images I create on this monitor and know that most of the world out there is seeing the image I originally intended but I just dont think I can myself keep looking at my own work on this monitor!

                                                                       

                                                                      I think I'll be investing in a Apple Cinema display in the near future, will have to go and have a look at the line in person as I've read that a few designers out there arent happy with the glassyness/mirrorness of them.

                                                                      • 32. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                                        Rene-) Level 1

                                                                        complexity wrote:

                                                                         


                                                                        it seems as though the Dell 2407WFP-HC really way oversatures in the Save for Web option when the design monitor profile is sRGB in comparison to other monitors.


                                                                        It doesn't, provided you either choose "use document profile" and embed the sRGB profile.

                                                                         

                                                                        If you choose not to embed the profile, set the preview to "Windows" and tick the "conver to sRGB", but don't tick the "embed profile" box. I think that should work. (Can't test right now, since I'm not on a wide gamut screen)

                                                                         

                                                                        Here's the link to the different preview options in the SFW dialog again: Link

                                                                        complexity wrote:

                                                                         

                                                                        I think I'll be investing in a Apple Cinema display in the near future, will have to go and have a look at the line in person as I've read that a few designers out there arent happy with the glassyness/mirrorness of them.

                                                                        With another display, you will still see the difference between your monitor profile and sRGB when you are browsing non color managed and/or not embedding a profile.... How big that difference will be depends on the monitor profile obviously.

                                                                        • 33. Re: Help me to get to bottom of my web designing color management work flow gremlins! PSCS3
                                                                          complexity Level 1

                                                                          Hi Rene

                                                                           

                                                                          In that thread they were saying that the Dells default monitor gamut must be a little more out of the range of the traditional sRGB when compared with the Apple and others etc and that is why there is more of a notice difference when going to Save For Web with this monitor compared with others. Would that make sense?

                                                                           

                                                                          At the moment I and soft proofing in Windows RGB and also keeping an eye on Monitor RGB (because when I go to save for web it shows the same as what is shown in Monitor RGB). (convert to sRGB in Save For Web is checked, not embedding profiles) And I am also testing on another non high color gamut monitor to see what it looks like, thats all I can do at the moment unitl I can afford to pickup a Apple Cinema or Macbook Pro and test on those.