960px Photoshop Grid Template
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!
Did You Like This Post?
- Author: Ross Johnson
- Date: Wednesday, November 7, 2007
- Comments: 44 Comments
- Categories:
About This BLOG
I have always been a fan of improvement. There is something indescribably rewarding about optimizing. No matter where you are and what you are doing things could always be better. This is my mindset for everything I approach including design and business. This blog is an exploration of how to improve your design skills, knowledge and process. Provided by Web Design Agency 3.7 DESIGNS.
The Latest Buzz
No tweets available at the moment. — 3PointRoss
You should follow us on twitter here.
Popular Posts
We recommend
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.
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”
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.
[...] read this post today, and I really felt stupid for not thinking along these lines a long time ago: 960px Photoshop Grid Template – [...]
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!
Excellent idea! I’ll definitely be using this – probably a lot!
Stumbled!
Thanks Armen, if you are interested subscribe to the RSS I plan on create more for different resolutions.
[...] 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 >> [...]
Would be great to see more for other layouts as I know I would like to personally see them (hint hint
)
[...] » 960px Photoshop Grid Template – Web Design Marketing Podcast & Blog [...]
[...] 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 [...]
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.
That was supposed to say “305px for the sidebar”
Sorry about that.
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!
wow. do you know how much time that saves my design process?! a lot. probably 15%-20%
Thanks Ross.
[...] 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 [...]
960px photoshop grid template – Excellent idea very nice.
[...] 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 (без [...]
Nice idea with the grid thing and all – makes life much easier.
Very nice, i am using this for sure! thanks!
Great stuff! All hail the almighty grid template.
Great thanks use it all the time.
Oehh.. nice im using this for a while now and it is rocking!!!! woehoe!!!!
[...] 960px Photoshop Grid Template [...]
Wasn’t that already available at the 960 Grid System site? http://960.gs/
[...] 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. [...]
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
Thank you for the template mate! A much needed piece of work that saves the time and effort of re-dos!
Cheers
Thank you so much for this. I’ve been using it for quite a while now!
Thank you, this will save heaps of my time.
thanks this is very helpful
Great PSD to get started, thanks I have been looking for something like this. I also love the fact that you included the “fold area” bar… This is going to really help me get concept designs out the door much quicker.
I’m usually straight into coding but where the website content is complex, this grid template is awesome to refine layout ideas and keep them in shape!
[...] 960 Photoshop Grid Template by 3point7designs. [...]
I would Like To Use it if U have a html with stylesheet example,
[...] 960px Photoshop Grid Şablonu 39 Bu şablon üçte kural amacıyla her iki sütunu görselleştirmek için solmuş renk katmanları ile üç sütun 20 piksel oluk tasarımı için bir kılavuz vardır. Ayrıca, 20-piksel oluklarının altı sütun ayrılmıştır. [...]
Hi I am new to this all, what tips do I need to know,for the layout of a web.. and what does the fold mean?
[...] web designers in the modern era work through a 960 grid system. You can find tons of examples for Photoshop grid templates [...]
The fold is the point at which the user must start scrolling to see more of the page.
[...] 960px Photoshop Grid Template This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters. [...]
Great stuff, I don’t really like the 960.gs, as I’m only just learning CSS & it’s a bit complicated with the way its set up.
Cheers,
Jay – http://NFOPic.com
’960px Photoshop Grid Template’ http://bit.ly/lkjyVA
960px Photoshop Grid Template « Web Design Marketing Podcast & Blog Web Design Marketing Podcast &.. http://bit.ly/lkjyVA
@L_Magee Not on my site – have a look at the PS template download http://t.co/CjUgEh6Y