How to make a Filter on Instagram using Spark AR
Instagram filters are fun to use, but where do they come from?
The filters themselves are powered by a technology called augmented reality (AR) which has been around since the 1960’s. However, it has increased in popularity only recently, being used in popular apps like Pokemon Go and Google Maps. Now Instagram filters are all the rage and brands, creators, influencers and organizations big and small are using them to engage and convert their social following. You can learn more about Instagram filters and how they can achieve this here.
Filters on Instagram are the new hot thing and completely revamp the way users interact with their IG stories, but where do they come from and how are they made?
The Software: Spark AR
Spark AR is an augmented reality (AR) software developed by Facebook that is free to download and compatible with both Mac and Windows. If you are new to AR, this program may look intimidating at first. AR combines basically every element of digital design: 3D modeling, 2D design, 2D/3D animation, coding, audio, and more. For new users, Facebook has done a fantastic job of compiling learning materials on their Spark AR website. Users can follow along with many tutorials, complete with downloadable sample content. This mass of online content is similar to a university or college course and takes an abundance of hours in commitment if one is to truly attempt to master the software and create noteworthy filters on Instagram.
Okay so you’ve downloaded Spark AR, but how do you make a Filter on Instagram?
Spark AR comes with many sample templates for simple filters for Instagram where you can input your own graphics into the software to customize your effect. To do this you will need a graphics program like Photoshop or similar. You will also want to download the sample content that Facebook provides to help you along the way. We will take you through the steps needed to make a basic face filter that puts hearts around the user’s eyes and lips.
Create the Graphic in Photoshop or a similar program
Import the base face texture, downloaded in the sample assets from the Spark AR website, into Photoshop. This will show you where the graphics you place in this square image will appear on the face. Create a new layer and draw or import your graphic onto the place you want it to appear on the face. Hide the face texture layer and export your graphic as a .png with no background.
Spark AR Elements: Face Tracker, Face Mesh, Material and Textures
AR software is complicated, and many different elements must work together to achieve even a simple filter for Instagram, such as putting a heart shape on a cheek. The elements we will use to create this effect are a Face Tracker, Face Mesh (x2), Material, and the Texture file that was just created.
- We need to first open Spark AR and create a new effect file. We need to create three types of AR building blocks that will come together to create this final effect. The first one is a Face Tracker, which finds and tracks any face that appears in the scene.
- To add this Face Tracker right click in the scene panel on the left hand. To open a menu of items that can be added, select Face Tracker. Now, we want to add our graphics on the face. However, it is not just as simple as dragging and dropping our images onto the face.
- We first must create a Face Mesh, which is a surface that sits on top of the face. To do this, right click on the Face Tracker you just added, select ‘add’ and hit face mesh. This should add a mask onto the person in the scene that looks like a checkerboard. It looks like this because it does not have a Material assigned to it.
- To add a material click the ‘add asset’ button in the bottom left corner and select Material. This material is empty until a Texture is added. We created a texture in Photoshop and exported it as a png.
- To add this texture drag and drop it into the assets panel. To assign this Texture to the material, click on the material and in the top right panel, notice ‘choose file’ option. Click on this and select the Texture you just imported.
- Now it’s time to connect all the dots! Select the Face Mesh you created and assign this new Material to it in the right hand panel by hitting the ‘+’ next to ‘Material’. Selecting the material you just created will place your graphic on the face of the person in the scene!
Select “Face Tracker” from the menu.
Amazing! You can test this effect on your own face by downloading Spark AR Player from the App store. Then, connect it to your phone or computer and hit the ‘mirror’ button in the bottom left corner.
Uploading your Filter on Instagram
You can upload your effect directly from the Spark AR software. To do this go to File > Upload To Spark AR Hub. The effect file must be under 4MB for Instagram and 10MB for Facebook. You must log into Facebook account that is connected to the Instagram account to which you would like to upload the filter. From here Spark AR will walk you through the upload process. You will need to provide an effect icon as well as to film yourself (or a model) using the effect for your upload. Happy Filtering!
Where to go from here?
Now you know how to make a filter on Instagram! If you are an artist looking to learn more about AR, head over to sparkar.com or check out YouTube for some awesome tutorials! The learning curve for this software is HUGE and the only way to become an expert is to constantly practice. If you are a brand looking for AR Instagram filters, please reach out to us for a consultation. If you are a brand with an in-house designer, we would still recommend contacting us. This is beacuse it takes upwards of 10,000+ hours to master this software. Your designer will likely spend days trying to learn the program only to make your brand a subpar Instagram filter that will fall flat and fail to gain traction for your brand.
Want custom GIFs or Instagram augmented reality face filters of your own? Reach out to us at info@newfuturecreative.com! Check out our other articles here, and see our past client work.
.jpeg)
