Alpha Channel Icon
How to create an alpha channel icon for the iOS tab bar item.

The following example has been tested using Mac OSX 10.9.2, Xcode 5.02 and iOS 7 . But it may likely work fine on other versions as well. This is simply one of the many ways to implement this.

Set image Alpha Channel using Mac Preview app

Open your image using the Mac preview application. Then from the menu choose "View | Show Edit Toolbar". Click on the "Instant Alpha" icon as shown on the picture below:

Place the mouse pointer in the middle of the area that you want to set as transparent. Then click on the mouse button and move the mouse up or down while keeping the mouse button pressed. The colored area that you'll see is the one that is going to be selected:

Once you are satisfied with the portion of the area covered, release the mouse button. A dotted line will appear around the selected area:

Now you can delete the selected dotted area, so to make that portion of area transparent:

In case you get a question to convert your image to PNG format, please confirm it.
Then continue this way with all other zones in your image till you get the final desired result:

The final step would be to resize your image to the standard formats required by iOS: 50x50 for the high resolution icon and 25x25 for the standard one:

Set the tab bar icons in Xcode

You simply drag and drop your icons into the application assets container:

Then from the storyboard select your tab bar item and choose the imported image, that's it:

And this is the final result for the normal and for the selected icon:

iOS uses the alpha channel transparency as a sort of mask, that's why the original red color as in mine sample icon won't actually be displayed.


You can also use a custom icon for the selected item. Simply use the same procedure as explained above to create your own custom icon, for example something like this:

Then use the following code in your view controller to specify a custom icon for the selected icon:

self.tabBarItem.selectedImage = [UIImage imageNamed:@"tabbaricon_selected"];

And this is the final result with a custom selected icon:

Gaetano Causio © | Privacy Policy | Disclaimer