Making Crisp Retina Icons for your App

Over the last few years, heeding warnings from Apple that we would need higher-resolution icons, we got into the habit of asking our icon guy to make double-size images (sometimes even quadruple-size) when we needed to create a graphic that was better created as a bitmap rather than a vector graphic.

So when the MacBookPro with Retina Display came out, we thought we were in pretty good shape.

Unfortunately, we had to throw out a lot of our work and backtrack. Seeing our icons on the actual retina display, we realized they needed to be a bit sharper, especially when it came to crisp details like lines and outlines.

What we had been doing was essentially doubling any single-pixel lines from the source image. So if we had an icon with a rectangle bordered by a single pixel, the double-size icon would have a retina bordered by a two-pixel-wide line.

So instead, we had the icons re-done so that the lines were a single pixel in the retina version. But to compensate for the fact that this might not be as bold as the original, we made the line a bit darker (or more opaque, which usually ends up being the same thing).

Take for example this icon in Sandvox's inspector: page inspector-orig On the left is the image enlarged to match the new retina size; on the right is the retina image. (Both of these are enlarged so you can easily see the pixels.)

inspector

Here's another one. The non-retina "objects" toolbar icon on the left; the right is the retina version with the single-pixel lines.

The moral of the story is that it's important to pay attention to how a double-resolution image will be perceived on a retina display!

(Here's an interesting example from Apple that somebody pointed out. iTunes 11's "Up Next" icon looks like a bullet list on a standar displays, but actually shows numbers on a retina display!)


© Dan Wood 2012-2016. My Comments Policy