CODEWITHSUNDEEP
iphonecocoaimagemacoscore-graphics
AP.
AP.

Reputation: 5323

Image effects with core graphics

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. :)enter image description here

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

Upvotes: 5

Views: 3790

Answers (3)

htinlinn
htinlinn

Reputation: 856

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);

Upvotes: 3

nacho4d
nacho4d

Reputation: 45138

I don't think is necessary to draw those since they you can obtain the same with images done with other software (photoshop, pixelmator, etc). Why? because the content (of the button) does not change, is not resized so images are good looking and the easiest way here.

If you want to learn how to draw with Quartz, there is a lot of documents and samples in Apple dev center and/or Xcode.

This is one recent tutorial from Matt Gallagher : Advanced drawing using AppKit

Upvotes: 1

viggio24
viggio24

Reputation: 12366

Unfortunately iOS is lacking the Core Image framework available in MacOSX, which is the source of all those beautiful effects. The UITabBar effects can be re-created using Core Graphics mask clipping features (see for example 

void CGContextClipToMask (
   CGContextRef c,
   CGRect rect,
   CGImageRef mask
);
). This is possible because masking is based on image alpha and all tab bar buttons are alpha based (try to add in a tab bar an image which is not alpha based and you will see the final effect...). Finally you can have a look at 
GLImageProcessing
example contained in XCode documentation or here: this explains how to do some basic image processing using OpenGL ES 1.1 (by the way this example contains some basic texturing and rendering methods that you can reuse to integrate any OpenGL view in your UIKit based app).

Upvotes: 2

Related Questions