A while back I started investigating grids—what they were, and how they could help my design. As a web designer, I never thought much about grids. It seemed to be some esoteric thing print designers used. Back in the table-based layout days, I probably used grids without even knowing it. Table columns and rows naturally structured the layout, the cellspacing attribute acted as a gutter between rows and columns, and cellpadding added a bit of buffer for the text. Of course, I normally set both to zero for pixel-precise layouts. I’m glad I don’t work that way anymore…
The web is naturally fluid. If you create a page without any styling, the text is going to fill the browser window until it wraps. Pages expand with content, so there is no defined vertical boundary to the page, unless the content is static. There isn’t a horizontal boundary either, unless the layout is a fixed size. Even if the layout is fixed, as soon as a user increases their text size, the content changes. This seems to be the hardest thing for print designers to accept when working on the web, understandably so.
Designing with Flash on the other hand is much closer to designing for print in some ways. If Flash is used for an entire page layout, typically the size is defined, creating boundaries as you would have with a print layout. The format is going to dictate the layout.
A Flash layout can be totally freeform, or you could opt to use an organizational structure. Enter the grid. There is no page setup in Flash to create a series of columns as you might in InDesign. It would be nice if you could do that. But, you can simulate this sort of structure by using the grid within Flash, and creating columns manually as graphics on the stage.
Setting up the grid
First, create a new Flash document. You’ll eventually need to define your canvas size, which will be dependent on the size of the grid unit.
To start, open up the preferences for the grid. On the Mac and Flash CS3, this is under View > Grid > Edit Grid. Define the space between both the vertical and horizontal grid lines. To make the math easy, I use 10 px for the space between the verticals. The horizontal grid lines will help you align text across columns and keep the layout consistent.
From there, you’ll need to create a series of columns that define the grid. A method that works pretty well is to divide the canvas up into twelve vertical columns. Why twelve? Well, it can be further divided by two, by three, by four, etc. giving you a flexible system. Dividing by twelve and factoring in a ten pixel space between columns gives you some parameters for the page size. There will be eleven gutter columns between your primary columns, plus a gutter on either side of the page.
Page size = 12 columns + 13 gutters.
If you are targeting a 1024×768 monitor, you know you want your page width somewhere under 1024. Given browser chrome, probably no bigger than 970 px. And that is a non-scientific guess based on testing across a few browsers, both Mac and Windows. As an example, a column or grid unit of 65 px works out to:
(65 * 12) + (13 * 10) = 910
You can experiment with your own values and pick something that works for you. Getting back to Flash, set your canvas width to the number you just worked out—910 in this case.
Then, take the unit you decided on and create a rectangle with that width—65 px for this example. The height of the rectangle should be the height of your document. Select a fill color that you are not using in your design, such as pink. Set the alpha to 20%, or a value that looks right to you.
Position the rectangle 10 px from the left edge of the canvas. Copy it, paste it in place, and move it over using the shift-arrow key combination so that you have a 10 px buffer between the two rectangles. Repeat the process until you have a series of columns filling the width of your canvas. There’s your grid!
The grid will show on export, which is probably not what you want. You can hide it by changing your publish settings. Deselect “Export hidden layers” and toggle the visibility of your grid layer before you export. Or, you can hide it by creating a new layer above it containing a rectangle the size of the canvas. Give the rectangle a solid fill, the same color as the background.
There is a fairly comprehensive tutorial on the details of grids for both Flash and standard layouts at AisleOne. Be sure to check out the Photoshop actions file—definitely one of the more useful things I’ve run across.
Doug is on the artistic move.
I try Dave!