Make your own Instagram filter



Blink, smize, pout, post.

Blink, smize, pout, post. (Apostolos Vamvouras via Usplash /)

Ah, Instagram – my life, my love, my destiny. Lust for other people's holidays and brunches is one of my official hobbies, but as much as I like to run endlessly through the beautiful lives of people I do not know most, I love them the most. stories. They are fast, easy and their limited life allows me to be as stupid as I want it without ruining all my grille aesthetics.

Plus, the stories allow you to add a filter to your photos, one of the most versatile features on social networks. Want to walk around looking like a cute rodent? There is a filter for that. You want to have smooth, silky skin and try lipsticks that you can not afford? There is a filter for that. Do you want to look like the cover of a Pink Floyd album? Well, you have the essential.

For years, Instagram filters were created only by the platform itself or by a handful of studios and creators with access to Spark AR Studio, a Facebook tool specifically designed to create filters for their flatbed. Platforms. But that changed in early August, when the closed beta version of Spark AR came to an end and the software became available to anyone who dreamed of creating their own filters.

So, as a fanatic of Instagram, I volunteered to pay tribute to my work and to learn how to create my own filters, then write so you can do it too.

But before you start, you need to know some things:

It's not that difficult (if you do not want it)

Building a filter can be complicated, but the difficulty depends on the complexity of your idea. If you want to stick to something easy, you can create a lot of 2D effects in Spark AR that will not force you to animate anything or spend hours trying to figure it out.

Experience is not required, but it makes things easier

If you already know graphic editing programs such as Cinema 3D or even Adobe Photoshop, you may find it easier to navigate in Spark AR. If it is your first encounter with such a tool, be sure to explore and experiment with the platform first. This will help you to know him better.

Spark AR has already done the essential work for you

When Facebook opened Spark AR to the public, he created a community of creators to help, inform and inspire his members on the new art of filter making. There is also a rich platform of content, materials and tutorials to educate people about all filters. In fact, when you download Spark AR, the first thing you see is a menu with predefined projects, such as an animated rabbit mask, a clear trail and floating particles. This will give you a good idea of ​​how the main types of filters work in the background, but you can also use them until you get something completely new and good for you.

If you are more adventurous and want to try to animate 3D objects, you will find a library of predefined items that you can insert into your filters, including all kinds of skulls, Pokeballs, drawing characters. animated and even a realistic dancing crab, for some reason. .

Since I have absolutely no animation experience and prefer minimalist effects, I will build a simple 2D filter. This is easy enough and is a perfect introduction to filter making. You can combine 2D elements, use them separately, or even multiply them in a single project to create a richer effect.

Lesson # 1 – Know Your Environment

Spark AR has a lot of elements. Knowing your way is crucial.

Spark AR has a lot of elements. Knowing your way is crucial. (Sandra Gutierrez G. /)

Start by downloading Spark AR Studio. It's free, easy to install and available for Windows 10 and MacOS Mojave 10.14 and higher. Once installed, you can choose to work with different presets or create your own filter from scratch by clicking the button Create a project button at the bottom right.

Spark AR opens on the default workspace, divided into four areas. At the top left, the "Scene" panel displays the basic structure of the objects in your filter. By default, you will see "ambientLight0" and "directionalLight0", which are lighting elements.

Under the Scene panel is the "Assets" panel, which will contain all the materials describing the objects in the Scene panel. For example, if you add a red rectangle to the Scene panel, the color element will appear in the Assets panel.

The space in the middle is the window. This will be your main workspace, offering two perspectives of your project. The largest in the center shows all the objects in your filter within range of your camera's camera. This will help you create effects in the camera space – that move with the camera – or in the world space – that stay in place, regardless of the location of the camera.

This small rectangle is your device and the lines that connect it to the image indicate the range of your camera.

This small rectangle is your device and the lines that connect it to the image indicate the range of your camera. (Sandra Gutierrez G. /)

At the top right of the window, another viewer, called "the simulator", indicates the appearance of your filter as the final product. By default, your work appears as it appears on an iPhone 8, but if you hover over the display and click on the name of the device, you can change it. The options cover a number of iOS devices (including the iPad) and Android smartphones (including some versions of the Samsung Galaxy, Google Pixel and Google Nexus).

You can choose the specific device for which you want to create your filter or test its appearance on different screens.

You can choose the specific device for which you want to create your filter or test its appearance on different screens. (Sandra Gutierrez G. /)

Finally, at the far right of your workspace, is the "Inspector" panel, which displays the properties of your scene's elements and allows you to edit the colors, texture, position, rotation and other details.

Spark AR includes several test faces on which you can try your filters. You will see how they look on people of different gender and ethnicity, on a blank canvas and even on yourself. You can play with your options by clicking on the camera icon on the left of the Scene panel and choosing the face you want to use from the pop-up menu. If you want to try it yourself, choose Facetime HD Camera and you can create a filter on your own face.

Oh hello! Greetings from behind the red square.

