960 Grid System
This tutorial was written by the then owner of legittutorials.com . I bought the site and tutorials from him and have moved it to designertuts.com
Hey everybody, this is quick tutorial on how to set up, and use, the 960 grid system in Photoshop.
In every layout tutorial I write, I always use the 960gs. Instead of explaining it over and over again, I figured it would be easier to write a separate tutorial which i can refer people too.
What is the 960 Grid System?
960 Grid System is a transparent grid which you use to keep your boxes aligned and even in photoshop. The 960gs comes in 12, 16, and 24 column versions.
How do I set it up, and use it, in photoshop?
Basically you open up a fresh document (I use 1000x1000px), then drag the 960gs to it then center it. See below for a step by step tutorial.
Step 1: Download 960gs
Go to 960.gs and download it. This download will come with templates for all kinds of software, all we will really need is the photoshop ones.
Step 2: 12, 16, and 24
Open up the download and go the photoshop directory (templates>photoshop/). In the photoshop folder you will find the 3 templates (12, 16, and 24).
Step 3: Open in Photoshop
The 12 column template is best fitted for simple layouts, and the 24 column is for complex layouts. I generally use the 16 column for all my layouts. Open the template in photoshop. The layers window will look like this:
Step 4: Unlock It
Select the "16 Col Grid" folder (on the layers window), and click the lock button to unlock it.
Step 5: New Document
Now open a fresh document for your layout (I use 1000x1000). Now switch back to the 960 template and drag and drop the "16 col grid" folder to your new layout.
Step 6: Centering
Center the "16 col grid" vertically and horizontally. To do this make a selection of the whole document (CTRL+A), select the "move tool" and click these to buttons on the top bar:
How do I design with it?
That's it, your all set up. To use it, you simply leave the grid overlaying everything else, and align elements of your layout to it. Here's and example (taken from 960.gs):
Note: you can also simply open up the 960gs template and work on that, but I think this way is way better and leaves you more room for the background.