November 7th, 2007 / Ross Johnson / 44 Comments

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

960 grid icon 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!

Download the PSD template

44 thoughts 960px Photoshop Grid Template

  1. 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.

  2. 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”

    ross
  3. 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.

  4. Pingback: Start With The Photoshop Grid - 3twenty3.com

  5. 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!

    ross
  6. Excellent idea! I’ll definitely be using this – probably a lot!

    Stumbled!

  7. Thanks Armen, if you are interested subscribe to the RSS I plan on create more for different resolutions.

    ross
  8. Pingback: Photoshop Grid Template for mock ups

  9. Would be great to see more for other layouts as I know I would like to personally see them (hint hint 😆 )

  10. Pingback: KOCHWERKSTATT

  11. Pingback: Kotyk.com » Photoshop Grid Template

  12. 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.

  13. That was supposed to say “305px for the sidebar”

    Sorry about that.

  14. 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!

    ross
  15. wow. do you know how much time that saves my design process?! a lot. probably 15%-20%

    Thanks Ross.

  16. Pingback: photoshop grid

  17. 960px photoshop grid template – Excellent idea very nice.

  18. Pingback: Заметки о дизайне - модульная сетка - ссылки

  19. Nice idea with the grid thing and all – makes life much easier.

  20. Very nice, i am using this for sure! thanks!

  21. Great stuff! All hail the almighty grid template.

  22. Great thanks use it all the time.

  23. Oehh.. nice im using this for a while now and it is rocking!!!! woehoe!!!!

  24. Pingback: Herramientas Para Un Diseño En Base a Una Cuadrícula | Fuel Your Creativity Español

  25. Wasn’t that already available at the 960 Grid System site? http://960.gs/

  26. Pingback: 27 Must-Have Starter Kits For Web Designers

  27. THERE IS NO FOLD!
    THERE IS NO FOLD!
    THERE IS NO FOLD!
    THERE IS NO FOLD!

    Dave K
  28. Thank you for the template mate! A much needed piece of work that saves the time and effort of re-dos!

    Cheers

  29. Thank you so much for this. I’ve been using it for quite a while now!

  30. Thank you, this will save heaps of my time.

  31. 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.

    Jeff
  32. 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!

  33. Pingback: UI Stencils & Templates | Calgary Web Designer and Calgary Web Designer and Web UX Developer ~ Jenn Armour

  34. I would Like To Use it if U have a html with stylesheet example, 🙂

  35. Pingback: Web Tasarım İçin Yardımcı Olabilecek Kaynaklar | Graweb, Grafik ve Web Tasarım StudioGraweb, Grafik ve Web Tasarım Studio

  36. 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?

    elzani wait
  37. Pingback: Web Design: Popular Tools for the Modern Web Designer | Bitmag

  38. The fold is the point at which the user must start scrolling to see more of the page.

    Ross Johnson
  39. Pingback: UXDesign.ro » UX survival kit – free stuff

  40. 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

  41. 960px Photoshop Grid Template « Web Design Marketing Podcast & Blog Web Design Marketing Podcast &.. http://bit.ly/lkjyVA

  42. @L_Magee Not on my site – have a look at the PS template download http://t.co/CjUgEh6Y 🙂

Comments are closed.