Search code examples
cocoacore-graphicsnsimageuitabbaritem

NSImage Overlay/Mask Gradient like iOS


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,

enter image description here

becomes...

enter image description here

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.


Solution

  • 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).