build 960 design grids in photoshop

We're going to do almost the same thing to create the 16-column grid. But this time we'll add some new Photoshop tools and shortcuts.

Press Shift-Command-N to create a new layer. Change the name to "16 column" and click OK.

Change the Magnification to 300 percent.

Go to the Window menu and select the very handy Navigator panel. A new window will open showing a small version of your document with a red square in the middle. Click and drag the red square to the top-left of your document.

Select the Rectangle tool from the tool bar. (Fill Pixels should already be selected.) Click and draw a box 40 pixels wide starting the top of the document and 10 pixels from the left edge (seen in the image below).

Hold down the Command key and hover your mouse over the Layer 1 Preview Icon in the Layers panel. Notice the cursor changes to look like the marquee tool. Click on the icon and a selection will appear around your box.

Hold down the Option key and press Command-T for the Free Transform tool. Drag the box to the right so that there is a 20-pixel gutter and hit Return. The second box should be selected and your image should look like this:

Notice that there aren't any new layers in the Layers panel. When you work with a selection in Photoshop, it remains part of it's original layer. This can be an effective way to work in some instances.

Hold down the Option key (to make another copy) and then press Shift-Command-T 14 times for a total of 16.

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.