[TUTORIAL] Overlays

Have you ever wondered how you can take a specific part from an Episode background and turn it into an overlay? Or how to create your own mirror or window overlay for that special directing effect? What if you needed help figuring out how to fill in the glass portion of a mirror or window?

This post will cover the aforementioned topics and it's fairly easy to follow along. The methods described in this tutorial will work for both Pixlr Editor and Photoshop. I will also briefly explain how to direct those bathroom mirror and looking out the window scenes.

Object Overlays

Here's a very simple example to introduce this tutorial. Let's say I want this coffee table to serve as an overlay so my characters can either stand behind or in front of it.

You use the polygonal lasso tool to trace around the object of interest and then copy it by pressing ctrl + c on your keyboard or edit > copy at the top of the menu.

For Pixlr Editor users.

For those using Photoshop.

Then, create a new image by going to file > new and select the option that says "transparent". This step is crucial for your overlay to successfully work on Episode.

When you copy an item and then create a new file, the program will automatically punch in the dimensions of that object. You can change the height and width of this new file if you'd like, although it isn't necessary unless you want to add decorations onto it.

Paste the new cut-out onto this document. (Remember, a grey and white checked pattern denotes a transparent background.)

Finally, save it as a png file. As stated in the Episode portal, this is a requirement for uploading overlays and saving your image as a PNG ensures transparency.

Mirror/Window/Glass Overlays

This segment of the tutorial is also quite simple and can be done in a matter of minutes depending on the background you're editing. The background I'm using in this example is INT. ICE BATH GRANDMAS BATHROOM - NIGHT. 

Regarding mirror and window overlays, you need a background that has a mirror or window. The main objective is to alter the transparency of the glass. Do not touch anything else because the directing may end up looking wonky, especially if you choose to show your character walking away from the mirror or to another area outside.

Therefore, you only want to cut out the area that holds the mirror/window. So unlock the layer, and select around that section of the background and delete it.

If you're using Pixlr Editor, leave the selection path as it is and create a new layer. Use a large brush and choose white or a very light blue color to fill in the selected space.

On Photoshop, you can use the "solid color" feature instead of a brush. The program will automatically create a new layer after you pick a color to fill it in with.

If you're using Pixlr Editor for this type of edit, lower the opacity to 40-55% and leave the mode on normal.

If you're using Photoshop, reduce both the opacity and fill levels. Between 40-55% will suffice and leave the layer mode on normal. (I used a light blue color in the Photoshop example. For reference, the hex code is #EDF8FB.)

The next part of the tutorial is completely optional. Many windows and mirrors in official Episode backgrounds have stripes, and the effect is not very difficult to replicate.

Deselect everything (ctrl + d or edit > deselect) after you've filled in the mirror with a solid background color and adjusted its opacity (and fill) levels. Create a new layer so you can draw stripes and separately adjust its visibility afterwards.

Draw the stripes using the polygonal lasso tool. Anywhere between 2 to 5 stripes will be fine depending on the size of the area. Next, fill it in using the same white or light blue color that was previously used.

(You can add more to your selection path by holding the shift key on Pixlr Editor. Also, if you're not very neat about drawing lines within the borders, move this layer beneath the background image to make your result look as clean as possible.)

Again, you'll want to adjust your opacity (and fill) values. Between 15-30% is ideal if you want to keep it subtle. The number you input should be lower than the one you used to cover the entire surface.

This is what the result should look like.  The mirror may look very faint when viewing it on an editing program on your computer, but will be more prominent once you direct your scene. The same concept applies when filling in the glass of a window.

If your file size exceeds 1MB when attempting to upload it on the Episode portal, you can reduce it by using online sources such as TinyPNG or CompressPNG. All you have to do is upload the image and the website will automatically compress it for you without sacrificing quality.

In the remaining section of this post, I will provide a short explanation and sample code for directing scenes using this type of overlay. To direct a mirror or window scene, you'll need:

• Regular background that has a mirror (for those bathroom scenes) or any exterior background of your choice (if directing a window scene)
• Overlay with a see-through mirror/window
• Two identical characters in the portal (only if you're trying to show your character's reflection)

Suppose I want to direct a scene using this background and its accompanying overlay: 

The coding will be:

INT. FULL BATHROOM with FULL BATHROOM MIRROR OVERLAY at layer 2
@CHARACTER1 spot/stands [position] and CHARACTER1 starts [rear animation] and CHARACTER1 faces [left/right] and CHARACTER1 moves to layer 3
@CHARACTER2 spot/stands [position] and CHARACTER2 starts [animation] and CHARACTER2 faces [left/right] and CHARACTER2 moves to layer 1

Note: Character1 represents the character that is looking into the mirror, while Character2 is the one that is shown in the reflection and will be slightly smaller in appearance. The order your layers are in for the characters and overlay are important for directing complex scenes.

Likewise, the coding will be similar if you want to direct a scene from the inside looking out:

EXT. ANY OUTSIDE BACKGROUND with INSIDE HOUSE OVERLAY THAT HAS A WINDOW at layer 2
@CHARACTER1 spot/stands [position] and CHARACTER1 starts [animation] and CHARACTER1 moves to layer 3
@CHARACTER2 spot/stands [position] and CHARACTER2 starts [animation] and CHARACTER2 moves to layer 1

Where Character1 is located inside the house, while Character2 is standing outside.

Hopefully these explanations weren't confusing to follow. Feel free to comment below if you need further clarification. Best of luck with editing and directing. And I hope your holidays will be filled with lots of warmth and joy!