Understanding Adobe Illustrator's Grid System ~ KrobKnea

Final product image — What You'll Be Creating

Adobe Illustrator is today by far the most popular vector software out there. As complex and elaborate as it might seem at first, it doesn’t take you long to tinker with it and figure out what most of its buttons and options do.

Still, some functions and settings are usually overlooked by those who are just starting to grasp it, which is why I’m going to share with you something that I wish somebody had showed me when I first started out using it.

Yes, I’m talking about the Grid system.

What Is the Grid?

As with any learning curve, the first thing we need to ask ourselves is what is the actual meaning of the word?

According to the Merriam-Webster online dictionary, a grid is defined as “a network of uniformly spaced horizontal and perpendicular lines (as for locating points on a map)” .

An even more refined definition can be found over at Wikipedia, where the grid is explained in the context of graphic design: “a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements (images, glyphs, paragraphs) in a rational, easy to absorb manner. A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.”

It’s worth mentioning that Illustrator’s Grid is made up of only straight vertical and horizontal lines. If you want to set up curved or more complex grids, you will have to rely on creating them using guidelines, which are fairly easy to use.

Why Is the Grid Important?

Probably at this point you have a basic idea of what a grid is. But why should you care or even use it? Well, if you want to create something that has balance in terms of the way the visual elements complete one another through their positioning, grids are the way to go. They offer you guidance on how to relate one object to another, and most importantly how to structure elements on the artboard.

Beyond that, the Grid helps designers create pixel perfect artwork for digital devices (which in my opinion is a must), but more on that in a couple of moments.

Before I can expand on the importance of using the Grid to create sharp artwork, I need to talk briefly about some key aspects of the way images are constructed on the two different media (screen and print).

Digital vs. Print

As you probably already know, the digital medium differs a lot from the printed one. Each of them has different color modes (RGB vs. CMYK), and each one can output different resolutions (screen resolution vs. print resolution). What makes them even more different is the way they render images, and most importantly the way they handle curved lines.

A computer monitor is pixel grid dependent (squared pixels tiled to one another), meaning it will handle curvatures by adding transparent pixels (alpha channels) on the sides, a process called anti-aliasing, which in the end mimics the natural straight line one would draw on a piece of paper for example.

A printer is dependent only on the paper size and the dpi (dots per inch) you set the image to, meaning it will print out the curvatures perfectly (with the condition that you set the dpi to a high value). This is because printing is based on layering color dots one by one without the need for adding the semitransparent values that screen devices use to create the illusion of a smooth curve.

To Snap or Not to Snap?

Well, this is probably the best question one might ask. Through the process of snapping, you instruct Illustrator to align each object on the artboard to the grid / pixel grid.

Remember I told you a few lines ago that the Grid helps us create pixel perfect illustrations? Now that you know how digital handles images compared to print, it’s time to elaborate more on the most important role that I think the Grid has.

I am almost certain that you’ve seen some illustrations on Dribbble or Behance with super-sharp lines, and always wondered how the designer pulled that off. Well wonder no more: he or she simply made sure to align everything to the pixel grid, creating every element with whole values.

By whole values I mean values that do not have decimal places, so for example we have a rectangle with a 200 px width and a height of 100 px, and not something like 200.84 px by 99.80 px.

The Grid Extended

Because I believe that examples speak more than words, I will explain all you need to do in order to get the Grid right by showing you a step by step preparing process that you can rely on every time you create something in Illustrator.

Step 1

As with any new project, the first thing we always set up is the document. Open up Illustrator and create a test document with the following values:

Number of Artboards: 1
Width: 800 px
Height: 800 px
Units: pixels

And from the Advanced tab:

Color Mode: RGB
Raster Effects: 300 ppi
Align New Objects to Pixel Grid: checked

Quick note: you might have noticed I set the Raster Effects to 300 ppi, when the document is intended for screen use. Well, setting the Rasters to higher ppi values will have no visible effect on the screen, but if for some reason you need to print out what you designed (even though you created it using RGB color values) any drop shadows, inner shadows, and other effects will get messed up if they are printed at a lower ppi value than 300.

You can always modify the ppi of a document, no matter the initial setting, by going to Effect > Document Raster Effects Settings and giving it the desired value.

Step 2

Once you have the document set up, create a 100 x 100 px black square and position it towards the top left corner of the Artboard using the Align panel.

Step 3

In order to understand how the Grid works you must first see it. Go to View > Show Grid (Control-") and immediately you should see the default 1000 x 4 Grid that Illustrator comes set up with.

Step 4

Now that we see it, how does it actually work? First I want you to select and move the little square with the help of your keyboard’s directional arrows and see how it behaves.

You might notice that our little object jumped a few pixels here and there but nothing easily observable. This is because we haven’t enabled the Snap to Grid option.

Position the square to its original location, and then go to View > Snap to Grid (Shift-Control-Y), and again, try to move the object to the right.

Now clearly we can see a difference. If you move it one more time to the right you start observing a pattern. Each time the square jumps, it does so by snapping to one of the sides of the little squares created by the horizontal and vertical lines that form our Grid.

Let’s see why Illustrator behaves that why, by explaining how Illustrator creates the Grid itself. As I’ve already mentioned, the default settings that are configured in the software are:

Gridline every: 1000 px
Subdivisions: 4

But what do these settings actually mean?

It’s quite simple. At each 1000 px, Illustrator will draw four delimiting lines (two horizontal and two vertical) creating a 1000 x 1000 px square which will be further divided into sixteen smaller 250 x 250 px squares ( 1000 / 4 = 250).

Because our Artboard has only 800 x 800 px ( three 250 px squares plus another smaller 50 px section highlighted with green) it will snap towards the left and top side of one of the Grid’s 1000 x 1000 px squares, leaving the right and lower sections of the Grid space unoccupied (200 px highlighted with red).

Now going back to our little black square, the reason why it jumps all the way to the sides of the 250 x 250 px square is because it has only 100 x 100 px, and as it did with the Artboard, Illustrator forces it to snap to the delimiting lines. If the black object had been exactly 250 x 250 px, it would have occupied the entire surface of one of the Grid’s square, and would have jumped exactly one out of the sixteen inner positions.

Adjusting the Grid Settings

I hope that the last step managed to shed light on how the Grid works, but you must understand that each project you create might require setting up different Grids depending on the size of your Artboard, and the accuracy with which you want to position your elements onto it.

I’ve found that using the smallest possible settings will give me the most accurate results, and by combining the power of the Grid with Pathfinder I am able to position my elements quickly and intuitively.

My Grid settings:

Gridline every: 1 px
Subdivisions: 1

If you want to experiment or simply use the settings I have you, all you need to do is go to Edit > Preferences > Guides & Grid and modify them as you desire.

Rapid Prototyping Using the Grid

Let’s try a short exercise and see how we can create a quick website wireframe using a Grid with Gridlines every 800 px and a subdivision of 4, on the same 800 x 800 px Artboard.

Yes I know the default width of today’s basic website is 960 px, but I wanted to show you a quick example of how easy it is to position things using custom Grid settings.