Turn off antialiasing for artwork and ignore type?


Question

I'm trying to force Illustrator to be my goto web design "raster" editor. Working in pixel preview is certainly the way to go but I've run into a problem. In web design there is no AA for boxes and edges/strokes and I wanted to replicate this in illustrator and eventually through the images I export to show my clients.

aa on illustrator

With AA on the edges look incredibly blurry but font is perfect (using crisp) and not representative of the final product if one were to design this in HTML/CSS.

no aa illustrator

With AA off the box looks much better but of course this turns off AA for the font regardless of what sharpness/smoothing option I choose in the Character dialog box.

I'm crossing my fingers here for a best of both worlds solution so I can have artwork without AA but fonts with AA.

EDIT: I did find a workaround - albeit not a very good one for dynamic content editing. I select the text and go to Object > Rastersize. I optimize for type and 72dpi and check transparent background to achieve this result below: enter image description here

Still looking for a better solution.

1
0
5/13/2015 3:58:00 AM

Accepted Answer

Under Preferences, set up a grid with gridlines every 10px with 10 subdivisions:

enter image description here

Then, you can turn on View → Show Grid and View → Snap To Grid and all drawing actions will snap to the pixel grid.

enter image description here

With everything set up, when you draw or edit, it will be snapped to the pixel grid. This results in nice sharp lines, even with pixel preview on.

enter image description here

Strokes will only be sharp if they’re an inner stroke, outer stroke, or if they’re a centre stroke where the line width is an even value (2px, 4px etc).

Here’s a 1px inner stroke, center stroke and outer stroke with pixel preview on and off. You can see the center stroke looks bad.

enter image description here

If you’d like an easy way to start with an inner stroke or a quick way to apply and inner stroke, Graphic Styles and editing or creating your own document templates can help.

Here’s Adobe’s help page for graphic styles: - https://helpx.adobe.com/illustrator/using/graphic-styles.html

0
4/20/2015 12:56:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^