Colour shifting in Adobe Photoshop / Illustrator


Here's a little tip for fellow designers and website developers regarding shifting colours when exporting from Adobe Photoshop / Illustrator via "save for web".

What a headache this issue can be. Mostly because it seems so illogical at the time. It normally goes something like this: When you save for web the colours which come out, do not marry up the the colours of the original. There is an evil "shift" - a vandalism of the beautiful colours you have selected to be saved for the web.

Please note: We are not talking here about setting up your colours so that everyone else in the world will see exactly the same (an impossible task). More the fact that we get this difference in output from the original Photoshop/Illustrator file and the outcome of the 'save to web' file. Also we take no responsibility for your system - you play around with your settings and it's on your own heads!

To overcome the differences in colour you need to ensure your Illustrator and Photoshop have the same / similar colour profile as most browsers. To do this set your Illustrator and Photoshop colour profiles off (by going to 'Edit' > 'Colour Profiles' and selecting under Working Spaces, 'Monitor RGB'. Your Monitor RGB can be set in your operating systems preferences (ours here at Attitude are set to "sRGB IEC1966-2.1" this is best because sRGB is what most browsers display). Hopefully all the colours will be consistent now as your Adobe programs will output the same colours as your browser as they will all have the same colour profile.

When you save for web, be sure that in the process you are not adding another profile onto it (small arrow in save box should not have anything ticked but "convert to sRGB").

Once this is done anything 'saved for web' should be consistent, meaning the shifty shift will have been defeated!

To read more about this exciting subject check out this excellent article.

Comments

Another issue that is common in slicing is for different image types to export differently. For example, a transparent PNG for the header of a module, a repeating gif for the "body" of it, and another PNG a the bottom. The easiest way around this? Use Fireworks for image slicing and exporting, taking full advantage of the native gamma correction in the tool. QED.