Instagram Story Filter

Everyone is using them! I am speaking of Instagram Story Filters. Instagram now allows for you to create your own story filters! Previously, only approved creators were able to publish their filters to Instagram stories. Now, everyone can be creative and create their own filters. Once you created and uploaded your filter, you and your followers can use this filter for Instagram stories. If you want to see the filters that I have created so far, you can find them on my Instagram profile.

In this post you will find a detailed step-to-step guide on how you can create such a filter for your Instagram story. Please note, this is the most basic filter that you can create. There are different kinds of face filters. This post focuses on turning a Lightroom preset that you use to edit your photos into a Instagram story filter.

This post will explain to you in detail how you can create a filter for your Instagram Stories. The example here is a regular filter that you can make appear or disappear by tapping on the screen.

Creation of your Preset

The program you need to create a story filter is called Spark AR. But before you can start working in Spark AR, you need to apply the preset that you would like to have as a story filter to a neutral LUT. You can download this neutral LUT file here. Import the neutral LUT into Lightroom. Apply your preset to the neutral LUT. Then, export the neutral LUT as a .png file.
IMPORTANT: The neutral LUT needs to be a .png file, not .jpg or anything else. Otherwise, the effect will not work in Spark AR.

Creation of Instagram Story Filter in Spark AR

1. Download Spark AR

Download the program Spark AR from here. Then click “Create Project”.

2. Add your preset to Spark AR

Drag the PNG file with your preset into the assets section in the bottom left corner. Once this is done successfully, the program will have automatically created a “Textures” folder with your preset in it.

IMPORTANT: Select your preset in the “Assets” section. On the right side of your screen under “Manual Compression”, tick the box next to “No compression”. Without ticking that box, your filter will not come out the right way (I did not know this at first and I was getting desperate because my filter was not looking the way it should. It took me one full week to figure that out and I definitely want to save you that trouble).

3. Insert a canvas

In order to do that, click on “Add” > “2D Objects” > “Canvas”

4. Add a rectangle to the canvas

Select “canvas0” and right-click it. Go to “Add” > “Rectangle”.

5. Create a material for the rectangle

Select “rectangle0” and on the right where it says “Materials”, click the plus sign right next to it. In your assets section in the bottom left corner a new folder will appear that says “Materials” and it has the new material “material0” in it.

6. Create a patch node for the materials texture

Select “material0” in your assets section. On the right side of your screen under “Shader Properties”, click the arrow next to “Texture”. It will create the patch and the patch editor is going to appear with the material0 now showing.

7. Create a patch node for your preset

Drag your preset from the assets section under “Textures” into the patch editor.

8. Extract the camera as a texture

In order to do that, select “Camera” in the top left corner in the “Scene” section under “Devices”. Now click on the “+” next to “Texture Extraction” on the right. In your “Assets” section, “cameraTexture0” will appear in the “Textures” folder.

9. Create a patch node for your camera texture

Again, in order to do this, drag the “cameraTexture0” from your “Assets” section into the patch editor.

10. Add the FastColorLUT

Download and import the “FastColorLUT”. You can download it here. Once you have downloaded it, drag it into your “Assets” section. A new folder called “Patches” will appear with the “FastColorLUT” in it.

11. Create a patch node for the FastColorLUT

Drag the FastColorLUT from the “Assets” section into the Patch Editor.

12. Connect the patches

The patches should be connected with each other as follows:

  1. cameraTexture0 – RGBA connects with FastColorLUT – Texture
  2. your preset – RGBA connects with FastColorLUT – LUT
  3. FastColorLUT – Color connects with material0 – Diffuse Texture

Your patch editor should look like this:

Instagram Story Filter Spark AR Patch Editor

13. Adjust your rectangle

You have to make sure that your rectangle covers the whole screen. In order to do that, select “rectangle0” in the top left corner under “Scene”. Then, on the right side of your screen under “Properties”, click the first box under size and select “Fill Width”. Then select the second box and select “Fill Height”. Now, the rectangle covers the whole screen and your filter is applied to the entire frame.

14. Test your filter

Download the Spark AR Player (iOS; Android) to your phone and connect it via USB to your laptop or desktop. Open the app. Then, on your desktop in Spark AR, click on the phone icon in the bottom left corner where it says “Test on Device”. The program will send the effect straight to your phone where you can test the effect with your phone camera. This is how it will come out in Instagram Stories!

Done!

You did it! You have created your own filter for Instagram Stories. Technically, this is sufficient and your filter should work perfectly fine. However, you might have seen on Instagram that you can make the filter appear and disappear within a story via a screen tap. If you want to add a screen tap to your effect as well, click here.

Are you happy with what you have achieved and want to upload the effect to your Instagram? This post will help you on how to do that.

I hope you have fun trying out your edits in Instagram Stories. Leave your Instagram below, I would love to check out the filters you have created!

Write A Comment