Webvanta Blog: Creating Effective Websites

Setting Up Photoshop Files for the Web

Setting Up Photoshop Files for the Web Image

When you design a web site in Photoshop, there’s a disconnect between the tool you are using and the medium you are designing for. Although it has evolved somewhat, Photoshop was created for non-interactive design, and for a publishing medium that mapped quite directly from Photoshop screen to printed page.

When you’re designing for the web, there’s two big differences in this regard:

  • Being an interactive medium, items on a web site have an element of time and behavior—such as what happens when you hover over a link, or a drop-down menu.
  • All the little pieces that make up a web page are rendered separately, and they need to be positioned using entirely different techniques than exist in Photoshop.

Fortunately, Photoshop has a workhorse mechanism that goes a long way toward helping cross this divide: layers. Layers let you divide you Photoshop creation into many separate pieces, which can be turned on or off at will. This provides an easy way to:

  1. Export each graphic element as a separate item, so it can be appropriately placed and positioned on the web page.
  2. Provide multiple states for a single item. By turning layers on and off, for example, you can show what links look like normally, when you hover over them, and when they have been visited previously.

You also need to think about the limitations of the web environment:

  • In Photoshop, you can use any font you have on your computer. But there’s only a handful of fonts that you can depend on being there for most web visitors, since it is their computer that provides the fonts. This requires thinking very differently about fonts than you do in print. There’s an assortment of techniques you can use to provide a greater variety of fonts on the web, but you need to understand the implications of each technique and any font licensing hurdles. You should ensure that most of your type uses one of the web standard fonts. If you want to use a non-web-standard font for headlines, navigation, or other special places, you’ll need to discuss various approaches with whoever is going to be doing your web coding. (We’ll dive into the complex issue of fonts on the web in a future article.)
  • Give consideration to screen size. If you want to create a design that fills the browser window, regardless of its width, then you’ll need to create a couple different versions of your Photoshop mock-up so you can show how things scale when the window size changes. If you’re going with a fixed width, then you need to thoughtfully choose that width when you set up your file. (We recommend 950 to 980 pixels wide. More on this topic in the next post.)
  • Use a design grid. This is something you may be accustomed to doing anyway. There are a couple of different common CSS libraries that make it easier for others to code your design, and they are based on lots of narrow columns that you aggregate to create wider columns. If you use a grid that matches one of these systems, then everything will fall into place easily. Here’s an example of a Photoshop Grid template for BlueprintCSS and all sorts of templates for the 960 Grid System.

Here’s a few articles that go into detail on setting up your Photoshop files optimally for web development:

In the next part of this series, we’ll explore further the fluid nature of the web, and its design implications.

Add Your Comments

(not published)