About this template
The purpose of this template is to allow you to create visual design comps that are designed to be implemented using a CSS layout framework. The Photoshop document features a 24 column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint's grid of 24 columns of 30px, 10px wide gutters, and a horizontal width of 950px. Horizontal guides are provided at 18px or 1.5 em line-height for 12 px base font.
To make the most of this system, a designer can complete their process by using other templates and tools that utilize the same grid system, such as printable graph paper, graph paper notepads, wireframe template, and Adobe Illlustrator template.
Related information
Find out more about Grid System CSS frameworks at the following sites:
For more information about web site grids, you may be interested in the following articles.
- Mark Boulton's "Five simple steps to designing grid systems"
- Khoi Vinh's "The Funniest Grid You Ever Saw"
- Richard Rutter's "Compose to a Vertical Rhythm"
- Wilson Miner's "Setting Type on the Web to a Baseline Grid"
- You'll also find more content about grids right here in Konigi.
Download the Photoshop Template
This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.
[...] Adobe Photoshop template [...]
I don't think PS let's you create guides per layer. Illustrator lets you, however.
Good idea? thanks
What's with the vertical grid lines? In the illustrator file there's two lines for each vertical line and they're aligned strangely, which means nothing snaps to the pixel correctly...
Is there meant to be a small gap between the vertical lines or is it just me?
Oops, I meant the horizontal lines.
Matt, try to download again. I replaced the dirty original file with the updated version. There are actually no horizontal guides in the new version, and the verticals should be snapped to grid. Cleaned up AI was uploaded as well.
Ok, I tried them both again. The illustrator template now has no horizontal guides at all, shouldn't there be a guide every 18px?
The Photoshop template still has duplicate horizontal guides, one at 17px and one at 18px, one at 35px and one at 36px, and so on. You have to zoom in really close to see them, but I think they will still cause the snapping issue...
Right. I took horizontal guides out in both actually. Not sure why you're still getting an old version. I just tried to download them again and get the new version without the horizontal guides. You really need them back?
That would be pretty useful.
There's still no horizontal guides :(
@SERG: Like I said above, I no longer have horizontal guides in the file.
@JIBBAJABBA: I see. Matt find some bug. Is there a way to show horizontal guides correctly? It will be very helpful when creating elements and trying align them to the grid. Thanks.
It wasn't a bug, it was just how I used horizontal guides. I just removed them entirely from the photoshop file, but I don't plan to put them back in right now.
Comments