Photoshop CS3 Web color management
Posted on onsdag, februar 11, 2009 @ 13:19:24 by david
A lot of my earlier websites don't POP like they do on the screens of our graphic designers here. The reason? I had no clue about how to setup Photoshop "Save for web" feature.
Barely Legal
I used to use an old version of PhotoShop back in the early 2000s, and even used PhotoShop CS up until 2007. But I never cared or even noticed a difference with colors on different screens.
When I started using my new MacBook Pro in the summer of 2007, I also bought a copy of PhotoShop CS3 and got all legal and stuff.
This made a huge difference. I was able to use learn about some settings that made the web images look like they did on my screen and not all washed out.
So what and where are the magic settings?
Well I used a few different sites to figure out where and what is best.
Color Profiles - sRGB IEC61966-2.1
What it boils down to is Color Profiles and where and when to use them. The latest browsers are now using color profiles so it is recommended that you start using them too.
The sRGB IEC61966-2.1 color profile is pretty much a standard so you should be using it.
Edit > Color Settings
Under Working Spaces change:
- RGB: sRGB IEC61966-2.1
- Gray: Gray Gamma 2,2
Under Color Management Policies change:
- RGB: Convert to working RGB
- Turn off CMYK
- Turn off Gray
- Profiles Mismatch: Check off "Ask when opening"
Color Proofing
View > Proof Setup
Change to Monitor RGB
View > Proof Colors
Make sure this is checked.
Save for Web & Devices...
When you choose File > Save for Web & Devices you will get the normal dialog box.
Look for the arrow button, to the left, above the "Save" button, and make sure you have "Use Document Color Profile" selected
Look for the arrow button, all the way to the right, above Optimized, and make sure you uncheck "Convert to sRGB"
All set! Now you are creating images that are using a standard color profile, and look exactly the same as they do on your screen.
References:
http://www.usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/
This link has a great tutorial for going through the best options for setting up a new copy of CS3 to work great for the web.
