7 Feb

Designing Buttons in iOS 5

By default Apple provides well styled interface elements to use when designing your application. Except for the UIButtons. To me using any other stock element is fine, but nothing screams amateur design like a default UIButton.

In my iOS apps I’ve tried a couple different methods of styling these buttons to get a more desirable look. While I know you can design buttons entirely in code, my Photoshop skills greatly exceed my programming skills. So my buttons are all designed in Photoshop, then imported as PNG files. Also iOS does such a good job with PNG optimization that I see it as the best choice.

Option 1: Using an Exactly Sized Image

 

 UIImage *buttonImage = [UIImage imageNamed:@"orangeButton.png"];
 UIImage *buttonImageHighlight = [UIImage imageNamed:@"orangeButtonHighlight.png"];
 // Set the background for any states you plan to use
 [saveButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
 [saveButton setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];

You can also do this in Interface Builder by setting the button Type to “Custom” and then add the image name to the background property.

 

Option 2: Using resizableImageWithCapInsets (iOS 5 Only)

This is my current preferred method (in most cases). It allows me to use the same images for most of the buttons across an application.

 UIImage *buttonImage = [[UIImage imageNamed:@"orangeButton.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];
 UIImage *buttonImageHighlight = [[UIImage imageNamed:@"orangeButtonHighlight.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];
 // Set the background for any states you plan to use
 [saveButton setBackgroundImage:buttonImage forState:UIControlStateNormal]
;
 [saveButton setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];

Pretty straightforward. Here you can change the button dimensions without having to create a new image. In Interface Builder (or with code) you will need to set the titleLabel color as well as the shadow position and color.

Final Tips:

  • Leave the text out of your images. This will scale better for the retina display and allow you to change it dynamically. No one wants to have to open Photoshop just to tweak some button text.
  • Always include @2x versions of each image.
  • If you prefer most of the customization (color, background, shadow) can be done in Interface Builder. Writing it in code is only required if you are using the second method (resizableImageWithCapInsets).

Whichever method you prefer, you can use some of my sample button styles to get started. Both methods still seem rough, so I would appreciate feedback and ways to better create buttons.

Download All the Button Files

Signup for my iOS Design Newsletter for more app design tips and articles.

My best content on design, marketing, and business.

Delivered each week for free.


We won't send you spam. Unsubscribe at any time.
Enjoyed the article? Follow me on Twitter or with RSS.

26 Responses to “Designing Buttons in iOS 5”

  1. Oliver says:

    Thank you!! Really helpful! :)


  2. Rishad says:

    Hi,

    Thanks for the information – much appreciated.

    I would be highly grateful if you could briefly list the steps you undertake to create the buttons in photoshop. As I am just starting out I am using GIMP but can’t seem to find a tutorial to make the simple, clean and crisp buttons that you provided. If you can list some brief steps I would be grateful as I will try and replicate in GIMP.

    thanks,

    Rishad


  3. Good article. This looks much easier albeit more tedious than i thought. As an iOS newb could you please explain a little more about including 2X images? Where do I save them? Is there a naming convention?


  4. I made these a little easier to drop into a project, might be useful for anyone trying out these buttons : https://github.com/stuartkhall/iOS-Buttons


  5. Do you know how to use resizableImageWithCapInsets BUT have it resize at the caps? I have an image I want to stretch at the ends across the screen to fit the width. The center element being a perfect circle which will house an icon.


  6. Nardine says:

    Hi,
    Thanks for the tutorial.
    The buttons given away, what is the license on it? Is it okay to use for paid apps?

    Also, could you please do a tutorial on using UIAppearance to customize different UI elements (with & without images).

    Thanks.


  7. omniDETH says:

    Can you please specify the EdgeInsets for @2x images?

    Thanks


  8. John says:

    Great looking buttons! Thanks.


  9. Andres Portillo says:

    Hey man thanks for the tut, im really new at this, can you tell me where am I supposed to add the code for the buttons? thank you.


  10. [...] the colorful buttons provided by Nathan Barry whose website was my starting point and inspiration to do this. He provides the sample colorful [...]


  11. Roman says:

    Thank you. They really look nice.


  12. Chris says:

    Hi

    Can you also do the second method (Option 2: Using resizableImageWithCapInsets (iOS 5 Only) from the interface builder?

    It stretches the image in my attempt

    Regards

    Chris


  13. Graham says:

    Thanks for the images! What are the RGB values for the orange color?


  14. save my day!
    thanks!


  15. Koen says:

    Thanks for sharing!

    BTW, hese work also great when using as the background of a UITableViewCell in Grouped mode. Because they are images with a rounded rect, they don’t look as nice in Plain UITableViews, unfortunately.


  16. Chris Carr says:

    Awesome, thanks so much! I can’t believe Apple doesn’t provide something like this with the framework.


  17. Hi,

    really cool buttons. What about the license? Can I use your buttons for a product?

    THX!,

    Jan


  18. Thanks for sharing the background images. It makes it a lot easier to customize the UIButtons that have the same look for both iOS 6 and iOS 7. Will use them in the next release of our app. Hopefully it won’t be a problem.

    Cheers.


Leave a Reply