Align to Pixel Grid

Dawid Tuminski
A free video tutorial from Dawid Tuminski
Adobe Certified Expert Designer and Online Entrepreneur
4.5 instructor rating • 32 courses • 44,496 students

Learn more from the full course

Top 10 reasons to use Illustrator for web design

Why Illustrator is great for web design. Web design tricks and tips. Web design basics

39:51 of on-demand video • Updated October 2016

  • Align objects to pixel grid
  • Use artboards in a web design job
  • Use appearance panel
  • Use symbols
  • Save artwork as SVG
  • Create and use character styles
  • Use Pixel Preview
  • Use Guides and grid
  • Use layers panel
English [Auto] One of the major drawbacks of illustrator in terms of web design was that it couldn't produce artwork that would appear and perform as it was pixel base. But it all changed with the release of illustrators years five. Ever since then we have the ability to align the artwork to pixel grid. And it is this ability that makes it all Center viable for any kind of web design work. So take a look at what pixel grid and line into it actually is. Quit going here guys if you're familiar with my style of teaching you already know that I want to get straight to the point and make the learning process as easy as possible so forgive me if I don't throw a lot of technical jargon at you. OK. First let's actually experience the presence of the pixel grid. If we go to the guidance and good preferences and we can access them by going to the Edit menu choosing preferences and then guides and grit that's on PC or on the Mac we should go to Illustrator preferences and then guides and grid so we can see an option at the bottom that allows us to see the pixel grid when the zoom value exceeds 600 percent. OK so what's next. Well let's explore the Align to pixel good option a bit more. First of all when you create a new document intended for web the Align to pixel grid option is turned on by default. So see that for yourself by going to the file menu choose new and from the profile's time choose web. If you can't see the new objects to pixel grid option click the Advanced tab to see more options. Now we can be sure that every object we create will be aligned to pixel grid. But what is the whole purpose of this. Well first of all prevents objects from looking fuzzy and pixel preview mode. You can turn it on by go into the view menu and click in pixel preview and digital screens render artwork based on pixel grid. So placing an object off of the pixel good will cause it to blur. This is one anti-alias and comes into play preventing the pixels from looking jagged. Secondly objects with dimensions that are not integer values would appear as fuzzy when put against the pixel grid and aligned to pixel grid runs up or down those dimensions. So you don't have to worry about them. It also takes care of the right placement of the object so the pixel grid and the placement values mean the X and the y coordinates are not integer values ill's rounding them up or down as well. But what have you forgot to label the line. New objects to pixel good upon creation of the new document for which is quite a common thing. You have objects from other illustrator documents that weren't aligned to pics and grid. Well there are two different ways of tackling this issue. You can make all the new objects that you create a line to and grid and to do that. Open the transformed panel by going to the window menu and then transform. Alternatively you could use the shift plus a shortcut and in the panel menu. Make sure the align you object to pixel grid is checked and if you need to align existing objects to pixel grid all you need to do is to select them and in the transformed panel check aligned to pixel good option at the bottom of the panel. So I will select the right square. That is not a line in the pixel grid. And now I will check the Align to pixel grid and as you can see it snaps nicely to pixel grid and it's not looking fuzzy anymore. Pixel precision is something you can achieve with Illustrator quite easily. The combination of pixel preview which we'll talk about later and aligning objects to pixel grid are essential to make illustrator mimic a pixel design environment.