EvoBloggito
Free 4-column Grid Photoshop Templates for Better Web Design
Author: Ray Gulick; Published: May 30, 2009; Category: CSS, Design/Development; Tags: Design/Development, Download, Grid, Templates; 13 Comments
UPDATE 9/29/09: If you’re looking for a 4-column grid-based WordPress theme, take a look at Evo4 CMS.
Most of us who design custom websites start with Photoshop. I currently use base template files that assume a 1024×768 screen resolution as the lowest common denominator (according to W3Schools, as of January, 2009, only 4% of identifiable browsers were operating at a screen resolution below 1024×768).
In the last 18 months or so, I’ve gone almost completely to the use of 4-column grids. They give me as much flexibility as I know what to do with, and allow for more sophisticated layouts than 2- or 3-column grids. And when it comes to being sophisticated, I need all the help I can get.
Over time, I’ve developed some variations of the basic 4-column template, varying the column widths and outside margins. Three of the ones I use most are available below as zipped files for download. They’re licensed under Creative Commons: you’re free to utilize them however you like for your own use, and share them with attribution. I encourage you to play with the column widths and spacing to make them work for your own purposes. If you feel like it, shoot me a link to a website you’ve designed using one of the grids (or a variation), or a note telling me if you found them helpful.
Zipped files are approximately 288k each.
Download: 4-column, 960 Template
Download: 4-column, 960 Uneven Columns Template
Download: 4-column, 996 Template
ALSO, download the Free XHTML/CSS template that goes with the first Photoshop template!
many thx for this grid system.
Thanks so much for this – actually inspired me to make a more complex one based on yours. Has options for a four and three column template all based on 16 pixel divisions…be great to hear your thoughts…
http://www.freddesign.co.uk/2010/05/archive/free-photoshop-website-grid-template/
Wonderful grid, thank you!