Part 1

WEB LAYOUT AND OPTIMIZATION

Tutorials 1: Setting Up a Grid

NO DOUBT YOU’VE already heard about how important it is to design your print and web layouts using the grid system.

INTERNET HINT: To generate your own custom CSS grid, which you can then take a screenshot of and use as a template in Photoshop.

STEP 1 :

Th e first thing you need to do is open a blank document in the size and format that you would like to work in. For instance, to make a web layout following a grid layout optimized for a 1024×768 monitor, you’ll create a grid that is 960 pixels wide by 768 pixels tall with 12 60-pixel wide subdivisions and 11 20-pixel wide gutters (that’s the spaces between the subdivisions). Select File > New to open the New document dialog box. Under Preset choose Web, which will automatically set the resolution to 72 pixels/inch and the color mode to RGB. Next, enter a width of 960 and a height of 768, and then click OK.

Next you’ll make the grid visible by choosing View > Show > Grid. If you do not see the Show option under the View menus, select Show All Menu Items at the bottom of the View dropdown to reveal the hidden menu options. You may also toggle the grid on and off by pressing Ctrl+’/Ô+’.

STEP 2 :

By default, the grid appears with a gridline every inch with four subdivisions. However, you can easily adjust the grid attributes through Photoshop’s Preferences. To open the Preferences dialog box, choose Ctrl+K/Ô+K and adjust the settings in the Guides, Grid & Slices category. For the purposes of this exercise, change the Gridline Every number to 40 and the unit of measure to pixels. Leave the subdivision setting at 4; this will ensure that each grid
subdivision line is 10 pixels apart. Th is 10-pixel space will also serve as the gutter lines between major grid divisions. Click OK to save the changes and return to your document.

STEP 3:

Next you’ll add some vertical guides. Make sure your rulers are displaying along the top and left edges of your document window. Rulers can be toggled on and off by selecting View > Rulers or pressing Ctrl+R/Ô+R. Because you created a web document in Step 1, your rulers should be automatically set to display in pixels. If not, right+click/Ô+click on the ruler and select the desired unit from the Ruler’s context menu. To set your first vertical guide, click and drag from the left ruler toward your document window without releasing your mouse. Your cursor will change to a double-sided arrow with two vertical lines in between and you will see the outline of a vertical guide running across your screen. Position this guide along the left edge of your document and release your mouse. Guides, once released, appear as bright blue lines, which can be easily repositioned when needed using the Move tool, or locked into place using the View > Guides menu. Place another vertical guide along the right edge of your document and then add two more guides at the first 10-pixel subdivision line along both the left and right edges, as shown in Figure 1-1.

SETTING UP A GRID

Figure 1-1

To more quickly add the guides to your file, next you’ll create a rectangle shape to serve as your template. With your Info panel visible (so you can see the W and H attributes of your selection), use the Rectangular Marquis tool to drag out a shape that is 60 pixels wide by 768 pixels tall. To fill this selection with a color, release your mouse and press the Create New Fill or Adjustment Layer button (it looks like a black and white cookie) at the bottom of your Layers panel, choose Solid Color from the menu, and from the Color Picker dialog box, select a soft color that won’t distract from your layout, such as a pale yellow or very light blue. Add a vertical guide along the right edge of this shape, and then add two more at the next two 10-pixel subdivision lines to the shape’s right edge. You’re going to repeat this process to add rectangular shapes and vertical guides until the entire document is filled up. To make duplicate
rectangles quickly, drag and drop the rectangular shape layer onto the panel’s Create New Layer button or choose Duplicate Layer from the layer’s context menu. Move each new layer into position along your grid and add guides in between, as seen in Figure 1-2.

WEB LAYOUT AND OPTIMIZATION

Figure 1-2

STEP 4 :

Now that you have your grid system in place, you’re ready to create your layout. Use the guides and gutters to lay out your content. As long as you follow the margins created by the guidelines, you should be able to create a visually pleasing and interesting layout. For example, in the layout shown in Figure 1-3, I’ve added content placeholders for the logo/ navigation, a rotating banner area, a row of special items, a place for the latest news, and a section for quick links.

Figure 1-3