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; 14 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!
Related Posts
Child Themes: A Sanity-saving Approach to Redesigning/Hacking WordPress Themes
We launched a new website with new EvoGallery CMS WordPress theme
Whew! Launching two websites in the same week
Website Launch: FBT Architects in Albuquerque
Why Bad Websites Happen to Good Companies, Part 9: Having a Print Designer Design Your Website
14 Responses to “Free 4-column Grid Photoshop Templates for Better Web Design”
Leave a Comment
Comments are welcome; even from those who disagree with me (especially from those who disagree). To see them published, put your name in the "Name" field, rather than the name of your business or keywords. Also, a comment that shows you read the post increases the chances your comment will be recognized as a legitimate comment and not spam. ;-)
Recent Posts
- Recent website launches: all WordPress, all the time
- Child Themes: A Sanity-saving Approach to Redesigning/Hacking WordPress Themes
- WordCamp Albuquerque: beyond expectations by any measure (and some code)
- WordCamp ABQ presentation: Build a powerful CMS with custom fields and custom post types
- What makes a good CMS?
- How to List Upcoming Events and Events Archive with Custom Post Types
- Why I’m abandoning a land line altogether: bye bye Qwest!
- Hilltop Landscaping: what a company blog should look like
Recent Comments
- Hello, I just wanted to comment on this particular article. I think you made a on What makes a good CMS?
- Ray, I've been very happy with the FaxIt Nice service out of San Francisco... Th on Why I'm abandoning a land line altogether: bye bye Qwest!
- Do I think Google mines the data? Of course! I'm sure they mine all the data on on Why Your Primary Business Email Account Should be Gmail
- So what if you're in a business or operating a web site that is or may be in com on Why Your Primary Business Email Account Should be Gmail
- I've stumble a website recently, its a WordPress blog with personalized plumbing on Wanted: A Plumber Who Wants to Grow His Local Business
- Thank you for this. on Quick Tutorial: Simple PHP and CSS to Highlight Current Navigation Section
I was looking for a grid larger than 950 / 960 px, as the majority deals with. That’s a good one, thank you.
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!