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

K T

Level 7

23,889 points

Jun 24, 2011 7:55 AM in response to Phillip Anthony

Note that 72 dpi is at least 1/2 of what it should be for retina displays.

Reply

Answer 2

Jun 24, 2011 8:21 AM in response to K T

@ KT

Thanks for the info.

I have read that doc before, which is why I have set my drawing doc to 150 dpi (and sometimes 200 dpi) in the hope of getting the hi-res results I am after. I will re-read it again and see if I can glean a bit more insight.

I appreciate the help.

Reply

Answer 3

K T

Level 7

23,889 points

Jun 24, 2011 8:30 AM in response to Phillip Anthony

You didn't talk about your image format or your method of testing, so I can't comment further, sorry.

Reply

Answer 4

Bob Lang1

Level 5

4,090 points

Jun 28, 2011 3:14 PM in response to Phillip Anthony

Looking at the tab bar on a Mac, I would say that the labels have been sub-pixel anti-aliased. Your mention of your efforts looking "jagged" would tend to imply that this is your problem. I think you need to investigate the anti-aliasing features of the applications you're using to create the icons. Personally, I don't use Photoshop for web graphics, instead I use Fireworks, which is specifically designed for producing web site graphics, and includes many anti-aliasing features.

Bob

Reply

Answer 5

Jun 28, 2011 3:31 PM in response to Bob Lang1

Thanks for the suggestion.

I found a tut on using Omnigraffle ($99) to create sharp tab bar icons but thankfully I did not take the plunge because the results are no better that what I am currently gettting using Inkscape. Photoshop is not any better, but in truth, I have not even looked into anti-aliasing in that app.

I've never heard of Fireworks, but I'll take a look at it.

These are my results using Inkscape, but I think they could be much better. Grab is from a 320x460 png.

Thanks for your comments. I appreicate the help.

Reply

Answer 6

Jun 28, 2011 3:48 PM in response to Phillip Anthony

Do a screen grab and zoom in to 100% pixels to see how the outlines look.

Reply

Answer 7

Jun 28, 2011 4:10 PM in response to Keith Barkley

Here you go.

Reply

Answer 8

K T

Level 7

23,889 points

Jun 28, 2011 4:41 PM in response to Phillip Anthony

That's 100% from iOS? Tabbar is not that big...

What was the size of the $ by itself originally...it looks blown up.

Reply

Answer 9

xnav

Level 5

7,113 points

Jun 28, 2011 5:02 PM in response to Phillip Anthony

Have you tried GIMP?

Reply

Answer 10

K T

Level 7

23,889 points

Jun 28, 2011 5:11 PM in response to K T

...is the image used with the tabbar shown above. 34 X 21 png

Reply

Answer 11

Jun 28, 2011 5:22 PM in response to K T

I took screen shots from my iP4 and emailed them. Both are 640x960. Then I grabbed the icon from the image at actual pixels.

Here are two grabs: one from the iPod view and from my app - both @ 640x960. No doubt which is the sharper of the two.

..

Reply

Answer 12

Jun 28, 2011 5:23 PM in response to xnav

GIMP? Will check that out.

Thanks!

Reply

Answer 13

Jun 28, 2011 5:30 PM in response to xnav

I like Inkscape because when working at 28x28 px the image is not jagged and pixelated like it is when using Ps.

http://inkscape.org/

Reply

Answer 14

Jun 28, 2011 9:52 PM in response to Phillip Anthony

Hi,

did you provide a high-res image and did you name it correctly?

From apples guidelines:

"

For tab bar icons, create an icon in the following sizes:

For iPhone and iPod touch:

About 30 x 30 pixels
About 60 x 60 pixels (high resolution)

"

Reply

Answer 15

Bob Lang1

Level 5

4,090 points

Jun 28, 2011 11:35 PM in response to Phillip Anthony

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.

Wiki has a good page on "Subpixel Rendering" if you want more information.

Bob

Reply