Overlays and Transitions

Adding Overlays

Overlays are graphical elements that are superimposed (layered on top) on the main content of a video stream. They typically include visual enhancements, branding elements, and additional information. Chyrons (pronounced KAI-RON) are dynamic, on-screen graphics that display text information, generally associated with a news broadcast. They are often used to present additional context or details about the content being shown.

Banners

Used to display text, providing commentary, but separating the text on a static background for easier readability

Frames

Provides a visually appealing way to layer dynamic content, like a chat feed, webcam feed or text boxes.

Tickers

Tickers scroll at the bottom of the screen to provide a constant stream of updates, like donation tracking or stock market numbers.

Chat

Including your audience's reactions to your stream's video feed is a great way to build engagement!

Scoreboards

Show real-time game statistics, scores, or other relevant information to keep viewers informed.

Branding/Socials

Incorporate your logos, social media handles, and other branding elements to create a professional looking stream.

Creating Overlays in Photoshop

Open Adobe Photoshop and create a new document with transparent background:

File > New > Choose dimensions > Set Background Contents to "Transparent."

Design your overlay/chyron elements (e.g. text boxes, graphics, webcam frames, logos, borders) on different layers. Use layers to organize and customize each element.

Save the file with a format that supports transparency, such as PNG:

File > Save As > Choose PNG as the format > Save.

Creating Overlays in Illustrator

In Adobe Illustrator, create a new document with transparent background:

File > New > Set Background Contents to "Transparent."

Design your overlays/chyron elements (e.g. text boxes, graphics, webcam frames, logos, borders) on different layers. Utilize Illustrator's text and shape tools for customization.

Save the file with a format that supports transparency, such as SVG or PNG:

File > Save As > Choose the format > Save.

Importing your Chyrons and Overlays to OBS

Click on the plus symbol in the Sources panel.

Choose "Image" for overlays or "Browser" for chyrons. Browse and select the file you created in Photoshop or Illustrator.

Adjust position, size, and other settings in the properties window. You can also quick crop while holding ALT and adjusting the corners in the regular canvas view.

Click "OK" to add the overlay or chyron to your scene. Arrange the layers in the Sources panel to control their stacking order.Test your scene to ensure the overlays and chyrons appear as expected.

Adding Transitions

Stingers are a type of animated transition used in video production and streaming. They are characterized by a dynamic and often visually engaging animation that serves as a transition between scenes or segments in a video.

Arrow Wipe (Blue).webm

Creating Custom Stingers in Premiere Pro (optional)

In Adobe Premiere Pro, create a new project that matches your aspect ratio and resolution of your OBS scene.

In the "Graphics" workspace (Window > Workspaces), create a new shape by using the "Rectangle" or "Ellipse" tool from the Essential Graphics panel. Customize the shape's color, size, and position as needed. This shape will "wipe" the screen so that your first scene (A) can transition to the second scene (B) without your viewer noticing the transition point.

To add animation, go to the beginning of the timeline. Click the stopwatch icon next to "Position" in the Effects Controls panel to set the starting position keyframe.

Move the scrubber to the end of the timeline. Adjust the position of the shape to its ending point. Premiere Pro will automatically create a keyframe for the new position.

You must ensure you export your animation with an alpha channel (transparency).

Go to File > Export > Media.

Choose a format that supports alpha channels, such as QuickTime (H.264) or WebM.