PDA

View Full Version : Tab Bar Button Image




DC Studios
Jul 13, 2008, 01:51 PM
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
Jul 22, 2008, 03:28 PM
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
Jul 22, 2008, 03:34 PM
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
Jul 23, 2008, 10:02 AM
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.

louden
Jul 23, 2008, 11:08 AM
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
Jul 23, 2008, 11:58 AM
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
Jul 23, 2008, 02:20 PM
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
Jul 23, 2008, 03:21 PM
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.

louden
Jul 28, 2008, 03:47 PM
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
Jul 29, 2008, 03:10 AM
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. :)

louden
Jul 29, 2008, 06:33 PM
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
Aug 10, 2008, 02:22 AM
Hey,

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

Elite Aaron
Aug 16, 2008, 07:50 PM
^^bump^^

TripleJ
Aug 16, 2008, 09:00 PM
^^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
Dec 3, 2008, 06:31 PM
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? (http://knol.google.com/k/-/-/34oprzanmpe7q/u37cu0/picture-6.png)


Would that work?

If not then how do you create nice smooth icons?

thanks so much every one :)
J

jnic
Dec 4, 2008, 04:51 AM
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
Dec 4, 2008, 12:40 PM
What's the best tool for drawing these? Illustrator? Photoshop?

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

jaminunit
Dec 4, 2008, 04:19 PM
great thanks yall!
J