Nathan Barry
  • Home
  • Blog
  • Books & Products
  • About
Twitter YouTube Search Menu
  • Home
  • Blog
  • Books & Products
  • About
Twitter YouTube

February 7, 2012 - Design, Mobile

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.

I’m Nathan Barry. I’m a creator, author, speaker, blogger, designer, and the founder of ConvertKit.

more about me

Join the Newsletter

Each Monday I send out my weekly newsletter
 and latest blog posts. Subscribe to stay in the loop.

Subscribe to get my best content. No spam, ever. Unsubscribe at any time.

You might also like...

more recent articles
February 3, 2020 - Business, Design

The magical combination of teaching and storytelling

read more
December 10, 2019 - Design, Life

I built a tiny house!

read more

26 Responses to “Designing Buttons in iOS 5”

  1. Gustaf Rosenblad

    July 20, 2012

    Thanks!

    reply
  2. Oliver

    August 14, 2012

    Thank you!! Really helpful! :)

    reply
  3. Rishad

    August 15, 2012

    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

    reply
  4. Patrick Rauland

    September 6, 2012

    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?

    reply
    • nathanbarry

      September 10, 2012

      The naming convention is just sameFileName@2x.png. Other than the @2x portion the name needs to be exactly the same. As for linking the file just drop it anywhere in your Xcode project. It will be less confusing later if you put it in the same place as your standard resolution file.

      Hope that helps!

      reply
      • Patrick Rauland

        September 10, 2012

        Thanks! :)

        reply
  5. Stuart

    September 14, 2012

    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

    reply
    • Vladimir Fleurima

      January 25, 2013

      Thank you, I found this helpful!

      reply
  6. Lee Probert

    October 15, 2012

    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.

    reply
  7. Nardine

    October 16, 2012

    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.

    reply
    • Nathan Barry

      October 16, 2012

      Use them for anything you want. No need for credit links.

      reply
      • Nardine

        October 16, 2012

        Thanks a lot :)

        reply
      • Jan Ekholm

        November 2, 2012

        Thank you, lovely buttons! First time I actually used resizable background images on iOS too, works really well.

        reply
  8. omniDETH

    November 1, 2012

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

    Thanks

    reply
  9. John

    January 1, 2013

    Great looking buttons! Thanks.

    reply
  10. Andres Portillo

    January 15, 2013

    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.

    reply
  11. Roman

    February 17, 2013

    Thank you. They really look nice.

    reply
  12. Chris

    March 19, 2013

    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

    reply
  13. Graham

    April 17, 2013

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

    reply
  14. Gen

    April 26, 2013

    save my day!
    thanks!

    reply
  15. Koen

    May 26, 2013

    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.

    reply
  16. Chris Carr

    June 8, 2013

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

    reply
  17. Jan

    June 10, 2013

    Hi,

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

    THX!,

    Jan

    reply
  18. Ren

    September 1, 2013

    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.

    reply

Trackbacks

  1. Using Custom Rounded Buttons in IOS App Using Interface Builder | The Technology Blog says:
    February 4, 2013 at 3:24 pm

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

    Reply
  2. 20 resources to help you design an iPhone app • Inspired Magazine says:
    July 9, 2014 at 6:13 pm

    […] 14. UI Buttons […]

    Reply

Leave a Reply Cancel reply

Subscribe to get my weekly newsletter.

Nathan Barry

© Copyright 2023 Nathan Barry.
All rights reserved.

Categories

  • Audience Building
  • Business
  • Design
  • Investments
  • Learning
  • Life
  • Local (Boise, Idaho)
  • Marketing
  • Mobile
  • OneVoice
  • Podcast
  • Security
  • Social
  • The Web App Challenge
  • Travel
  • Uncategorized
  • WordPress

Products

  • Designing Web Applications
  • The App Design Handbook
  • Authority
  • Photoshop for Web Design
  • Commit
  • ConvertKit
  • How I Made $19,000 on the App Store While Learning to Code
  • One Year After Quitting My Job
  • Starting The Web App Challenge: From Zero to $5,000/month In 6 Months
  • User Experience Lessons From the New Facebook iOS App
  • Step-By-Step Landing Page Copywriting
  • Designing Buttons in iOS 5
  • The Best Marketing Method I Know
  • On Design Approval and Intentional Flaws
Nathan Barry

© Copyright 2023 Nathan Barry.
All rights reserved.