I'm using Adobe Illustrator to produce the UI designs for a complex web app and I need pixel accuracy. However, Illustrator seems to be a bit of a pain when it comes to pixel accuracy as its not doing what I want it to do right now, and so I'm looking for some assistance.

To break it down into an example, I have simple rectangular shaped button on my dartboard consisting of a rectangle shape with a fill and 1px stroke, then some text and an icon on top. However, the stroke lines are sometimes appearing too thick perhaps the left or right hand edge; when zoomed in, there seems to be another pixel worth added to one side with a lighter shade of the stroke colour. Please note that the stroke is on the inside and not centered.

Switching on Align To Pixel Grid seems to resolve this SOMETIMES, but its erratic. But what annoys me the most is that when this is switched on, the appearance looks correct, but the shape's transform guides are out of line with the actual pixels, and so when I move the object it around, it's always a pixel off. This is really frustrating when I'm trying to align all my objects and turning my UI into a mess!

Is there any advice anyone can offer to resolve this and make my workflow a little less stressful?



1 Answer 1


I'm doing the same all days. The only advice i could give you is: start with align to pixel from the very beginning of the project. Change from align to no align breaks all. Join me in the search for a better app for UI design, today I think illustrator's goods overcome its bads.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.