32 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes