In this tutorial, we’ll be designing a clean website layout using the 960 Grid System. You’ll see how working with this system can streamline web development workflow, and how to work with a grid system.

Final Image Preview

Step 1: Create a new document

Start by creating a new document in Photoshop with a width of 1680px and a height of 1100px, then fill the background with a very light grey (#F9F9F9).

Step 2: Adding the grid

There are many grid systems available for use online, and there are good practices for creating systems of your own. The purpose of this tutorial is to ease you into a system if you haven’t tried one before. They can really make workflow a breeze, and are great for prototyping layouts.

Download the 960 grid system. Once you’ve downloaded Nathan Smith’s 960 Grid System extract it and then open up the templates folder. Open up the 960 12 column grid in Adobe Photoshop.

Next we’re going to insert this grid into our document. Select the “12 col Grid” group, merge it then copy and paste it into our main document (you may be more comfortable directly editing in a copy of the template file provided in the system which provides guides of its own, this is more of a personal preference option on my behalf). The grid will be slightly small on height so stretch the grid vertically so it touches the top and bottom of the document.

Now we need a baseline grid. A Baseline Grid will help with areas such as spacing of elements and line-height. First create a new document 24