Skip to main content

Step 2: Animation

After importing all of your designs, assets, textures and references to after effects, we will have to make sure our design and our animations are be compatible with the workflow required for our instant replays to be customizable within OBS.

Wherever possible, we want to use shape layers with simple shading to make sure our replay plays efficiently.

Shapes​

Create and naming your shape layers

  1. Color Identifiers: Name shape layer fills and strokes with up to 4 color identifiers.
    1. #color1, #color2, #color3, or #color4. OBS will use these identifiers for color customization.
  2. Avoid Stroke Visibility: Add .nostroke to the layer name to avoid strokes on shapes.
  3. Adding Highlights and Shadows:
    • Highlights: Create a white shape layer, animate it, and adjust opacity.
    • Shadows: Create a black shape layer, animate it, and adjust opacity.
    • Gradients: Use the gradient effect in After Effects, not image gradients.
  4. Layer Optimization: Combine highlights and shadows in the same layer to simplify your composition, this way you can also animate them together as a single, nested layer.
  5. Blending: For supported blending modes, see the syntax list in the mix-blend-mode documentation,

Combine your highlights and shadows into one layer to simplify your composition