Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
1  
Can you direct us to a screenshot? We can speculate on answers, but it's easier if we can see the problem. – Brendan Sep 28 '12 at 16:25
1. Post a screenshot please, specifics are important, maybe you can get away with a bit of transparency, anti-aliasing(like the bellow answers), using a transparent(blended) texture might help sometime to "trick" the eye.. 2. The iOS app, on what device does it run on, is it a Retina Display device? you might need higher ppi .. – Flavius Frantz Sep 28 '12 at 18:05
For raster image FILES, there is no PPI (pixels per inch) only pixels, for a Retina display, you need to double each pixel dimension because they essentially display everything at 2x pixel size. For certain uses on ipods etc, you may need to provide the same icon in multiple pixel sizes (see for instance: developer.apple.com/library/ios/#qa/qa1686/_index.html ) – horatio Sep 28 '12 at 18:29
To clarify: for an iPhone, the screen is essentially fixed size and when they increased the PPI of the screen, there were more pixels per inch (obvious statement is obvious). However, they still display the UI at the same visual size, so an icon on a high resolution iPhone screen needs to have twice as many pixels to display at the same visual size without the UI having to stretch the image. If you fail to provide the 2x size, the icon will be stretched and stretching = quality loss. – horatio Sep 28 '12 at 18:33
Thanks for the responses. I really wanted to post a screenshot but couldn't find an option to attach files. Here is the link from my dropbox: dl.dropbox.com/u/1993365/loveicon.jpg Details as requested: 1. Icons are appearing on top of the images. I have saved them as transparent PNG 24. 2. Icons have no gradient, just plain black colour #000. 3. For retina, I'm using @2x image double the size. Weird thing is that they are rendered perfectly on Retina iPhone. Problem exists only on normal iPhones. 4. I tried 72 dpi, 264 dpi - same results. – Harpal Sep 28 '12 at 20:30
show 1 more comment

2 Answers

up vote 2 down vote

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>
share|improve this answer
It's an iOS app. Sorry, if it wasn't clear. – Harpal Sep 28 '12 at 20:31
Vector formats render as raster though. So using SVG/EPS/AI won't help if you know the target icon size. – Marc Edwards Sep 28 '12 at 23:43
up vote 1 down vote

For raster images, you are dealing (basically) with a grid of squares (pixels). When the difference between the size of the arc and the size the pixel is small, the squared edges of the pixels have a larger impact on your perception of the smoothness of the arc.

The jagged edges are called aliasing ( http://en.wikipedia.org/wiki/Aliasing ). Anti-aliasing in raster images is essentially a blurring technique to minimize the effect. This usually means a "halo" of color which transitions from the edge color to the background color.

Often for icons, this is a fade from black to white, but you probably want to create icons which are suitable for other colored backgrounds, and a fade to white will give rise to a light grey halo which will contrast on dark backgrounds.

To fix this, you can do a "fade to white" and ALSO incorporate an alpha transparency for the same region which fades from 100% opaque to 100% transparent. For the web, this pretty much means saving as a 24 bit PNG file with alpha channel.

Vector art is also a good method (see Ryan's answer) because the rasterization (display) of the image happens at the moment it is rendered, rather than "pre-baked" (a raster PNG or JPG) so such images can be as high resolution as the output device they are on.

TLDNR; ensure you provide the correct sizes for iOS app; anti-aliasing + alpha channel transparency; if needed, possibly avoid a dark outline/profile (something mid-grey)

share|improve this answer
Your explanation is excellent. Thank you. Just to clarify, I used an option called 'Align Edges' in Photoshop CS6 which I think used to be called as Anti-Aliasing in earlier versions. There is no outline - black, grey or white. I saved the image as alpha transparency PNG 24. The vector solution suggested by Ryan might not work in this case as Apple only accepts PNG24 afaik. What you are mentioning about fading to white is interesting. I am not sure how to do it. Can you suggest? – Harpal Sep 28 '12 at 20:50
Yep, Apple only accepts PNGs, not vector formats (which wouldn't help anyway, because vectors are rendered as bitmaps at some point anyway). – Marc Edwards Sep 29 '12 at 2:51
@harpal: An easy way to fade to white is to create layer with a mask of the outer shape, set it's layer FILL (in layers palette) to 0%, and then add an outer glow layer effect. This obviously works better with the right choice of colors and a "stroke" outline of the profile of the icon. Different option: make a selection that is the outer silhouette of your item, then reduce the size of that selection by 1px (select-modify-contract), INVERT the selection area (not invert colors), then apply a very slight blur effect. This will essentially just blur the very edge of the item. – horatio Oct 2 '12 at 15:29
I would probably apply that blur to a layer copy of the item so that I can revert it. – horatio Oct 2 '12 at 15:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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