Turning a Photoshop comp into a web page

Updated: August 5th 2013Published: June 18th 2013by Orde Saunders

Inspired by a question on Twitter this article outlines how I turn a PSD comp into a web page.

Don't build to the PSD

This may seem a bit glib but thinking about building the PSD isn't the best way to approach this, the PSD is a static image that has been constructed in a different manner to a fluid web page and by chasing the exactness of the PSD you are likely to paint yourself into a corner. You will want to use the PSD for reference in the steps below but don't think of it as the destination - think of it as the directions.

Build the layout

Start by creating a wireframe from the PSD, look at the design and work out what it would look like as just the skeleton of the layout. This doesn't need to be very complicated or even polished - this is just for your use. Taking a few sheets of printer paper and pencil is very effective and may well be all that you need.

Shown below is one of the layout wireframes (including class names) used during the responsive rebuild of Tesco Bank.

You will also need to work out the dimensions of the grid used to set the horizontal dimensions and the vertical rhythm used for the vertical dimensions. The designer should be able to provide these but if they can't then you'll need to work this out for yourself - Responsive Web Design provides a much better explanation of this process than I ever could.

With the wireframe and the grid dimensions you can now start building the layout. Only build the layout using browser default styles and colours (and any CSS reset) - don't add fonts or colours at this stage. When you are finished with this stage you should have a web page that is little more than a wireframe.

An example of the CSS for an element you might have at this stage is:

.example {
  border-width: 0.0625em; /* 1px / 1em @ 16px */
  float: right;
  padding: 1.25em 5%;
  width: 25%;
}

Build the theme

Once you have the layout you can then start adding the theme styles such as colours, backgrounds, typography etc. Ideally for this you would have a pattern library that outlines styles for individual elements (paragraphs, links, buttons, menus, etc.) but if you are working from a PSD comp you will need to create your own by chopping up the design into small pieces that represent the individual elements. I often find it's easier to export the PSD to a flat PNG as it's much easier to work with a flat image than the large number of combined layers of colours, masks and effects that are frequently used in a PSD but are completely inappropriate for web. (Of course, you will want to keep the original PSD intact to get get some of the colour and font meta data that gets lost in a flat image.)

On larger projects I have found that in the long term, it's worth putting the theme declaration into a separate CSS file that is incorporated into the main production CSS file as part of the build process. This also makes maintenance easier as changes to the layout will be in one file, changes to the theme will be in another. Future updates to the site, such as a rebrand of the visuals or a reorganisation of the layouts can be done by crating a new layout or theme CSS file.

The theme CSS for our example element might look like this:

.example {
  background-color: #ffffff;
  border-color: #c0c0c0;
  border-radius: 0.3125; /* 5px / 1em @ 16px */
  color: #000000;
}

Combine the theme and the layout

Once you have the theme and the layout you can now go back to the PSD and check that, when combined, they produce the page as designed. It's probable that the page isn't pixel perfect but that's OK, it's not reasonable to expect that modern fluid websites will be pixel perfect renditions of static images which is why static images are no longer (if they ever were) the appropriate way to brief in web designs to developers.

Not building a wall, making a brick

For me, the ideal way to receive the brief for a web page is for it to be supplied as the wireframes and the pattern libraries. This has the added advantage that, if no comp is produced, there is no expectation that the finished page will be a pixel perfect rendition of the comp. It also means that the designer is not only thinking about layout and theme separately but, in producing the pattern library, they are thinking about the individual elements in isolation which means they will be modular and easier to build.