It’s not really a secret around here, given how often my blog changes visuals, but I love to learn how to do creative things all by myself. I’m not the most knowledgeable, though, so my endeavours usually turn into sagas, if I’m lucky.
When Sekan first started streaming, I got really excited about the idea of possibly being able to make him some design things as a way to help and support him. I didn’t know much about streaming, but you best believe I learned everything I could about how to set one up design-wise as quickly as I could.
The first thing I made him was an overlay, a PNG file that he could layer over everything else and use as a frame for his camera, game screen, chat, and what have you. My original creation was all right, but it wasn’t quite enough for what I had in mind. It felt too…flat.
Then, I learned that there’s such a thing as overlays that move—and I knew I needed to figure out how to do it.
It was a little bit of a process, but here’s what I learned, and how I take myself through making animated overlays!
Step 1: Figuring out what to make
When I first started working on Sekan’s animated overlay, I didn’t really have an idea of what I wanted to do. It started like so many of my creative projects: with a fuzzy vision and no idea of how to get there.
The one thing I knew was that I wanted it to feel grungy, like that image overlay I’d made, and that meant including neon lighting—if I could figure it out.
I spent far too long researching different ideas that I could use, and even looking through stock assets to see if I could find something that I thought would work. I eventually got overwhelmed by that, though, because sometimes it’s just as much work to use the stock stuff if you’re not sure what you’re doing.
Then, I spent too long again drawing it myself, perfecting every line and every shape, and carefully took myself through a detailed After Effects tutorial on Adobe’s website to create a convincing neon look, complete with flickers and that slight liquid movement you usually see through the tubes.
I even found a tutorial that taught me a bit about using keyframes to make things appear and disappear, so I could make the stars flash—and I could make a neon version of Sekan’s logo move, so it looked like he was putting headphones on to get ready for his stream.
It might not seem like much, but it was a proud moment to say I’d done that!
LESSON LEARNED
Figure out what you want to make before you get started, and don’t be afraid to look for tutorials to teach you new techniques.
Step 2: Deciding on resolutions
These days, it’s a pretty safe bet that most computers can use 1920 x 1080 as their default resolution, and that’s a good choice for streaming, too. But once you pick a resolution, you’ve got to stay consistent with it!
I made Sekan’s overlay using After Effects and Illustrator, partially because I knew that if I made a design in Illustrator, I could import it right over to After Effects and thereby make things really easy for myself.
Imagine my surprise when my perfectly laid-out design in Illustrator showed up in After Effects as a messy jumble of shapes in the middle of the screen. At first, I thought maybe I had messed up the import, but when it did it a second time, I committed to rearranging everything by hand and never, ever touching it again.
It wasn’t until later that I realized I’d made my Illustrator file 1920 x 1080, and my After Effects file 4k—so of course, After Effects didn’t know what I wanted it to do with the wrong resolution I imported.
That also explained the number of times my After Effects had crashed when I was trying to work on his overlay. I don’t have a 4k graphics card, so it was far too heavy of a workload for my poor computer!
LESSON LEARNED
Make sure resolutions match if you’re working with software that imports for you, and that your computer can handle what you’re working with!
Step 3: Figuring out video transparency and exporting
Typically, overlays for streams will have transparent frames so you can put your game screen behind it—hence overlay, I suppose. With an image, that’s easy enough; all you have to do is make sure that you cut out the section you want and export it as a PNG file.
With animations, though, it gets a little more complicated. Just like PNG format for images, there are also specific file formats for videos to keep their transparency. And from the extensive research I had to do on the subject, that format has to have alpha channel options—which means the best choice is QuickTime video.
There’s just one problem with that. QuickTime video doesn’t work either for OBS or for online streaming services like StreamElements (or Windows computers, for that matter).
So here’s what had to happen:
- Create my overlay with its little transparent sections
- Export it as a QuickTime video and make sure I changed settings to include RGB+alpha
- Use a video converter file that can turn QuickTime videos into .webm files with the VP9 codec
And done!
Of course, that does sound like a lot of tech gobbledegook, even after having tried to learn it. I spent far too long trying to search for a way to do it, and eventually ended up on a passion-project software called Shutter Encoder.
All in all, it was a lot of fun to learn how to make animated overlays, and though Sekan’s took me a bit to figure out, it definitely gets faster the more you do it.
