An iOS library to apply Pride Effect

A Library to apply Facebook style pride parade effect to photos

With the ongoing LGBT pride month, it reminds me of the pride effect I created a couple of years back. My original source of inspiration was Facebook which allowed people to overlay their photos with pride theme colors.

I thought of doing something similar of a effect on iOS as well. Initially things were not easy given that I had to apply an overlay to actual image. It was not just a mask to an image, but it was going to be the part of final UIImageView layer. Besides, this layer being a literally CALayer, the rules of AutoLayout did not apply there.

However, finally after several weeks I was able to finish the library and host it on Github. The source code is open and you are free to use or modify it as per your needs and requirements.

Here is the brief summary of usage and options this library provides.

Installation:

Use following line in your podfile to integrate the library in the iOS project. (Make sure to run pod install after editing the podfile)

pod 'JKFacebookPrideEffect', :git => 'git@github.com:jayesh15111988/JKFacebookPrideEffect.git'

Usage:

Initialize JKFacebookPrideEffect class with required parameters such as,

inputImage - Input image to apply pride effect to
size - Size of the input image in terms of bounds

There are various other parameters too which can be applied to this effect such as,

PrideEffect prideEffect - Desired effect of colored stripes such as vertical, horizontal or diagonal

BOOL textRequired - To show text on overlay or not

NSTextAlignment overlayTextAlignment - Alignment of the overlay text

UIFont* overlayTextFont - Font to be used for overlay text

UIColor* overlayTextColor - Color to be used for overlay text

BOOL variableTextColors - Decided whether to use fixed or variable colors for each series of overlay texts

BOOL applyGradientOverlay - Decides whether to apply smooth color gradient image to overlay effect rather than just providing step colors. Can be toggled with this flag value

For example, if you want to apply basic Facebook pride effect to any local folder image, you can use the following code,

// Create an object for pride effect applier with necessary parameter information. This involves input image, image size and colors to apply. 
JKImageEffectInfo* facebookPrideEffect = [[JKImageEffectInfo alloc] initWithInputImage:self.inputImage andSize:self.imageViewSample.frame.size andColors:colors];

// Pride effect applier is a class whose initializer takes the prideEffect object and then applies appropriate properties to it.
JKFacebookPrideEffect* prideEffectApplier = [[JKFacebookPrideEffect alloc] initWithImageEffectInfo:facebookPrideEffect];

// The direction of effect
prideEffectApplier.prideEffect = PrideEffectVertical;

// Color can also be applied in the form of gradient.
prideEffectApplier.applyGradientOverlay = NO;    

// An output image we get after applying pride color effect.
UIImage* proudImage = [prideEffectApplier applyEffect];

// Set the output image to the UIImageView object.
self.imageViewSample.image = proudImage;

And here's the output of the above code,

facebook_pride_effect

Below are some more examples of custom pride effect applied to my own image,

pride_effect_1

pride_effect_2

pride_effect_3

pride_effect_4

pride_effect_5

pride_effect_6

pride_effect_7

pride_effect_8

Hope you enjoyed this post. If you are excited about using this library to apply any other effects, feel free to use it without any permission. If you have any questions about source code or the usage, I will be more than happy to answer them

To reiterate, the source code of this library is freely available on Github, if you want to try out your own examples

Jayesh Kawli

I am a web and mobile developer working at Wayfair in Boston, MA. I come to learn so many things during course of life and I write about things which helped me and feel like they can help others too.

Subscribe to Fresh Beginning

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!