One thing that many people forget to notice when making graphics in Photoshop are color profile settings. By mastering the use of color profiles you can ensure that your images display the same across as many different computers as possible.
I can’t tell you how many times I’ve ‘saved for web’ only to proof the image in Safari or Internet Explorer to find that colors are off in one or the other. Many browsers aren’t color managed, but even more are. This is because color profiles for the web were never standardized and images look different for a number of reasons:
- Every computer and monitor display colors differently by default.
- Every browser displays colors differently.
- Some CSS stylesheets will cause colors to display differently.
- Sometimes a web service (like Flickr) reads or embeds color profiles in images to optimize them for viewing.
So if there are so many different standards, how the hell can you make sure you optimize your images for all of them? Well, to reduce the chaos the International Color Consortium introduced a universal color management system that would function transparently across all operating systems and software packages. In 1993 they began working on the ICC Profiles that we use today. With these three steps you’ll learn what to do to make sure your colors remain close to what you originally intended them to be.
Note: The following steps are for Mac workflow, if you’re using a PC there will (of course) be differences.
Step 1 – Calibrate your Display
- On your Mac go to ‘System Preferences’.
- Select ‘Displays’.
- Select ‘Color’.
- Select ‘Calibrate’ and follow the steps.
- Go to Applications >> Utilities >> ColorSync Utility
- ‘Verify’ your color profile settings, if you find any errors then ‘Repair’ them.
- For more information on how to use ColorSync visit Apple’s pro tips.
Step 2 – Calibrate Photoshop
- Open Photoshop and go to Edit >> Color Settings.
- The closest thing to a ‘standard’ ICC profile is the sRGB IEC61966-2.1 so make sure that this is selected and for CMYK use U.S. Web Coated (SWOP) v2. For a more detailed explanation of what each option does click here.
- Next, close all documents and go to View >> Proof Setup >> Custom. The settings here will allow you to simulate what your document will look like after printing or publishing online.
- I can’t go into the full details of soft-proofing but you may want to try this page for more details.
Step 3 – Saving an Image
- Now that you’ve optimized your system to handle color in the best way possible you need to save your images so that they will display on the web like you want them to. Select Edit >> Convert to Profile (not Assign to Profile). Choose sRGB for the image’s Destination Space and click ‘OK’.
- If you open the Convert to Profile dialog box again, you’ll see that both the source and the destination spaces have changed to sRGB.
- We’re doing this instead of using the ‘Save For Web’ option. Doing this in the program instead of in ‘Save for Web’ attempts to maintain the original colors as closely as possible.
In all honestly, someone could write a book on just this subject alone but these three quick steps should help you begin to improve the way you work with color in Photoshop.