Setting up the Photoshop Document

  1. Create a new/blank document
    Choose File > New (Ctrl-N/Cmd-N)
    Enter a custom width and height values (width 960px and height 800px)
  2. Show rulers
    Choose View > Rulers (Ctrl-R/Cmd-R)
    (It displays on the top and the left side of the document window)
  3. Pull ruler guides to four corners of the document canvas
    Place cursor on horizontal ruler, click and pull down to the canvas
    Place cursor on vertical ruler, click and pull right to the canvas
    rulers-guides
    rulers
  4. Extend Canvas (This represents the <body>)
    Choose Image > Canvas Size
    Change width to 1360px
    canvas-size
  5. Pull ruler guides to specific areas to represent different sections (<div>) of the page. (#header, #nav, #content, #footer)
    sections

Resouces
Design and Code Your First Website in Easy to Understand Steps
From PSD to HTML: Building a Set of Website Designs Step by Step
Tutorial: how-to code your PSD into a HTML-CSS layout
Design Rules for PSD to HTML

Advertisements