Round Circles in Illustrator
As ridiculous as the title sounds, one of Illustrator’s biggest weaknesses when it comes to exporting rendered assets for user interfaces is that way that it renders the edges of small circles. While my solution in essence is a patch to a problem that I hope Adobe addresses with the next release of Creative Cloud, I do have a very easy, scalable and non-destructive method to make circles in Illustrator round.
The Problem
The difference between what Photoshop and Illustrator outputs is evident when it comes to smaller cirles, at a sizes typically used for icons or small buttons.
Marc Edwards wrote a very good post titled Illustrator and App Design about a year ago on the Bjango website. This issue is one of Marc’s major sticking points for ruling out Illustrator as a tool export design assets from. He posted a few good examples but I’m going to take a closer look at the opacity of each pixel reveals just how different the output is. In Marc’s own words – “There’s not much to like about the way Illustrator renders circles.”
The way the edges are antialiased to create a sharp edge means that the pixels close to the vertical and horizontal extremes are harshly rounded up to a near full opacity pixel. Photoshop on the other hand is much more elegant and smoother with its antialiasing coming up to and away from the extremes of the circle with much more grace.
A Quick Fix
To get your circles to actually look circular select the path of a circle, then go to Effect > Path > Offset Path and apply a -0.205px ‘Offset Path’ Effect. You’ll want to make sure you’re view is in ‘Pixel Preview’ mode (View > Check Pixel Preview) to get an accurate preview of the result when zooming.
The result with a circle to very closely resembles the output we can expect from Photoshop. As you can see in the figure above, the opacity of the antialiased pixels are not exactly the same but much closer in their opacity values to the point where it becomes a stylistic difference. You’d be very hard pressed to tell the difference, let alone any of your end users.
What makes this a viable fix is that the ‘Offset Path’ effect is dynamic and non destructive. It does not modify the bounds of the circle, unless of course you expand the appearance of the shape. This ensures that our measurements remain in whole units and not decimal, which is critical when aligning objects and maintaining a symmetric circle. It’s good habit to keep an eye on coordinates and sizes to ensure values don’t contain any sneaky decimal places unless you intend to.
Even if you are predominantly working in Photoshop but you are relying on Illustrator for vector assets, you’ll benefit from this technique when placing Illustrator smart objects in your work by getting nicely rounded circles every time.
If you work with ‘Scale Stroke & Effects’ disabled, which I would recommend regardless, you can easily scale the size of the circle without worrying about updating the effect.
Essentially you set it and forget it.
A Real Solution
The solution rests in the hands of the Illustrator development team at Adobe. They seriously need to improve their algorithm for rendering paths to output at a level on par with Photoshop if they want designers to consider using Illustrator for outputting visual assets. Otherewise, there‘s no point in having a ‘Save For Web’ option if the results are sub-par.
Since Adobe have decided to drop Fireworks, it places much more responsibility on Illustrator to improve the bitmap output capabilities as it’s no longer a design tool purely for print output. Things such as gradient dithering and reliable path rendering are still important if we’re going to be outputing bitmap assets.
As web and screen technologies advance, designers like myself no longer rely on bitmap design tools to design interfaces in an increasingly vector world. Bitmap assets still dominate UI as they offer better performance when it comes to run-time rendering, especially on mobile devices, but if designers can’t find a competent vector design tool within Adobe’s Creative Cloud there’ll be no shortage of capable alternatives elsewhere.