How To Setup A Layout Grid In Photoshop

grid-smallThe Grid feature in Photoshop is a great tool to assist you with your layout designs, whether its design for the web or print. Adding a “Snap” lets you align objects very precisely along the lines of the grid. And rather than make a new grid each time you’re designing, you can set up grid preference that can be reused.

Making a grid
1.
Create a new document. If you’re designing for the 1024 x 768 pixel monitor resolution, then set up your new document as 960 pixels wide and 768 high.

2. To add the grid, choose View > Show > Grid. You will immediately see a grid overlaid on your new document. The grid that you can see is non-printing, it’s simply there for your benefit and reference.

Grid

You’ll notice that there are several heavy lines, and in between them there are lighter dotted lines, known as sub-divisions.

You could just leave your grid alone at this point, but by setting up some preferences you can take more control and set up how the lines in your grid will look, how far apart they are from each other and how many subdivisions appear between the main grid lines.

To open up the grid preferences choose Edit > Preferences> Guides, Grids & Slices & Count. This opens the Preference dialog box you can see below. (Note: I’m using CS3, earlier versions may look a little different but will have similar options for grids.)

Grid-Preferences

Choose the color you want for the grid lines. You can also choose the style, with a choice of Lines, Dashed Lines or Dots. If you find the Lines to be too overwhelming, using the Dots option is a good choice (see below).

Grid-dots

Still inside the Grid preferences, if you want to have a twelve column grids across a 960 pixel document, set the “Gridline every” option to be 80 pixels. I leave the number of sub-divisions at 4. Click OK, and that’s your grid in place.

Snapping
Enabling Snapping helps you to align layers, text and basically any object you want. To turn it on, choose View > Snap. You’ll see a tick mark beside this option when it is selected. Then choose View > Snap To > Grid. Once this is selected you will find that objects will click or snap into place on your grid. If the snap becomes annoying, just switch it off by choosing View > Snap To > Grid again.

Snap

When you’re finished designing, simply choose View > Show > Grid or Ctrl+; (pc) or Cmd+; (Mac) to hide the grid and marvel at your lovely design.

Are you currently using grids for layout? Did you make your own, or did you download one from the web?

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Foundations of Photoshop.

Comments on this article are closed. Have a question about Photoshop? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • LFA

    The Twitter link to this post is broken…

  • Arlen

    Yep. It’s pointed at the 30th, not the 29th. Did the link creation cross the dateline?

  • http://www.magain.com/ Matthew Magain

    Thanks guys, have added a redirect for this link. Will try and work out why it happened in the first place! No doubt something do with time zones, yes…

  • BlueBoden

    How would this be useful? Likely it uses tables for layout, which is just idiotic more then half of the time!

  • http://www.magain.com/ Matthew Magain

    @BlueBoden I’m not sure what you mean by “using tables for layout”. Jennifer is describing a design technique for helping you to create mockups in Photoshop, well before any thoughts about what markup or style rules might be used to implement it.

    If you don’t use Photoshop as part of your design process, then that’s fine. But it’s very common for designers to do so, and this is a great tip for those of us who do. It’s also possible to ask your question without being insulting, which I hope you’ll try to do next time.

  • luciano991

    I’m no graphic designer but I convert psd’s into web pages. Can you show me or tell me a little about using grids over a psd design from my graphic designer to measure, slice and otherwise help with calculations for CSS? I hope I have made some sense here. ;-)
    Thanks,

    luciano

  • http://www.crearedesign.co.uk TomBradshaw

    I know people who use the grid layout but I just find it a bit annoying. I have a photoshop file that I begin every design with. On this I have an area of 1000px to work in to make the maximum use out of the space anything around this is the background. I also have a ruler point marking out where I think any image or flash shouldn’t exceed below, so that people with smaller screens can still see text on a design. But then that’s just me…

  • Hetal

    This is definitely very useful… I suppose if you want to use 960gs or similar CSS framework with 24 columns, you need to keep the grid width to 40px. Another tutorial on how to slice the layout from photoshop to CSS would be helpful. Thanks.

  • John

    Jennifer, thanks for the explanation on setting this up in photoshop, it’s clear and easy to follow, very useful.

  • Majortrout

    Hello Jennifer,

    I can;t find anywhere how to widen the width of the lines in a grid.
    Can you help?

    Thanks,

    SB