How AA24 Works - On Screen Graphics
Throughout AviAwards 24, you probably noticed the on-screen graphics we used to display event information.
Creating these graphics isn’t a simple task. It’s a multi-step process that needs good coordination between the design team and the graphics team (which is basically just me!).
Here’s a typical scenario:
Daniel (Leading the whole show): "Hey Design Team & Graphics Team, we need a graphic to recap the event. Can you guys make it?"
Graphics Team & Me: "Sure, we're on it."
Then, the work begins. The design team usually starts by creating the visual layout in tools like Figma or Adobe Illustrator. Once they’re happy with the design, they send it over to me to bring it to life with animation in After Effects.
There’s often a bit of back and forth within the design team to nail down the look of the graphic. After that, the design team and I collaborate on how the graphic should animate – making sure the movement and timing feel right.
Once the design team is satisfied, they send it to me for animation in After Effects.
I then animate the graphic and send the animated version back to the design team for their review.
If they approve, it goes to Daniel for the final approval. If he’s happy with it, then it’s ready to be integrated into our graphics engine.
Integrating the Graphics
We use NodeCG to render our graphics in real-time. Think of NodeCG less as a full graphics engine and more like a remote control for our actual graphics.
NodeCG lets us display graphics in OBS by adding them as a browser source and control them through its dashboard in real-time.
Graphics designed in After Effects are exported in a few ways:
- Lottie files: These are lightweight and scalable vector graphics.
- MOV files: These are video files which we then convert to WebM to support transparent backgrounds (alpha channels).
- A combination of both: Sometimes we use both formats for different elements of a graphic.
After exporting, I create the dashboard interface and the actual graphic elements within NodeCG, usually with Vue and TailwindCSS
If you’re curious to learn more about our graphics workflow, feel free to message me on Discord. We’ve also shared some of our tools and projects publicly, so you’re welcome to check them out and even use them in your own projects!