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.