5 Replies Latest reply on Oct 6, 2010 1:33 PM by MJOrts

    Color managed PSD sliced for web shifts colors

    cristi.b

      Hello.

      I have a problem regarding color managed psd files. It's not the first time I had it and I've been struggling to FULLY understand color management across OS's and computers.

      I have received a psd file (created on a Mac) that has a color profile embedded, Cinema Display HD Calibrated. Photoshop gives me the usual warning (Keep, Convert, Don't color manage). I've tried all 3, one after the other. I use the default sRGB color profile when converting.

      I slice the psd and produce 24b PNG's.

      The colors are either shifted, on all computers (win or mac) either ok on windows (colors in web layout looks the same as in psd) but not exactly as the psd on mac, or washed out on mac.

      PS5 has the option to convert the png's upon saving for web to sRGB, I've also tried that.

       

      My FIRST question is: Is it possible to produce a layout that looks exactly the same on all computers (win or mac) if I start with a psd with a custom color profile embedded? And by look exactly the same I mean it to look like the psd looks on a mac?

       

      My second question makes sense only if the answer to the first one is "yes". If yes, WHAT can be done, or what can I read to understand what can be done so that the layout looks the same on all browsers and OS's ?

       

      Thank you.

        • 1. Re: Color managed PSD sliced for web shifts colors
          solitaire-game

          Does anybody know the answer?

          • 2. Re: Color managed PSD sliced for web shifts colors
            warzenbeisser Level 1

            Hello Cristi,

             

            There are many variables involved, and you cannot control all of them for certain; obviously, there is no way to compensate for a non-colour managed browser or a missing/wrong display profile in the viewer's system. The best you can do is convert the original PSD file to sRGB before slicing, and then make sure all slices are either in a format that has the sRGB profile embedded, or all slices are without profiles.

             

            For the resulting website to look identical on both Mac OS X and Windows systems, both need to have a calibrated and profiled monitor with the same settings for white point and gamma. sRGB uses 6500 K and gamma 2.2 which is also roughly matched by the default settings of a new uncalibrated monitor, while older Macintosh systems might have a default gamma setting of 1.8 that makes images appear brighter.

             

            You can refer to the following page (in German) to check whether your browser has colour management enabled:

             

            http://www.topics.ch/eas/foto/monitor_dt.htm

             

            If it's on, the two images labeled "sRGB" and "ProPhotoRGB" should look the same; if the browser does not have colour management, or has it disabled, then the "ProPhotoRGB" image wil display in less saturated colours than the "sRGB" image (because ProPhotoRGB has a much larger gamut than sRGB) and also darker (as the gamma value is 1.8 in ProPhotoRGB).

             

            With colour management on, the four adjacent rows of colour squares below the two cow images will display differently and reflect the gamut and gamma of each profile's colour space, otherwise you get solid columns of identical colour and can't see the four rows corresponding to the profile labels at right.

             

            Eric

            1 person found this helpful
            • 3. Re: Color managed PSD sliced for web shifts colors
              MJOrts Level 3

              Hi Cristi,

               

              As Eric mentioned, your browser's color management (or lack thereof) and your monitor's color management could both be effecting your results and the mismatch between your mac and windows final color outputs, but I think we'll need more information to solve your problem.

               

              It appears your file was originally embedded with the display profile of your mac monitor, judging by it's name: Cinema Display HD Calibrated.  The "Calibrated" part of the display profile name suggests that your monitor was either calibrated with a 3rd party monitor calibration device, or was calibrated "by eye" using the apple's own Display Calibrator Assistant, which you can access if you go to System Preferences > Displays > Calibrate...

               

              Could you confirm that this profile is your monitor's display space?  Did the file you are working with come from your mac computer, is it a screenshot?  Or did it come from someone else?

               

              If your monitor was calibrated using the OS's Display Calibrator Assistant, you'll have a very hard time getting consistent color on this monitor and any other monitor, because this assistant adjusts the monitor's display characteristics based on your own subjective visual evaluation.  The biggest drawback with this is that the gamma of your monitor could be very different from other displays and color profiles, since the gamma is being adjusted based on preference instead of set to a known number (you do have the option to set this to a known number if you check on expert mode).

               

              You mentioned three different outcomes, but you didn't link them to which workflow you tried (keep vs. convert. vs. don't color manage):

               

              "The colors are either shifted, on all computers (win or mac) either ok on windows (colors in web layout looks the same as in psd) but not exactly as the psd on mac, or washed out on mac."

               

              Could you tell us what workflow gives which result?  Also, are these results that you've mentioned results viewed inside of a web browser, or results viewed in Photoshop on each computer, mac and win?  If it's a web browser(s), which ones are you using on each computer?

               

              Could you also mention what Color Settings you are using for Photoshop on each computer?  This is accessed by Edit > Color Settings in Photoshop.  If the settings for the RGB working space don't match on your computers for these settings, this could also be part of the problem (if you're using the "don't color manage" option).

               

              To answer your last two questions:

               

              1. Yes, this is possible to a reasonable degree and is what color management is made for.  It may take only software settings changes, hardware settings changes, or a combination of the two.

               

              2. I would recommend picking up Real World Color Management: Industrial-Strength Production Techniques by Bruce Fraser, Chris Murphy, and Fred Bunting.  This is one of the best books written on understanding and implementing color management.

              1 person found this helpful
              • 4. Re: Color managed PSD sliced for web shifts colors
                cristi.b Level 1

                Hello.

                First of all, thank you for your lengthy answers and your time to give them. It's appreciated.

                However this problem is behind me now, the project has been finished (the original problem is still in limbo. What the client accepted was a another set of psd's from the designer with more contrast and sturated colors).

                 

                To answer your questions in part: I didn;t produce the original psd's, I imagined Cinema HD Calibrated was a custom color profile because of the name, however I have no idea how the designer (located in another country) obtained it.

                Also, at that time, yes, I had the versions tied to a certain flow, I don;t remmber them right now

                 

                What I learned, though, is that yes, I should always either convert the PSD file to srgb before starting, or when exporting from web using Photoshop's Save for Web dialogue.

                 

                A strange thing though is that I've noticed that for example if I export a slice as png, with convert to srgb checked, and then open that png in photoshop, alter it and save it with Save As I will get shifted colors. The correct way seems to always export for web. But i thing (i get this while writting this actually) this is because when I use Save As Photoshop uses my working profile and that could be different from sRGB, right? Otherwise I cannot explain this difference between Save As and Export for Web.

                • 5. Re: Color managed PSD sliced for web shifts colors
                  MJOrts Level 3

                  Glad to hear your workflow problem is solved.

                   

                  For the last item you mentioned, it sounds like this behavior might be related to how Photoshop handles file types that can't support embedded profiles (like PNG and GIF).  If you have the missing profile warning option checked on in your color settings, these file types will be handled the same as an untagged image (a warning dialog will pop up asking if you want to leave as is, assign the working space, or assign a different profile).  If the missing profile warning option is unchecked in your color settings, the PNG will be assigned and then converted to the working space upon opening, making it look like it's a tagged image.

                   

                  My guess is that, like you mentioned, your RGB working space is different from sRGB.  If this isn't the case, finding this additional information could probably solve it:

                   

                  1. what the profile of your original image was (before the initial step of slicing and exporting through Save for Web)

                  2. what your RGB working space is (Edit > Color Settings)

                  3. what you did to alter the image

                  4. what file type you selected in Save As, and whether you had the "embed color profile: xx.icc" checked on in the Save As dialog.

                   

                  No worries if you don't feel like investing more time in this though.