Tab Bar Button Image

Discussion in 'iPhone/iPad Programming' started by DC Studios, Jul 13, 2008.

  1. macrumors newbie

    Joined:
    Jul 13, 2008
    #1
    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.
     
  2. macrumors newbie

    Joined:
    Jul 22, 2008
    #2
    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
     
  3. macrumors 68000

    Joined:
    Nov 3, 2007
    #3
    Take some screenshots and then crop out the tab bar images you want to use? Might be the only way to do it.
     
  4. macrumors member

    Joined:
    May 24, 2003
    #4
    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.
     
  5. macrumors 65816

    dgdosen

    Joined:
    Dec 13, 2003
    Location:
    Seattle
    #5
    What's the best tool for drawing these? Illustrator? Photoshop?
     
  6. macrumors member

    Joined:
    May 24, 2003
    #6
    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.
     
  7. macrumors newbie

    Joined:
    Jul 22, 2008
    #7
    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!
     
  8. macrumors member

    Joined:
    May 24, 2003
    #8
    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.
     
  9. macrumors 65816

    dgdosen

    Joined:
    Dec 13, 2003
    Location:
    Seattle
    #9
    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...
     
  10. macrumors member

    Joined:
    May 24, 2003
    #10
    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. :)
     
  11. macrumors 65816

    dgdosen

    Joined:
    Dec 13, 2003
    Location:
    Seattle
    #11

    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.
     
  12. macrumors member

    Joined:
    Jan 30, 2008
    Location:
    Oklahoma
    #12
    Hey,

    How can I use a custom title with the provided tab bar icons?
     
  13. macrumors member

    Joined:
    Jan 30, 2008
    Location:
    Oklahoma
    #13
    ^^bump^^
     
  14. macrumors regular

    Joined:
    Jul 30, 2008
    #14
    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 :)
     
  15. macrumors newbie

    Joined:
    Dec 3, 2008
    #15
    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
     
  16. macrumors 6502a

    Joined:
    Oct 24, 2008
    Location:
    Cambridge
    #16
    Yes. Anything opaque will be light gray, pure alpha will be black, and semi-transparency is in between. Icons should be 32x32px.
     
  17. macrumors member

    Joined:
    Aug 10, 2008
    #17
    I use Gimp, which is free and actually quite powerful.
     
  18. macrumors newbie

    Joined:
    Dec 3, 2008
    #18
    great thanks yall!
    J
     

Share This Page