I’ve been using Nathan Smith’s 960.gs system for awhile now and love the framework, but the templates he provides for Photoshop aren’t really set-up in a way that works best with my workflow for the following reasons:
1. Grid layouts are split into 2 separate Photoshop documents.
2. Columns for each grid are on their own individual layer.
3. Grid opacity is set at the per column layer level.
So I tweaked the template and came up with my own master document. This screenshot below shows my layer setup:
When I start designing wireframes or comps I often don’t know if I’m going to use a 12 or 16 column grid, so having both in one document is extremely helpful. I also collapsed all of the columns into a single layer which gives me the ability to quickly extend down the grid if my comp exceeds the height of the template, which happens often, as well as change the color of the grid if I want. I also set each column layer to 100% opacity and control the grid opacity at the folder level, which means I can quickly adjust the intensity of the grid anytime I want.
The one drawback to having both grids in a single PSD is that you lose the guides set-up for each column layout. I personally never use the guides in the provided templates so I don’t miss them, but if you depend on the guides then this template probably isn’t for you.
I was going to ask how you managed the issue of guides. Obviously, it would be great if Photoshop allowed for multiple sets of guides, but that is currently not possible.
I’ve created my own template similar to yours, merging the individual columns into one layer. I didn’t think to combine two templates into one. Thanks for the idea!
This is awesome. Thanks for releasing!
Hey,
I recently created a set of actions to do something similar to what you did. Now, obviously, I can’t keep more than one set in a document (aside from dragging that layer over, which is easy and possible). The bonus is that you get access to the guides, so it kind of depends on how you work.
http://bit.ly/6HKviz
I’ve got an action that draws the guides for a 12 column grid. In theory (not proven), you could make one for 12 and one for 16, and “toggle” them by clearing guides, then running one or the other action.
Not quite ideal, but it should work.
@Ben – The action works great, thanks for sharing it! I love the fact that a document is generated instead of having to open a template.
@Phil – Yeah, the problem I was seeing was that I was losing and/or overwriting the template file, so this was a good solution for me.
I’m torn because I rely on the grid overlays when I first start out, but once I start working on nitty gritty details I rely on the guides. Guess I’ll just have to suck it up until Photoshop supports multi-layered guides.
One idea would be to use my template document and then pair that up with an action that builds the guides on the fly, like the one Ben and Dave have, once you’ve chosen which grid layout you want to use.
I agree Daniel that ideally Photoshop would support multiple sets of guides.
I think something like this is possible if not fairly simple. I may take a stab at it if I get a few minutes. It wouldn’t be a true toggle, but there would need to be a few separate actions, one to build the document and the overlays and one for each grid layout once you decide what you want to do. You could “switch” between them by running the action (which would clear guides, and build them anew).
Just found your blog, CTRL+D great work…
Jer
@phil – thanks for the download. I’ve done this every time I open the file but never remember to save it until after I’ve already done a ton of work.
@ben – brilliant action. I guarantee this will get substantial use. kudos.