‍

Opening the Waymark Extension in After Effects

After installing, open After Effects and navigate to:
Window → Extensions → Waymark Studio

‍

Extension Panel Overview

The extension panel consists of several sections, each designed to streamline your workflow:

• Preview – Use this to test how your template appears in the web browser
• Primary Composition – Select the main composition that contains your video’s structure
• Add new footage layer – Select all footage precomps being used in your template
• Fonts – The extension scans for fonts used in your project, allowing you to map them to Waymark-approved Google fonts
• Advanced Text Options – Adjust text sizing and positioning within your template
• Export – When your project is finalized, this is where you export it to code for Waymark Studio integration

‍

Starter Projects and File Setup

To help streamline the creation process, we’ve included starter projects (above) that provide properly structured After Effects files. These templates follow the required formatting and best practices for Waymark omni packages.

Each Waymark omni package consists of five templates:

• 16x9 30s (Hero)
• 16x9 15s
• 16x9 5s
• 4x5 15s
• 4x5 5s

These should all be included in your After Effects project as master compositions.

Composition Settings

TV Projects
1920 x 1080 (16x9)
30 fps
8 bpc color
:30 = 899 Frames
:15 = 449 Frames
:05 = 149 Frames

‍
Digital Projects
1080 x 1350 (4x5)
30 fps
8 bpc color
:15 = 449 Frames
:05 = 149 Frames
‍

Folder and Layer Setup

Keep project window and folders well organized and easy to navigate.

Example

• 01 COMPS
  COMPONENTS
  FOOTAGE
  GRAPHICS
  IMAGES
  MASTER

• 02 ASSETS
  AUDIO
  FOOTAGE
  GRAPHICS
  IMAGES
  SOLIDS

Use clear and descriptive naming for all precomps and layers used in your composition.

Example

1. BUSINESS NAME, SUBTEXT, etc. for text layers
2. FOOTAGE 01, FOOTAGE 02, etc. for videos
3. OUTRO LOGO, INTRO LOGO, etc. for graphic elements

‍

Global Container Setup

Waymark templates use global containers for branding elements like QR codes and disclaimers. These ensure consistency across all variations of your template.

• Always include the provided global containers in every template
• Ensure they are correctly placed inside the timeline
• Don’t alter global containers in any way since they are setup specifically for configuration

‍

Audio Setup (Alibi Music)

For background music, Waymark uses tracks from Alibi Music. You’ll need to:

• Select an appropriate track that fits your template’s theme
• Ensure the track meets Waymark’s technical specifications

Additional guidelines for selecting and integrating music can be found in the documentation.

‍

Overview

Images in Waymark templates serve as placeholders for the user’s own imagery. Therefore, there are some important rules and best practices to keep in mind when creating your template.

In the Waymark editor, images can be modified by users in a variety of ways including:

• Replace
• Crop
• Zoom
• Padding
• Creative filters
• Motion effects

*Please note that 3D layers, expressions and third-party effects are not supported. To ensure compatibility, avoid using these features in your project.

Image Formats and Basic Requirements

• Only PNG and JPG formats are supported
• Images should be scaled, cropped, and placed into precomps with a solid background layer
  
• Ensure 100% scaling for optimum playback performance

Image Placement and Editing in After Effects

• View the setup process in After Effects
  
  • Import an image and place it into a precomp
  • Resize and crop to fit the intended container
  • Duplicate any precomps if the same image needs to be linked across multiple locations in the template
  • Be sure to crop and resize image precomps when transitioning from 16x9 to 4x5 formats

Movement and Animation Best Practices

• All images should have subtle movement if they are on-screen for more than one second
  
  • Examples include drift, scale, zoom in/out, pan left/right
  • Exception: if the image is meant to flash quickly or remain static for creative reasons

Matting Rules

• Always use alpha mattes instead of masks
• Luma and inverted mattes are NOT supported
• Each image must have its own separate matte layer—no shared mattes across layers
  

Effects and Unsupported Features

• Don't use unsupported effects on images like drop shadows, filters, third-party effects, etc.
• If a visual effect like black & white is needed, it should be done in Photoshop before importing, since users can apply filters within the editor
• Refer to the Extension User Guide for a full list of supported and unsupported features

‍

Overview

Logos are an integral part of Waymark templates and we've provided our own approved placeholder logo for use in your project. It's specifically designed to accommodate a wide range of logo formats a user could have. Ensuring the placeholder logo is unaltered and as large as possible will provide optimum flexibility and space for a user's needs.

