This 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.
- set system preferences for display: System Preferences > Display > Calibrate
→ follow the instructions setting Target Gamma to 2.2
- next, 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.
- Photoshop: 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. “
→ ‘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.