Photoshop Grid Templates

For the last year or two, much of the discussion about grids in web design has focused on CSS frameworks for building flexible/responsive grids. And for good reason — designers are excited about responsive design and CSS is the overlord of page layout on the web. A large number of great projects have resulted. Too many to list here.

Despite all the CSS fun, a lot of design still happens in the static, pixel-based world of Photoshop. Responsive designs often begin as Photoshop comps. If we want to start with a grid, we need to start with a grid in Photoshop.

When designing for recurrent conditions, it’s nice to have some sort of boilerplate or template that can kickstart the process and save you from repeating yourself. If you’re designing a desktop site, there are a few projects, like the 960 Grid System, that offer helpful grid templates for Photoshop and Illustrator.

But what if you’re designing for mobile? Or for an iPad? For email? For a widescreen monitor? Then you’re on your own. I have searched and I haven’t found any templates for graphic editors concerned with multi-device design. So I made some.

Photoshop Grids is a small collection of grid templates for various devices and common design scenarios. The templates are simply PSD files containing guides and overlays that define a columnar grid. There are templates for mobile, iPad (both orientations), email, and several desktop cases (including widescreen and IAB-300×250-friendly).

To be clear, I’m not suggesting that anyone should produce static designs for each of these experiences. Responsive design is the way to go (when possible). But depending on the project you may want to build your initial design around something other than a standard 960px desktop layout. Mobile first, tablet first, etc.

For more details or to download the templates, check out the Project Page.

If you have feedback or would like to contribute, hop over to GitHub. (Or just leave a comment below.)