How I built a Face Filter in an Hour – Prototypr

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.

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!