Design Guidelines for Agencies, Part 1: Calibrating Your Equipment

Newfangled is always looking for ways to improve our agency relationships and make the web development process more productive and enjoyable. With that in mind, Ive decided to write a series of how-to posts to help agencies create useful, well-organized and properly calibrated design files for the web.

Hardware Calibration
If youre designing on a Mac, its important to set your monitors gamma and color space to accepted web standards in order to produce consistent results between what youre designing and what will be displayed on the web. Gamma is a technical term for your monitors luminance and color space refers to your monitors 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 (youre 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 youre 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 youve 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. Youll 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 youre working in (I recommend this) click the Calibrate… button in the color preference window. Apples 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 youve calibrated your monitor, your Photoshop color space needs to match your monitors 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: Whats So Great About Photoshop?