How to Match Web Save Colors with Your Photoshop Display

August 11th, 2009

So you are working on your latest and greatest design piece in Photoshop, perhaps a website. You put your final touches and you get ready to save for the web. But you notice the saved for web graphic color saturation is not the same as what you have been working with on the screen! Let’s correct that.

The first image is a before view, of when you are still in Photoshop. The second image shows the slight saturation difference after being saved for web. This can drive you nuts, especially when you are trying to save exactly as you had intended.

A good practice is to correctly setup your display in Photoshop from the start. To do this, go to View > proof setup > and select monitor rgb.

Also be sure that you are working in rbg mode and not cmyk. This is under Image > mode > rgb. Big difference! CMYK is for print. And…you must make sure you are working in the correct color profile when creating for the web.

So now that we have that out of the way, lets re-save our document for the web. File save for web and devices… or press ctrl + shift + alt +s. I was once told that if its more than three keys, its not a shortcut, but…I think this is an exception.

Make sure convert to srgb in unchecked. Now save away!!!

Add it!

What do you think?