Skip to content

Instantly share code, notes, and snippets.

@redesigned
Created December 10, 2013 22:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save redesigned/7901076 to your computer and use it in GitHub Desktop.
Save redesigned/7901076 to your computer and use it in GitHub Desktop.
Illustrator for web
Basically, besides the colors set to RGB and the units to pixels, when the illustrator document is created, you need to make sure that the Snap to Pixel Grid box is checked, and whenever you transform or move an object you want that box checked as well.
Since illustrator is vector, paths can potentially be placed any fraction of a pixel off and will create lots of extra feathered borders, blurriness, stair stepping on curves, squares and boxes with blurred corners, fuzzy fonts, wrong font weights, and host of other unwanted issues due to them not being aligned to the pixel grid properly. Basically, that one setting of snapping to pixel grid increases the quality of the output for web tremendously.
Make sure to follow all of these tips:
http://help.adobe.com/en_US/illustrator/cs/using/WSf01dbd23413dda0e1e23acb6124476da654-7fea.html
This is the shortlist for illustrator web pixel perfection.
1. RGB Color
2. Font Rendering set to Sharp
3. Units set to Pixels
4. Snap to Pixel Grid selected when document is created.
5. Snap to Pixel Grid selected when resizing or transforming objects.
Here is some additional info:
http://blogs.adobe.com/jnack/2010/05/illustrator_cs5_has_excellent_pixel_chops.html
-and-
http://rwillustrator.blogspot.ca/2010/08/when-pixels-snap-antialiasing-in.html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment