colour madness…

colour swatchesThis has been an ongoing headache of mine – colour calibration – colour profiles – and how to avoid that annoying colour shift when you save your image for the web…

I was working on a design for Lawrence Griffiths (LookingForAWebsite) who is setting up a website for a primary school. As the school is set in trees – the design brief was to convey this feel, meaning lots of green tones and shades. All was going fine until I wanted to upload the mockups as optimised jpgs for preview and feedback. With my file setup as RGB, 8 Channel and the ‘convert to sRGB’ set in the ‘save for web’ window – I thought I was doing everything I needed to simply optimise my mockup.
But how wrong I was… again, I hit the odd colour shift problem – my carefully chosen green tones taking on a completely different shade as soon as I went into the ‘save for web’ window… :’(

I’ve had this problem before and always somehow managed to get the result I wanted. Knowing I have only scratched the surface as far as colour calibration is concerned – I went searching for answers… and yet again: the kind kowledge-sharing experts to the rescue :-) I still don’t know enough about colour profile but as I am now working with a much better setup I wanted to share what I’ve learnt.

On their beautifully crafted web design blog, Doug Avery from Viget wrote an article on this very issue: “The Mysterious “Save For Web” Color Shift“. Doug gives a 3 step solution to getting your colours right for the web: setting up Photoshop to use the correct colour profile, setting up the Proof to view any given file on the right monitor setting and how to deal with the default presets in the ‘save for web’ option. The article received a huge number of comments – some by happy webdesigners which this solution worked for, some by colour experts who went into more depth on this issue discussing many more aspects of monitor calibration.
If you are interested in this issue you should definitely read this article and all the comments. It seems some people with more expertise disagree with Doug’s advice and recommend different solutions. As I am not an expert myself – I would suggest you read the comments yourself and follow up on any links to other articles given.
A must-read should be “Best Practice Colour Setup for Web Designers” by Nina Richards.

The comments show some tension between the practical wedesigners who are happy to run with the first solution given (I have to admit that this is what I did as time pressure was on I did not have time to read all the comments) and the colour experts whose knowledge runs a lot deeper. Only after Doug’s solution didn’t work for me did I go back and take time to read the comments – and JeanP came to my rescue.

Jean described and explained clear steps for me to take in order to solve my green shift problem – and it worked beautifully :)  Please bear in mind that this is by no means the one and only perfect solution – rather what I setup following Jean’s advice.
So here is an outline of what I did in order to keep my colours true to their original.

  1. screenshot of gamma settingsset system preferences for display: System Preferences > Display > Calibrate

    → follow the instructions setting Target Gamma to 2.2

  2. screenshot of photoshop settingsnext, open Photoshop (or close all files) and edit the colour settings: Photoshop > top menu > edit > color settings

    → choose the appropriate setting for your location
    please see the screenshot for additional notes.

    NOTE: I am not sure yet how to sync colour for all Creative Suite apps.

  3. screenshot of proof setupPhotoshop: proof setup: top menu > view > proof setup

    → choose ‘Monitor RGB’ to view the file as it would display typically on an average RGB monitor.

    Jean says: “Don’t adjust your color after while in Monitor Color Preview, just consider it a preview of how the image will look in Firefox. Turn the preview back off. “

  4. sRGB settings screenshotICC check box
    → ‘save for web’

    NOTE: the first screenshot shows the default option of ‘convert to sRGB’ which I have always been using. In this case, if I understood everything correctly, it should not affect my image as it is already sRGB.

    Jean suggests to save the image in 2 different versions and previewing it in the different browsers to choose the final version for use on the website. She kindly set up a sample with my image saved in the 2 different versions – showing a clear difference of the colour difference in Safari and Firefox – please do have a look for yourself.

Well, that is it. A HUGE thank you to Jean for all her input, help and advice on this. I feel I am now much better setup and doubt I will have to struggle with my colours as much as I did before – still, there is still a lot to learn.

09/06/2008 Photoshop,blog,tips & tricks

10 Responses to “colour madness…”

  1. Gravatar Ilze says:

    Thanks, Prisca :)
    You’ve got the talent to teach :)

  2. Gravatar Jean P says:

    Hi Prisca,

    This is a nice post.

    Since you are writing for students, let me point out the root flaw in Doug’s approach. He feels his Photoshop display should be a perfect match to his browser color. This is not an appropriate goal.

    Rather, our goal is that Photoshop show us *accurate* color. Most browsers aren’t capable of accurate color, although Safari is if the image is posted with a profile.

    Our goal in Photoshop is accurate color in a known standard (usually sRGB for the web) that will minimize the shift when the image is viewed on the Web with no color management.

    A small or moderate color shift in Save for Web when viewing without the document’s is not only acceptable, it is expected, because Save For Web is previewing what the browser will display.

    We also previewed what the browser will display when we used Monitor Color for our proof setup within photoshop.

    Some of the newer monitors available recently are capable of significantly more saturated color display than previous generations of monitors. Unfortunately, if you have one of these you may see a more noticeable jump in saturation when the image is viewed without a profile. It is important not to try to compensate for this, because most viewers will not have these wide gamut monitors. It is important instead to work color managed within Photoshop, and trust you Photoshop display.

    Hopefully color management on the web will continue to develop in the future and help us out with this issue.

  3. Gravatar prisca says:

    Thanks, Ilze ;) glad you think so :)
    You’ve certainly come far this last year – making me proud ;)

    Jean, thanks for your comment. I am glad you like the post – wanted to sum it up as to the point as possible, as a good starting point for the colour issue.

    Thanks again for your insight – it’s been a great help :) much appreciated :)

  4. Gravatar Jahed Choudhury says:

    Thanks Prisca, its a brilliant article. Although it will take me a few reading to grasp the idea. Is it same process to calibrate in PC as well? Prisca am I invited to your exhibition.

  5. Gravatar prisca says:

    Jahed, thanks ;) glad you find it useful :)
    I am not sure about PC calibrations myself at the moment and too busy to look into it, sorry.

    PS: about our show – of course you are ;) here is the flyer.

  6. Gravatar riccardo says:

    Yes Prisca, I agree with Ilze…You have talent to teach!
    Dreaming a screenshots wordpress tutorial in a near future from u :) hugs Riccardo ;)

  7. Gravatar prisca says:

    Thanks, Riccardo :-)

    about WordPress notes – yes, I am hoping to get a few bits up. But I cannot say when that will be, sorry…
    For now – you might want to use Elliot’s Starker’s Theme and take it from there :)

  8. Gravatar zara says:

    thanks prisca for this one very helpful

    zara ;)

  9. Gravatar taylor says:

    Is there a color guide anywhere on the site?

  10. Gravatar prisca says:

    Sorry, Taylor, no I don’t have a colour guide on my site here…

graphiceyedea prisca schmarsow – portfolio

portfolio