I am Canadian, so I spell colour funny. It is the UK spelling, the Queen’s English some say. I am also a Web Designer so in order for CSS and HTML to work colour must be spelled the American way, so I will use that spelling from now on. Anyway… in this posting covers how to “save for Web” in Photoshop and preserve color settings.
Three Steps to Color Perfection.
Step 1: Color Profiles
Color profiles define how Photoshop interprets the raw color data in your files. That’s right: That means they change how you see the colors. This kind of precision is great for photography and print design, but it’s got to go if we’re making a website. With no images open, go to Edit / Color Settings.
Fig. 3 : Changing to Monitor Color.
We’re going to essentially turn off all this profile nonsense by changing the top drop-down to Monitor Color. Let’s uncheck “Ask When Opening” while we’re at it….from now on, when you open an image that has a color profile, Photoshop will give you a brief heads-up that we’re tossing it out.
Step 2: Proof Setup
Now, let’s go up to View / Proof Setup / Monitor RGB. This is to make sure Photoshop won’t be showing you skewed colors on your nice new profile-less images. A note, though: If you’re on a Mac/PC and want to see how an image is going to look on the other’s default gamma setting, you can come back here and test using “Windows RGB” or “Macintosh RGB.” Just remember to switch it back, or you could accidentally be designing in (shudder) PC mode.
Fig. 4 : Make sure you’re not viewing the wrong proof colors.
Step 3:
After all this hard work, Photoshop still wants to sneak color profiles into your images. Most web browsers ignore them, but new Safari and Firefox builds DON’T, and IE can be set to work with them too. This can result in the weirdest cross-browser headache yet, so we need to make sure the colors we save out are sans profile.
Fig. 5 : Convert to sRGB is an evil setting.
Thankfully, it’s an easy fix: Open up any image on your machine and File / Save For Web. Next to the Preset option, there’s a sneaky little arrow…click it and uncheck “Convert to sRGB.” (Note: From what I can tell, this is only the default setting in CS3)
Congratulations
Your color woes are over! Or maybe not. If you followed these steps and your color accuracy test failed, leave a comment with your results.