Most Instagram users are familiar with AR filters. These are custom effects that allow for a more vibrant form of digital expression. You’ve probably used them before.
While the AR creator community is constantly working on new effects, and there’s an abundance of them to experiment with, you might have your own creative ideas when it comes to AR filters. You can try them out and put them into practice anytime. Here we show how you can build your very first Instagram custom AR filter.
1. Download and Install Spark AR Studio
To build your very own Instagram AR filter, you need a program called Spark AR Studio. It’s a free tool created by Facebook that allows virtually anyone to design and build AR effects for the social app. It’s available for both Windows and Mac platforms. The very first step is to download and install the program on your device. Once this is done, launch the program.
2. Log in Using Your Facebook Account
To use the tool, you’ll need a Facebook account. Log in with your credentials in Spark AR Studio to begin your journey.
3. Get Acquainted with the Platform
Spark AR Studio is a complex tool. If you have little to no experience with visual design, it may seem a bit overwhelming at first. The best way to get started with Spark is to take the preliminary tour. It provides a quick overview of the software’s interface in just five minutes.
Next, go through some of tutorials in the Learning Center to get a better idea about Spark’s main features and tools. Once you think you’re ready to get to work, you can either create a filter from scratch or start with a preset one.
4. Decide What You Want to Do
It is a good idea to start with a template if you are new to the tool. Choose from the available options and start experimenting with the preset effect to see how it works and what its components are.
For example, take “Hair color.” Apply the template, then play around with the default settings and see the results in real time. This way you can get an idea of what each component does and may even end up creating a worthy variation. You’re encouraged to explore all templates because it’s a great way to learn.
5. Create a Simple Vintage Dust Effect for Your Photos
In this section we explain how you can create a simple vintage-looking dust effect for your photos using Spark AR Studio.
First, open a new project in Spark AR Studio by going to “File -> New” or simply hitting Ctrl + N on your Windows machine.
Spark AR will open your default workspace, which is divided into five main areas. The large space in the middle is called the Viewpoint. It represents your main working area and offers a full perspective on your project. Here you can view all the objects in your filter within the range of your device’s camera.
In the top right of the viewpoint, you’ll notice a mobile device: it’s called the Simulator. By default, you get an iPhone 8, but you can change it to an Android device if you want. It’s used to preview your work.
On the top left of the display we have the “Scene panel,” which includes the basic structure of objects in your filter. By default, you get “ambientLight0” and “directionalLight0” – both lighting elements. Just below, you’ll find the “Asset panel,” which is home to all the materials used to describe the objects in the Scene panel.
Last but not least, on the right of the display we have the “Inspector panel,” where you will find all the properties of the elements you’ve included in your filter. This includes color, texture, position, and many more.
Now, before we get started on our little project, you may want to change the view in your Simulator. The selfie camera mode is enabled by default showing you the face of a man, but if you want, you can change the person starting back at you by clicking on the video icon on the left and selecting a new face.
Or you can decide to opt for a back camera view and upload your own short video to use by pressing the “+” button above the alternate real-time simulation options. Note that it has to be a .webm file. Once you’ve made the selection and the content is loaded, you can begin your filter creation process.
Build Your Filter
1. Add a rectangle on the screen. To do so, head to the Scene panel and click on “Add Object.” Either scroll down until you find the Rectangle option or use the Search bar to quickly find it. Click Insert.
2. You’ll notice that a small rectangle has been placed in the upper-left corner of your smartphone’s screen. Right-click on your new “rectangle0” in Scene if you wish to rename it.
3. In the Inspector Panel, look for Width and Height. Click on each in turn and select “Fill Width” and “Fill Height.” This will result in your viewpoint being completely covered by the rectangle. This checkered pattern is known as “alpha” and is transparent.
4. Apply the “dusty” layer on top. For this we need a dust texture. You can find plenty online. Save a few on your computer to have at hand and make sure they are in Portrait orientation.
5. Create a new material by clicking on the “+” button in the Inspector panel and selecting “Create New Material.”
6. In the Asset panel, click on the new material (material1) to bring up its properties in Inspector. It may be a good idea to rename your material so that you can easily differentiate it from the others you may want to use in the future.
7. Back to Inspector, select “Choose File” to use your preferred dust texture.
8. Your texture is being compressed now, so give Spark a few seconds to complete the job.
9. When it’s done, turn your attention to the Inspector again. At the top select a different “Shader Type” from the drop-down menu. It should be “Flat.”
10. The texture will appear in your Simulator, but at this point it just blackens the screen. To “sprinkle” the dust on your view, go to “Render options” and select “Screen” from the menu under “Blend Mode.”
11. The filter is now visible in the Simulator. You can also opt to Add from “Blend Mode,” and as you see, the result is a bit more intense. You may also want to fiddle with the Opacity bar until you find what works best for you.
Next, you can add additional textures and see how they look so that you can pick your favorite. Of course, you can keep more than one, if that’s what you want.
6. Test and Publish the Filter
Next, you may want to test this effect on your mobile and see what it looks like in action. To do so, make sure you’ve saved your project in Spark AR Studio.
Download and install Spark AR Player on your mobile device. Once you launch the app, it will ask you to turn USB Debbuging on in Developer options (if you’re on Android). Do so, then connect the phone to your computer using a USB cable.
Back in Spark AR Studio on your desktop, click on the smartphone-looking button in the lower-left side of the display to “Test on device.” Click on the Send button to dispatch the effect to your mobile.
Now open, the Spark AR Player on your phone and the filter should be there waiting for you. You can try the effect in real time and even snap some photos with it.
If you’re proud of your work and wish to publish the filter, go back to Spark AR Studio and tap on the “Upload and Export” button right underneath “Test on device,” Keep in mind that it takes a while for new filters to get approved, so you need to be patient.
Now that you know how to create your own Instagram filter, we encourage you to continue working with the tool. Experiment with its features and make sure to get better at AR filter creation.
If you’re just getting acquainted with AR and all the things it can do, you may find it interesting to know how you can bring 3D animals to your living room. Alternatively, if you’re interested in VR, check out our list of five good, affordable headsets for trying VR games.
Image credit: Spark AR Creators