960px Photoshop Grid Template

Yesterday I talked briefly about making sure you have a wide enough template when designing mock-ups to prevent yourself from composing with edges of the screen that may/may not actually be where you plan them to be. This morning I had an epiphany, why don’t I have a standard photoshop template for my mock-ups? I scoured the internet to see if someone had done the dirty work for me, but found nothing… so I spent an hour to whip up a nice 960px grid template to speed up mock up development.

How to use the template

960 grid icon It is pretty simple, the template has guide for a three column 20px gutter design. I then have layers of light blocked out colors to help establish both column for using the rule of thirds, and additionally it is broken down into six columns of 20px gutters. You can now flesh out your design on top of the shades thus helping you keep a consistent grid and make placement of elements easier.

For those interested I created a solid band of the most common location of the fold for a 1024×768 resolution, and created folders to help you organize your layers based on their use in the design.

I welcome any suggestions, improvements, alterations!

Download the PSD template



Google Analytics Alternative