0

I have this image in .ai format and I exported it out as png of sizes: 25x25, 50x50 and 75x75 pngs for iOS tab bar icon.

25 50 75

But when it renders in iPhone, I see this (the first icon - looks like an egg):

tab bar

So what is the issue here? Pixels too dense in the original illustration? Not a graphic designer so please help me understand how can I fix it.

  • If you just view the 25x25 image, does it look correct? If so, then it's probably an error in the code. – Scott May 26 '17 at 16:43
  • Yes, it looks correct (added it to the question). I dont think its an issue in code because its ios default behavior and I don't have a custom tab bar. Other icons (like trophy) renders fine. – zengr May 26 '17 at 16:48
  • I'd guess it's something to do with file naming or other non-image pixel specific related issue. – Scott May 26 '17 at 16:55
  • In Illustrator, did you create the white and light green parts with actual white and light green shapes, or are they (partially) transparent, with Illustrator's artboard providing the white? – Vincent May 31 '17 at 8:07
  • @Vincent I don't know, a freelancer did it. – zengr May 31 '17 at 16:44
0

Looks like the problem is described here: https://stackoverflow.com/questions/25894974/how-can-i-fix-the-tab-bar-of-the-tab-bar-controller-in-ios

The problem is that your image lacks transparency. The tab bar expects your image to be a transparency mask (also called a template) - only its degree of transparency / opacity is taken into account. Your image is completely solid opaque, so it appears as a solid square.

Either fix your image, or derive from it an image whose rendering mode is Always Original to force that actual drawing of the image to appear instead of its opacity.

Also the tab bar images should be of only 1 color. This is the final image which works:

working logo

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UITabBar.html

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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