Master Grid-based Web Design in Photoshop

Grid-based design has long been a staple of print design, but web layout tends to be more haphazard, largely driven by gut instinct and restrictions imposed by specifically defined pieces of content such as adverts.

With technology evolving rapidly, screens are larger and web technologies more powerful, which means designers can now successfully bring much of their grid-based knowledge to the internet, resulting in more balanced, versatile, and pleasing online layouts.

In this tutorial, we'll show you how to create a grid-based layout for a website. As most Digital Arts readers are comfortable using Photoshop, we'll be working in that program.

Since the process of creating a website depends largely on the content and format dictated by your client, this is less step by step than many of our tutorials instead, it's a point by point introduction to adapting the principles of grid based designs for online projects.

Still, by the time you've finished the task, you should have created a grid based project. On the CD is a blank grid for you to use, the Photoshop document from step 10, and a completed web version of the design.

Step 1 Web units are pixel-based, so forget about points and millimetres. In Photoshop, go to Photoshop ; Preferences ; Guides, Grid ; Slices, and set a gridline to appear every 20 pixels, with two subdivisions. Goto Window and Info, open the Options menu and set the ruler units to Pixels. Also set one of the colourreadouts to Web Color.

Step 2

Create a new document, 1,100 pixels wide and at screen resolution. Initially, make the grid visible (View ; Show; Grid), drag a marquee 940 pixels wide, and drag the guides to the vertical edges. This area is the site container or 'wrapper'.

Step 3

Create a layer group, and name it 'grid overlay'. Within this, create a new layer, 'columns'. Create a selection 60 pixels wide and the height of your canvas, and fill it with a vivid colour, such as red (Shift + F5). Move the marquee 20 pixels to the right of the coloured area and add another column. Repeat a few more times.

Step 4 Create another layer, naming it 'gutters', and fill the 20 pixel gaps with yellow. Drag a ruler to each gutter edge. If you like, add gutters to each side of the wrapper. You now have a flexible vertical grid, visible through guides or by using the 'grid overlay' layer set as a semi transparent overlay. This starting point is on your CD, saved as grid-template.psd.

Step 5

A 12-column web page layout such as the one we've created here is flexible. It can be divided into quarters, thirds, and halves, and those splits can be divided again. For many websites you'll design, an 8:4 split is suitable for the main content area and sidebar; four columns and three gutters are 300 pixels wide - the perfect fit for a standard 300x250 pixel ad slot.

Step 6

When placing elements, stick to the grid. Here, the logo spans three columns, as does the search field. In the design shown, the first column is blank, which draws attention to the 'indented' content. The main content area is six columns wide, with a column's gap prior to the four-column sidebar.

Step 7

Always use web-safe fonts for body copy and headings. You can find overviews of safe fonts at tinyurl.com/webfonts and at tinyurl.com/webfonts1. Remember that fonts never look the same in Photoshop and browsers.

To get a more accurate reflection of how words are rendered in browers, go to the Paragraph panel and disable hyphenation. Now set your leading to your grid height (or a multiple thereof, if you prefer) throughout.

Step 8

When building vertically, use multiples of your grid size for component sizes and page sections, and align things using guides. Don't get too hung up on trying to align objects from different major page components (such as main content and sidebar), perfectly.

Maintaining a vertical grid in web design is actually pretty difficult unless you're extremely fastidious regarding vertical image heights and apply restrictions to every single one of the content boxes.

Step 9

When adding simple borders to images, use internal single-colour strokes. If sticking to the vertical grid, image heights must be a multiple of your grid size. Differentiate captions from body copy with italics or visual indicators. Placing an indicator on the other side of the nearest gutter draws a user's attention.

Step 10

Save layouts as PSDs and make copies for exporting. (Exports often need you to flatten an image, and it's easy to accidentally overwrite a layered file.) When exporting, think modular - don't just slice a design into rectangles. For semi-transparent components, copy them to a new document and use File Save for Web Devices to save them as PNG-24 files.

Step 11

For a horizontally tiling section, such as the background gradient, flatten the image, copy a narrow section (here, down to the point where the gradient becomes a solid colour) and in the Save for Web and Devices dialog save it as a lossless GIF or PNG. Note the hex value (in the Info panel) of the solid background colour, since that will be used in CSS.

Step 12

For images with a border in the layout document, export the images as JPEGs, and without their borders. (If you keep the borders on while making the JPEGs, they'll look muddy. Adding the borders later in CSS means you'll get crisp, solid results.) One other tip, to balance file size and quality, a quality setting of 60 is a good starting point.

Step 13

This step's a doosie: build the web page! To help you along, the web page based on this layout is on the CD, so you can play around with it. Use web standards (divs for structure, CSS for styles), and don't be precious about replicating the layout exactly, nor in getting identical results across browsers and platforms - be happy with similar.

Step 14

To retain a tight vertical grid, temporarily replace your site's background in CSS with a grid tile, as shown. This will show whether things are lining up and any adjustments that need to be made. In grids.css from the CD files, uncomment the second 'background' property within the 'body' rule to see the grid.