Oh hello! Greetings from behind the red square. (Sandra Gutierrez G. /)

At any point in the process, you can test your work on the Instagram application. Just click on the Send to the device button (second to the left of the Assets panel) and choose Send to the application. You can test it on Facebook and Instagram by clicking on the button To send button next to each.

If you have never ventured beyond Microsoft Office, you may find it a little scary, but do not worry, it will start to make sense once you actually work. If you want a little extra help, check out the Spark AR interface.

Lesson # 2 – Teleport by Changing the Background

Let's start with something simple. The exchange of your background technically calls "segmentation" and is a basic but fun effect that offers a multitude of possibilities.

1. Choose an image to use as a background. You can select an appropriate photo or create something new by playing with colors and effects in Photoshop or any other image processing software. I chose one of the Hubble Space Telescope images from the Bubble Nebula of the Cassiopeia constellation. Look how cool it is – of course, you would like to teleport yourself there. Even his name is rad.

2. Add two rectangles. One will be the background (like a green screen) and the other will display your face while erasing your real world background. Go to the bottom right of the Scene board, click on Add an object, scroll down the context menu and choose Rectangle. Do this twice. By default, your rectangles will appear under the names "Rectangle0" and "Rectangle1", but it's a good idea to change the names so you do not get lost. I've replaced "Rectangle0" with "Background" and "Rectangle1" with "Foreground, for example". To do this, double-click on the name and a field will appear. Make sure the two rectangles are nested under toile0. This means that both will be "children" of this element and will be subject to the changes you make to their "parent".

3. Set the sizes of the rectangles. Click on Context rectangle (formerly called "Rectangle0") and its properties are displayed in the Inspector panel on the right. Click on Cut the fields and the Fill the width and Fill height drop-down lists that appear. This will cause the rectangle to change in size, regardless of the device used by a person. Do this too for the second rectangle. Your window will be completely covered by the rectangles, which will be displayed as a checkerboard pattern called "alpha". It means that they are transparent, but they are still there.

In this step, we aim to expand the two rectangles to cover the entire filter.

In this step, we aim to expand the two rectangles to cover the entire filter. (Sandra Gutierrez G. /)

4. Separate the layers. By default, any added object will join the layer in which you last worked. If you do not want it, you have to move it to another layer. For the segmentation effect to work, you will need rectangles of different layers so that the background is rendered after the foreground. To do this, click on the button Context rectangle in the Scene panel. On the Inspector panel on the right, click the button Layer field and choose Create a new layer. If you wish, you can rename the layers by clicking on the button Layers in the upper right corner of the Scene panel, and then double-click the name of each layer.

5. Create new materials. It's time to give these transparent rectangles a solid shape. What is the purpose of "materials"? You will assign each rectangle its own material by selecting them in the Scene panel, then in the Inspector panel on the right, by clicking the plus sign next to Materials. When you do it for the second time, you'll see a drop-down menu with existing materials or the ability to create a new one. Choose the latter.

Once you have selected your materials, they appear in the Assets panel and it is also a good idea to rename them for tracking. When you select your materials in the Assets panel, many new options appear in the Inspector panel. You can change the color, texture, opacity, blend, etc. If you want to experiment with your filters, play with these options and see what you can create.

Materials are one of the main elements of Spark AR: they can be an image or a block of color.

Materials are one of the main elements of Spark AR: they can be an image or a block of color. (Sandra Gutierrez G. /)

6. Create a segmentation texture. This will turn any video captured by your camera into a texture, which means it will separate you (or whoever you point to your camera) from the background. In the Scene panel, click Cameraand in the Inspector panel, click the plus sign next to Segmentation. A new asset will appear in the Assets panel, called "personSegmentationMaskTexture0" by default.

7. Add "texture extraction" to the foreground material. First, click Camera in the Scene panel and the Inspector panel, click the plus sign next to Texture extraction. Another asset will appear in the Assets panel, named "cameraTexture0".

To use it as a new texture, click the foreground material in the Assets panel. In the Inspector panel, edit the Shader type (first article above) to Dish, which will give this material the properties of a flat 2D element. If you want to give it a volume effect (ideal for 3D), the Physical based the option is a good choice. You can also play with these to see what kinds of effects you can create yourself.

