Design Guidelines for Agencies, Part 2: Whats So Great About Photoshop?

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 Newfangleds standard for creating web page layouts but weve 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 were 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 agencys 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