Accessibility Navigation

10 Pixel Grid System

David Perel and I share a common thought process when it comes to creating layouts. Keep it simple and keep it flexible. We both believe in a 10 Pixel Grid System. For some time I have thought about writing a framework similar to 960.gs, but have determined that it's just too much work, and I am not that motivated. So instead I thought I would just share my Photoshop template with you.

Download the Photoshop file

Once you have the file open you should see the Guides, if not, press cmd+; to turn them on. If you want to add some additional structure to your design, then you can also turn on the Photoshop Grids (cmd+') The default grid overlay does not work al to well with our template so open up the photoshop preferences (cmd+k) And go to the "Guides, Grid, Slices & Count…" tab.

Photoshop Preference Pane Screenshot

In the Grid section change the Gridline to every 60 pixels and the subdivisions to every 6. This will give you a nice 10x10 pixel grid for your document.

2 responses to “10 Pixel Grid System”

  1. On Mar 23, 2009 at 5:34 PM - Kimberly Said:
    Hey mark, I could not get the file to download correctly - wondering if there is a link problem.
  2. On Mar 23, 2009 at 5:39 PM - Kimberly Said:
    No worries - I had to right click as when you just click the link it comes up with an error - a bit of a workaround

    Thanks Mark

Leave a comment

Leave this field empty: