Photoshop troubleshooting - Avoiding shift in colours when saving for web
I have read a-lot about this around the Internet, and there is a-lot of debate about how to stop this shift in colours when you use the ’save for web’ function. I will explain what I do in as easy to understand manner as possible! This is something that is really annoying for Photoshop users, especially those that have little or no understanding of colour profiles and ’soft proofing’.
Here is the scenario - you have an image that you have colour corrected to your hearts content. You the go to ’save for web’ and disaster strikes - the contrast can go a bit wishywashy, saturation is lost and all-in-all your perfect image doesn’t look so perfect anymore! Don’t panic, just follow my simple step to perfect web colour!
1) Firstly, make sure you are working in the right colourspace. It’s best to do this whilst no image is open. Go to Edit>Colour Settings and select either ‘Europe Web/Internet’ or ‘North America Web/Internet’ depending on your geographic location. The only difference here is the CMYK colour profile - both use the same SRGB colourspace for RGB images.
2) Secondly, open your RGB image (you are using RGB for your web image - right!) - AND CONVERT TO SRGB PROFILE IF ASKED. This is an important step - becuase when you choose ’save for web’ your image is automatically converted to SRGB profile (which is more-than-likely creating the colour shift!).
3) Next, let’s get Photoshop displaying that image correctly. Many users view images in Photoshop with no ’soft proofing’ - meaning that Photoshop changes the way it displays colour in the application to emulate various production environments. The option is under View>Proof Setup. I work on an Apple Mac and change this to ‘Macintosh RGB’ - ‘Windows RGB’ can be used to emulate how the image will look on a Windows PC - I guess you would select this if you are working on a PC. It is worth checking your image using the ‘Windows RGB’ soft proofing method in certain circumstances - especially if you have very subtle tonal variations (colours close together) and you are worried about contrast. Also ensure under the View menu you have ‘Proof Colours’ ticked. This step is not essential - but I prefer to know roughly know what I’m getting at the end!
4) Finish up colour correcting your image (you are using adjustment layers for this I hope!) and save this as a separate version for web. The colour corrections you do in CMYK for print will be somewhat different to the colour corrections you do in RGB.
5) Now, the main part - once you have finished up working on your image, it’s time to go to the ‘Save for web’ option under the File menu. You might notice a colour shift straight away - DON’T PANIC!! The Save for web function has it’s own soft proofing colour engine, that probably is set to ‘uncompensated colour’. Change this by clicking on the arrow at the top right of the save for web window - and select ‘Use document colour profile’. Now you have got this selected you should notice the colours change in the preview and if everything has been followed they should now be pretty much exactly the same as your original image in Photoshop!
Pretty simple really - if you have problems, it will more than likely be that your image hasn’t been converted to SRGB BEFORE using the Save for web function. This is the process I follow when working with web images.
You just have to remember to change your colour settings depending if you are working on print jobs or Internet jobs - I tend to do this BEFORE I start working on an image as soon as I start Photoshop (in-fact, because I’m lazy I have an action setup to change between the two!).
It must also be noted that even amongst the same screens (with even the same settings!) colours can vary quite wildly. Everyone has their screens setup to their preferences with different colour, contrast and brightness settings, so you have to be a little cautious with low contrast images (eg subtle tones of grey) as I’ve found that these can be lost, especially on Windows systems.
July 16th, 2008 at 5:15 pm
[...] - bookmarked by 4 members originally found by Zhiliang88 on July 11, 2008 Photoshop troubleshooting - Avoiding shift in colours when saving … [...]
August 25th, 2008 at 1:03 am
Thank you for this tip. After trying it out, I plan to make it a topic for class discussion. Adjusting color seems always to be a major issue both with the Web and Printing. Any hints you have on getting the output to look as good as the screen will be most welcome.
August 29th, 2008 at 9:24 am
Screen to printer colour accuracy is pretty-much controlled by colour profile settings and calibrating your monitor. I find it’s best to calibrate the screen then caibrate output device if required, rather than the other way around.