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:
- cameraTexture0 – RGBA connects with FastColorLUT – Texture
- your preset – RGBA connects with FastColorLUT – LUT
- FastColorLUT – Color connects with material0 – Diffuse Texture
Your patch editor should look like this:
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!
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!