NEWBuild your whole pack of animated scenes with the Scene Workshop: free to try, one look included free. Try it now
FRENES
Menu

Guides · OBS and Streamlabs · 4 minutes

How to put a frame around your webcam in OBS

A webcam frame is an image or a video loop on a transparent background, with an empty center. The webcam goes underneath, the frame on top. In Streamlabs Desktop the logic is the same: stacked sources.

  1. 01

    Add your webcam

    In the Sources panel, click the plus, choose Video Capture Device and select your webcam.

  2. 02

    Crop it to the frame's shape

    Hold Alt and drag the red handles of the source: OBS crops the image instead of stretching it. Aim for the same shape as the frame (16:9, 4:3, square or vertical).

  3. 03

    Add the frame on top

    For a WebM frame, add a Media source (“Media Source” before OBS 32.2), tick “Local File” and “Loop”. For a PNG frame, add an Image source. In the sources list the frame must sit above the webcam: the top of the list is in front.

  4. 04

    Fit the webcam in the opening

    Move and resize the webcam so it fills the frame's opening without spilling over. The opening's coordinates are given with each frame on the Frames page.

  5. 05

    Optional: a mask

    For a webcam with rounded corners or a free shape, right-click the webcam, Filters, then add an Image Mask/Blend filter with a mask image. A Crop/Pad filter also helps adjust the edges.

  6. 06

    Lock the sources

    Click the padlock next to the webcam and the frame so you do not move them by mistake mid-stream.

Keep going

OBS

Add an animated overlay in OBS Studio

An HTML page or a web address becomes an overlay: the method for all our overlays.

3 minutes →Streamlabs

Add an animated overlay in Streamlabs Desktop

Same principle as in OBS, with Streamlabs wording.

3 minutes →Cheat sheet

The right sizes: screens, banners, emotes

The cheat sheet of dimensions to know for Twitch, Discord and YouTube.

2 minutes →