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:

[click for full size]

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. tab_mage.png and tab_image-selected.png).

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: