Thursday, June 18, 2020

How to Add Motion Graphics to Live Streaming Video

How to Add Motion Graphics to Live Streaming Video

If consider your favourite show, or a YouTube channel you enjoy, they almost certainly use animated elements that help you learn to recognise the broadcast. Rarely do we give graphics much thought, but they are essential for many broadcasts. In this article you'll learn how to use graphics for streaming video, and how to make some of your own.

We cover:

  1. Basics of graphics with streaming video
  2. How to make your own graphics for streaming video
  3. Top templates for streaming graphics (After Effects)
  4. Top templates on a video graphics maker (PlaceIt)
  5. Streaming resources

1. Graphics for Live Streaming Video

Motion graphics help engage viewers, and creating an animated logo or having overlays that fit with your content can be important parts of your online presence. Animated elements add production value, and even simple additions can quickly help your broadcast look more polished.

Decide What Will Add Value to Your Stream

Throwing a bunch of animated graphics onto your broadcast can be really tempting, but try to keep it to what will be most useful—there is a fine balance between informing and distracting your audience. Here are some more examples of different types of streams and the motion graphics they use:

Gaming Streams

With gaming stream graphics and interactive overlays, the goal is building audience and getting people to engage with other social channels. Look for:

  • Overlays
  • Buttons
  • Panels
  • Backgrounds

News Broadcasts

With news broadcasts it's all about giving information and pulling your audience across to the next story, so eye-catching graphics with easy-to-read text are integral.

  • Lower thirds titles
  • 'Coming Up' screens
  • Logo sting animations

Education and Entertainment

For example, tutorial or 'how to' live streams often use on-screen titles (called lower-thirds) to explain who's talking, what's happening, or to add important information not given by the audio or video.

Of course, all (and more!) of these graphics might fit with the type of streaming you do but hopefully this will give you some inspiration.

Stay on Brand

If you use animated graphics, there should be some continuity between the various elements. Think about things like the font you use, how your graphics are structured, the colours you use, and so on.

Try not to change things up too often either. If you really need to change something, try to do it incrementally. Think about the way successful brands have updated their logos through the years—they refresh and change without losing the core look and message.

2. Make Your Own Graphics for Streaming Video

If you’re able to use editing suites like Photoshop and After Effects then you absolutely can make whatever graphics you like, more or less!

How to Create a ‘Starting Soon’ Screen in After Effects, Use With OBS

We've covered how to create stream overlay graphics in Photoshop. Here’s another project you can do: it's a short trip to take those graphics into an editing program and make a waiting screen.

In this tutorial, you'll learn how to make a simple but appealing ‘Starting Soon’ screen for your live stream using an overlay and looping stock video, plus how to use the graphic in Open Broadcaster Software Studio (OBS). Jon shows how to use After Effects, but this will work with any non-linear video editor, like Premeire or Final Cut Pro.

Check out the complete tutorials for more detail:

3. Top Templates and Assets for Motion Graphics

If design isn't your interest or strength, but you still want a cohesive look, try a template. You can use templates to get started, and then customise so the colours and style represent you better. Here are three great graphics assets for live streaming broadcasts from Envato Elements and Envato Market.

Digital Glitch Logo

This logo reveal with a cool glitch effect for Adobe After Effects would work well for tech broadcasts or gamers live streaming. You won’t need any plugins to use the template and the free font used is included.

 

Fluorescent Strokes - Full HD

Try these colourful fluorescent strokes to add some interest to your live stream. You could try this as part of a logo reveal, or looped as a holding screen while you wait to start your broadcast.

 

Go Live Facebook Emoticons Pack 

A pack of 15 animations related to the recognisable Facebook emoticons: love, like, laugh, wow, sad, and angry. Encourage people to react to your stream by gently nudging them in the right direction with this reaction pack.

 

4. Try an Online Motion Graphics Video Maker

For a quicker, easier method, try PlaceIt. You can start with a ready-made professional template and make changes right there on the site to produce an overlay that suits your brand and stream. There are many options on PlaceIt (for a small fee, or as part of a subscription) for graphics and overlays, but here’s a neat space-themed example designed for people who want to stream games via Twitch:

 

5. More Help For Streaming Video

Lastly, here are a few key tutorials to help you make better live streaming video:

Envato Video Marketing Guide

Boost your video marketing skills with our guide. You'll learn video marketing from start to finish to improve your next production — and connect with customers. 

Free Video Assets From Mixkit

Check out Mixkit for free stock videos, free stock music, and free templates for Adobe Premiere Pro.

Make Motion Graphics Video Online With PlaceIt

PlaceIt is an online video maker with professionally-designed motion graphics templates; you can make videos quickly, right in your browser.

Envato Elements: Unlimited Downloads

Envato Elements offers millions of stock items: photos, music, video clips, fonts, graphics templates of all sorts, video project templates for After Effects, Premiere Pro, Final Cut Pro and Motion, and creative courses from Envato Tuts+. All of this is included for a low monthly fee.




Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)