One of Motion's more powerful features is the Image Mask, which allows you to use any image to mask another. This tutorial will demonstrate basic usage of image masks to create a type treatment and reflection effect. Our goal: video-filled text with a reflection that fades and blurs away, as seen in the above graphic.

Please note that parts of this tutorial require Motion 2 or later.

Our first step will be to add the footage we want to mask. Motion comes with a variety of royalty-free footage that is used in its templates. If you have done the full Content install (it's the default), it will be available in the Library.

Add the fire footage

  1. In the Utility Panel, click on the 'Library' tab to view your Library.
  2. From the left-hand column, select the 'Content' category. This contains the media that is used in the Motion templates.
  3. In the right-hand column, select the 'Fire' sub-category.
  4. In the file view below, drag-and-drop the 'Fire Wall.mov' clip into the Canvas.
  5. Position the fire clip so that its bottom edge is slightly below the midpoint of the project area:

Why is so much of the clip off-screen? Since we are going to be masking the footage and using it as the source for some text, we want to position it so that we're using the "thickest" part of the flame, which happens to be near the bottom. Speaking of text, let's go ahead and add some.

Add the text

  1. Select the text tool from the toolbar (or press 'T') and click in the Canvas.
  2. Type in the word 'fire' and press Enter to exit the text-entry mode.
  3. With the text object selected, press 'D' to invoke the Dashboard.
  4. Set the font family to 'Helvetica Neue' and the style to 'Condensed Black'.
  5. Set the Size to 200pt and the Tracking to 8.
  6. Position the text so that it snaps to horizontally-centered and the bottom edge snaps to the midpoint of the project area:

And now we are ready to add our Image Mask. The Image Mask is applied to the object that is to be masked, and is given a reference image to use as the source for the mask. By all means, please do read the Masking section in the manual (found in the 'Help' menu). It gives a clear and concise explanation of how masking works in Motion.

Apply the Image Mask

  1. Click the 'Project' button in the toolbar to view the Project Pane.
  2. In the Layers List, select the 'Fire Wall' clip.
  3. Select Object->Add Image Mask (or press 'Cmd+Shft+M').

Nothing has yet happened, because we haven't given the mask its reference image. When using the term "image", I am referring to any object in Motion that generates an image: footage, text, particles, shapes, replicators, generators, etc. There are two ways to tell the mask what image you want it to use: drag an image into the image-well in the 'Mask' tab of the Inspector, or use the drag-and-drop shortcut in the Layers List. Let's go with the shortcut:

Set the mask reference

  1. In the Layers List, drag-and-drop the 'fire' text object into the Image Mask object.

    2. And you have your masked text:

Diabolically simple, no?

If you look in the Layers List, you will notice that Motion has automatically disabled the 'fire' text object for you. This keeps the mask reference from covering up the masked area, since they occupy the same space. Having the reference image on or off makes no difference to the mask.

By default, the mask is in 'Stencil' mode, which means that the object is masked wherever the mask reference image is located. If you were to move the disabled 'fire' text around, the masked area will also move:

With our flaming text complete, it's time to do some filtering...

Page 2: Filters ->