Build 960 Design Grids in Photoshop

Tutorial: Build 960 design grids in Photoshop

Introduction

960-grid-main

Most modern Web sites are designed and built on a fixed 960-pixel grid. As you can see in the example below, working with a grid can add polish
to a site. It makes it easier to create page layouts that are visually consistent and easier for users to navigate. The grid also guarantees your site will be viewable on most computer screens.

This tutorial will teach you how to build a template in Photoshop with 12-column, 16-column and baseline grids. You can then use the template to design your site in Photoshop. You also will learn some Photoshop features, tips and tricks.

 

960 grid

Create and set up your document

Start by opening Photoshop. Once the Application fisihes launching, go to the File menu and select New… to create a new Photoshop document. Change the settings to:

  • Width: 960 pixels
  • Height: 1200 pixels
  • Resolution: 72 pixels per inch.

Create 960 grid document

Under View in the menu bar, select Show –>  Grid.

Under Photoshop in the menu bar, select Preferences –>  Guides, Grid and Slices.

  • Change the color to Light Gray in the grid section.
  • Change the Gridline to every 10 pixels.
  • Change Subdivisions to 1.

turn on image grids and set prefs

Click on Units and Rulers in the left-side panel and change Rulers to Pixels. Click OK.

change document units

Save as 960-grid.psd

Create a 12-column grid

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.

Add a layer

 

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

Zoom to 300 percent

 

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.

Scroll to top-left

 

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

Switch<br /><br />
 to full-screen mode

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:

Create and copy a 60-pixel box

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).

Merge PhotoShop layers

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.

Transform vertical length of grid

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

Create a 16-column grid

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:

Create and copy 40-pixel box

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.

Transform vertical length of grid

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

Create a baseline grid

Designers use a grid of horizontal lines to align objects vertically and add consistent vertical space between them. This will make your site and packages look clean, polished and professional.  We’re going to create a 10-point grid but 3- and 4-point grids are also common.

Add a new layer and name it Baseline. (Shift-Command-N)

Change Magnification to 500 percent and use the Navigator to move to the top-left corner.

Select the Single Row Marquee tool and click 10 pixels from the top. A selection will appear that is 1 pixel tall and extends all the way across the document.

Sinle-row marquee tool

Under File in the menu bar, select Fill… and in the Contents box select Black from the pull down menu and click OK.

With your line selected, hold down the Option key and press Command-T for the Free Transform tool. Press and hold the Shift key and press the Down Arrow on your keyboard. A copy of the selection will move exactly 10 points down. Hit Return.

Note: You can do this by hand but it’s very easy to be off by a pixel. If you decide to try it, hold down the Option key and then press Shift-Command-T 5 times to to make sure your lines match the grid.

Baseline align

Change Magnification to 50 percent and keep tapping Option-Shift-Command-T until the grid is complete.

In your Layers panel, change the Opacity to 10 percent and change the Blending Mode from Normal to Multiply.

Organize your template

It’s important to organize and protect your template. A few simple edits will make the file easier to use and help you for years to come.

In your Layers panel, hold down Shift and select
the three guide layers you just made.
Click the top-right corner of the
Layers panel
, select New Group from Layers and name it Grids.

A
folder now appears in your Layers panel. Select the Group layer and click the
small triangle next to the folder icon to look inside and see your
layers.

Manage your layers

With the Group Layer selected, click the Lock icon near the top of the Layers panel. This prevents accidental movement of your grid layers but still allows you to change their visibility.

Under View in the menu bar, select Show –>
Grid.
Selecting this when it’s checked hides the grid.

Now explore your template, turning Layers off and on. We made two horizontal grids, 12- and 16-columns. If you view both at the same time, you get a 4-column grid.

Column grid views

Save this as a Photoshop file in a safe place. If you lose it or it gets corrupted, you can download the final file and reopen in Photoshop.

About this Tutorial

This tutorial was created by Len De Groot for the Designing and Producing Online News Packages course at the UC Berkeley Graduate School of Journalism in 2010.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.