Tutorial9 | The Best Tutorials and Resources. Free.

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 24x24px, delete the background, then draw a single 1px line along the bottom of the document. We’re going to define this as a pattern: Edit > Define Pattern and give it a memorable name.

Next return to your document and create a new layer. Fill this layer with the pattern, Edit > Fill this will create your Baseline Grid.

Finally we’ll mark out our working area using guides. Create a new guide View > New Guide, select vertical and create guides at 360px, 840px & 1320px the reason we put these guides is so we get a 960px working area between 360px and 1320px and a central line 840px.

Step 3: Starting the design

Now that we have our template sorted we can make a start on the design, the design will be split into 5 sections:

1. Header
2. Callout
3. Content – Left
4. Content – Right
5. Footer

Step 4: Add the header

We going to start at the top and work out way down so the header is first. Grab the Rectangular Marquee Tool and select an area across the width of the
document and a height of around 120px—turning on the rulers will help or drag down till you have filled 5 of the horizontal markers, then fill this with a dark grey (#2C2C2C). This header bar will hold the logo and the navigation.

Step 5: Insert your logo

Next insert your logo into the top left, lining it up with the second column of the grid giving the site a padding of 40px, for this project I am simply using a font based logo of 50 pt Century Gothic filled with a light blue (#ADC7D9) separating the two words by placing the second in bold and in white (#FFFFFF). Next apply an inner shadow to your logo element. I reduced the inner shadow opacity to 25% and gave it the following values, Distance: 2px , Choke: 0%, Size: 5px

Step 6: Add navigation

The navigation is next on the list. To keep a simple clean look we’ll be using text based navigation. Select 18pt Arial and write out your navigation. Colour the active link which in this case is home in white (#FFFFFF) and fill the others with a light grey (#BBBBBB). Align these elements and place them into the center of the top header bar.

Step 7: Add the Callout

I call this section a callout because essentially that’s what it does—it calls out information about the page. Repeat the process for the header bar by selecting the Rectangular Marquee Tool but with a height of 240px then fill with the same light blue (#ADC7D9) as the logo. We’re are going to add a subtle gradient to the section so double click to bring up the Layer Style Panel and select Gradient Overlay. Choose the colour to transparent overlay then change the blend mode to overlay and reduce the opacity to 30%.

Step 8: Creating the Callout Background

As the company is called blue grid we’re going to add a grid styled background to the callout. To do this were going to use a similar technique to when we added the horizontal lines, first create a new document 25px by 25px. Once again delete the background to make it transparent and draw a single 1px line along the bottom and this time up one side and define it as a pattern Edit > Define Pattern.

Step 9: Adding the Callout Background

Create a new layer above your callout layer and fill this layer Edit > Fill with your new pattern.

Rotate this layer 15 Degrees apply a colour overlay of white and place over the callout bar. Create a new layer and merge it with the white gridded layer and name it.

Apply a blend mode of Soft Light to this layer. Select your callout bar area either with the Rectangular Marquee Tool or Control + Click the layer. Next select the Rectangular Marquee Tool right click (Control + Click) and choose select inverse then Delete. This will remove all of the grid that isn’t in the callout area.

The next step is to make sure that the gridded area only extends to the edge of the 960px working area so pop your guides up if they are hidden. View > Show > Guides, next add a layer mask to the grid layer.

Select the layer mask by clicking it then select the Gradient Tool (G) and choose a black to transparent gradient. We are going to use this to erase the grid that lies outside the main 960px area.

Make sure the gradient is set to Linear and is a black to transparent gradient. Start from the edges and drag the gradient in till it reaches the guides. Repeat this on both sides until you are happy with the look. You should notice that the layer mask should show the black gradient around the outside.

Step 10: Adding the Callout Content

Our callout requires a page callout, which we shall do in text select Arial 45pt (#2C2C2C) and write your callout highlighting any essential words by placing them in bold. Under this place a small introductory sentence in a smaller 17pt. and place these on the left hand side of the callout bar.

Step 11: Adding the Slideshow

Grab your Rectangular Marquee Tool and drawing out a section between the far right and the middle guide, make the height 8 lines of the callout bar leaving 1 on top and 1 below and Fill with Dark Grey (#2C2C2C). This will be the background of the slideshow.

Add a shadow to your slideshow background, double click to open the Layer style Panel select drop shadow change the colour to (#2C2C2C) select a Distance of 1px and a size of 10px.

Next you’re going to need some dummy content to place in the slideshow, I personally have taken a screenshot of my blog. Resize this so that it’s the same size as the slideshow then Select > Modify > Contract 10px , select the inverse of this as before and delete.

Step 12: Content section

To start off the content section we are going to add a subtle gradient, use your Rectangular Marquee Tool to select all the area under the callout, next select the Gradient Tool (G). Select a gradient from (#F0F0F0) to transparent and drag the gradient downwards. Don’t go too far as the background should return to (#F9F9F9) by the bottom of the page.

Step 13: Content – Left

Add an introductory paragraph in Arial 18pt #9C9C9C as well as styled link Underlined #A3BBCC.

Step 14: Adding a list of services

First add a heading for the section in Arial 25pt Bold #262626, proceed to add list items in 18pt Arial #9C9C9C to illustrate the bullet point you can either draw them out using the Elliptical Marquee Tool or use Alt codes Alt+7 colour these with the light blue (#A4BCCD) and align with the grid.

Repeat this to add any additional information.

Step 15: Content – Right

The right hand section of the page will show a selection of recent news. First add a title in the same style as those previous Arial 25pt Bold #262626 and align this with the header of the services section. This section will list our latest news, Create a header for the news post in Arial 18pt #A4BDCD and place content under it in Arial 16pt #9C9C9C. Repeat this for 3 stories then place a link underneath in Arial Underline 16pt #A4BDCD to the news page.

Step 16: Footer

Our last section is the Footer this will hold a login form, contact details and a few links. Start by selecting the bottom section of the document with the Rectangular Marquee Tool and fill it with Dark Grey (#262626).

We’re going to add the form now, first create a header Arial 20pt Bold (#FFFFFF) and place it on the left hand side of the footer. Then use the Rectangular Marquee Tool to create two rectangles these will be the input fields. Fill these will descriptions Arial 16pt #9C9C9C

Repeat this for the submit button but use the Rounded Rectangle Tool(U), then add an Inner shadow to these elements, drop the opacity to 30%, size and spread to 0 and the distance to 10px. Add a “lost-password” link in Arial 13pt Underline #A4BDCD.

Step 17: Footer – Right

Finally were going to finish up by adding some contact info, add a header Arial 20pt Bold (#FFFFFF) and line up with the form header, then add contact info below in Arial 16pt #FFFFFF.

Step 18: Check alignment and balance

Use the grid and the guides to check that everything is lined up and balanced, if not then adjust accordingly.

Step 19: Relax, you’re finished

Hopefully, you’ve gotten a small grasp of how you can work with a grid system, and customize a basic system of your own. I would strongly encourage you to experiment with these systems more until working with them becomes second nature for you. Over time, working with a grid will make your job as a designer much easier!

Download the PSD