Organizing Photoshop for Website Programming

As we discussed in the original Web Design Tips newsletter, Photoshop is the best tool for web page layouts. Web graphics (with the exception of Flash files) are pixel based rather than vector based. This makes Photoshop a better tool for web page layouts. In contrast, when designing in vector based programs like Illustrator or Freehand, your designs can change quite a bit when the site gets skinned because subtleties like type size and aliasing, and color specification can shift when translating to the web.

To work efficiently with our partners, we offer the following specifications for setting up your Photoshop documents. The more tightly you are able to follow these guidelines, the more efficiently we will be able to skin your deigns.

Fonts: If the developer does not have the fonts you used in your document, you may need to rasterize the font layers. In general, however, it is better to leave the fonts as text and include them when sending us your layouts. In the event that rendering the font layer is necessary, please label the layer with the font, size, and leading used.

Save settings: When saving your file, make sure it's in RGB mode but don't embed any color settings. If the developer has their Photoshop application set to convert embedded profiles, your carefully chosen colors could shift considerably.

Background images: Because the web is a dynamic environment, you will need to make sure any complex background graphics fit. Check that they extend beyond the right and bottom of the browser window so that they are large enough to accommodate an expanded browser window (see the Web Design Tips newsletter for more about "stretching" background images).

Cleaning Up Your Document: In the course of the creative process, you may try a lot of different things to get the "look" you think the layout should have. When finished, the multitude of layers in a Photoshop document can resemble the internal wiring of the space shuttle; only the original designer has any idea what they are and where they lead.

Simplify your document as much as possible. Eliminate layers that the developer would end up flattening anyway. For example, flatten any layers that will be part of the background. You'll need to pay attention to any blending modes you've applied to layers when merging them together. Merging layers one at a time will eliminate any surprises. Eliminate any empty layers (believe me, this happens) and layer styles you've turned off.

Using layer folders is a great way to organize items that are part of a group but shouldn't be merged into one layer. Folders are also good for grouping items together that are part of a "rollover state." By grouping them in a folder you can turn them all off with one click and the developer knows that all of those layers are part a rollover state.

Clearly labeling your document will make skinning the site much easier. First, organize your Photoshop layers in a logical order (background layer, static graphics, type layers) and put layers together that are part of a group. Make layer labels clear. "Main navigational headers" is more helpful than just "nav." If a layer is a rollover state, make sure the label reads "rollover."

It is much easier to interpret Photoshop documents if you break the home page layout, main page layout, and sub page layout into separate Photoshop files. If you are using a color code design approach for each main section, make sure we have separate documents for each section. Of course naming your documents appropriately helps as well. Pages that have carefully designed content for low-level design elements such as tables, charts, product detail pages, etc., should also be provided as separate Photoshop documents.

We have provided a sample Photoshop file set up according to the specifications mentioned in this newsletter.

The more we are able to integrate our process with our partners, the more efficiently we can develop your sites. We want our agency and design partners to be as profitable as possible when working with us on web development projects. These principles, as well as Newfangled's ongoing design consulting, help our partners to become more and more comfortable and confident when designing for the web.