Skip to main content
C
complexity
Known Participant
July 9, 2009
Question

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

  • July 9, 2009
  • 5 replies
  • 22311 views

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

    This topic has been closed for replies.

    5 replies

    C
    complexityAuthor
    Known Participant
    August 22, 2009

    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.

    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)

    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.

    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!

    ReneDamkot
    ReneDamkot
    Inspiring
    August 22, 2009

    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.

    C
    complexityAuthor
    Known Participant
    August 23, 2009

    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?

    ReneDamkot
    ReneDamkot
    Inspiring
    August 2, 2009

    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.

    P
    Printer_Rick
    Inspiring
    July 9, 2009

    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...

    C
    complexityAuthor
    Known Participant
    July 10, 2009

    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.

    P
    Printer_Rick
    Inspiring
    July 15, 2009

    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).


    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.

    A
    Anonymous
    July 9, 2009

    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.

    Ramón G Castañeda
    Ramón G Castañeda
    Inspiring
    July 9, 2009

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices