Gold Solution


Here’s a Gold Solution with Shadow. Included is the file that does all the heavy lifting.

Addition to HypnosisterAppDelegate.m

    // Set image 2 pixels in and give extra space for shadow
    CGRect logoRect = CGRectMake(2, 2, 120, 120); 
    logoView = [[BNRLogo alloc] initWithFrame];
    [view addSubview];


#import "BNRLogo.h"

@implementation BNRLogo

- (id)initWithFrame:(CGRect)frame
    self = [super initWithFrame:frame];
    if (self) {
        [self setBackgroundColor:[UIColor clearColor]];
    return self;

- (void)drawRect:(CGRect)dirtyRect
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    UIImage *hat = [UIImage imageNamed:@"Icon.png"];
    CGRect hatRect;
    hatRect = CGRectMake(0, 0, 114, 114);  // size of the retina png
    // Going to create a white circle (fill)
    [[UIColor whiteColor] setFill];

    // Shadow offset will be 3,3
    CGSize offset = CGSizeMake(3, 3);
    // The shadow will be dark gray in color
    CGColorRef color = [[UIColor darkGrayColor] CGColor];
    // Draw the white circle
    CGContextAddArc(ctx, 57, 57, 57, 0.0, M_PI * 2.0, YES); // center & radius of PNG
    // Create the shadow for the circle
    CGContextSetShadowWithColor(ctx, offset, 2.0, color);
    // Draw circle with shadow
    // Turn off shadow
    CGContextSetShadowWithColor(ctx, offset, 2.0, NULL);

    // Create a clipping plane for the logo and draw hat
    CGContextAddArc(ctx, 57, 57, 57, 0.0, M_PI * 2.0, YES);
    [hat drawInRect:hatRect];
    // Apply a gradient to current clipping plane
    // See Quartz 2D programming Guide for more details
    CGGradientRef myGradient;
    CGColorSpaceRef myColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0 , 1.0 };
    CGFloat components[8] = {0,0,1,.3,1,1,1,.2};
    myColorspace = CGColorSpaceCreateDeviceRGB();
    myGradient = CGGradientCreateWithColorComponents(myColorspace, components, locations, num_locations);
    CGPoint sp, ep; //StartPoint & EndPoint
    CGContextDrawLinearGradient(ctx, myGradient, sp, ep, 0);
    CGContextAddArc(ctx, 57, 57, 57, 0.0, M_PI * 2.0, YES);
    CGContextSetLineWidth(ctx, 1);



I’ve added this solution exactly line by line, but I am not getting the hat logo in the circle. I have the circle. I have the gradient. No logo. (Yes I have the file) Any ideas?



Have you added the image file to your project to make it part of the application’s bundle?


For some reason it is the simplest things that trip me up. I had not added the file to the bundle. Thank you so much!


Wow great solution, I spent a couple hours and realized I was wayy over complicating things. Thanks for sharing!

What’s the goal of turning off the shadow in this line:

//turning off the shadow after
CGContextSetShadowWithColor(ctx, offset, 2, NULL);


I commented out this specific line and the result looks the same?

Is it such that there is no offset for the gradient overlay?