build 960 design grids in photoshop

Columns help designers space elements horizontally across a page. Designers working with the 960 grid use both  12-column and  16-column frameworks. 

This step builds a 12-column setup. 

Look at the Layers panel on the right side of your screen. If you don't see it, open it by going to Windows menu and selecting Layers.

Click on the New Layer Button and then click once on Layer 1 to select it.

Type 300 in the Magnification field so you can easily see precise locations.

Use the scroll bars (1) to look at the top-left corner of the document.

Select the Rectangle (2) tool from the tool bar. Check that the Fill Pixels (3) selection is active in the contextual toolbar. Click on the Foreground color (4) and change it to black.

Hide the desktop by switching to "Full Screen Mode With Menu Bar."

Starting at the top of the document and 10 pixels from the left edge, click and draw a box 60 pixels wide (see image below).

Hold down the Option key and press Command-T for the Free Transform tool. The Option key creates a copy. Now move the box to the right so that there are 20 pixels of space between them. This space is called a "Gutter."

Hit Return and Layer 1 Copy should appear in your Layers panel and your file should look like this:

Hold down the Option key (to make another copy) and then press Shift-Command-T. This is the Repeat Transformation command. It will create a second copy and move it the same distance as the first copy. Repeat nine more times for a total of 12. Shortcut: Hold down Option-Shift-Command and keep tapping the "T" key to make additional copies.

This creates a bunch of new layers in the Layers panel. Select Layer 1, hold down Shift and select Layer 1 Copy 11. Click on the top-right corner of the Layers panel and select Merge Layers (or press Command E).

Double-click the new Layer to rename it "12 col" and hit Return.

Change magnification to 50 percent and press Command-T.

Hover your mouse over the bottom-middle control handle until your cursor changes to arrows pointing up and down. Click and drag down until the bars extend to the bottom of the document and press Return.

Finally, in your Layers panel, change Opacity to 10 percent and click on the Eyeball icon to hide the layer.