Advertisement


How to get rid of jaggered edges in Photoshop?


Question

I used Photoshop and Illustrator to draw a black circle of size 44 x 44px. For some reason, the edges aren't smooth. I've exhausted myself of all techniques to figure it out.

It looks particularly ugly within the iOS app where I'm using it.

I noticed that circular icons of similar size in IconFinder have same issue. Jagged edges. http://www.iconfinder.com/search/?q=black+circle#

Why can't the edges be smooth? If they can, what's the trick?

2012/09/28
1
0
9/28/2012 4:05:00 PM

At a small resolution in a raster format you're always going to have some jaggedness, especially on a round shape. Some jaggedness can visually appear smoother by making sure Anti-Alias is turned on.

For best results if possible though you'll want to use an .eps/.ai file or more likely an .svg file since you plan on implementing it into a web based application. Then it is being calculated from a vector rather than raster.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="150" cy="150" r="22" fill="black"/>
</svg> 
2012/09/28
2
9/28/2012 4:26:00 PM