How To Build A Face Filter In An Hour

How To Build A Face Filter In An Hour
October 8, 2018

The worlds of AR (Augmented Reality) and VR (Virtual Reality)have become increasingly common in apps we use every day. Facebook, Instagram, any time you take a selfie and apply a filter, that’s AR technology. 

Facebook has released the software to create these face masks; it’s called AR studios. I must warn you, it’s Mac only software and you should also download the files from their tutorial before you begin.


To begin I looked over the files included in the tutorial. There is a .png file included that is named moustache. When you open the file in Photoshop, you now have a working outline of how the face will be interpreted via the AR studio program. I had my outline idea but I needed a Racoon to create the mask. I don’t have the best freehand art skills so I turned to a professional. I used The Noun Project to find a raccoon face that would give me the look I wanted. I found what I needed with Racoon by Grégory Montigny and downloaded the .svg file.


Once I dropped the file into Photoshop I was able to color it to fit my needs. Then using the Moustache.png file as a base layer I transformed my Racoon face to stretch and fit over what I expected the Face Mesh guidelines would be. I exported out just the Racoon mask as a .png and followed the steps in the tutorial but used my raccoon.png instead of the suggested moustache.png file. The result was a working raccoon mask with one small issue, the ears were cut off. I realized the face mask had its limits and the ears would need to be a separate .png file.

Facemesh is the raccoon mask and Ears Mesh the ears. My file naming got fancier the more confident I became.


Back into Photoshop where I isolated the ears from the face and created a .png file with just the ears and updated the face file. Now I followed the tutorial again to create a face mesh that was linked to the previous face tracker so the movements would be linked. I moved the ears up to a reasonable ear position and played with the angles until what I saw in the preview screen visually made sense.


The end result is what you see in the video below. I exported out my files and uploaded it to Facebook for testing. Now in the Facebook app on my phone, I can try out any of the filters I’ve created. I can’t wait to try more, I’m working on a whole Disney series for an upcoming project. Anyone can create a face filter, it just takes a little time and don’t be afraid to mess up. That’s what the undo button exists. Happy building!

Related articles

VRrOOm Wechat