Andrew Ingram

GridMaker Reboot

Posted on .

The first versions of GridMaker were well-received but several issues were highlighted, this article introduces the next version which includes a number of changes.

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

A few months ago I wrote GridMaker to aid in producing grid-based web design mock-ups in Photoshop (and later Fireworks). Whilst very primitive it was well-received and many have informed me how useful they've found it. At the same time it was clear that there were a number of issues so I went back to GridMaker and made a number of changes.

What features have we lost?

As the new version stands, a number of old features are missing. The obvious thing that's missing is the notion of a grid configuration input, this allowed people to potentially make quite complex grids but ultimately the idea would have needed to be much more complicated (think regular expressions for defining grids) in order for it to be sufficiently flexible. Instead I've limited the configuration to one size of column and one size of gutter.

In addition, the maximum dimensions inputs have gone. These allowed users to generate documents and guides up to and including their maximum desired image size. This was a useful feature because it allowed you to produce grids specifically for certain screen sizes. This feature will be back and there will be some very useful improvements, I just need to figure out how the user interface will work since ExtendScript is very limited with regards to UI widgets.

Finally, there is no longer the option to configure rows. However, this will also be looked at more in the future, particularly with regards to things like baseline font size

What new features are there?

Right now you can specify four properties for columns; column width, gutter width, number of columns and column divisions. These are fairly self-explanatory, the approach is similar to Matthew Pennell's Grid Calculator script, the only addition is the idea of column divisions which allow you to divide each column up into a number of smaller columns without separating gutters.

The row heights are currently calculated using the column width and golden ratio, this hopefully provides an adequate compromise until I get the row settings done properly.

Last but not least, you can finally specify which units to use (pixels, cm, mm and inches) in the document (this does actually change your Photoshop preferences though so just be aware). One word of warning, if you use the default settings with inches nothing will happen because you're trying to generate a bigger document than Photoshop can handle.

GridMaker 2

To install, just put GridMaker2.jsx in your Photoshop\Presets\Scripts directory and load the program, the script will be available in the File/Scripts menu.

Download GridMaker2.jsx