Hardware Calibration
If you're designing on a Mac, it's important to set your monitor's gamma and color space to accepted web standards in order to produce consistent results between what you're designing and what will be displayed on the web. Gamma is a technical term for your monitor's luminance and color space refers to your monitor's ability to display a range of colors represented by RGB (red, green and blue). If you need the science behind the terms, check out these articles on gamma correction and RGB color space. There are different standards for Macs and PCs when it comes to displaying color (you're not surprised, are you?) and web standards most closely match those of the PC. Macs come with a default gamma setting of 1.8 and PCs are set to 2.2. So if you're designing on a Mac with a gamma of 1.8, your layouts will be darker when viewed on a PC and some of your subtle design elements may disappear altogether.

Important: The following calibration instructions pertain to creating images for the web. If you've already calibrated your equipment to be optimized for print, make a note of those settings (or save them as custom settings) so you can return to them later.

The simplest way to set your monitor to the correct gamma and color space is to open your system preferences panel and choose "Displays" under the Hardware category. Select the third tab, "Color." You'll see a list of Display Profiles on the left. The highlighted selection is your current color space. Scroll down until you see "sRGB IEC61966-2.1" and select it. If you have a laptop with an external monitor, make sure to adjust both your laptop screen and external monitor. Viola. Now you can close the System Preferences panel.

To calibrate your monitor for the lighting conditions of the room you're working in (I recommend this) click the "Calibrate…" button in the color preference window. Apple's Color Assistant will guide you through each step and allow you to set the gamma and white point manually. Simply select 2.2 for the gamma and D65 for the white point and save the custom calibration with your name and the date so you can find it in the profile list later.

Software Calibration
Now that you've calibrated your monitor, your Photoshop color space needs to match your monitor's color space. In Photoshop, select "Color Settings" from the Edit menu. This will bring up the Color Settings panel. From the Settings pull down menu, select "North America Web/Internet." This will set the RGB color space to "sRGB IEC61966-2.1" and fill in the appropriate settings for the other fields. You can save this setting as a custom by clicking the "Save…" button and giving it a name.

Next time: What's So Great About Photoshop?