Question

I have a UIImage that is displaying a grayscale button. Is there a way to “shade” the image with a color when i draw it? So i could effectively have 1 grayscale button image, but have any color button? I would also like to have the transparent pixels stay transparent if possible.

Thanks!

Answer 1

To do this, you’ll need to use Quartz 2D with the following steps:

1. Create a CGImage for the PNG background with CGImageCreateWithPNGDataProvider, or use UIImage as usual and grab a reference to the Quartz image data using the CGImage property of the UIImage.
2. Set the blend mode on the image with CGContextSetBlendMode. The mode you’re after is probably kCGBlendModeOverlay.
3. Create a new single-tone CGImage for the shading layer.
4. Use CGContextDrawImage to composite the shading layer over the background layer.

Detailed instructions on how to do this are available in the Quartz 2D Programming Guide, in the section titled “Using Blend Modes with Images”.