4

I have 2 images.

The first one (@2x: 50x50, 72 pixels/ inches) is like this:

enter image description here

It look so ugly in Tab Bar:

enter image description here

The second one (@2x: 48x42, 72 pixels/inches) is like this:

enter image description here

Even it is smaller, it look good in Tab Bar:

enter image description here

I cannot see the different between the 2 images. Can you see and tell me why? I'm new in designing images for iphone. How can I design good image for tab bar? Here you can download the images.

thomasdao
  • 972
  • 12
  • 26
  • There is not so much difference in images sizes... And you can try it using.. 3X, 2X, 1X. depending on your iPhone screen size. – Ashok Londhe May 12 '15 at 05:25
  • http://stackoverflow.com/a/29383111/1679187 – Yogesh Suthar May 12 '15 at 05:25
  • @Thomasdao you have not replied. – Ashok Londhe May 12 '15 at 05:57
  • yes I have 3x, 2x, 1x for each "nice" and "ugly" images above. I only upload 2x version here in this question because it is enough to show how they look different in Tab bar. In this question, I'm not asking the required size of 3x, 2x, 1x question. I know it from http://stackoverflow.com/questions/18068597/what-size-should-tabbar-images-be/29383111#29383111. The question is, why one image - though designed in different size - is looking better than the other which is designed in exactly the required size – thomasdao May 12 '15 at 06:12
  • I already have designed 75x75, 50x50, 25x25 for my image but they look really bad. The "nice" one I have above is one image I got from the internet, and I cannot tell why it look good, and my images look bad – thomasdao May 12 '15 at 06:17

3 Answers3

3

Now you can set that image size according to the devices you are using

Tab bar icon (optional) iPhone 6 Plus (@3x)

About 75 x 75 (maximum: 144 x 96)

iPhone 6 and iPhone 5 (@2x) About 50 x 50 (maximum: 96 x 64)

iPhone 4s (@2x) About 50 x 50 (maximum: 96 x 64)

iPad and iPad mini (@2x) About 50 x 50 (maximum: 96 x 64)

iPad 2 and iPad mini (@1x) About 25 x 25 (maximum: 48 x 32)

Adeel Ahmed
  • 161
  • 1
  • 8
  • Thanks but this is not what I'm asking. I already have designed 75x75, 50x50, 25x25 for my image but they look really bad. The "nice" one I have above is one image I got from the internet, and I cannot tell why it look good, and my images look bad – thomasdao May 12 '15 at 06:17
  • 25x22 1x 50x44 2x 75x66 3x i think due to ur aspect ratio the image looks ugly try these resolutions – Adeel Ahmed May 12 '15 at 06:57
  • I have tested these images sizes for you and they are working perfectly fine with me in simulator – Adeel Ahmed May 12 '15 at 07:25
  • By "these images" did you mean the 25x22 1x 50x44 2x 75x66 3x you suggested, or did you mean the images that I gave? – thomasdao May 12 '15 at 07:26
  • yes these images that you shared on dropped box- i created the 1x 2x and 3x 25x22 1x 50x44 2x 75x66 3x for that heart shape – Adeel Ahmed May 12 '15 at 07:28
  • It is so strange. The first one (@2x: 50x50, 72 pixels/ inches) on Dropbox look so bad for me. I will try to change it to the ratio size you suggested and try again – thomasdao May 12 '15 at 07:30
  • Well i was doing it before u asked https://www.dropbox.com/s/o0b0mr4j6dce082/New%20folder.zip?dl=0 – Adeel Ahmed May 12 '15 at 07:32
  • Yes its because of the aspect ratio of that heart shape – Adeel Ahmed May 12 '15 at 07:33
  • The link you sent is 1x, 2x and 3x of my 2nd image (which look nice in tab bar). This does not completely answer my question since I am not able to know why 1st image look bad. Thanks a lot anyway – thomasdao May 12 '15 at 07:52
  • Sir i told you its because of you aspect ratio when u force you image to be 50 x 50 then the image looks bad its aspect ratio is not maintained while making it 50x50 u need to create a transparent layer in Photoshop of 50x50 and then place the image of 50x44 in it and leave some empty space in it then use it will also work fine for u did u got my point ? – Adeel Ahmed May 12 '15 at 07:56
  • I got your point. However, there is small misunderstanding here. I do not force the aspect ratio for image 1. Image 1 is made by resizing this 512x512 image: https://www.dropbox.com/s/ftnqhcw3tqp540t/invitationMAx.png?dl=0. So 512x512 --> 50x50. It is not forcing ratio. The image2 which looks good, is not resized from the 512x512 image. – thomasdao May 12 '15 at 08:06
1

According to the screenshot, I am suspecting image size.

I can't tell the exact reason why because never seen document regarding that found yet.

But in the practical experience those somewhat "distort" border problem happens when the image size and the control size are different even it has 1 pixel differences.

For example, My UIImageView size is 32x 50, and my @2x image file for that imageView is 64 x 101. This can be cases because when we slice down, original image can have this pixel differences and we keep it for aspect ratio.

In this case, the size can be said 32 x 50.5 which is actually a bit difference and then, the image is showing "distort" or "blur" at it's border

Solution is just change it's image size as required.

Ashish Kakkad
  • 23,586
  • 12
  • 103
  • 136
vichevstefan
  • 898
  • 7
  • 16
  • Thanks for the good tip but I think it is not the case. I have Big version of "ugly" image - 512x512. Then I save it to 50x50 as the ugly@2x.png. So I don't think I have bit difference – thomasdao May 12 '15 at 06:15
1

After hours of researching finally I found out the reason. It's so silly of myself but I have to post this with hope that it will save time for other iOS developers who also want to design their own app:

Basically when exporting images to be used inside your app, your need to export with with PNG-24 type. That's all. (See image below as an example).

enter image description here

thomasdao
  • 972
  • 12
  • 26
  • it doesn't work. i use 512x512 to 32x32 and it's still ugly. the only way is resize the image to correct size – TomSawyer Mar 15 '19 at 18:11