Understanding Adobe Illustrator's Grid System


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.
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.

grid example

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).
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.

round corner antialiasing 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.
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.
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.
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

setting up a new document

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.
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.

positioning the black square

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.

viewing the grid

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.

moving the black square on the grid

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).

grid dimensions explained

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.

artboard dimensions vs grid system

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.

adjusting the grid settings

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.
Create an 800 x 200 px rectangle and position it towards the top of our Artboard, coloring it using #191919. Grab the Type Tool and label this section as our website’s Header.

prototype header

Quick tip: if you have elements that are smaller and don’t actually need to be snapped to the Grid, in our case the section labels, simply select those elements and then go to the View menu and deselect Snap to Grid.
Create a smaller 600 x 400 px rectangle, color it using a darker tint (#3D3D3D) and then position it using the directional keys to the left of the Artboard, just under the header. Make sure to label this section of the website as the Content.

prototype content

Create an even smaller 200 x 400 px object, color it using #B24747, and then position it to the right side of the content, making sure to label it as the Sidebar.

prototype sidebar

Finish up our little wireframe by adding another 800 x 200 px rectangle (#191919) to the bottom of our Artboard, labeling it as our Footer.

prototype footer

In a manner of just a few seconds we managed to create a rudimentary website. Imagine if we had spent more time playing with it.
Before I let you experiment with custom Grids on your own, I wanted to talk to you about the main differences between the Snap to Grid and Snap to Pixel options.
By default, when you set up a New Document, the Preview Mode is usually set on Default. That means that what you design is basically what you see (you see the vector as it is and not in pixel format). In this case the Snap to option will be set to the Grid, and depending on the values you assign to it, it will snap to one of the little squares that form it.
If you enable Pixel Preview (View > Pixel Preview) and zoom in on the Artboard,Illustrator will reveal the actual pixels that form your vector elements. Once the snapping is set to Pixel, each movement made on the Artboard will be by exactly the number of pixels you’ve set your Keyboard Increment to, in the direction you pushed it to.
Quick tip: Yes you can set a default Increment for the precision with which you move objects around your Artboard. The option can be found going to Edit > Preferences > General > Keyboard Increment.

keyboard increment settings

The key difference between these two snapping methods is that if you’ve somehow created an object that has pixels with decimal places, for example a rectangle of200.9 x 60.40 px, snapping it to the Pixel Grid will force it to change its dimensions to whole values, thus creating a sharper object.
I recommend that once you’ve created something using the Snap to Grid option, you should always switch to Pixel Preview mode and see if they align correctly to the Pixel Grid so that you can make sure your artwork will end up looking as crisp as possible.

TDasany

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

 

Copyright @ 2013 KrobKnea.

Designed by Next Learn | My partner