960px Photoshop Grid Template
November 7, 2007 @ 10:35 am | Comments (27) | by Ross Johnson
Yesterday I talked briefly about making sure you have a wide enough template when designing mock-ups to prevent yourself from composing with edges of the screen that may/may not actually be where you plan them to be. This morning I had an epiphany, why don’t I have a standard photoshop template for my mock-ups? I scoured the internet to see if someone had done the dirty work for me, but found nothing… so I spent an hour to whip up a nice 960px grid template to speed up mock up development.
How to use the template
It is pretty simple, the template has guide for a three column 20px gutter design. I then have layers of light blocked out colors to help establish both column for using the rule of thirds, and additionally it is broken down into six columns of 20px gutters. You can now flesh out your design on top of the shades thus helping you keep a consistent grid and make placement of elements easier.
For those interested I created a solid band of the most common location of the fold for a 1024×768 resolution, and created folders to help you organize your layers based on their use in the design.
I welcome any suggestions, improvements, alterations!
« Give your self margin in mockups Design – Evolution vs Redesign »
COMMENT Jason
Nice! I have found myself making the same thing over and over, and never really stopped and thought about making a starting template. Thanks for the legwork. Adding in the fold is a nice touch.
Posted on 11/07 12:12pm
COMMENT ross
Thanks Jason! It’s funny how we do things over and over not realizing it could be easier. I can’t tell you how many times I started coding a site from scratch before thinking “You know, I could build a basic framework and just modify it”
Posted on 11/07 1:37pm
COMMENT Jason
Yeah, funny, I am about 90% complete with my ‘Base Template Project’. I keep thinking of new things to add like CSS Reset and sIFR stuff, so I have not completed it yet.
Posted on 11/07 1:39pm
COMMENT Start With The Photoshop Grid - 3twenty3.com
[...] read this post today, and I really felt stupid for not thinking along these lines a long time ago: 960px Photoshop Grid Template – [...]
Posted on 11/07 5:12pm
COMMENT ross
Yeah thats one of the great things about making your own! You can essentially have different folders with different “plug-ins”.
Like you, I also have one copy that has bells and whistles like Jquery, sIFR, and some home brewed AJAX stuff. Then I have the simple “nuts and bolts” version that is for a more vanilla site.
The time it saves over the period of a year is huge!
Posted on 11/07 5:39pm
COMMENT Armen
Excellent idea! I’ll definitely be using this – probably a lot!
Stumbled!
Posted on 11/07 6:56pm
COMMENT ross
Thanks Armen, if you are interested subscribe to the RSS I plan on create more for different resolutions.
Posted on 11/07 8:55pm
COMMENT Photoshop Grid Template for mock ups
[...] a 960px photoshop grid template incorporating the rule of thirds, common fold areas, 3/6 column options, and 20px gutters. Time to start gridding up those webportal designs etc
) Click here to visit >> [...]
Posted on 11/07 10:09pm
COMMENT Jermayn Parker
Would be great to see more for other layouts as I know I would like to personally see them (hint hint
)
Posted on 11/08 1:43am
COMMENT KOCHWERKSTATT
[...] » 960px Photoshop Grid Template – Web Design Marketing Podcast & Blog [...]
Posted on 11/08 4:02am
COMMENT Kotyk.com » Photoshop Grid Template
[...] 960px Photoshop Grid Template. Handy. To Do: Add to Digg | Add to Del.icio.us | Print this Post | Email to a friend | Leave a Comment [...]
Posted on 11/08 1:06pm
COMMENT Armen
Ok, I’m structuring a design, and I decided to try to keep it to a grid. I began with 6 columns, and a 25px gutter. However it was leaving it 965px wide, with 305px for the column, and I’d rather try to keep it even.
Then I remembered your grid of 960px. When I started doing some calculations, I got confused. How do you grid it to 960px? The closest I came with 20px gutter, is 958px, and that’s with 6 143px columns.
Can you explain? I’m totally new to the grid concept.
Posted on 11/09 10:18pm
COMMENT Armen
That was supposed to say “305px for the sidebar”
Sorry about that.
Posted on 11/09 10:53pm
COMMENT ross
It does end up to 958px wide which I rounded up to 960px since that is a rough number most people like to avoid going above because of scrolling issues.
This is the site I use to calculator grids, hopefully it helps you with your desgn need!
Posted on 11/10 10:24am
COMMENT Ptah Dunbar
wow. do you know how much time that saves my design process?! a lot. probably 15%-20%
Thanks Ross.
Posted on 12/11 8:24pm
COMMENT photoshop grid
[...] Start With The photoshop grid – 3twenty3.com … COMMENT photoshop grid Template for mock ups …http://www.3point7designs.com/blog/2007/11/07/960px-photoshop-grid-template/Photoshop StuffIt shows up in photoshop as Select/Other/Grid. … Note: photoshop 5 comes with a [...]
Posted on 05/27 11:04am
COMMENT xocai
960px photoshop grid template – Excellent idea very nice.
Posted on 08/20 5:51am
COMMENT Заметки о дизайне - модульная сетка - ссылки
[...] With Grid-Based Approach @ Smashing Magazine 65 Resources for Grid-Based Design @ Vandelay Design 960px Photoshop Grid Template @ 3.7 designs Gridding the 960 @ Camreon Moll Web Page Layout Grid @ Smiley Cat (без [...]
Posted on 09/11 3:35am
COMMENT Howard
Nice idea with the grid thing and all – makes life much easier.
Posted on 10/12 1:31am
COMMENT whisky
Very nice, i am using this for sure! thanks!
Posted on 02/10 10:12am
COMMENT T. Regan
Great stuff! All hail the almighty grid template.
Posted on 02/24 6:12pm
COMMENT Birkenstock
Great thanks use it all the time.
Posted on 02/26 1:05pm
COMMENT Havaianas
Oehh.. nice im using this for a while now and it is rocking!!!! woehoe!!!!
Posted on 03/06 5:20am
COMMENT Herramientas Para Un Diseño En Base a Una Cuadrícula | Fuel Your Creativity Español
[...] 960px Photoshop Grid Template [...]
Posted on 05/28 9:14pm
COMMENT Angie
Wasn’t that already available at the 960 Grid System site? http://960.gs/
Posted on 06/24 6:03pm
COMMENT 27 Must-Have Starter Kits For Web Designers
[...] 960px Photoshop Grid Template PSD grid template in 960px width to prevent yourself from composing with edges of the screen that may/may not actually be where you plan them to be. [...]
Posted on 07/14 7:34am
COMMENT Dave K
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
Posted on 12/26 11:18am