iOS5 brings us many different methods to customize the appearance of our apps. Lots of apps use these fabulous features. Including one popular app: Twitter. I’ve seen many tutorials about using the UIAppearance proxy, but only a few of them were ‘here’s-the-result’-type. One of them is User Interface Customization in iOS 5 by Ray Wenderlich, which is brilliant example of clear tutorial with nasty result.
Today I want to teach you how to make a Twitter-like UITabBar which is very clean and good-looking interface element using only Photoshop and Xcode.
Step 1: Create the background image
Begin with empty 320×49 72ppi image. Rename ‘Layer 1′ to ‘Base’ Fill your layer with black gradient, just like this:
Then create 2 new layers, ‘Black Line’ and ‘White Line’. Now, create 2 lines (in 2 different layers, of course): black and white and place them on the top of your image, just like that:
Change opacity for black layer to 40% and for white one to 10%. Now change you foreground color to black and background color to white. Create a new layer below ‘Black Line’ and ‘White Line’ and name it ‘Noise’. Fill it with your foreground color. Now go to Filter › Noise › Add Noise… Use these parameters:
- Amount: 100%
- Distribution: Gaussian
- Monochromatic: yes
Now all you have to do is change your ‘Noise’ layer’s blending to ‘Soft Light’ and opacity to 5%. You background image is ready. Save it somewhere.
Step 2: Think, how many tabs your app needs
We’ll need this data when we’ll be creating the selection indicator. There is no way (and I checked it personally) to put there a self-resizable image without causing UITabBar to produce a strange padding. We will need to create a full ??×49 image. So, do you know? If yes, follow this rule:
- 1 tab (strange) = 320px
- 2 tabs = 160px
- 3 tabs = 107px
- 4 tabs = 80px
- 5 or more tabs = 64px
- 6 tabs = impossibru!!
Step 3: Create the selection indicator
This is the easiest step and the simplest iOS graphic ever. Create a new file and set its size to ??×49 (replace ?? with size that you chose in step 2). Fill the layer with black and set its opacity to 75%. Done.
Step 4: Xcode, at last
Now you know what to do. Create a new project, blah blah, save it, blah blah, and open your
AppDelegate.m file. Let’s type some code!
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"YourCustomBkgImage.png"]]; [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"YourCustomSelectionIndicator.png"]]; [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor colorWithWhite:0.5 alpha:1], UITextAttributeTextColor, [UIColor blackColor], UITextAttributeTextShadowColor, nil] forState:UIControlStateNormal]; [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor colorWithWhite:0.85 alpha:1], UITextAttributeTextColor, [UIColor blackColor], UITextAttributeTextShadowColor, nil] forState:UIControlStateSelected];
Now Build&Run. Looks gorgeous, doesn’t it? Nope, it doesn’t. There’s still something that makes our tabBar to look differently in comparison to Twitter’s one – the selected tab’s image. So, we go back to Photoshop!
Step 5: Create custom tab images.
So, as you probably know, there is a way to remove gloss effect on your app’s icon if you want to make these effects on your own. Many of you have been asking this question: is there a way to do the same trick with UITabBarItem? Yes, there is and the method is called
- (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage
Quite a long method name, isn’t it? But nevermind – it’s working. So, we have to go back to Photoshop. If you have your tabs’ images, they’re probably in grayscale. We have to convert them to fully polished icons. So, open your file (here’s a sample icon). Then add 1 pixel at the bottom of your image (using Image › Canvas Size… or
OPT+CMD+C). Use below params:
- Width: [original width]
- Height: [original height +1px]
- Anchor: top-middle
Now, let’s add some style. We will need only Drop Shadow and Gradient Overlay. Here are the parameters:
Gradient colors are:
- H:0° S:0% B:35-40%
- H:0° S:0% B:45-50%
Unselected image is done. Now it’s time to create a selected image. Duplicate the layer and change its Gradient Overlay colors to:
- H:206° S:64-70% B:96%
- H:203° S:20-26% B:99%
Now save these files as separate PNGs (e.g.
Step 6: Final touches…
Now go to Xcode and put this below the last code:
[yourViewController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_image-selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"tab_image.png"]];
Step 7: Enjoy!
You’ve just created a shiny Twitter-like UITabBar! Here’s the comparison image: