Image effects with core graphics

Question

I am wondering how to reproduce image effects that we can see in several Mac and iPhone applications, all of them starting from a black and white picture: - In UiTabbar on iPhone, how, the black and white picture become a blue gradient when it is selected - in Twitter for mac, we can see several effects (glow, bevel, ....)

Any help on this topic is welcome. :)

EDIT : I am interested for these effects on MAC OS, not on iPhone.

Answer 1

Check out Apple's QuartzDemo sample project. QuartzClipping class shows you how to work with clipping and masking. Here is what I figured out based on that project.

CGContextRef context = UIGraphicsGetCurrentContext();

UIImage *img = [UIImage imageNamed:@"at.png"];
CGImageRef alphaImage = CGImageRetain(img.CGImage);

UIImage *backgroundImg = [UIImage imageNamed:@"gradientBackground.png"]; // background image for normal state
CGImageRef image = CGImageRetain(backgroundImg.CGImage);


CGFloat height = self.bounds.size.height;
CGContextTranslateCTM(context, 0.0, height);
CGContextScaleCTM(context, 1.0, -1.0);

CGContextSetRGBFillColor(context, 0.129, 0.129, 0.129, 1.0);
CGContextFillRect(context, self.bounds);

CGContextSaveGState(context);
CGContextClipToMask(context, CGRectMake(100.0, height - 150.0, img.size.width, img.size.height), alphaImage);
CGContextDrawImage(context, CGRectMake(100.0 - (backgroundImg.size.width-img.size.width)/2, 
                                       height - 150 - (backgroundImg.size.height-img.size.height)/2, 
                                       backgroundImg.size.width, 
                                       backgroundImg.size.height), image);
CGContextRestoreGState(context);



UIImage *backgroundImg2 = [UIImage imageNamed:@"TabBarItemSelectedBackground.png"]; // background image for selected state
CGImageRef image2 = CGImageRetain(backgroundImg2.CGImage);

CGContextSaveGState(context);
CGContextClipToMask(context, CGRectMake(180.0, height - 150.0, img.size.width, img.size.height), alphaImage);
CGContextDrawImage(context, CGRectMake(180.0 - (backgroundImg2.size.width-img.size.width)/2, 
                                       height - 150.0 - (backgroundImg2.size.height-img.size.height)/2, 
                                       backgroundImg2.size.width, 
                                       backgroundImg2.size.height), image2);
CGContextRestoreGState(context);


CGImageRelease(image);
CGImageRelease(alphaImage);
CGImageRelease(image2);