iOS image for buttons not crisp

Question

So I'm trying to create a few simple buttons in Adobe Illustrator for work. I'm not a gphx artist and just know the basics of Illustrator. I tried creating a pin icon, like dropping a pin onto the map. I created my 20x20px document, dragged a rectangle and a circle. This screenshot shows my pin, and two of Apple icons next to it (trash can and action button).

Apple's documentation says this to describe creating buttons:

The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points. The alpha values in the source image are used to create the images—opaque values are ignored.

I feel like my button just isn't sharp like theirs. Is there something else I need to do in order to make my pin look sharper? Thx!

Answer 1

The difference between their buttons and yours is that their shadowing effects are a little crisper, and theirs have less antialiasing.

First, the shadowing effect: look at the thin dark gray lines at the top of the trash can or on the top of the bottom stroke of the box outline in the last icon. It's darker and more clear than whatever effect you used to create depth in your pin. In general, the more contrast, the more dimensionality.

Also, one of the things that is easy to do in Illustrator is to make your vector shape, mash it down to the size you need, and then just export it as is. A lot of times, you end up getting fuzzier (more antialiased) images because Illustrator isn't always the best tool to resolve smaller images when every pixel counts. Definitely go into Pixel Preview (in the View section of the menu up top), zoom in, and see what happens when you move your vector shape around. Sometimes, a straight 1px line ends up in a 1px space and looks really crisp; sometimes, it ends up halfway in between and takes up 2px while looking fuzzy. That's just something you have to watch out for and try to correct. This site illustrates what I'm talking about - sometimes, doing the snap to pixel that they talk about is a really helpful thing.

So, better contrast and putting pixels where they need to go should equal a more crisp icon! Hope that works out for you.

Answer 2

The difference is pixel snapping. In Illustrator, create your artboard at the size you need (or a Slice at the size you need) and draw pixel snapped artwork.

The relevant options in Illustrator are:

• Units: Pixels.
• Color Mode: RGB (because you're creating artwork for screen).
• [x] Align New Objects to Pixel Grid

And once you've created the document:

• View > Show Grid.
• View > Snap to Grid.

It's also worth noting that Illustrator has some bitmap rendering issues. It's not the best tool for the job when creating iOS/Android/mobile image assets. It can't dither gradients either. For what you're after it's probably ok, but if you're going to attempt more complex things, grab yourself a copy of Photoshop.