Design Guidelines for Agencies, Part 4: Preparing Website Designs for Production

At Newfangled, we refer to the process of applying the design of a site to its structure as skinning. Not horribly original but an accurate description. Preparing Photoshop files for skinning is an important step in web development and they should be organized in such a way that any developer or programmer can understand and work with them. It may require investing a bit of time to properly prep design files but it will ultimately save production time and can result in cost savings for your client.

Photoshop Documents
First of all, create separate Photoshop Document (PSD) files for the home page and sub pages. As efficient as it may seem to use one PSD for all your page layouts its actually easier to work with small, multiple PSD files, each containing a single template. This method also reduces the chance that something will be missed during the skinning process. To keep the total number of PSD files small, represent the entire site with a home page layout and a handful of sub page templates. Simpler is better.

If you want to score extra points with your web developer, create a style guide PSD that provides some Cascading Style Sheet (CSS) specs for the sites content. CSS defines a websites common page components such as the font size and style for body copy, page headers, sub heads, etc. Download a sample PSD file (1.7MB)

Optimizing Photoshop Layers
In each PSD, layers and layer folders should be well organized and labeled. Dont make the developer guess what layer 56 contains; provide useful descriptions like main nav over state. Use layer folders to group related layers together and delete any unused layers or layer styles to reduce clutter and shrink the PSD file size.

To highlight layers that have special functionality, assign them a color. For example, if youve created an over state layer for a navigation
graphic, assign it a color and leave the layer in the off state (by
clicking on the eye icon next to the layer). To assign a color, right-click (or control-click) on the layer to bring up the layer features menu. Select Layer Properties… and in the resulting dialogue box choose a color from the pull down menu. You can assign colors to layer folders as well (the color highlight will be applied to all the layers in the folder).

Another useful tool for highlighting special features in your designs is Photoshops Notes Tool. Youll find it in the tool palette (it looks like a small sticky note). Place these notes anywhere in your layout; they show up as small yellow icons that you can double-click to edit. Keep the text of these notes brief; any complex instructions for your developer should be stated in an e-mail that can be printed out for reference.

Working Files vs. Skinning Files
I keep two copies of each PSD when Im preparing files for production: a working copy with
all the artwork and text as separate, non-flattened layers; and a
skinning copy that is optimized for the developer.

Working files are useful for making edits later when the client wants to change a background graphic or update the main navigation bar. All your graphic text (with custom fonts) and multiple-layer artwork will be intact and easy to change.

Skinning files are the PSDs that you will give to your developer. Graphic text should be rasterized as artwork to eliminate the need for custom fonts during the skinning process. Text that will be generated as HTML should be retained as a text layer with anti-aliasing disabled. And complex graphics should be flattened to keep the PSD file simple and small in size. Download a sample PSD file (2.2MB)

These are some basic organization and optimization tips. As you work with more and more PSD files, youll discover additional methods for reducing production time, saving money and keeping your web developer from grumbling under their breath every time you send them a layout.