I searched everywhere but didn't find the solution. I have image 1. How can I programatically tint them with gradient to get images 2 and 3? Here are those images:
Tints that I applied to them via Photoshop are simple 2-color linear gradients.
And my question is: how can I achieve this effect programatically?
Solution: jrtc27 gave me almost working example. I fixed it (for ARC) and made it reusable (using UIImage's category). Here is it:
- (UIImage *)tintedWithLinearGradientColors:(NSArray *)colorsArr { CGFloat scale = self.scale; UIGraphicsBeginImageContext(CGSizeMake(self.size.width * scale, self.size.height * scale)); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextTranslateCTM(context, 0, self.size.height); CGContextScaleCTM(context, 1.0, -1.0); CGContextSetBlendMode(context, kCGBlendModeNormal); CGRect rect = CGRectMake(0, 0, self.size.width * scale, self.size.height * scale); CGContextDrawImage(context, rect, self.CGImage); // Create gradient UIColor *colorOne = [colorsArr objectAtIndex:1]; // top color UIColor *colorTwo = [colorsArr objectAtIndex:0]; // bottom color NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, (id)colorTwo.CGColor, nil]; CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)colors, NULL); // Apply gradient CGContextClipToMask(context, rect, self.CGImage); CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0,self.size.height * scale), 0); UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return gradientImage; }
EDIT: Here is a version which supports non-retina and retina displays
The method can be used as a category for UIImage
+ (UIImage *)imageWithGradient:(UIImage *)img startColor:(UIColor *)color1 endColor:(UIColor *)color2 { UIGraphicsBeginImageContextWithOptions(img.size, NO, img.scale); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextTranslateCTM(context, 0, img.size.height); CGContextScaleCTM(context, 1.0, -1.0); CGContextSetBlendMode(context, kCGBlendModeNormal); CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height); //CGContextDrawImage(context, rect, img.CGImage); // Create gradient NSArray *colors = [NSArray arrayWithObjects:(id)color2.CGColor, (id)color1.CGColor, nil]; CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)colors, NULL); // Apply gradient CGContextClipToMask(context, rect, img.CGImage); CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0, img.size.height), 0); UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); CGGradientRelease(gradient); CGColorSpaceRelease(space); return gradientImage; }
Edit: added change by sobri
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With