Abstract
A brief summary of the article
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.
Content
Main article body
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. 
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.
Comments
What people have had to say about this article
-
Tried it in CS just for interest, but sorry to report it breaks with “Error 24: app.bringToFront is not a function Line 11”
-
rockoyster #
12:07am, 25th February 2007But it works great in CS2 – thanks for sharing a very handy little tool!
-
Thanks for trying it out in CS, I may take a look at the problem at some point, it doesn’t seem like a major issue.
I’m glad you find it useful.
-
This is sweet stuff man. I’d love to see this in Illustrator.
-
I found this link via Cameron Moll’s link list and I have to say, this script is tops. I have one question though. Is there any way to get it to create a background layer with a max height/width and only vertical grids? Thanks in advance.
-
Ty #
05:16pm, 21st March 2007Photoshop 7.0 doesn’t have a File | scripts menu unless, I’m missing something?
-
Ty #
05:20pm, 21st March 2007Since I can’t use this in Photoshop 7. there is no scripts folder.
what’s the difference between using this and just using the Edit menu | Preferences | Guides and grids stuff? -
Thank you for this & thumbs up to anything that saves me making grids!
-
France,
I did briefly look at writing a version for Illustrator but it looked like there were already some fairly easy ways of generating the guides. I may take another look at some point though.Josh,
I’m not sure what you’re asking. If you uncheck the horizontal guides checkbox you should still get the same image dimensions as if the guides were being added (I’m not too sure on this as it’s been a little while since I looked at the code). There’s currently no way of using GridMaker to add guides to an existing image though, it’s something I’m definitely interested in developing further though.Ty,
I don’t have a copy of Photoshop 7, but the script doesn’t work in it anyway. It might be possible to make it work by deleting the fairly unimportant line of code that’s mentioned in the first comment but that would involve delving into the source.As for what it does that Preferences/Guides and Grids doesn’t do. If I recall correctly it only allows you to set the size of the grid and subdivisions, which means if you rely on the grid for item placement you have far more lines visible than you actually need. GridMaker automates the addition of individual guides to a document which saves a lot of time.
I should probably have included some more images explaining it. I’m still away from my proper computer so I can’t fix anything right now, but I expect I’ll make a new article for a future release.
-
jerlyn thomas #
07:05am, 22nd March 2007Quite wonderful!
-
Shane #
08:01am, 22nd March 2007That’s just what I needed – thank you very much.
-
Michelle #
01:20pm, 22nd March 2007Great idea. Thank you.
-
All I can say is, “VERY NICE”
Excellent job.
-
reese spykerman #
09:45pm, 23rd March 2007Thank you so much. I recently was having my husband help me a bit with math calculations to get my grid and width sizes right. This saves some serious time for me :)
-
Good stuff! Thanks….
-
This is great, especially after being inspired about grids from Khoi Vinh
-
nice, tnx!
-
Great tool, very usefull…
thank you for sharing!
-
Daryl #
01:48pm, 04th April 2007Nice tool! However, once I installed it it comes up ecery time I try and launch Adobe Bridge – does anyone know if there’s a quick way to stop this happening??
Cheers…
-
Craig Vidler #
05:08pm, 12th April 2007Works for me in CS2. Thanks a lot, I’ll be using this.
-
hi nice site.
-
Bryce Driesenga #
09:38pm, 24th April 2007Hey man, wonderful tool. Only one question/problem…is there any way to use it to work in inches? I was able to make the document size come out in inches except that the guides even when I put in at the end (Example: .15 in,2 in). Also, if at all possible, are you able to just make it split up the document into equal spaces…say a 8.5×11 inch document dived into 6 equal pieces vertically with .25 inch gutters?
Possible layout:
Grid Maker—————————————————-
(amount) (inches/pixels/etc.)
Horizontal:
Subdivisions: .......... or Spacing ….......
Vertical
Subdivisions: .......... or Spacing …....... (amount) (inches/pixels/etc.)
Height of Doc: ......... Width: .........Thanks for any reply on anything I have mentioned.
-
Bryce, I’m probably going to take a look at getting GridMaker working for units other than pixels (including inches). Your idea for subdivisions is something i’m interested in exploring too.
I might also work on some presets like the Golden Ratio for calculating the horizontal/vertical spacings based on each other.
-
Nice tool.
Some additions for the calculator might beGutter width between columns vs
Gutter width outside columns (outer edges gutter margins)
example 3, 200px columns with 10px outer 5px inner gutters
10+200+5+200+5+200+10 =630Option to force page width and calculate column size.
forcing example above from 630px to 760px gives 3 columns at 243. -
Great script! I’m struggling a little to use it in conjunction with Matthew Pennell’s grid calculator – I don’t know if you’re familar with it? I’ve created the dimensions there for a page 960px wide, with 4 columns, each of 228px wide, with a gutter of 16px.
Now if I give your script a vertical value of 16,228 and a width of 960px, I get 3 columns and a page width of 748px. The columns and gutters are the correct width, but I don’t get the 4th column.
Ah… I see I also have to take the 2 side gutters into account too. Doh! I’ll leave this comment here in case anyone else makes the same silly mistake too : )
-
I am quite sure this will come handy soon or later. probably very soon! :) thanks a lot for sharing this tool
-
g #
01:07pm, 16th July 2007Nice job!
it works for me in cs3.
Thanx again for sharing! -
Ron #
08:43pm, 11th August 2007When I try to download the .isx file from the link a get another web page full of code. How does one download the software of the article’s topic? Is this a PC only thing? Thanks.
-
Kamlesh #
03:49pm, 26th September 2007Thanks a lot for sharing, we get these very rarely. GREAT!! :) it works in CS3
-
Sachin #
08:48am, 10th October 2007Andy: I just saw your page, immediately downloaded the script file and placed it in the scripts folder. As rockoyster had mentioned, true enough, the same error occurred because I also use CS.
A little research revealed that the javascript engine for CS is somewhat limited and hence the app.bringToFront(); returns an error. Simply removing that line of code gives joy :)
Cool stuff nonetheless
-
mAning #
04:40pm, 20th November 2007Is this compatible with Mac OSx…???
-
Not related to this plugin, but you have a wonderful grid on your site, congratulations!
-
jeff #
01:18pm, 26th March 2008A newbie with the grid system. got interested from the smashing magazine post. Still reading stuff. I’m downloading it. Hope it would be useful
-
webpixelkonsum #
08:53pm, 20th April 2008Nice tool, but will work with mac os x together? If it works with mac os x, can you send me an e-mail, please?
Ralph
Add Comment
Use this form to add your own comments
rockoyster #
07:46pm, 24th February 2007