1

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.

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
2
  • Hey Marc, Thanks for the reply. Your answer led to a solution but I need to have "stroke inside" set on the path in order to achieve sharp lines in pixel preview. Is there a way to turn that on by default? So I don't have to open the stroke dialogue box every time I draw a shape?
    – user42506
    Commented Apr 19, 2015 at 11:32
  • @Senjuban That will be because the stroke is centred and the size is an odd width — A 1 pixel stroke that’s centred on a pixel boundary will be half in the pixels either side, causing it to be wider, lighter and blurry. As you've said, you can use an inside (or outside) stroke to fix it. I'll add some more info to my answer.
    – Marc Edwards
    Commented Apr 20, 2015 at 0:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.