Placeholder Logo Rules

• Minimum logo size for 16x9 templates is 840 x 412 px
• Minimum logo size for 4x5 templates is 900 x 444 px
• Don’t invert, use fills or any effects on placeholder logo—don't alter their appearance in any way
• Don’t skew or stretch the logo
• Don't alter or resize global container logos
• Pick the appropriate black or white placeholder logo that looks best for your scene
• Use a solid black darken layer at 20% opacity over any footage that features a logo on top

Logo and Business Name Switch

• Anytime a logo is being used in an intro or outro scene, make sure you include a 'Business Name' text box along with it
• Stack the logo and business name text box within the same time span in your timeline

‍

Overview

Like images, videos serve as placeholders for the user’s own footage. This next section covers rules and best practices when setting up footage placeholders in your templates.

In the Waymark editor, video can be modified by users in a variety of ways including:

• Replace
• Crop
• Zoom
• Padding
• Set in and out points
• Adjust volume

*Please note that 3D layers, expressions and third-party effects are not supported. To ensure compatibility, avoid using these features in your project.

Video Format and Precomp Setup

• MP4 format is preferred for optimal performance
• All footage must be placed into precomps and reside within the master composition
• Ensure precomps are trimmed to the exact duration they appear on screen.
• Simply trimming in the timeline without adjusting the precomp length does not change how it renders.
• Similar to images, cropping should be adjusted on the precomps, not on the footage itself when switching from 16x9 to 4x5

‍

Extension Mapping and Keyframe Best Practices

• Ensure all footage precomps are selected in the Extension’s footage layer dropdowns for proper mapping
• Keep all keyframed properties on the precomp level, not inside the precomp
• Keyframe movement should be minimal to avoid competing with the footage’s natural motion
• Avoid extreme keyframing unless there’s specific creative intent

‍

Footage Limitations and Best Practices

• Avoid odd-numbered width and height dimensions
• Footage precomps can’t be linked like images
• Each footage container is unique in the editor
• Duplicating precomps won’t create a linked instance—each must be changed individually
• Avoid having too many footage precomps on screen at the same time to prevent playback lag
• No specific hard limit, but 2 to 3 max is recommended

‍

Matting Rules

• Always use alpha mattes instead of masks
• Luma and inverted mattes are NOT supported
• Like images, a footage precomp must have its own separate matte layer—no shared mattes across layers

‍

Ensuring Text Legibility on Video Footage

Always include a solid black ‘darken layer’ at 20% opacity with an OFF null over any footage that features text

‍

Overview

Text is the most widely edited feature in a Waymark template. This next section will cover the rules and best practices for properly setting up text placeholders in your template.

Let's take a look at how text works in the Waymark editor.

*Please note that 3D layers, expressions and third-party effects are not supported. To ensure compatibility, avoid using these features in your project.

Setting Up Your Text Boxes

• Creating and Sizing
  
  • All text layers must reside within text boxes
  • Create generously-sized text boxes for user flexibility
  • Position within title safe zones for proper layout
• Text Resizing and Alignment
  
  • Set vertical alignment within the Advanced Text Options of the Extension for every text layer—this controls how text will align within each text box (top, center, or bottom)
  • Make sure Text resizing is On
  • Always set Text resizing direction to Only Shrink
  • Test thoroughly to ensure proper resizing and alignment

Text Styles and Formatting Rules

• Font Guidelines
  • Use only Waymark-approved Google Fonts‍
  • Request additional fonts if needed

• Multiple Styles Handling
  
  • Do not mix font sizes, weights, colors or styles within a single text box
  • Use separate text boxes for different styles
• Legibility & Readability:
  
  • Ensure all text is large enough for clarity
  • Use the disclaimer text global container for every template

Advanced Techniques

• Precomping for Linked Text
  
  • Precomp any text and duplicate the precomp when the same text is meant to be linked in your template
• Matting Rules
  
  • Always use alpha mattes instead of masks
  • Luma and inverted mattes are NOT supported
  • Like images and footage, a text layer must have its own separate matte layer—no shared mattes across layers
  • Ensure matte layers are large enough to accommodate the full text box area and avoid any characters being cut off

Text Animations

• Supported Text Animators
  
  • Anchor point, position, scale, skew, rotation, opacity
  • Animators can be applied to characters, words, or lines
