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.
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
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.
Also make sure Lock Guides is selected. This way you can't accidentally move the 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.
- Click to Create a new layer
- Give you layer a name
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.
- Start on the Left side of a column (pink)
- End on the Right side of a column (pink)
A Bad Example
Fill the Rectangle
Right-click inside of the rectangle and select Fill.
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.
The Spanned element
You now have an element that spans the grid (5 columns span shown here)
Select the Text Tool
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.
Either uncheck it (1) or set it to Layer (2).
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.
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.
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.
Name the Group
Give the group a name (1)
Move the group into position
- Selecting the Move Tool
- Making sure Auto-select is checked
- Group selected as Auto-select type
Click and drag on the group
Remember that for now, it will have the exact same text as the group you copied.
Change the text
Select the Type Tool
Change the text
You now have duplicated a group
The name of the layer will update automatically to match the new text
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.
Select the Layers you Want to Align
Hold down the Ctrl (Command on OSX) when clicking the layers to select more than one.
Click on the Alignment Toolbar
If you roll over an icon it will tell you want kind of alignment it is.
Align text separately
To keep the text in the middle of your boxes, then you will need to align them separately.