The Face Mask Template in Adobe® Photoshop®
Use the face mask template to create custom mask and makeup textures to export to Spark AR Studio.
The face mask template is a PSD file that you can open in Adobe® Photoshop® image-editing software.
To download it, click the pink button labeled Face Mask Template under Downloads, in the right-hand menu of the desktop version of this article.
In this article we’ll look at the structure of the PSD file and explain how each layer acts as a guide for creating specific parts of a texture. We’ll also explain how to optimize the textures you create.
The structure of the face mask and its layers
When you open the file you’ll see the face mask template is a 2D representation of a 3D model of a face made up of a number of different layers.
We’ve included a sample face mask texture on the first layer of the template. It's listed as Blue Tiger Texture in the Layers panel.
Layer groups and layers
The face mask template is made up of different layer groups. Just click the little eye icon to the left of any layer group or layer name that you don’t want to work with to turn it off so it’s no longer visible.
We’ll walk through each layer group in more detail below.
Wireframe
The Wireframe layer group contains two layers that together represent a 2D version of the Spark AR 3D face mesh.
The grid lines on these layers help you stay within the boundaries of the face mesh and give you an idea of where the features of the person using your effect will be.
Use the lines to guide you as you paint your texture.
Tracking
The Tracking layer group contains a layer pinpointing the parts of the face that Spark AR tracks when you make a face effect.
It is helpful to be aware of these points when creating your texture
Makeup
This layer group will help you paint beauty and makeup textures. Follow the shape of the eyeliner, eyeshadow and lips to position the makeup correctly.
Facial features
The Facial features layer group has four layers. The face shape mask layer will blend the final mask texture naturally to the user’s face, so it's a good idea to keep it in your project.
Use the eye, nose and mouth layers to isolate these specific parts of the face before using them as a guide to paint your textures.
These layers can be imported to Spark AR Studio without any edits and used with the FaceTracker texture to make copies of the user’s facial features and place them wherever you wish. For example, placing a copy of the user’s mouth on their forehead.
Face
This group contains a feminine face and a masculine face layer. They'll help you see facial features in more detail, like the start and end of the eyebrows or the volume of the lips.
Background
The white and black Background layers are simply there to help you visualise the other layers more clearly as you work.
Optimizing your texture to export to Spark AR Studio
Once you’ve created your texture it’s time to export it to Spark AR Studio. There are a few things you can do in Photoshop® to properly optimize your texture for use in Spark AR Studio effects.
We'll go through these below, using the Blue Tiger Texture as an example.
Export visible layers
Firstly, remember to turn off any layers that don’t form part of the texture you want in your final effect. For example, to export the Blue Tiger Texture you would turn off all the other layers and export this visible layer as one single new image file.
The layers remain separate in your Photoshop® file, so you can go back and continue to tweak and update them.
Choose the right dimensions
The recommended image size is 1024x1024 pixels which is the maximum file size supported in Spark AR Studio. Despite the large file size, it’s a good idea to export textures with the maximum level of detail, especially when creating a makeup mask.
Choose the right format
Export your file as:
- A PNG to preserve transparency.
- A JPEG, when you need a smaller file size but no transparency. JPEGs do not have a transparency channel.
Use the Save for Web feature to optimize file size
You can use the Save for Web feature in Photoshop® to reduce the file size without significantly reducing the quality of your texture. To open this tool:
- Go to File > Export > Save for Web (Legacy).
- In the window that appears, click the 2-UP tab to view your original texture file side-by-side with the current version as you optimize it.
To optimize for file size:
- Click the hamburger icon to the right of the Preset menu and click Optimize to File Size.
- In the Desired File Size text box, enter a number to set the desired texture size.
It’s also a good idea to set the Size/Download speed to the estimated 2 Mbps maximum. Understanding the time it could take users to download your texture is another reminder to keep your files as lightweight as possible.
To set the Size/Download Time:
- Select your optimized image on the right-hand side and right click in the grey area below the image.
- Select Size/Download Time (2 Mbps).
You can find more information on optimizing textures and effects in the Technical Guidelines and Optimization in Spark AR Studio.
Adobe and Photoshop are either registered trademarks or trademarks of Adobe in the United States and/or other countries.
Adobe product screenshot(s) reprinted with permission from Adobe.