NSImage Overlay/Mask Gradient like iOS

Question

I'm looking to replicate with Cocoa/Core Graphics the process which seems to occur on iOS when setting an image for a UITabBarItem. When the tab bar item is selected, the image is overlayed with a gradient.

For example,

becomes...

I'm unsure exactly what I should be doing to achieve this effect. It seems like the image is masking the gradient. Any pointers in the right direction (or code!) would be much appreciated.

Answer 1

You can use a monochrome CGImage with alpha channel (like most iPhone tool-/tabbar icons) as a mask. Basically, you'd use CGContextClipToMask with your monochrome image. Then you'd draw the gradient which is then clipped to the mask image. You might also want to have a look at the code of UMEKit, which implements this effect on Mac OS X (haven't looked at how exactly they do it, there are probably several ways).