Format Icons for Navigation, Tool and Tab bar for xCode
The first time I tried to add an icon for one of the iOS bar, I told my graphic designer (9am) to create an nice icon with this shine and the other drop, etc. They came back with very nice little icons, but to my surprise the icon were not working. I was getting a square with some shine on it.
So I went and read Apples document “Icons for Naviation Bars, Toolbars and Tab Bars“. The document I have to say that is it very complicated and I like to follow simple step by step instructions to get my results done.
Steps to create bar icons
- Create a nice icon using transparency and no background colors. You can either use colors, but at the end of the day your icon is going to be black and white as that is what we are allowed to do for bar icons.
- Open you icon in Photoshop.
- Image > Mode > Grayscale
- Select > All (⌘A)
- Edit > Copy (⌘C)
- Layer -> New -> Layer… (⇧⌘N)
- Layer > Layer Mask > Reveal All
- Channels: Make Layer 0 Mask visible
- Edit > Paste (⌘V)
- Image > Adjustments > Invert (⌘I)
- File > Save for Web… (⌥⇧⌘S)
- Select the size you want (40×40 for ToolBar and Navigation Bar and 60×60 for TabBar
- Select PNG-24 with Transparency
Original Icon
End Icon
