• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
August 14, 2012

Creating a Polished Steel Effect in iOS

Posted by PMG Advertising Agency

Have you ever wanted to have a polished steel button in your iOS apps? Whether it be for a shiny chrome button, or to customize the basic slider to match the interface of your app, this kind of effect is often very good at giving a more tactile feel to your virtual environment.

polished steel ios buttons

This is a fairly easy effect to create in an application like Adobe Photoshop. All it requires is an angle gradient with multiple different points light and dark points, and possibly a few other gradients with low opacity over top. Depending on the shape of the button and the exact effect you’re looking for. Unfortunately, if at any point during the development process you realize you need one of your shiny metal elements to be a different size, or you realize you want that button to be able to fit into array of many different heights and widths, you have to go back into Photoshop and resize all of your images, possibly creating entirely new one’s for each size.

My thought, why not draw it in code? Well, as I’ve talked about in previous posts, Core Graphics has a very useful CGGradient object that you can use to draw gradients. Unfortunately, it only works with Linear and Radial gradients. What we need is an Angle Gradient. So, why not write our own? Well, lucky for us, we don’t have to!

As it turns out, I was able to find Pavel Ivashkov (after doing a fair amount of searching myself), who just happened to do all of the legwork for us! Not only that, but he posted all of the source code on a public git repo for all the world to enjoy!

His repository includes a sample project showcasing how to use the AngleGradientLayer class as the actual layer for a UIView. However, if you want to instead draw it inside of Core Graphics it’s not much more complicated.

- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];

NSMutableArray *colors = [[NSMutableArray alloc] initWithCapacity:16];
NSMutableArray *locations = [[NSMutableArray alloc] initWithCapacity:16];

for (int i = 0; i < 5; i++) {
[colors addObject:(id)[UIColor colorWithRed:252/255.0 green:253/255.0 blue:203/255.0 alpha:1].CGColor];
[colors addObject:(id)[UIColor colorWithRed:250/255.0 green:96/255.0 blue:53/255.0 alpha:1].CGColor];
[locations addObject:[NSNumber numberWithFloat:(0.2 * i)]];
[locations addObject:[NSNumber numberWithFloat:(0.2 * i + 0.16)]];
}
[colors addObject:(id)[UIColor colorWithRed:252/255.0 green:253/255.0 blue:203/255.0 alpha:1].CGColor];
[locations addObject:[NSNumber numberWithInt:1]];

AngleGradientLayer *angle = [[AngleGradientLayer alloc] init];
angle.colors = colors;
angle.locations = locations;

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClipToRect(context, self.bounds);
[angle drawInContext:context];

[colors release];
[locations release];
[angle release];
}

 

adobe photoshopiosiOS appsiOS development
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • Hindsight 2020 & Looking Ahead to 2021
  • Preparing for Streaming’s Growth & The Future of TV Buying
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.