TUTORIAL 1
CREATING YOUR FIRST
TIKTOK EFFECT
Creating AR experiences made simple.
Structure
5 Minutes – Introduction & Setup
10 Minutes – Navigating the Effect House Interface
15 Minutes – Workspace Overview & Tools
25 Minutes – Create a Makeup Effect
10 minutes: Wrap-Up and Troubleshooting
Introduction &
Setup
Overview
This tutorial walks you through downloading Effect House, familiarizing yourself
with the interface, and creating your first makeup effect.
Downloading & Logging In
Visit the Effect House download page and select the version that matches your
computer’s operating system.
Ensure your computer meets the minimum system requirements.
After installation, log in with your TikTok account. You can either use the QR code
scanner from the TikTok app (via the Add Friends button on your profile) or log in
from your desktop.
https://effecthouse.tiktok.com/download
Navigating
Effect House Interface
Home Screen
Banners: See feature highlights and community updates at the top.
Activity Center: Discover active challenges, missions, and activities.
Templates: Browse premade effects by category for inspiration or modification.
Recent Projects: Quickly access your latest work.
Project Controls:
Create Project: Start a new project from scratch.
Open Project: Access and edit an existing project from your computer.
Account Badge & Manage Effects:
Your badge reflects progress and milestones.
Use the Manage Effects link to view performance analytics of published effects.
Workspace Overview
&Tools
Hierarchy Panel
Displays all objects (elements) of your effect.
Add objects via the [+] button and toggle their visibility with checkboxes.
Assets Panel
Houses textures, materials, 3D models, and audio.
Import your own media or use built-in options.
Create custom materials by selecting Custom Material > Empty Material.
Scene Panel
Offers a 3D (or 2D) view to manipulate objects.
Navigate by holding Command/Windows and moving your mouse, or right-click to
rotate.
Reset the view with the Reset View button.
Preview Panel
Mimics the TikTok interface so you can preview your effect on a mobile device or
via webcam.
Change preview media and even undock this panel into a separate window.
Inspector Panel
Displays components and properties for each object.
Fine-tune effect parameters by editing these properties.
Visual Scripting Panel
Create interactive effects using node-based graphs.
Use pre-built visual scripting packages or create custom material logic via the
Material Editor (which appears when you add a Custom Material).
Makeup
Effect
Objectives
By the end of this module, you will be able to:
Define objects, components, and properties
Use Face Effect and Segmentation objects to create a makeup effect
Follow a basic workflow from concept to creation
Step 1: Create a New Project
From the home screen, click on “Create Project” to open the workspace.
Step 2: Add Eyeshadow
In the Hierarchy panel, click the Add button [+] and select Eye Effect from Face
Effects.
In the Inspector panel, review the Face Mask component:
Face Region: Set to Eyes by default
Which Face: Supports multiple face selections
Texture & Opacity: Adjust the premade eyeshadow texture and its opacity
Blend Mode & Color: Toggle Opacity Enable and select your desired color
Detect Occlusion: Ensure the effect doesn’t overlay obstructed areas
Step 3: Add Lipstick
Click [+] in the Hierarchy panel and select Lip Effect.
Customize similar properties (Face Region, Texture, Opacity) in the Inspector panel.
Step 4: Change Eye and Hair Colors
Eye Color: Add the Eye Color object from Face Effects to adjust the iris using its dedicated
Hair Color: In the Hierarchy panel, select Hair Segmentation from Segmentation. Modify
the Color, Opacity, and Blend Mode to change hair color.
Wrap-Up &
Q&A
Recap Key Concepts:
Downloading, logging in, and setting up Effect House
Navigating the workspace and understanding each panel
Creating a basic makeup effect by adding and customizing Face Effects
Publishing your effect and monitoring its performance
Troubleshooting:
If your effect isn’t displaying correctly, check the Inspector panel for misconfigured
properties.
For preview issues, verify your settings in the Preview panel and test different
TikTok UI modes.
Questions & Further Learning:
Feel free to experiment with additional Face Effects and segmentation options.
Visit the Effect House Website and Knowledge Center for more tutorials,
troubleshooting tips, and community support.
