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

Hi All.
Last time we left off with a gradient-like view, but we created it with a static background color.
Now we are going to take a static color like this:

...and turn it into this with code.

Let's get started:
1. If we look at a gradient that we produce from a static color, we can work with different color schemes, the most beneficial IMO, is the Hue, Brightness, Saturation mode.
You can make a gradient just by changing the brightness value, but we found you get better results if you add a little bit of change to the Hue value.

2. For this to work, you will need a function that can take RGB values and translate them to HSB values,
I confess that I didn't write such a function myself, you can find one easily on the web.

3. We'll start by getting the CGColor of our base color and transform it to HSB values.

CGColorRef cgBaseColor = baseColor.CGColor;

We then get the HSB values:

float hsbValues[3];

CGColorRef cgBaseColor = baseColor.CGColor;

transformRGBtoHSB(CGColorGetComponents(cgBaseColor), hsbValues);

float hue=hsbValues[0];

float saturation=hsbValues[1];

float brightness=hsbValues[2];

You can do this by using two gradients, but we used three instead and placed the last one closer to the end point to get better results.

We also used a parameter called intensity to control the amount of gradient applied.

UIColor *middleColor = [UIColor colorWithHue:hue-(intensity*0.055*0.5) 

  saturation:saturation 

          brightness:brightness*(1.0-(intensity*0.8*0.5)) 

               alpha:1.0];

UIColor *endColor    = [UIColor colorWithHue:hue-(intensity*0.055)       saturation:saturation 

  brightness:brightness*(1.0-(intensity*0.8)) 

       alpha:1.0];

4. Let's start setting up the gradient:

To create a gradient we need a colorSpace, an array of colors, and an array of locators:

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

NSArray *colorArray = [NSArray arrayWithObjects:(id)(baseColor.CGColor), (id)(middleColor.CGColor), (id)(endColor.CGColor), nil];

CGFloat locations[3];

locations[0] = 0.0;

locations[1] = 0.7;

locations[2] = 1.0;

CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)colorArray, locations);

5. Now that our gradient is set, we can draw it:

CGPoint myStartPoint, myEndPoint;

myStartPoint.x = 0.0;

myStartPoint.y = 0.0;

myEndPoint.x = 0.0;

myEndPoint.y = 105.0;

CGContextDrawLinearGradient (context, gradient, myStartPoint, myEndPoint, kCGGradientDrawsAfterEndLocation);

6. Don't forget to release it :)

CGGradientRelease(gradient);

CGColorSpaceRelease(colorSpace);

7. You're done! We'll just replace the UIRectFill method with the new one we created and voila! 

Here's a nice looking gradient:

And that's all there is to it, here's a screenshot of it in Deca Sudoku 2.0.

Hope you enjoyed this!

Uri.

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.

Deca Sudoku for iPhone version 2.0 is out!

Hi all,
How fun is it to wake up to find you app is out on the app store :)
We've put a lot of effort on this version of Deca Sudoku for iPhone, the game engine is brand new and all the graphics are new with full support for retina display,
We hope you enjoy it as much as we do!
Deca Sudoku lite will be out as soon as Apple approves it.

Deca Sudoku for iPhone on iTunes

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

Ok, Let's start with the final result - What I want to talk about is how to design and code beautiful gradient buttons with Cocoa and core graphics - Here's a screenshot of the final result we used in our game Deca Sudoku Version 2.0:

I'll try to keep the flow the same as it was when we were designing this interface.
We started off with photoshop - designing the gradient squares.

Step 1 - Color gradient - for this square we used this cool green gradient - if you want to reproduce it it's R:22 G:79 B:2 for the dark color (or H:104 S:98 B:31) and R:52 G:157 B:15 for the light color (or H:104 S:98 B:62) - Actually it's much easier to think of it in the HSB palette because you only have to make the color a bit less saturated and brighter to get the end result.

Step 2 - We start designing a single square - For this we've put four layers with different blending modes together. Here are the exact values if you want to recreate it:

Step 3 - We add inner gradient to tie it all together and a stoke on the inside:

Step 4 - Now we're done with the first tile gradient, we change the base gradient values for the second one and make two tile files: Tile1.png, Tile2.png (don't forget to pngcrush them).
So let's load it up in code - We used a bounce animation in our code with an internal animation framework that we built, but you can get the same result - now easier than ever - using UIView animation with blocks (iOS 4 and above).
So your code might look something like this:

- (void) addTiles{
 UIImage *tile1Image = [UIImage imageNamed:@"tile1"];
 UIImage *tile2Image = [UIImage imageNamed:@"tile2"];
 CGSize  imageSize = tile1Image.size;
 for (NSInteger iter=0;iter<9;iter++){
  UIImageView *tileImageView = [[UIImageView alloc] initWithFrame:
           CGRectMake(XPOS+(iter%3)*imageSize.width, 
                YPOS+(iter/3)*imageSize.height, 
                imageSize.width, 
                imageSize.height)];
  [tileImageView setImage:(iter%2==0) ? tile1Image : tile2Image];
  [tileImageView setHidden:YES];
  [self.view addSubview:tileImageView];
  [self animateTiles:tileImageView];
  [tileImageView release];
 }
}

To bounce animate the views you can nest three UIView animates in block completion:

- (void) animateTiles:(UIImageView*)tileToAnimate{
 [tileToAnimate setTransform:CGAffineTransformMakeScale(0.001, 0.001)];
 [tileToAnimate setHidden:NO];
 [UIView animateWithDuration:ANIMATION_DURATION*0.45 
      animations:^{[tileToAnimate setTransform:CGAffineTransformMakeScale(1.1, 1.1)];} 
      completion:^(BOOL finished) {
       [UIView animateWithDuration:ANIMATION_DURATION*0.3 
            animations:^{[tileToAnimate setTransform:CGAffineTransformMakeScale(0.9, 0.9)];} 
            completion:^(BOOL finished) {
             [UIView animateWithDuration:ANIMATION_DURATION*0.25 
                  animations:^{[tileToAnimate setTransform:CGAffineTransformMakeScale(1.0, 1.0)];}];
            }];
      }];
}
Any you're done, for now :)
The end result might look like this:


So what's in the next part? Well replace the static gradient background with a programmatic color and use "drawAtPoint" blend modes to create the same effect we did in Photoshop - programmatically.

Hope this was useful to you, comments will be welcomed :)

Hello world.

Hi there.
Well, as this is my first entry here, I'll tell you a little about myself and what I want to write about in this blog.
My name is Uri Nachmias, I'm the founder and lead developer in UZO Software, designed to make iPhone\iPod\iPad games.
I've been writing code for iPhone since the first public SDK (2.0) and since then it's been my life.

Since it's founding, UZO Software has released three releases, I'll tell you about them in detail in the following posts, but they are all based on the well known board game, Sudoku.

In this blog I'll try to update on what I'm doing, what code I'm writing and some tips and tricks I've learned for iPhone development over the years.

Hope you enjoy it!
Uri.