Open the template

There are three versions with 12, 16 and 24 columns each. Unless you have a complex design it is best to start out with a 12 column template.
960gs gives you templates for Photoshop, Illustrator, Flash Gimp (a free open-source version of photoshop) and more.

There are ways that you can create your own grid, but we won't cover that here.

When it comes time to convert these to HTML/CSS, I will show you how you can either use the exact dimensions of the Photoshop file or use other widths.

Open the template

12 Column Grid in Photoshop

This is what the 12 column grid looks like in Photoshop.

The image has been annotated to show you the major parts of a grid system.

Spanning Columns Step1: Select the Marquee Tool

You can just press M on the keyboard

Spanning Columns Step1: Select the Marquee Tool

Make Sure Snap To Guides is checked

If it is not checked click it and it will be checked. If it is checked, as shown here, then do nothing.

Make Sure Snap To Guides is checked

Lock Guides

Also make sure Lock Guides is selected. This way you can't accidentally move the guides.

Lock Guides

Create a New Layer for each item you are going to draw.

This will make your life SOOOO much easier if you want to change anything AND it makes it easier to copy this file for the next wireframe and work from there.

  1. Click to Create a new layer
  2. Give you layer a name
Create a New Layer for each item you are going to draw.

Drag the Marquee Tool for the Number of Columns You Want

Drag the Marquee Tool for the Number of Columns You Want

Column Span Rules

It is VERY important that you follow these rules. Then everything will be aligned properly.

  1. Start on the Left side of a column (pink)
  2. End on the Right side of a column (pink)
Column Span Rules

A Bad Example

A Bad Example

Fill the Rectangle

Right-click inside of the rectangle and select Fill.

Fill the Rectangle

Choose a Color for the Fill

To make your life easier set the foreground and background colors ahead of time (1) and then you can just choose Foreground Color or Background Color (2). Color (3) allows you to pick any color you want. You can also alway just choose black, white or grey (4)

Click OK (5) when you have set the color.

Choose a Color for the Fill

The Spanned element

You now have an element that spans the grid (5 columns span shown here)

The Spanned element

Select the Text Tool

Select the Text Tool

Setup your Text

Choose the Font (1), Font Size (2), Color (3) and more for your text.

Type your Text

Type your Text

Select the Move Tool to Move the Text

Unless you have deselected the text, you can't press V to get the tool because you are in a text field.

Select the Move Tool to Move the Text

Set Auto-select

Either uncheck it (1) or set it to Layer (2).

Set Auto-select

Position the Text over the column span

Position the Text over the column span

Group the Text and Span to Make Life Easier

If you create a new group (1) and then add in your Text and span layers (drag and drop) then your life will be easier in the long run.

Double-click on a name to change it.

Group the Text and Span to Make Life Easier

ORGANIZE YOUR FILE

The easiest way to do this is to create a group for each element you are going to draw on the page.

In the example below we have heaer, navigation, introduction, large image, feature1, feature2, feature3 and footer

You will have a header, navigation and footer, the rest is up to you.

ORGANIZE YOUR FILE

Copying Elements

If you have a few elements that will be the same size, you can just copy them.

If you have grouped everything then the easiest way is to just duplicate the group you want to copy.

(1) Right Click on the group in the Layers window and Select Duplicate Group.

Copying Elements

Name the Group

Give the group a name (1)

Name the Group

Move the group into position

Start by

  1. Selecting the Move Tool
  2. Making sure Auto-select is checked
  3. Group selected as Auto-select type
Move the group into position

Click and drag on the group

Remember that for now, it will have the exact same text as the group you copied.

  1. Click
  2. Drag
Click and drag on the group

Change the text

Select the Type Tool

Change the text

Change the text

Change the text

You now have duplicated a group

The name of the layer will update automatically to match the new text

You now have duplicated a group

Aligning Layers

Sometimes you need to align layers to make them look neater.

This technique WILL NOT WORK if you haven't put each item in a separate layer.

Start by selecting the Move Tool.

Aligning Layers

Select the Layers you Want to Align

Hold down the Ctrl (Command on OSX) when clicking the layers to select more than one.

Select the Layers you Want to Align

Click on the Alignment Toolbar

If you roll over an icon it will tell you want kind of alignment it is.

The layers should now be aligned

Align text separately

To keep the text in the middle of your boxes, then you will need to align them separately.

Align text separately

Aligned text