• Unsupported Animation Features
  
  • No Randomization
  • No Tracking (letter spacing animation)
  • No Text color keyframing
  • Gradient fills are not supported—use solid fills only

Best Practices and Common Pitfalls

• Keep line spacing and kerning set to auto to ensure consistency across the different fonts a user may use
• Don't use drop shadows (they don’t render well)
• Always preview text box behavior in the Waymark Extension
• Ensure no characters are cut off in the preview

Business Name and Branding Placement

• Always include a ‘Business Name’ text box with a logo
• Position below the logo in any intro and outro scenes

‍

Introduction

Since color is editable in the Waymark Studio Extension, it’s essential to follow best practices to ensure templates look polished and function smoothly. This guide explains how to properly assign and configure colors for optimal results.

Understanding Color Strategy in Templates

• Color assignment in Waymark templates follows a structured approach to ensure consistency across elements
• Multiple elements often share the same color, such as branding, backgrounds, transitions, and text elements. This helps maintain visual harmony.
• In After Effects, colors should be clearly assigned and structured for easy customization in the Waymark editor

Ensuring a Harmonious and Uniform Color System

• The template and all cutdowns in an Omni Package should follow a consistent color scheme
• When assigning colors:
  
  • Design templates with aesthetic balance in mind
  • Maintain cohesive branding across all elements
  • Ensure color consistency across different formats and outputs

Recommended Color Limits

• Aim for a maximum of 6 colors per template to ensure ease of editing
• Important consideration: A single color in After Effects can count as multiple swatches in the editor if applied to different element types (e.g., text, backgrounds, transitions)
• Example: If a design uses only blue and white, it could still generate up to 6 swatches depending on where those colors are used (e.g., blue for text, blue for a background, white for branding, white for transitions, etc.)

Assigning Colors Effectively

• Use separate solid or shape layers for key elements to allow independent color control
• Example: The end card background should be a separate shape layer or solid so users can modify its color separately from other elements
• For multiple elements sharing the same color, such as patterns or accent graphics, precomp them and apply a single fill effect for easier configuration
  

Transparent Colors and Layering Issues

• Use transparent colors with caution, as they can produce undesirable results when placed over different backgrounds or elements.
• Example: Layering a semi-transparent red over a blue background could result in an unwanted purple hue when colors are changed in the editor
• Best practice: Avoid excessive layering of transparent elements unless necessary for transitions or overlays

Unsupported Color Features

Certain After Effects features are not supported in the Waymark Extension

• No gradient fills or ramp effects
• No color keyframing on text, shape layers and any other elements

Supported Features and Best Practices

• A shape layer can have both a separate fill color and stroke color, and both can be edited independently in the Waymark Studio
• Avoid applying fill effects to logos or precomps containing images
  
  • Why? Applying a fill effect to a logo or image precomp forces it to take on a single color, removing any original color detail

‍

Introduction

After you've built and tested your template thoroughly using the Waymark Extension, please follow the steps below to ensure a successful delivery to the Waymark team.

Ensure Your After Effects Project is Set Up Correctly

• Follow the instructions provided in this online guide
• Verify that all required cuts are included in your Omni Package:
  
  • 16x9: 30s, 15s, 5s
  • 4x5: 15s, 5s
  • Frame counts must be exact

Verify Proper Setup in the Waymark Extension

• Ensure the Master Composition, Footage Precomps, and Fonts are all selected within the Waymark Extension
• Make sure Advanced Text Options are set for all text layers
• Run a full preview to confirm all text, images, footage and graphic elements are previewing as expected‍

Optimize Your Project and Ensure Compatibility and Compliance

• Delete any unused layers, keyframes, and effects that are no longer needed
• Remove redundant assets to optimize performance
• Check that only supported effects and features are used
• Reference the Waymark Extension User Guide for a full list of unsupported effects

Clean Up and Collect Your Project

• Reduce your project to remove any unused compositions and assets
• Collect your project and include all fonts used
• Include MP4 exports for reference
• Include all three unmastered AIFF music tracks from Alibi in 30s, 15s, and 5s time formats
• Ensure all files are organized and named for easy access

Packaging and Uploading

• Zip all necessary files together
  
  • After Effects project
  • Fonts
  • MP4 reference exports
  • Unmastered AIFF music files
• Upload to Frame.io in the designated folder provided by producer
  

Troubleshooting and Final Review

• If any issues arise, reference the Waymark Extension User Guide for troubleshooting
• If templates need adjustments, ensure they align with all best practices before re-uploading