How to Draw Pixel-Perfect iPhone Toolbar Icons

http://steveweller.com/articles/toolbar-icons/

[Note: I have created a companion article that covers tab bar icons. It includes an updated template with new guides and a new example project.]
Creating good-looking iPhone toolbar icons is definitely a challenge. The background must be transparent and the icon antialiased. It's also white, so you'd like to work in white against a dark background and have some sort of preview that you can reference. Unless you're a Photoshop or Illustrator jockey, it's hard to know where to start.

I create pixel-perfect icons for my iPhone apps using OmniGraffle, a toolbar icon template, and a simple workflow. You can buy OmniGraffle from Omni Group and get the rest here. Note that although I'm creating a bit-mapped PNG as the final output, I'm working with vector images. This gives me the freedom to adjust and tweak as needed for the best output.

Download the template. It contains an OmniGraffle 5.1 document and an example Xcode project that uses the UIToolbarItem icon.

關於UITabbar 圖片

屬於 Bar  的有
- Navigation bars
- Toolbars
- Tabbars

Style/Image 可透過

- (id)initWithTitle:(NSString *)title image:(UIImage *)image tag:(NSInteger)tag; - (id)initWithTabBarSystemItem:(UITabBarSystemItem)systemItem tag:(NSInteger)tag;

Style

typedef enum {     UITabBarSystemItemMore,     UITabBarSystemItemFavorites,     UITabBarSystemItemFeatured,     UITabBarSystemItemTopRated,     UITabBarSystemItemRecents,     UITabBarSystemItemContacts,     UITabBarSystemItemHistory,     UITabBarSystemItemBookmarks,     UITabBarSystemItemSearch,     UITabBarSystemItemDownloads,     UITabBarSystemItemMostRecent,     UITabBarSystemItemMostViewed, } UITabBarSystemItem;

TabBar icon 大小
32 x 32 png 背景為透明。

TabBar icon 作圖，參考
How to Draw Pixel-Perfect iPhone Toolbar Icons
Generating icons for iPhone UITabBar
tabbaritem的png無法顯示

顯示圖片設定，實際顯示的圖片會便

UIImage* aImage = [UIImage imageNamed:@"favorites.png"]; [self.tabBarItem setImage:aImage];

內建直接設定 badge，後面帶入 NSString

[self.tabBarItem setBadgeValue:@"100"];

承上面兩項，實際顯示的圖形會被系統再處理一次

原本	被選取時	沒被選取時
32 x 32