Split tone effect using core image filters?

Question

I understand the principles behind the split tone effect, and would love to use either a color map or tone curves for individual rgb channels. Unfortunately that's not an option for iOS at the moment, as the SDK does not include those filters.

The only hack I've come up with (other than doing a render through opengl) is duplicating an image, adjusting hue in the highlights in one, shadows in the other, and combining them. However, I would prefer a simpler way that does not require a two-chain composite operation.

Is such an effect possible with a chain of any of the currently available core image filters in iOS 5?

Answer 1

I got a very similar effect by first applying CIFalseImage. Pick your dark and light color (dark blue & red or orange). When you create the CIColor for the two colors, set the alpha to .5.

Next use CIScreenBlendMode and mix that filtered image with the orginal. It will look like a split tone.

It's a good hack to change shadows and highlights quickly.

CIFilter *lightDark = [CIFilter filterWithName:@"CIFalseColor"
                                       keysAndValues: @"inputImage", helper.ciImage, nil];
[lightDark setDefaults];
CIColor *myBlue = [CIColor colorWithRed:0.0 green:0.0 blue:0.6 alpha:0.5];
CIColor *myRed = [CIColor colorWithRed:1.0 green:0.8 blue:0.0 alpha:0.5];

[lightDark setValue:myBlue forKey:@"inputColor0"];
[lightDark setValue:myRed forKey:@"inputColor1"];
CIImage *mappedImage = [lightDark valueForKey:kCIOutputImageKey];

CIFilter *screenBlend = [CIFilter filterWithName:@"CIScreenBlendMode" keysAndValues: @"inputImage", mappedImage, @"inputBackgroundImage", helper.ciImage, nil];
CIImage *finalImage = [screenBlend valueForKey:kCIOutputImageKey];

if (finalImage) imageView.image = [UIImage imageWithCIImage:finalImage orientation:orientation];
else NSLog(@"Missing our image");

Answer 2

I've been reading a little about how to do this in Photoshop, and it's basically increasing the contrast in the red and green channels and decreasing it in the blue channels. (At least for a basic effect - if you really do it with film, you can get some really odd color shifts, too!)

You can do contrast adjustment using a series of CIColorMatrix nodes. Contrast is basically ((value - 0.5) * contrast) + 0.5. So a color matrix for, say, a contrast of 1.5 in red and green, and 0.66 in blue, would be something like

| 1 0 0 -0.5 |   | 1.5 0.0 0    0 |   | 1 0 0 0.5 |
| 0 1 0 -0.5 | + | 0   1.5 0    0 | + | 0 1 0 0.5 |
| 0 0 1 -0.5 |   | 0   0.0 0.66 0 |   | 0 0 1 0.5 |
| 0 0 0  1.0 |   | 0   0.0 0.0 1.0|   | 0 0 0 1.0 |

CIColorCube can probably reproduce more complex transformations, but the format of its data is complicated. You need to create a 3D lookup table.

CIToneCurve could do it if you did 3 separate passes (or maybe only 2 - one for both red and green and the 2nd one for only blue), and then combined the results. You'd set the 2nd point below 0.25 and the 4th point above 0.75 in red and green, and the opposite in blue.