Apr 23 2012

Here are the steps I take to efficiently sketch out grids in Illustrator. The best part is: step 6 can be revisited at any time and modified, should you change your mind or want to experiment further. This kind of flexibility is quickly winning me over to Illustrator for wireframing.

  1. Create a 1024px X 768px document
  2. Select the Rectangle Tool (M)
  3. Click once anywhere on the canvas
  4. In the Rectangle Tool Dialog, enter 960px X 768px
  5. Use the Align Pallet to center the rectangle with respect to the Artboard
  6. Menu > Object > Path > Split Into Grid
  7. Enter whatever numbers you like. Illustrator will attempt to adjust other numbers to help you out.
    Split Into Grid
  8. Now, you should have a group of paths and a bunch of paths outside of that group. Rename the group “Guides”
  9. Select the paths not in the “Guides” group and group them
  10. Rename the new group “Boxes”
  11. Hide the Boxes Group. You don’t need these anymore, but if you change your mind about the grid, you can select all of them and go back to step 6. How awesome is that!?
  12. The “Guides” group currently contains a bunch of paths with no strokes. To make them actual guides, select them all and Menu > View > Guides > Make Guides
  13. Rename that layer “Horizontal Grid”

That’s all there is to it. It looks like a lot of steps, but you get really fast at it. I like using the “Split Into Grid” dialog to find my grid when I’m still working out how wide I want my gutters to be. I find it to be an invaluable tool.