I'm trying to use my own icons on the Tab Bar because the Standard Icons do not fit with what what my menus display.
I've tried saving them as 30x30 black and white .png files, but for some reason the simulator and the device display the icon as a blue square. They will not show the .png.
I've also tried saving it as a .jpg and no dice. Anyone have insight as to why this is?
Ah. I figured it out. The tab bar requires you to have a transparent background. I had a white background around my icon. If you don't have a transparent background then it will show the shiny blue icon instead. Gotta love trial and error.
Here is a procedure that I used to create the tab icons using Photoshop. I am not a photoshop expert in any way so if there may be a shorter approach. The qist is to create a grayscale image with a mask layer, no background and export to png with transparency. After scouring the net for tips and suggestions, I gathered some pointers on twitter and iphone sdk message boards and narrowed down this procedure. So all credit to the original authors! Sorry - I did not keep track of them.
1 You need to create a single layer grayscale image and not worry about how the tab is displayed when it is active (blue background) and gray (inactive). That's handled in the SDK.
Create a grayscale image and save it s jpeg or gif. Delete the background completely
2. Open this image and select all and copy the image to your clipboard. Ensure that you can view the layers/channels/paths window (in Photoshop go to the WINDOW menu and check layers).
3. In the layers/channels window, you will see the layer labeled as "background"
(notice the lock icon on the right extreme)
4. Convert this "background" to a mask layer - double click on the lock icon.
A new layer window will pop up. click ok.
5. select the channels tab, and add an alpha channel by clicking on the small icon on the lower border of the layer/channels window -looks like circle within a rectangle. (it should say "save selection as channel" when you "mouseover" this icon. This message will not be displayed if you have not copied your original image to the clipboard.
6. You should now see two channels listed (Gray and Alpha).
7. Select the Alpha channel and paste from clipboard
8. ensure that both channels are selected for display and Invert the image -- will change colors - reddish tinge
9. Save for web devices, select transparency and png format and save
