Skip to main content
TikTok Effect House Platform Logo
Latest
Download
Log in
Face Effects

Face Mask

Face Mask applies a 2D texture to a user’s face to create face paint or makeup effects.

Download this file to follow along and create your own face mask texture:

↓ FaceMaskTemplate.zip

unaligned-image-0
unaligned-image-1

Add a Face Mask Object

Add a Face Mask object by clicking the Add button [+] > Face Effects > Face Mask in the Hierarchy panel.

Tip
Tip

You cannot modify the Transform of the Face Mask, but you can adjust its position relative to the face using the Offset of the Face Mask component.

Make Your Own Face Mask Texture

↓ FaceMaskTemplate.zip

If you haven’t already, download the file above to use templates to create make your own face mask texture. It includes templates for Whole Face Mask, Eyes, Eyelashes, and Lip. Be sure to test your design on all three models to ensure it compliments a variety of skin tones.

Tip
Tip

When creating a face mask effect, make sure you read our guidelines for building inclusive effects.

In Adobe Photoshop, select the artboard you want to export and go to File > Export > Artboards to Files. Change the export settings to Artboard Content Only, select the Export Selected Artboards checkbox, deselect the Include Background in Export checkbox, and change the File Type to PNG-24. Then click Run to confirm and export.

unaligned-image-0
unaligned-image-1

Import a Face Mask Texture

You can import the face mask texture by clicking the Add button [+] > Import > From Computer in the Assets panel. You can also simply drag the texture into the Assets panel.

Note
Note

Learn more about 2D Image preparation.

Texture Requirements

  • Format: PNG and JPG files are supported
  • Resolution limit: 1024 x 1024 pixels
  • Single file size: Less than 1 MB
  • Total effect package: Less than 5 MB

Configure a Face Mask Component

Change a Face Mask Type

Face Region: This property designates where the mesh will appear on the face. Chose Whole (default), Eyes, Eyelashes, or Lips.

Apply a Texture

Texture: Choose a texture from the Assets picker.

Tip
Tip

Note the size of the image you imported for the face mask. If you change the Face Region type to Eyes, Lips, or Eyelashes, make sure the size of your image is aligned with the template we provided above.

Change Opacity

Opacity Enable: Customize the Opacity Texture and Color of the mesh. This is selected by default.

  • Opacity Texture: Apply an alpha mask texture to the mask. Choose a texture from the Assets picker.
unaligned-image-0
unaligned-image-1
unaligned-image-0
unaligned-image-1
  • Color: Determine the colors that will blend with the texture.
  • Opacity: Use the slider to set the opacity to a value between 0 and 1, with 0 being transparent and 1 being opaque (unless the edges are feathered). The default value is 1.

Blend Mode

Blend Mode: Determines different calculations used to blend color and texture. Choose from the following blend modes:

  • Normal
  • Multiply
  • Overlay
  • Add
  • Screen
  • Soft Light
  • Average
  • Color Burn
  • Color Dodge
  • Darken
  • Difference
  • Exclusion
  • Lighten
  • Linear Dodge

Adjust a Face Mask’s Texture Position

Offset: Adjust the mesh position.

  • X: Set the horizontal offset to a value between 0 and 1, with 0 being the most left and 2 being the most right. The default value is 1.
  • Y: Set the vertical offset to a value between 0 and 1, with 0 being the most top and 2 being the most bottom. The default value is 1.

Apply a Face Mask to a Face

Which Face: Select which face the face mask is applied to. Multiple selections are supported. 0 represents the first face appearing in the scene and similarly, 4 represents the fifth face appearing in the scene. All are selected by default.

Test Skin Tones in the Preview Panel

Testing Face Mask on different skin tones is recommended to ensure the effect is inclusive. You can find different media demos from the dropdown in the Preview panel.

Use Multiple Face Masks

You can apply face masks to multiple faces.

Use Which Face to designate which face a face mask applies to. You can apply different face mask textures to different people’s faces.

If you’re using multiple face masks on one person’s face, the face masks will show up by following the image’s render order.

Note
Note

Learn more about the render order of images.

When Face Mask(1) is on top of Face Mask, Face Mask will show in front of Face Mask(1) on the person’s face.

unaligned-image-0
unaligned-image-1
unaligned-image-0
unaligned-image-1

Version Compatability

Projects created prior to Effect House v1.5.1 will not be able to use the Which Face property. You must add a new Face Mask component to use this function.