10 Pixel Grid System
950 Pixel BlueTrip Grid:
Since publishing this article, I have since moved to the BlueTrip CSS framework and modified my original 10pixel grid to work with the 950 pixel grid layout used by BlueTrip. It's a minor change and you can do it yourself easily. However I just thought I would make it available for download to make your life easier. Download the BlueTrip 10 pixel Grid Photoshop Template
960.gs 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.
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.
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 comments so far ↓
Thanks Mark
Leave a Comment