Free 4-column Grid Photoshop Templates for Better Web Design
May 30, 2009; Category: CSS, Design/Development; Tags: Design/Development, Download, Grid, Templates; 15 Comments
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!
Sir, you are the milkman of human kindness and I thank you for the extra pint
Thanks, Andy. Hope you find the templates helpful.
thank, i it work
I’m surprised that W3schools assumes the lowest common denominator for screen resolution is 1024×768 with all the mobile devices out there.
Thanks before iwant try this tempalte…
thanks, i’ll have a play around with this when designing webites in the future
Thanks alot – looking forward to trying them out.
Thanks! Love to see the interactive world embracing order. Keep up the good work!
many thx
Great time saver. Thanks a lot for sharing Ray!
Wonderful grid, thank you!
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/
many thx for this grid system.
I was looking for a grid larger than 950 / 960 px, as the majority deals with. That’s a good one, thank you.
[...] (Evolution Web Development) | http://www.evowebdev.com I downloaded and used this free four-column grid for my latest web work, which allows for clear, [...]