Evolution Web Development

Evolution Web Development

All WordPress. All the time.

Free 4-column Grid Photoshop Templates for Better Web Design

May 30, 2009; Category: CSS, Design/Development; Tags: , , , ; 14 Comments

4-column Photoshop template

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!

14 Responses to “Free 4-column Grid Photoshop Templates for Better Web Design”

  1. Ray Gulick says:

    Thanks, Andy. Hope you find the templates helpful.

  2. Andy Walpole says:

    Sir, you are the milkman of human kindness and I thank you for the extra pint :-)

  3. tun221 says:

    thank, i it work

  4. MattCoops says:

    I’m surprised that W3schools assumes the lowest common denominator for screen resolution is 1024×768 with all the mobile devices out there.

  5. Jastis Bago says:

    Thanks before iwant try this tempalte…

  6. Anthony says:

    thanks, i’ll have a play around with this when designing webites in the future

  7. Dennis says:

    Thanks alot – looking forward to trying them out.

  8. jami reighard says:

    Thanks! Love to see the interactive world embracing order. Keep up the good work!

  9. Pete says:

    Great time saver. Thanks a lot for sharing Ray!

  10. Boldis Media says:

    Wonderful grid, thank you!

  11. fred design says:

    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/

  12. Frederik says:

    many thx for this grid system.

  13. I was looking for a grid larger than 950 / 960 px, as the majority deals with. That’s a good one, thank you.