Let’s get you started with a simple tutorial that will help you familiarize yourself with Effect House tools, basic features, and the general creation process.
Follow along with this video tutorial!
Prepare Your Assets
First let’s look at how to create the 2D potato object that will back the facial features. When drawing your asset, think about where you would like the facial features to be positioned. Once you’re satisified, export the potato as a PNG with a transparent background.
Next, create the background image. In this example, we’ve drawn someone ready to eat from a plate at a table from a first-person perspective. Make sure the image has an aspect ratio of 9:16 and export it.
Feel free to download the following project file here:
Import Assets Into Effect House
First let’s create a plane. You can do this by clicking the Add button [+] > 3D > Plane in the Hierarchy panel. Feel free to rename the plane to “Potato” by right-clicking the plane and selecting Rename. Then create a new unlit material by clicking the Add button [+] > Material > Unlit in the Assets panel.
Click Unlit in the Assets panel and select the Texture On checkbox in the Inspector panel. Click Default Texture to open up the assets picker window and select your image under the Textures folder.
Open Render State 0 and change the Blend Mode to Transparent.
Add a Face Inset
Add a Face Inset by clicking the Add button [+] > Face Effects > Face Inset in the Hierarchy panel. Drag the plane into the Face Binding object. Select the Depth Testing checkbox in the Inspector panel. Adjust the position, scale, and rotation of the Face Inset and the plane.
To add more facial features to the potato, duplicate Face Inset by right-clicking it and set the Face Area to Left eye or Right eye. Adjust the position to your liking.
Add a Background
Import the background asset into Effect House. Add another Image using the same steps as before.Click the Image and change Texture to your background image through the assets picker window. Change the Size to 720 x 1280.
Click the Canvas scene object and set Match Mode to Fill. This will ensure that the background image will always auto-adjust to fill the whole screen on different devices.
Make sure the 2D Camera object’s render order is set to a smaller number than the Camera object’s render order. Render Order can be found in the Inspector panel. The camera with the smaller render order will be rendered first.
Face Inset provides a variety of additional effects including feathering, color overlay, and outline that users can use according to their needs. Feel free to test out your effect!