PMG Digital Made for Humans

Creating a Polished Steel Effect in iOS

3 MINUTE READ | August 14, 2012

Creating a Polished Steel Effect in iOS

Author's headshot

PMG

PMG is a global independent digital company that seeks to inspire people and brands that anything is possible. Driven by shared success, PMG uses business strategy and transformation, creative, media, and insights, along with our proprietary marketing intelligence platform Alli, to deliver Digital Made for Humans™. With offices in New York, London, Dallas/Fort Worth, Austin, Atlanta, and Cleveland, our team is made up of over 900+ employees globally, and our work for brands like Apple, Nike, Best Western Hotels & Resorts, Gap Inc., Kohler, Momentive, Sephora, and Shake Shack has received top industry recognitions including Cannes Lions and Adweek Media Plan of the Year.

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];

Stay in touch

Bringing news to you

Subscribe to our newsletter

By clicking and subscribing, you agree to our Terms of Service and Privacy Policy

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


Related Content

thumbnail image

AlliPMG CultureCampaigns & Client WorkCompany NewsDigital MarketingData & Technology

PMG Innovation Challenge Inspires New Alli Technology Solutions

4 MINUTES READ | November 2, 2021

thumbnail image

Applying Function Options to Domain Entities in Go

11 MINUTES READ | October 21, 2019

thumbnail image

My Experience Teaching Through Jupyter Notebooks

4 MINUTES READ | September 21, 2019

thumbnail image

Working with an Automation Mindset

5 MINUTES READ | August 22, 2019

thumbnail image

3 Tips for Showing Value in the Tech You Build

5 MINUTES READ | April 24, 2019

thumbnail image

Testing React

13 MINUTES READ | March 12, 2019

thumbnail image

A Beginner’s Experience with Terraform

4 MINUTES READ | December 20, 2018

ALL POSTS