iOS Tab Bar Button Image

[DC Studios]

Is there a library with images that can be used on a tab bar button? Right now I'm using the FamFamFam silk icon set, but I want my images to be the same ones used in the iPhone OS so the design will stay consistent.

Thanks.

 

[mackwan]

How do you change tab bar item image

Hi,
It looks like you have been able to change the tab bar item image? How do you do that? I have been struggling hours with the interface builder to change it and have tried gif, jpg, png, bmp images, but they all show up as grey boxes.

-kwan

 

[Jeremy1026]

Is there a library with images that can be used on a tab bar button? Right now I'm using the FamFamFam silk icon set, but I want my images to be the same ones used in the iPhone OS so the design will stay consistent.

Thanks.

Take some screenshots and then crop out the tab bar images you want to use? Might be the only way to do it.

 

[grimjim]

The images used in UIBarButtonItems cannot be just normal coloured images. You need to create a 20 x 20 pixel PNG, with an alpha channel that will define the image. If your image is opaque, it will display as a square box.

 

[dgdosen]

The images used in UIBarButtonItems cannot be just normal coloured images. You need to create a 20 x 20 pixel PNG, with an alpha channel that will define the image. If your image is opaque, it will display as a square box.

What's the best tool for drawing these? Illustrator? Photoshop?

 

[grimjim]

I use Photoshop, but I suppose that any app that can add an alpha channel to an image would do. I expect that there are cheaper options available than Photoshop; I just use it because I have it.

 

[mackwan]

how to on photoshop

When I try to save as png it does not allow me to save with alpha channel.
Could someone give me some specific instructions on how I can go about saving a png with alpha channel, if I start with png just with rgb channels?

Thank you!

 

[grimjim]

I don't think you can add an alpha channel to an RGB PNG in Photoshop.
The easiest way is simply to make a 20 x 20 pixel greyscale image with a transparent background, and draw your design on it. Then save it as a PNG, and the transparent areas will still be transparent. Then you can import it into your XCode project and assign it to a button, and it should work how you expect.

Of course, the major limitation here is that you cannot have coloured button icons.

 

[dgdosen]

I don't think you can add an alpha channel to an RGB PNG in Photoshop.
The easiest way is simply to make a 20 x 20 pixel greyscale image with a transparent background, and draw your design on it. Then save it as a PNG, and the transparent areas will still be transparent. Then you can import it into your XCode project and assign it to a button, and it should work how you expect.

Of course, the major limitation here is that you cannot have coloured button icons.

Do you use gradients on your grey (gray) scale images? Does the iPhone OS automatically do that? I ask because I looked at the images from "The Elements" sample - and those images look like there's a gradient in them, but when you run the sample, it looks like the grey scale is removed.

That's a bit confusing...

 

[grimjim]

You're right - the images do have a gradient applied over them. I think that this is so that they will appear to be a constant grey tone when in use.

You need to remember that the iPhone uses the alpha values of each pixel (how transparent it is), rather than its colour. So if a pixel is black (ie fully opaque) on the image, it will appear white (fully opaque) on the tab bar. But if it is say, 20% grey in the image, that means that it is only 80% opaque. So some of the background will show through on the iPhone. But the tab bar background isn't a flat colour - it's a gradient. Which means that, if you have elements at the top and bottom of the image that have the same alpha value, they will look different when it is displayed on the iPhone. So Apple's designers have basically applied the same gradient as is on the tab bar, but in reverse, so that the grey levels of the icons look the same at the top and bottom of the image.

I hope that makes sense.

 

[dgdosen]

You're right - the images do have a gradient applied over them. I think that this is so that they will appear to be a constant grey tone when in use.

You need to remember that the iPhone uses the alpha values of each pixel (how transparent it is), rather than its colour. So if a pixel is black (ie fully opaque) on the image, it will appear white (fully opaque) on the tab bar. But if it is say, 20% grey in the image, that means that it is only 80% opaque. So some of the background will show through on the iPhone. But the tab bar background isn't a flat colour - it's a gradient. Which means that, if you have elements at the top and bottom of the image that have the same alpha value, they will look different when it is displayed on the iPhone. So Apple's designers have basically applied the same gradient as is on the tab bar, but in reverse, so that the grey levels of the icons look the same at the top and bottom of the image.

I hope that makes sense.

I don't know - (and I do want to know what they're doing) - some buttons in that sample app have gradients, and some don't - yet they all show with gradients when highlighted and don't when not highlighted.

It looks to me like they ignore the color and gradient completely, they're just using the non-transparent part of the png file.

 

[Elite Aaron]

Hey,

How can I use a custom title with the provided tab bar icons?

 

[Elite Aaron]

^^bump^^

 

[TripleJ]

^^bump^^

AFAIK you can't. When you select a premade icon it'll revert the text back because it's a preset. If you really want to, I suppose you could just 'printscreen' the image and create a new one with the same symbol, then apply it as a custom tab bar image. That would let you change the title

 

[jaminunit]

Hi Every one,

Ok I have a few questions about these icons.
I'm a graphic designer and I don't want to keep sending files to the programmer to compile for me to look at only for them to look totally ****. I have sent so many already :/ I just cant get it right.

How do I make a nice looking circle if I can only use solid pixles,
every thing looks Jaged, (not like the head in the facebook app)

If I make a circle in illustrator then past that into photoshop on a 32X32 RGB file
then the circle comes through with a heap of nice anti aliasing so that the cirle looks smooth.

I have a transparent background layer.(photoshop checkerboard)

I save as 8bit 16 color PNG

but then the iphone compiler turns all the anti Aliasing into solid which looks nasty.

What would happen if I created a a solid black png then did a nice anti aliased Alpha Channel and saved it as a 24 bit PNG?
is that how they made this one above the world label?


Would that work?

If not then how do you create nice smooth icons?

thanks so much every one
J

 

[jnic]

What would happen if I created a a solid black png then did a nice anti aliased Alpha Channel and saved it as a 24 bit PNG?
is that how they made this one above the world label?

Yes. Anything opaque will be light gray, pure alpha will be black, and semi-transparency is in between. Icons should be 32x32px.

 

[beachdog]

What's the best tool for drawing these? Illustrator? Photoshop?

I use Gimp, which is free and actually quite powerful.

 

[jaminunit]

great thanks yall!
J