Welcome to Effect House! Let’s first get you started with a basic tutorial that will help you familiarize yourself with the tool, basic effects, and the general creation process.
Try to create the effect from a new project file first, but we have included a complete project file!
Having an efficient end-to-end workflow makes effect creation easier, faster, and much higher quality. You’ll be able to find and create your own most suitable workflow, but here is a general one for reference!
Prepare your asset
First, let’s talk about how to create the 2D potato object that will carry the facial features. In this example, the creator draws a potato that is sitting with its stomach full. Think about where you would like the facial features to be positioned when you draw so that the proportions feel right. Export the potato as a PNG with transparent background.
Then, let’s create the background image. In this example, the creator draws someone ready to eat from the plate at a table from a first-person perspective. Make the image aspect ratio 9:16 or the screen size (540 by 960) and export it.
Setting assets in Effect House
Let’s first start by creating a plane. You can do this by clicking + Add object > 3D > Plane. Feel free to rename the plane to “Potato” by right clicking on the plane and selecting Rename.
Add your potato texture by clicking + Add asset > Import > From Computer. Then create a new unlit material by clicking + Add asset > Material > Unlit. Click on Unlit in the Asset panel and check Texture On in the Inspector panel. Click the default texture to open up the assets picker window and select your photo from Textures.
Open up Render State 0 and change the Blend Mode to Transparent.
You can adjust sizing however you like in the Inspector panel.
Adding Face Inset
Add Face Inset by clicking + Add object > Face Effects > Face Inset. Drag the Potato plane to the Face Binding subset. Check Depth Testing on the right panel. Adjust position, scale, rotation of the facial feature (“mouth” in this example).
To add more facial features to the potato, duplicate Face Inset and set the Face Region to Left eye and/or Right eye, and adjust position.
Import the background asset into Effect House. Add a 2D image by clicking + Add object > 2D > Image. Click on Image in the Hierarchy panel to open the Inspector panel. Find Texture and change it to your background PNG through the assets picker window. Adjust the size of the image to fit screen.
Click the Canvas scene object and set Match Mode to Fill, so the background image will always auto-adjust to fill the whole screen on different device.
Make sure the 2D Camera object’s layer order (set it to 0) is set to a smaller number than the Camera object’s layer order (set it to 1). Layer order can be found in the Inspector panel. The smaller layer’s order number gets rendered first.
In other words, the background will render before the potato, so it appears underneath the potato. To learn more about camera and rendering, check out our Camera guide.
Face Inset provides a variety of effects including feathering, color fill, and hem, and users can also choose to use them according to their needs. Feel free to test out your effect!