32 posts
  • 7 Years of Membership
  • Affiliate Level 1
  • Collector Level 2
  • Exclusive Author
+1 more

Hi All,

Welcome to another Tutorial by Tom.

I have been working with the 960 Grid System for a while now and find it helps a whole lot with headaches regarding layout. The main reason for this is that it throws us back to a more table based layout without the need for table markup (Yuk!).

But when prototyping in Photoshop it can become a little difficult to get your design lined up with the grid or you find a design you created just doesnt fit with the grid.

Therefore to help my web design comrades I have created a PSD file that contains all the required guides for a standard 960.gs Grid with 12 Columns and 20px Gutter, WOOOO .

Before you download the file a few points to raise.

The canvas used on the file is exactly 960×50, but that’s not much good for creating your site with the background or much else for that matter, instead of putting in a random number like 1200 as the dimension size and then you having that as a restriction I have left the decision to you.

Change Canvas Size:

Once you have opened the file:

Click Image
Click Canvas Size

In the dialogue window that opens up you can set the canvas size.

fig 1. You can set the dimensions to anything you like, but important to not modify the anchor as this will move the grid from centre.

Once you have the required dimensions of your canvas, hit OK and you will now have a nice grid in the centre for you to start work from.

Lock the Guides:

There is nothing more frustrating than trying to move a layer and accidentally moving a guide, so lets lock them to prevent that from happening:

Either Press

CTRL + ALT + ;


click View
click Lock Guides
see fig 2. Lock Guides is just below Snap To.

Align to Guides:

This will really help you align your layers to the guides you have created:

click View
go to Snap To
select Guides

fig 2. View holds the important controls for the guides.

Now when moving layers or using the draw tool you will find it will automatically stick to closest guide.

That should do it, hope you find the files helpful, I hope to release a couple more with different gutter and column dimensions in the future.

Let me know if there are any problems