Filter Me: Texture & Blend Modem – Part 3

on

filterMeIcon_part_2

 

In two previous parts of Filter Me series tutorial, I covered some useful technique for applying filter to photo. Here is shortcut for you : Part 1 and Part 2.

If you a new guy, I strongly recommend you should spend couple hours for reading Part 1 and part 2, and ensure you have some knowledge about Core Image and GPUImage before continue.

Before reading

In this blog, I use GPUImage in entity project. Rather than being an introduction to GPUImage framework, I assumes you are familiar with the basics and focused on the the way to implement filter function like Instagram does.

For saving your time, I google some nice blog about GPUImage :

What next ?

To create app like instagram’s filter, I will cover everything we need to implement it, include apply texture and adjust blend mode into photo.

In brief what we will do, I have shown you gallery of photos I did in a hour ago.

Steps to do  :

  1. Download vintage texture brush from Google
  2. Using Photoshop and create your own texture ( by combining brush and blend mode)
  3. Apply this texture to your photo by using GPUImage.
  4. Refactor code, bring animation for transiting photo.

The first photo is original photo. As you see, each next photo has different style, by adding textures like grunge, you can turn your photo like Retro, Vintage style.

Step 1 – Prepare yourself

Before starting work, We should download awesome brush for vintage style in google. Here is what I find bursh.

Download what you want, and run it.

FilterMe_Part3_1

Step 2 – Photoshop is God

And open Photoshop app and create new canvas with 640px as width and height.

FilterMe_Part3_2

Ensure you choose Color Mode is RGB Color, not CMYK.

Drag this original photo to your canvas, and create new layer for your texture

FilterMe_Part3_4

Next, open your brush. As you see, there are many brush texture in your gallery.

FilterMe_Part3_5Pick one, adjust size and draw to photo whatever you like. If you want to improve brush’s effect, you can choose blend mode in Layer panel.

FilterMe_Part3_SlideShow_3

Above photo is result when I combine brush which I downloaded from internet with Blend mode is Linear Burn.

Feel free for adjust option before saving.

Save your texture

You must save your texture as PNG, and make sure you just turn “the eye” of texture layer. Turn off “the eye” of original photo.

texture_linearBurnBlend_1

 

Bunch of texture which I have created and collected for you.

Textures

Step 3 – GPUImage

Now is time we turn miracle to your app. Just drink a sip coffee and see what will happen next ;]

Instead of talking about overview GPUImage framework again, I will mention directly what is inside GPUImage we should deal with it.

GPUImage library provide many useful class for blending texture with photo. Such as GPUImageNormalBlendFilter for normal blend, GPUImageOverlayBlendFilter for overlay blend,GPUImageMultiplyBlendFilter for multiply blend and so on. All of them is subclass by GPUImageTwoInputFilter class.

Here is snippet code for you

  1.  The first step, we should determine what is blend mode match with texture. For simply, I create object filter as GPUImageNormalBlendFilter class. And call [filter useNextFrameForImageCapture] for static image processing.
  2. Convert UIImage object to GPUImagePicture
  3. Add target and call -processImage to processing two images.
  4. Call -imageFromCurrentFramebuffer to get destination image. If your final photo wrong orientation, call imageFromCurrentFramebufferWithOrientation: and pass original photo’s orientation.

If you are confuse about step 1, please read this blog, in the newest version GPUImage.

Brad Larson changed the way for processing image because some memory structure issue, and make sure you MUST call -useNextFrameForImageCapture. If not, NSAsset will be fired.

Note

All of method we called above is run in main thread, if you process large image, it can block your main thread and UI will not responsive.

You should consider calling it in background thread instead.

In short, this video below will show you:

Step 4 – Adding animation

Step 4 is just option step. When you finished step 3, I think you can understand enough to implement. But if you wanna gain more User Experience, we should animate photo when applying new filter.

I created CABasicAnimation object and add to _imageView.layer. If you are familiar with CABasicAnimation, this is not problem for you. But not, I explain briefly.

  1. Because I want to change Layer’s contents property, so I use CABasicAnimation instead of  [UIView animate…].
  2. FromValue is previous Image
  3. ToValue is new filtered image.
  4. Adjust some property like duration, timingFunction, fillMode, …
  5. Reuse FeBasicAnimationBlock which I created in a couple month ago, and pass itself is CABasicAnimation’s delegate.
  6. Disable / Enable table view while animation is animating.
  7. Adding animation to layer.

Everything is done.

Project sample code

Github

What I covered

So, There are many famous editing photo app in Appstore often use techniques or combine it to make new filter. If you want to build up beautiful filter, you should spent more time to create new filter, textured sample in photoshop before coding.

Have a questions ? Drop it here ;]

Leave a Reply

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