How does Apple get their tab bar icons so sharp?

Question

How does Apple get their tab bar icons so sharp?

Looking at the iTunes app on my iP4, the tab bar icon's are extremely sharp. Anyone know how those might be done?

Most doc's on the subject say that we should use (approximately) 30x30 pixel's at about 72 dpi. I do that and my icon's end up looking very jagged.

There must be more to this to get the razor sharp icon's Apple produces.

I have used Photoshop and am currently using Inkscape, but both produce similar jagged results.

Any comments or suggestions will be greatly appreciated.

Thanks.

Posted on Jun 24, 2011 6:31 AM

Reply

Answer 1

Jun 29, 2011 5:34 AM in response to Bob Lang1

I was afraid someone with more knowledge than I was going to point this out. I have tried every variation of pizel-size vs resolution to develope these sharp tab bar icons, but have always come up short. Because of this, I reluctantly must agree with you.

I know my way around Ps when it comes to photographic images, but I will not admit to be proficient with regard to creating these small icon's so I could be missing something. But, again, I have done a lot of testing and nothing seems to even come close to achieving the sharpness displayed by Apple's icons.

As I mentioned earlier, I came across a tut which uses Omnigraffle to create 'pixel perfect' icons. An xcode proj was provided demoing the omni icons and the tab bar icons were no sharper than the one's I created using Inkscape or Ps.

I prefer Inkscape because when working with 30x30 px files, the images are not jagged and pixelated as they are when using Ps. In addition, it is set up to easily create tab bar icons.

Here is the Omni tut in case anyone is interested.

http://tinyurl.com/34svjcc

I appreciate the help.

Reply

Answer 2

Jun 29, 2011 5:38 AM in response to just.do.it

Thanks for the comments. All of my tab bar icon's are custome, so naming would have no bearing in this case.

The 60x60 pixel icons appear much too large in the small area that they occupy, so I have never understood this aspect of Apple's guidelines because the end result looks terrible.

Thanks.

Reply

Answer 3

Jun 29, 2011 6:27 AM in response to Phillip Anthony

Apple clearly has some magic going on here. You could cut and paste from the actual Apple icon and build up your own. If you have Photoshop, try making a vector graphics version and have PhotoShop rasterize it for you.

Reply

Answer 4

K T

Level 7

23,889 points

Jun 29, 2011 7:38 AM in response to Bob Lang1

Bob Lang1 wrote:

Looking more closely at Apple's web page, I believe that their technique is to use text strings (not images) where possible, and then rely on the system to apply subpixel rendering/anti-aliasing appropriate for the display. Sadly, this isn't something one can reliably do in image files because the way sub-pixel rendering is applied depends upon the physical layout of the coloured dots and bars that make up the display. If you try it with an image file, the image might look great on some displays and badly colour smeared on others.

The bottom line is that you may have gone as far as you can with conventionally anti-aliased image files. It might be possible for you to replace the image of a $ sign by a text element that writes "$" and get sharper results, but personally I would move on to the next problem.

None of this applies here - the OP is working with iOS on iPhone, touch and iPad. The tab bar icons are specifically expected to be platform characterized images managed by iOS/his code and displayed on a device where schemes such as sub-pixel rendering do not occur nor apply.

Again, this thread is not about OS X based content on a computer display.

Reply

Answer 5

Jun 29, 2011 7:45 AM in response to Phillip Anthony

Hi,

the magic with this 60x60 px images is the following:

You specify to use the image "myTabImage.png" in code:

tabItem = [[UITabBarItem alloc] initWithTitle:@"title"
                                        image:[UIImage imageNamed:@"myTabImage.png"]
                                          tag:0];

You provide one image, 30x30 px named "myTabImage.png" AND

you provide one image, 60x60 px named "myTabImage@2x.png"

The second image is used automatically by the framework if the device has a retina-display such as iPhone 4 and iPod touch 4G.

Reply

Answer 6

K T

Level 7

23,889 points

Jun 29, 2011 7:46 AM in response to Phillip Anthony

The off topic replies that don't note you're working w/iOS are the reason I keep pushing you to get into the iOS Dev Forums more.... 🙂

Reply

Answer 7

Jun 29, 2011 8:13 AM in response to K T

@ KT

I hear you. Thanks.

Reply

Answer 8

Jun 29, 2011 11:10 AM in response to just.do.it

@ just.do.it

Sweet, sweet! Your post led me down the path to sucess.

For some reason, I could not get your code to work as it looks like it should. I received no errors or warnings form it, it just did not work.

However, I found some code in one of my books that did work. That code basically separated your one-liner into several lines of code, but bottom line - it worked. AND - my @2x tabbar icon is now showing up much, much sharper than before.

So, to be clear: I created another similar tabbar icon which ended up bieng 26x55 px. I created two icons with the same name as you suggested - DollarSign.png and DollarSign@2x.png. The first at approx 30x30 px. When the app loaded the larger icon appeared.

I have no idea where you learned this 'trick', but I've searched hight and low and never came across this code. Granted, I did have similar code but it was never explained that you could use two icons as we have been discussing and achieve incredible results with it.

I will keep trying to make your code function because I like the fact that it also sets the tag ID number of that tabbar item. This will help with state status when the app is sent to the background and brought back to active status.

I cannot thank you enough for stopping by with your comments. This solved a problem I knew was solveable, but I had no idea how.

Reply

Answer 9

Jun 29, 2011 9:47 PM in response to Phillip Anthony

I found that "trick" somewhere in the docs when iOS 4 came out. I don't remember where.

But it's mentioned here:

http://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/Drawi ngPrintingiOS/SupportingHiResScreens/SupportingHiResScreens.html

Dirk

Reply

Answer 10

Jun 30, 2011 9:56 AM in response to just.do.it

@ Dirk

Thanks for the link to the iOS doc that covers that. I appreciate it.

Reply