Abstract
A brief summary of the article
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.
Content
Main article body
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.
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.
Comments
What people have had to say about this article
-
This is so handy, especially in combination with the grid calculator. Thanks a lot!
-
Daryl Walker-Smith #
09:18am, 21st May 2007Great script, and even nicer reboot. However, I think someone has mentioned this before but even with the latest version of the script it appears to try and run when Adobe Bridge is launched (currently running CS2). It’s not a massive problem as I just have to hit ‘Cancel’ for Bridge to then open but I’m not sure why this would happen…any ideas on how I can sort this?
Cheers!
-
walter #
04:50am, 28th May 2007I get an error when i run the script ” Error 24 app.bringToFront is not a function” ... etc…. using it with photoshop on OS X 10.4
-
micah #
03:53pm, 31st May 2007I also get the same error walter mentioned. using CS on WinXP
-
I’m not sure what’s causing the issue with Adobe Bridge but I’ve uploaded a new version of the script that may fix the issue, I’d be grateful if anybody who has experienced the issue with Bridge can test to see if it’s fixed or not.
I’ve also removed the line that people are reporting errors about in CS1, I have no idea if this will have addressed the problems though. That line is the first command that’s executed so it could just be the first of many problems with CS1. If a CS1 user could test the new version and tell me what happens that would be very useful.
The new version has replaced the old one that this article links to.
-
Jared #
04:58pm, 11th July 2007Howdy,
I’m wondering if you plan to update the Fireworks version as well?
Thanks for a great script in either case!
Best,
Jared
-
Josh #
02:21pm, 17th July 2007I’m with Jared (above)... will there be an FW version anytime soon? I could use this right away in my projects. Looks like a great tool.
-
Great tool, but a choice between attaching the guides to an opened document or creating a new would be great.
-
Cheers for the script.
This makes this ALOT easier! :)
well done!
ps: works on my PC with Photoshop CS3
-
Jeremy #
09:11pm, 25th August 2007Great script, Andy.
What would you have to change in the script so that the rows are as high as the columns are wide? That is, make them square?
-
Peter Hanley #
02:06am, 02nd September 2007“What would you have to change in the script so that the rows are as high as the columns are wide?”
Change line 70: var rowHeight = columnWidth / phi;
to
var rowHeight = columnWidth;
-
Fantastic script – thank you very much for sharing! Already downloaded and using…
-
matthew Smith #
04:52pm, 09th November 2007Andrew, is there any chance you’d know what needs to change about this script to adapt it to illustrator? I’m working with AI now to make most of my comps and then export them to photoshop, this script for AI would be pretty insane.
-
chad #
07:44pm, 08th January 2008i’m also advocating a fireworks update… please?
-
Laneo #
05:44pm, 21st January 2008nice! Have been looking for something like this for ages…. It could be improved by allowing you to specify unique outermost margins, visually I think the outer gutters need to be larger so that the content doesnt look pushed up to the edge of the page
-
webpixelkonsum #
08:57pm, 20th April 2008Nice idea, but it’s possible to work with a browser like firefox?
Ralph
-
great work! just what i wanted :D
-
Thanks man a Ton !!
Will help me a lot
Add Comment
Use this form to add your own comments
Achtentachtig #
12:16pm, 12th May 2007