iPhone iOS how to create graphics effects like drop shadow, etc? What effects are built-into iOS?

Question

I apologize for a large set of questions here. I'm starting to play with Quartz Graphics more and more, and found that it has interesting effects, yet I do not have many samples to see them in action.

 view.layer.shadowPath = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;

There's a shadow property:

view.layer.shadowColor = [UIColor grayColor].CGColor;
view.layer.shadowOffset = CGSizeMake(5, 5);
view.layer.shadowPath = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;
view.layer.shadowRadius = 9;

I was unable to make the shadow show though.

Borders:

 view.layer.borderWidth = 1;
   view.layer.borderColor=[[UIColor whiteColor] CGColor];

What other effects can I get from built-in iOS on iPhone? *Is there a comprehensive demo project that can showcase what kind of graphic manipulation functionality is built into iOS?*

How do I do transparency masking?

Is there a way to add inner shadow or inner glow? Is there a way to make an iOS button appear more "concave" than it really is?

Is there a way to do radial gradients? Is there a way to create multi-ray lens flare effects like Adobe Illustrator? Is there a way to blend layers using "lighten, dissolve", or other photoshop effects? Is there a way to dynamically adjust the brightness of the image? I know how to do hue shift.

I would appreciate any other hints on what kind of layer effects I can apply to the CALayers

Solution 1

What an interesting coincidence! I've just recently held a presentation at an iOS Game Design Seminar on CoreGraphics and CoreAnimation and just today I've published some of the documents on Github.

So if you prefer some hands on examples you can check out the repository here: https://github.com/pkluz/PKCoreTechniques

Includes some of the following examples:

• Color Fill

• Gradient Fill (Linear and Radial)

• Simple Paths

• Bezier Curves

• Clipping (Standard and Even-Odd)

• Creating custom-drawn Buttons

• Simple Translations

• Translations with Hit-Test Triggers

• A very primitive 'CoverFlow' with 3D Transformations in CoreAnimation.

.. and some more ;-)

Hope you find what you need, but from what I see it should cover a fair amount of what you've requested.

Note: There's also a PDF that serves as an interactive tutorial.

Solution 2

Here is a really good tutorial, it helped me a lot, maybe it'll help you too.

Solution 3

Here's my implementation of a radial gradient generation using CIImage. It displays the named image if a gradient was not created. Otherwise it displays a radial gradient.

+(UIImage*)doRadialGradientFilter:(NSString*)baseImageName 
{

    CIFilter* controlsFilter  = [CIFilter filterWithName: @"CIRadialGradient" keysAndValues:
                   @"inputColor1", [CIColor colorWithRed:0.0 green:0.0
                                                    blue:0.0 alpha:0.0], @"inputColor0", [CIColor colorWithRed:0.0 green:0.0
                                                                                                          blue:0.5 alpha:0.5], @"inputRadius0", [NSNumber numberWithDouble:0.0], nil];


    CIImage *displayImage = controlsFilter.outputImage;
    UIImage *finalImage = [UIImage imageWithCIImage:displayImage];

    CIContext *context = [CIContext contextWithOptions:nil];
    if (displayImage == nil || finalImage == nil) {
        // We did not get output image. Let's display the original image itself.
        return  [UIImage imageNamed:baseImageName];
    }else {
        // We got output image. Display it.
        return  [UIImage imageWithCGImage:[context createCGImage:displayImage fromRect:displayImage.extent]];
    }

}

Comments

[Alex Stone]

Thanks for a great shadow example, this is very much what I've been looking for!

[Alex Stone]

This is beyond great. This is simply awesome example! I see that the angry bird paths are hard-coded in. Did you type them in or use some form of code generation tool? Do you know if it's possible to get points for this path from a graphics editor, like adobe illustrator?

[Tirth]

@Templar, your given link out dated now.

[Templar]

@iAmbitious Yeah, it looks like the page isn't available anymore. This is a cached-like version, but the images are missing :(