Andrew Ingram

Introducing GridMaker

Posted on .

Prior to beginning work on this site I gained an interest in using grids to produce consistent designs. GridMaker is a small script for Photoshop which allows speedy development of simple grids.

Note: This article was written for a previous version of the site and is likely out-of-date.

Over the past few years i've gained an appreciated for the methods behind design. Grids are something I came across only in the last year or so, but I quickly gained a fondness and appreciation for them. Having a clearly defined structure to a design can make it much easier for people to understand the flow of content, as well as being more aesthetically pleasing.

I'm not going to go into the principles of grids, there are some fantastic introductory lessons around which explain things far better than I could. I strongly recommend Mark Boulton's "Five Simple Steps to designing grid systems" if you're interested in learning about them. Instead i'm going to introduce a Photoshop script I produced to help me quickly get simple grid-based designs started.

As many of you may know, Photoshop allows you to add vertical and horizontal guides to your images, these can be used to align content quickly and easily using the Snap To Guides functionality. The problem I encountered it takes quite a bit of time and some repetitive calculations to add enough guides for a usable grid. So instead of just getting on with doing things the hard way I took up the task of making a simple script to automate the process. It's not much, so far it's only been useful for fixed-width designs such as this, but I feel it's a handy tool to have available. Here's a screenshot of the dialog that appears when you execute the script.

GridMaker screenshot

The vertical and horizontal groupings are self-explanatory so I'll quickly explain what the "configuration" and "maximum width/height" inputs do. The configuration input controls the size of your grid, the default value is "3,64" which means that the grid will be made up of columns of 3px followed by 64px repeated until the edge of the document, the first value is also added to the end as a final column. The approach has some limitations but it's fairly simple. The maximum size inputs allow you to specify the maximum size of the generated image (GridMaker can only be used to make new images with guides, not to add guides to existing images). The default maximum width is 1024px, so in conjunction with the default configuration this will produce a 1008px wide document with a grid that has 64px columns and 3px gutters. The best way to understand how it works is to just play around with it.

Installation is easy, just put GridMaker.jsx in your Photoshop\Presets\Scripts directory and load the program, the script will be available in the File/Scripts menu. This was primarily produced for my own purposes so it's not a polished product - there are no doubt lots ways to break it. I've only used GridMaker with CS2 and the beta of CS3, I'd be interested to know how it performs in older versions.

Download GridMaker.jsx