Prior to 1990, there were no standards for displaying nutrition information on food packaging. That year, Congress passed a law requiring the FDA to develop a new, universal label. It had to convey complex information in a manner that anyone could understand, it had to be devoid of any color or complex graphics to withstand poor quality printing and it had to be as small as possible to accommodate the demands of food manufacturers who did not want to relinquish valuable label real estate.

Newfangled works with many advertising and marketing agencies and we love to provide their clients with well-designed, highly-functional web sites. However, some of the art files we receive from agencies are less than optimal for our purposes. Photoshop is Newfangled's standard for creating web page layouts but we've received layouts in many formats including PDFs, Microsoft Word documents, Illustrator files and even PowerPoint slides.

One of the key reasons we create layouts in Photoshop is the ability to build a 1:1 representation of what the final page will look like in a browser, right down to the individual pixels. The difficulty in translating a file from any other program is that it requires practically rebuilding the layout from scratch in Photoshop, using the provided file as a rough guide.

Adobe Illustrator is a great program for building precise, vector-based artwork but it comes up short as a tool for building web pages. The issue lies in importing an AI file into Photoshop and how differently the two programs render artwork. Illustrator is a vector-based program and Photoshop is a bitmap-based (or raster-based) program. If you open an AI file in Photoshop, Photoshop attempts to translate the vector artwork into a bitmap image. This rasterization creates blurred lines along horizontal and vertical edges which can make slicing up the layout accurately for web application difficult, if not impossible.

We encourage our agency partners to provide us with layered Photoshop files whenever possible. This is not because we're a bunch of whiny prima donnas, but because Photoshop provides the best platform for creating accurate web page layouts and the results save time and money for us, for our agency partners and for the agency's client.

Note: This post is a reworking of an October 2007 article in which I recommended a solution for sucessfully importing Illustrator files into Photoshop for the purposes of web page layout. After further research, I discovered the solution is incomplete and not adequate for Newfangled standards.

Next time: How to Set Up a Photoshop File for Web Design

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?