Tuto: How to create an Instagram filter

How to create your first Instagram filter in 4 simple steps. The different steps to create your own Instagram or Facebook filter. Create and publish an Instagram filter for a brand.

How to create an Instagram filter?

  1. Install Spark AR (Windows - Mac)
  2. Prepare and compress your visuals (images, videos, 3d)
  3. Animate and create interactions with Patch or Javascript
  4. Publish the filter on your Instagram account

1

1. installer Spark AR (Windows-Mac)

To create your Instagram filter you will first need to download and install the official software made by Facebook that will allow you to create filters for Instagram and Facebook.
Link to the official page: https://sparkar.facebook.com/ar-studio/

2

2. Prepare your visuals

It will be essential to prepare your different media such as images, photos, video or 3D models correctly so that they are optimized for your future filter because the maximum size of an Instagran filter can not exceed 4mo.

To optimize your images we recommend : https://tinypng.com/

To optimize your 3D models we recommend : SparkAR Toolkit pour Blender

3

3. Animate and create interactions

For a quality filter, it is recommended to add interactions with the user, such as an animation when the user opens his mouth, blinks, smiles,...

To do so, you have two solutions, the Patch or the Javascript code.

Link to the official tutorials : https://sparkar.facebook.com/ar-studio/learn/tutorials/

4

4. Publish the filter

For publishing your filter, the official guide is here: Official guide to publishing.

You will need an icon and a demo video to accompany your filter.

Go to Spark AR and click on the upload icon on the bottom left and choose to upload the filter as a new effect. (See also: Add a new AR Manager)

How to create an Instagram filter:
Use the Patch Editor for interactions

Once you have the different media in hand, you have two options to apply the different interactions to these images, illustrations or 3D models. The first one is the programming by module which is intended for the advanced designer who is used to work with this type of programming by module as for example in Unreal Engine, Blender, Cinema4D, ...
The patches will allow you to link blocks together to animate the position of an element, for example.
The second option is the script in Javascript language, intended for web developers. Be careful here, Spark AR introduces a new type of programming in real time called Reactive Programming. 

Spark AR Patches Filtre Experience

How to create an Instagram filter:
Using the script in Reactive

This type of programming is specific to facebook and will be used to create different applications and experiences for the future augmented reality glasses by facebok in a few years (months?). Facebook introduced this language to be able to link interactions or functions to different events occurring in real time. For example, when the user opens the move, closes his eyes, frowns, is happy, moves his head, taps the screen, remains pressed on the screen, makes a sliding movement on the screen, etc.. The list is long and this type of language can be very useful when making complex filters. In comparison, Three.js a web oriented 3D engine does not use Reactive Programming but is oriented towards a frame by frame or image by image programming, so we have to launch a loop modifying the state of each image occurring during the experience.

Script Spark AR

Spark AR - Scripting - Filtre Experience all right reserved.

How to create an Instagram filter: 
Link a Facebook page to an Instagram profile

To connect your Instagram account to a Facebook page:
- Log in to your Facebook page on your computer.
- Go to the settings at the top right of your page.
- Click on Page Roles in the left column and make sure you are listed as an administrator or editor.
- Click on Instagram in the left column.
- Click on Connect Account.
- Enter the username and password for your Instagram account. Note that if you have a personal Instagram account, this step will convert it to a business account.

How to add an AR Manager?

Adding an AR Manager to your Facebook page allows the creator of the filter (AR Manager) to be able to publish and link the filter to your Facebook page and your Instagram account. For a post on Instagram, the Instagram account must first be linked to the Facebook page.

Go to : Spark AR Hub Dashboard and follow the steps below (see image).

1) Click on the wheel at the bottom left
2) Click on "Settings
3) Go to the "Permissions" tab
4) Choose your Facebook page
5) Add a group
6) Choose a name for the group
7) Add the Facebook profile of the filter creator: "Bastien Sarolea

Ajouter AR manager Spark AR

Filtre Experience - All right reserved

Ajouter AR manager Spark AR

Filtre Experience - All right reserved

Filter Experience creates your Instagram filters

We take care of everything for you!

The Filter Experience team has the necessary skills in :
- 2D on Photoshop
- 3D on Blender
- Javascript programming
- Logic by Patch modules
We are ready to implement all your ideas, no matter how technical and complex they are!
The only limit is your imagination!

Mobirise
Mobirise
Mobirise
Mobirise
Mobirise
Mobirise

Votre filtre en 4 étapes

1

Idea

We agree on an innovative idea with you
2

2D et 3D design

We create the necessary assets for you
3

Code

We develop all interactions for you
4

Publishing

We publish it together
on your profile

Contact

Hello ! See you soon by email! 😊

Email

We will get back to you within the hour!

Phone

Monday - Friday 9h-18h

Different platforms

Filter Experience
+32474230766 - hello@filtre-experience.fr
© Copyright 2020 AR experience. All Rights Reserved.
Legal Notice

Made with Mobirise ‌

Free Offline Website Builder