Grid Nirvana - How to Easily Incorporate Blueprint into Photoshop
Tuesday, March 31st, 2009Here at Canary we’re big proponents of tools that help us get the job done. When it comes to our CSS layouts lately we’ve been using the Blueprint CSS framework in our workflow. We’ve found that despite the trade-offs (some non-semantic html), we get a lot of benefit from the system. There’s a great CSS reset that removes all the default browser styling, it’s been cross-browser tested, pretty good out-of-the-box typography settings, and both a baseline and horizontal grid.
About Blueprint (from blueprintcss.org):
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
The grid is what I’m going to focus on here. There are a lot of CSS frameworks that provide a grid, but there’s a tool for Blueprint that we’ve been using to create custom grids. This gives us the freedom to set the page width and number of columns to whatever we need for the site, and generates the structure for us that we use in our design and development process.
Download Blueprint and set it aside for now. You’ll use this when you’re building the site.
Go to the Blueprint Grid CSS Generator and enter the specs for your custom grid. I’ve found that I can play around with this in order to create the exact grid I need for each project. Once you’ve got the setting you want, click ‘Generate CSS’. Copy and save the Grid.css and compressed.css files. You’ll use those to overwrite the default grid that came with Blueprint. Now flip over to the Grid.png tab. The script created this png file from the specs you entered. It represents one cell of your new grid. Save this file. It’s intended to replace the default grid.png file that you get with Blueprint, but we’re also going to use it as a guide in Photoshop. (It’s tiny, and a little hard to see both in the generator and below)
Open the grid.png file in Photoshop. Convert the color mode to RGB. (you may not need to do this, but I’ve occasionally had problems when I didn’t.) Now select Edit->Define a Pattern. You can keep the default name and click OK.
Now create an empty document that is the width of your grid for your website. It can be any height, but I usually start with at least 1000px tall. Fill a new layer named ‘grid’ with a solid color.
Create a new layer style for that layer and select the Pattern Overlay tab. Set the blend mode to ‘multiply’ and choose ’snap to origin’. Open the ‘Pattern’ selector and choose your new pattern. It should be the last one in the list. Now go to the ‘Blending Options’ tab and under Advanced Blending set the fill opacity to 0%.
You now have a semi-transparent custom grid that you can place over your other layers to guide you as you design!
And here it is in action. This is a little preview of our new site in progress. 10 points to you if you spot the temporary heading title!
Advanced Trick!
Set up a couple custom actions to turn your ‘grid’ layer on and off with a key command. We’ve found that really helps us quickly check our alignment as we work.
Watch out for part 2 in this series, in which we’ll divulge how we incorporate Blueprint into our Drupal theming process. [Now we're on the hook to write it!]