Under spread (the second element of the Inspector panel), find Texture and choose cameraTexture0 in the drop-down menu. Below, check the box next to Alpha (It looks like it's "off" but clicking on the box on the right will make it appear) and in the Texture field, open the drop-down menu and choose personSegmentationMaskTexture0.

8. Change the background. You might think nothing happened, but you're almost there. You have laid the foundation for your filter and all you have to do is change the background. Click on Background_Material and on the Inspector panel, under spread, change the color to something that contrasts with the subject in the camera. This will help you adjust the edges of the segmentation by changing the Size of the mask and the Sweetness of the edges. You'll find these options in the Inspector pane when you click personSegmentationMaskTexture0.

If you like color blocks, you can stop there and play with different colors of the background. But why do that when you can have a constellation? Let's change this background.

Select your Background_material, and under spread, reset the color to white. Lower, under Texture, click on Choose the file from the computer and download the photo you want to use as a background. Keep in mind that large photo files may be too large to be processed transparently by Instagram or Facebook. So make sure they are as light as possible. I used an image of 720 x 734 pixels, weighing about 86 KB, and the program was a bit slow.

9. Add a little spark. As cool as teleporting on Cassiopeia may seem, it's not cool enough. No, unless you have some bright talent floating around you. This effect, called the floating particle effect, is a common feature of Instagram filters. The application of a filter to your filter will be quite easy and highly customizable.

Having the emitter as an independent object allows you to create an effect of

Having the emitter as an independent object allows you to create a "world" effect. (Sandra Gutierrez G. /)

First, in the Scene panel, click Add an object and scroll all the way to the end of the list to choose a Particle system. You will notice a new item in the window that emits alpha squares in the middle of your player. This is your transmitter, and the alpha squares are the particles.

When you create your emitter, it appears in the Scene panel under your rectangle in the foreground, which means that it will be subject to Focal distance element (second sub Camera) by default. If you want to create a "world" effect, click on the name of the emitter ("emitter0", default), drag it down and drop it below. Microphone. This will make the transmitter an independent object.

You will notice that three arrows come out of the transmitter. They represent the X (red), Y (green) and Z (blue) axes. You can drag them to change the position of the transmitter. In addition, when you click on the name of the sender, you will find a list of all possible customizable options. We will go through some of them.

The checkerboard pattern is called "alpha". It means that there is something, but it is transparent.

The checkerboard pattern is called "alpha". It means that there is something, but it is transparent. (Sandra Gutierrez G. /)
  • Position, scale and rotation: They all have X, Y and Z fields that will help you move the transmitter relative to the camera (position), how far in each direction the particles will go (scale) and at which angle (rotation). You can play with the values ​​of these fields (positive and negative numbers) to create the desired effect.

  • Transmitter: You can choose the type of transmitter you want to use. As I have a fixed background – it will not move if you move the camera – I will use the Transmitter ringwhich will spray particles in a spherical radius. This will create a "world" effect that will make some particles appear closer and others farther away from the camera.

  • Customization of particles: the Birth-rate determines the number of particles that the transmitter will release. The more particles you want, the higher this number will be. Speed, Ladder and Lifetimeself-explanatory – the first determines how fast your particles move; the second: what is the size of your particles; and the third: how long will your particle last before fading.

  • Obligate: It's like gravity. If you play with the values ​​of the Y-axis, you will notice that your particles will appear lighter or heavier. A value of 0.05 will slow down your particles – the lower the value, the heavier the particles.

10. Add a material. Until now, you only have the idea of ​​particles. Simple alpha squares floating around your filter. Now, it is time to add a material. The emitter selected in the Scene panel, go to the Inspection panel, scroll down, and click the plus sign next to Materials and choose Create a new. A new item will appear in the Assets panel. Double-click on it and rename it "Particle_material".

You will notice that your particles will have changed. Mine has turned yellow, but yours may have taken another color (if it is, do not do it). To select Material Particle in the Assets panel, and then in the Inspector panel, click the button Shader type scroll down and choose Dish. It all works if you use a 2D particle effect, but if you use something with a 3D effect, you can use Physical based, instead. Below, under Shader Properties, beside Texture, click on the Choose the file from the computer option. An explorer window will open and you will be able to select the file of your choice.

No, Spark AR guy, these are not fireflies.

No, Spark AR guy, these are not fireflies. (Sandra Gutierrez G. /)

Whatever image you use for your particles, it must have a transparent background. Most of the time, you'll find these types of PNG files in a simple Google Image search. I was looking for "spark, filetype: .png" on Google Images and chose the one I liked the most. Once you have a particle with its own texture, you may want to readjust your transmitter. I went back and I swelled the particles (from 0.01 to 0.05).

Congratulations! You have created your first Instagram filter. Now what?

11. Share your new filter. To do this, you will need to download it to the Spark AR hub, where it will be reviewed by the Instagram support team. Once they have seen and determined that your filter complies with the platform guidelines, your filter will be available in the Instagram Gallery, on your profile, in the stories and via a share link. The process takes about five business days.

Start by clicking on the Export button to the left of the Assets panel (an up arrow). Once there, save your project to an arexport file that you will need to upload to the Spark AR hub. The program will automatically route you there once the export is complete.

Spark AR is a versatile tool that is not very user-friendly, but stands out for the vast possibilities it offers to those who want to create filters. With a little imagination and tweaking, segmentation and particle emitter effects alone can launch a multitude of experiments. You have a lot of content to learn and experiment. So just invest time and play with it.

Now, if you excuse me, I have some stories to post.

I can see the sight count through the roof.

I can see the sight count through the roof. (Sandra Gutierrez G. /)