Designing beautiful gradient buttons in Cocoa with Core Graphics- Part 2

So let's pick up where we left off, last time we made a great looking button with Photoshop, but the main problem with this, is that you need to make a lot of them if you want multiple color schemes.
What we want to achieve is the same result, but with a programmatic background color.

Let's get to work...

If we look at the image we made in Photoshop last time, we can take the naive solution - Let's drop the gradient background and put a transparent one instead, and just create the background programmatically.
Let's try it and see what we get.

1. In Photoshop, drop the gradient background -

2. Let's write some code:

- (UIImage*) createTileImage{

UIGraphicsBeginImageContextWithOptions(CGSizeMake(105,105), YES, [UIScreen mainScreen].scale);

//draw red background

CGFloat red = 255.0f;

CGFloat green = 0.0f;

CGFloat blue = 0.0f;

UIColor *baseColor = [UIColor colorWithRed:(CGFloat)red/255.0 green:(CGFloat)green/255.0 blue:(CGFloat)blue/255.0 alpha:1.0];

[baseColor set];

UIRectFill(CGRectMake(0, 0, 105, 105));

//load up the transparent tile on top

[[UIImage imageNamed:@"tileOnTop"] drawAtPoint:CGPointZero];

UIImage *returnValue = [[UIGraphicsGetImageFromCurrentImageContext() retain] autorelease];

UIGraphicsEndImageContext();

return returnValue;

}

First we create an image context, here we are using UIGraphicsBeginImageContextWithOptions 

which is suitable for iPhone 4 devices, and it's much better to use this in iOS 4. If you are using iOS 3.x , use the UIGraphicsBeginImageContext method.

Then we draw the background, in this case, it's red.
We then draw the transparent background on top, and return the result image.

If we run this we will get a red tiled square, but if we compare it with the same actions done in Photoshop we will get a different result...

It's easy to see that the image we made in xCode is less vibrant and looks dull.

Why is that?

Well, the answer relies in the blend modes, When you use different blend modes targeted for different layers in Photoshop, it will blend them with their properties and will apply all these computations until the bottom layer (the red color layer).

But if you export the image to a png file, it doesn't contain all this data, it just renders all the layers onto a single image, so if the red layer is not there, the different blend modes won't apply their properties.

So how can we fix this?

Luckily, the good people at Apple gave us a lot of power using blend modes in our code, we will create several gradient layers in Photoshop (you can also do this programmatically if you wish) and apply different blend modes to them.

3. Here I'm going to use four different images:

I won't go into it too much, but you can see paralyze these to the layers and effects we did in the first post.

4. Now let's refine our code:

- (void) drawTileData{

[[UIImage imageNamed:@"Square-VividLight"] drawAtPoint:CGPointMake(0,0) blendMode:kCGBlendModeLuminosity alpha:0.15];

[[UIImage imageNamed:@"Square-VividLight"] drawAtPoint:CGPointMake(0,0) blendMode:kCGBlendModeSoftLight alpha:0.15];

[[UIImage imageNamed:@"Squares-GeneralBackgroundNoDark"] drawAtPoint: CGPointMake(0,0) blendMode:kCGBlendModeNormal alpha:0.9];

[[UIImage imageNamed:@"Square-VividLight"] drawAtPoint:CGPointMake(0,0) blendMode:kCGBlendModeSoftLight alpha:0.10];

[[UIImage imageNamed:@"Squares-GeneralBackground"] drawAtPoint: CGPointMake(0,0) blendMode:kCGBlendModeSoftLight alpha:0.2];

[[UIImage imageNamed:@"Squares-GeneralFrame"] drawAtPoint: CGPointMake(0,0) blendMode:kCGBlendModeNormal alpha:1.0];

}

Here we've used different blend modes with different alpha values, you can of course play with this to achieve the result you want.

If you are unfamiliar with blend modes, there's a great sample code in Apple's developer website.

Let's bring it home, the end result is:

My, that's swell :)

But it you take a look at a finished screenshot from our game Deca Sudoku 2.0 for iPhone,

The colors are much more vibrant - this is because we used a gradient background and here we are just using a single color.

So adding that gradient is what we will do in part 3.

Hope you enjoyed this!

Comments are welcomed.

Uri.