Question About Converting a PSD to a Web Page

This week’s question comes from Leo Jacobs.

I’m finding it rather difficult to understand how should I take the photoshop .psd file and convert it to a well coded HTML / CSS webpage.

Sherpa Chris Casciano answers:

First, Organize the PSD

Visually analyze the site design and the component parts that make up the web page structure:

  • Identify what is page content and what is background decoration
  • Separate global elements from page specific elements
  • Identify  different interactive states

Photoshop has a number of great tools to organize the layout and help you with this analysis:

  • Guides (View > New Guides) help you visualize grids and margins.
  • Layer Groups (Layer > New… > Group) help organize “like” layers that make up individual page components for easy hiding.
  • Layer Comps (Window > Layer Comps) can be used to cycle through page states such as rollovers or different page content options by “bookmarking” the visibility states or position of layers.

Second, Build your Document Structure and Global Styles

Before you chop up any background images, icons or photos, start writing your HTML and CSS based on the global elements you identified, such as:

  • layout grid
  • arrangement of columns
  • baseline typography

At the same time, using the Guides you created, identify other global styles like margins and padding. 

Third, Dissect and Build Individual Content Components

After getting the page structure and global styles in place, move onto individual page elements such as the site-wide navigation or sidebar content. Keep in mind the earlier work you did deciding what is decorative (CSS styling) and what is content (HTML text or media).

Deciding which design details should be CSS and which should be inline graphics may be the hardest part of the process. Work with your site designer to decide what can be accomplished with CSS properties such as borders, opacity, gradients, etc. Small prototypes or demos can really help open up communication about how some of these details are translated:

  • Is this gradient in the background fixed height or 100% the height of the content block?” 
  • This is what would happen if there’s more content then you thought. Is that appropriate?” 
  • Did you want that special style on the first paragraph of every page on the site or should it be optional?