Filter Me: Color Lookup Table – Part 2

on

filterMeIcon_part_2

Hi, We will pick up right where we left off in the Part one.

In the last part, I covered to use curve file which was built by Photoshop, and how to apply it to your photo.

And now, we will deal with advanced technique. Applying many complex curve and selective-color to turn you photo to beautiful photo ever.

Standar approach to create photo like instagram in last part. We just apply one curve to photo. So, what if do I wanna apply more curve or selective-color in photoshop ? Should I apply each curve by step to step in iOS app ? With professional designer, they can adjust more curve than one at time.

Here is list action which designer often do :

FilterMe_Part2_1

Sounds simple enough, but in practice I found it quiet hard to implement Curves and Selective Color in my iOS app exactly the way Photoshop does it. That should be crazy if I and you as iOS developer will apply each step by code .There is must solution for implement that.

Color Lookup Table – LUT

LUT is a recuse for iOS dev ;]

In the field of image processing, when we want to adjust the color of an image, often used Color Lookup Table (referred ColorLUT) technology.

Here is a simple example, if we want to make the R value of each pixel in the image into the original 0.3-fold, the basic approach is to put the R value of each pixel is multiplied by 0.3, assuming the size of the image is 1024×768, then the total to 786,432 times a floating-point multiplication.

If we start the first result to build a table, all the processed color values (R value is 0.3 times) after recording it, and then take the color value of each pixel in the table, the color values obtained after processing, So long as we do 786432 lookup action, faster than many floating-point operations. In fact most of the color adjustment algorithms many complex than this example, and therefore better highlight the high efficiency of the look-up table.

Here’s a sample RGB lookup table:

FilterMe_Part2_2

So, theory enough, take action.

Open photoshop, load this photo, and give it to your designer. They will make some adjustment to desired effect.

FilterMe_Part2_3

But now, we are iOS dev, I take a tour around google and seek some action Photoshop.

Here is my found : http://www.deviantart.com/art/ATP-Dylan-Action-for-Photoshop-461167798

You can find by yourself, but make sure :”There is no effects use additional textures, blur, sharpen and some other filters which will not work with a simple lookup texture approach“. Your action should just adjust curve, layer, selective-color.

Download this action and run it.

FilterMe_Part2_4

 

And here is my result

FilterMe_Part2_5

 

Look amazing ;]

But this is work of designer, my job is bring this miracle to iOS app.

Continue, Download original LUT

Open this with photoshop, take actions like I did before to original LUT.

And save LUT as ProcessedLUT.png (Must save as PNJ extension)

FilterMe_Part2_ProcessedLUT

So, we have finished first stage as important stage in this blog. Next, we work with iOS.

For simple, I create category for you. Feel free to download it here.

Ex:

Just remember add CoreImage and OpenGLES framework in your project.

Here is my photo after process by LUT

FilterMe_Part2_6

 

Another way

You can easily implement LUT process in GPUImage. Just use GPUImageLookupFilter class.

Source code

Source code

Where to go from here ?

After reading carefully this blog, I think you have some knowledge about image processing and how to bring photoshop to iOS world.

To make photo similar Instagram do, in the 3rd part, I will show you the way to add more texture to photo. Make it look like vintage or retro style.

Thank for reading ;]

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *