How To Make ANIMATED Overlays For Free! (inc. Downloads/Templates)

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ก.ค. 2024
  • This week's tutorial is on animated overlays for your Twitch stream! If you hate tutorials, there are also downloads that you can add straight into your overlays for free!
    === AFFILIATE LINKS ===
    🔥 Use the code "NUTTY" to get 15% off at Nerd Or Die nerdordie.com/shop/ref/nuttyl...
    ► Epidemic Sound - Royalty Free Music + Sound FX share.epidemicsound.com/nutty
    ► Add 🎮 Capture your gameplay the same way I do! e.lga.to/nutty
    === TIMESTAMPS ===
    00:00 Intro
    01:55 Setup
    04:02 Create The Shape
    07:41 Animated The Border
    12:10 Convert .avi to .webm
    14:18 OBS Setup
    16:01 Outro
    === DOWNLOADS ===
    ► Overlay Pack Download (You need to join the Discord first! / discord ) discordapp.com/channels/15789...
    ► My WebM Converter bayfiles.com/z4C5jdg6oc/WebM_...
    ► Another WebM Converter (Courtesy of NGON) github.com/WebMBro/WebMConver...
    === SOFTWARE ===
    ► Inkscape inkscape.org/
    ► HitFilm Express fxhome.com/hitfilm-express
    === EQUIPMENT I USE! ===
    📸 Camera kit.co/nutty/nutty-s-camera-s...
    🎙️ Microphone kit.co/nutty/nutty-s-audio-gear
    💡 Lights kit.co/nutty/nutty-s-lighting...
    🎞️ All My Gear! kit.co/nutty
    === SOCIALS ===
    🔥 Get my custom widgets on Patreon! / nuttylmao
    💜 Twitch / nutty
    💙 Twitter / nuttylmao
    🚑 Discord / discord
    👕 Merch merch.streamelements.com/nute...
    ✉️ Business Inquiries Only nuttylmao@gmail.com

ความคิดเห็น • 689

  • @nuttylmao
    @nuttylmao  3 ปีที่แล้ว +441

    Note: If you're getting a watermark when you export in HitFilm Express, make sure you sign in first before you export. Creating an account is free.
    Please stop accusing me of being a liar.

    • @Gizmo543gaming
      @Gizmo543gaming 3 ปีที่แล้ว +8

      Im lost on how to create the shape thing ;-;

    • @lachlannnnn
      @lachlannnnn 3 ปีที่แล้ว +6

      I just used a wallpaper gif and but my webcams layer on top!

    • @xd_darth2510
      @xd_darth2510 3 ปีที่แล้ว +1

      dude i´m not paying 9 dollars for a webcam :( help me D:

    • @flaxenity4497
      @flaxenity4497 3 ปีที่แล้ว

      thank you for the video

    • @BruceCarbonLakeriver
      @BruceCarbonLakeriver 3 ปีที่แล้ว +1

      Yeah DaVinci Resolve - subbed

  • @ic3xiii
    @ic3xiii 3 ปีที่แล้ว +251

    for those who are lost in "Keying" @11:35 it's an additional Effect so just click on the plus button in the Effects.

    • @lucasdasilva3279
      @lucasdasilva3279 3 ปีที่แล้ว +14

      omg thanks so much my friend.. i was LOST for half an hour

    • @besambal9378
      @besambal9378 3 ปีที่แล้ว +6

      u SIR, saved a lot of lives by now (y)

    • @jfurness72
      @jfurness72 3 ปีที่แล้ว +1

      THANK YOU!!

    • @streem754
      @streem754 3 ปีที่แล้ว +1

      thank u

    • @NoobGamer-nv7vi
      @NoobGamer-nv7vi 3 ปีที่แล้ว +1

      @@lucasdasilva3279 same :D

  • @o0LavenderAndSpice0o
    @o0LavenderAndSpice0o 3 ปีที่แล้ว +2

    As a new Twitch user preparing for my first stream and wanting to look professional, learning how to do things like this myself are so important and essential IMO. I love that you have chosen free programs so anyone who is on a tight budget can still do this and have a simple yet high-quality overlay. I literally have a massive playlist of just tutorials for Twitch and this is definitely going on there. You, sir, just earned a subscriber for being immensely helpful and thorough. I thank you greatly. 😁

  • @SmokingSpoon
    @SmokingSpoon 4 ปีที่แล้ว +18

    I've animated a bunch of stuff and to be honest that rectangle idea of yours is really clever. Never thought it could be that simple!

  • @mimosasomestimes
    @mimosasomestimes 4 ปีที่แล้ว +2

    I'm about to rewatch this like 12 times to work on my stream borders. Thanks so much for these ideas and tutorials. The basic run down on how to do things in OBS and free programs to use is so helpful for this streaming newb hahaha

  • @nedwards1906
    @nedwards1906 2 ปีที่แล้ว +1

    This was absolutely awesome. I am a complete novice and I was able to follow along and complete the entire project. I want to thank you for taking the time to create this video. Now I'm going to spend hours making, adjusting and adding, making, adjusting and adding... these overlays for hours.

  • @Adolaide
    @Adolaide 4 ปีที่แล้ว +1

    Omg... I spent a whole day trying to figure this stuff out and ended up so close to doing it but couldn't get the right help..... THIS VIDEO WAS EXACTLY WHAT I NEEDED THANK YOU SO MUCH!!!

  • @NeurOrdnr
    @NeurOrdnr 4 ปีที่แล้ว +1

    Oi mate, just wanted to drop a thanks for your work. Your videos are a perfect jumping-off point into the materia.
    Really opened my eyes about what is achievable with not that big a budget.
    Literally no excuses to have a stream and not look into the things you highlight.
    Keep up the good work.
    On a sidenote: When you think that sharing someone's videos might actually hurt you economically, you know the content is good.

  • @genetorres6634
    @genetorres6634 3 ปีที่แล้ว +3

    @nutty Great stuff! I've been looking to make my own overlays for some time now to stand out. I really love the simplicity you implement. I too love clean, concise lines, and a lot of the overlay packs seem to be way overdone. Thanks!

  • @AgentScruffy
    @AgentScruffy 4 ปีที่แล้ว

    I rarely ever like, and then especially subscribe from tutorials, I'm usually just lazy or stubborn, but you my sir got both, this guide is super easy to understand for someone who has never used any of these programs at all. Thank you!

  • @ChurroWaffles
    @ChurroWaffles 3 ปีที่แล้ว +1

    This dude is what I dream to be as a content creator. Concise and brutally honest.

  • @extinctnine
    @extinctnine 3 ปีที่แล้ว +1

    Dude , your down to earth. I appreciate the work you do on these tutorials. Great job, I subscribed and gave a thumbs up. These videos have been helpful thanks

  • @SchwarzwolfGaming
    @SchwarzwolfGaming 4 ปีที่แล้ว +162

    After watching this multiple times to learn, I decided that I like you.

    • @kurtikopter4813
      @kurtikopter4813 4 ปีที่แล้ว +1

      lol

    • @kurtikopter4813
      @kurtikopter4813 4 ปีที่แล้ว

      omg du bist sogar deutsch ey wie cool

    • @WrinkG
      @WrinkG 4 ปีที่แล้ว

      Naw fr🤣🤣

    • @jossvalomx
      @jossvalomx 4 ปีที่แล้ว +1

      Best comment, EVER

    • @DSKincaid
      @DSKincaid 3 ปีที่แล้ว +1

      He Said Simple 🤔......Then I Was Like Wait

  • @FREEFROMITALL
    @FREEFROMITALL ปีที่แล้ว

    sick bro. tried to watch some one else and they basically just clicked for 30 mins and explained nothing
    this is what I needed! cheers brother!

  • @JHess
    @JHess 4 ปีที่แล้ว +16

    thanks for not making yet another adobe snob video and giving open source software some love. pro tip: edit>preferences>interface>theme>check 'use dark theme' ;)

  • @kristiscabana
    @kristiscabana 2 ปีที่แล้ว

    Wait. Did you say "way better people than me?" I doubteth that my good sir. I have been following you for a long time and you've helped me with a LOT of things. I like to consider myself a good person, so I know a good person when I see one and you kinda, well, you rock. I think most other people here can also agree that you have helped them tons!

  • @GelatinousGesticulation
    @GelatinousGesticulation 2 ปีที่แล้ว +7

    If you're confused about the box make your line with the straight line tool, then hit shift - control - f to open the Fill and Stroke menu. You can change the width of the line there. Use the "Stroke Paint" tab to change the color of the line rather than filling in the whole box with the "Fill" tab. Its sort of simple but took me a little longer than I'd like to admit.

  • @518freakshow4
    @518freakshow4 3 ปีที่แล้ว

    Dude, thank you so much for linking the converters. This has been driving me nuckin futz.

  • @miguelferrer7848
    @miguelferrer7848 4 ปีที่แล้ว

    You're so amazing and I learned a lot having two options for creating and downloading the borders. Thank you so much for doing this tutorial!

  • @rena4618
    @rena4618 ปีที่แล้ว

    this guy right here is the ultimate savior of small streamers. kudos to you!

  • @Kthulhut
    @Kthulhut ปีที่แล้ว

    Thank you I've watched several videos but yours actually really helped!

  • @cqlvxn1863
    @cqlvxn1863 4 ปีที่แล้ว +12

    to lazy to actually make this myself but did watch the whole vid... ty ty my guy

  • @aritanmaia1183
    @aritanmaia1183 3 ปีที่แล้ว

    Third time I randomly came across this nutty channel... Had to subscribe! Awesome job, mate!!!!!

  • @lucysann5833
    @lucysann5833 4 ปีที่แล้ว

    Maaaaan, your WebM converter is crazy !!!! thanks a lot for all your videos and stuff ! you're the boss !

  • @f2bacon
    @f2bacon 4 ปีที่แล้ว +14

    i spent around 4 hours keyframing startpoints and endpoints in after effects with the saber plugin to try and get a red-blue "chase" webcam border and man i really wish i saw this first. i couldve just done a solid color saber and then have a red-blue gradient rotating masked. i feel like a fool

  • @moresinislove
    @moresinislove 3 ปีที่แล้ว

    thanks for the tips, I made my very first animated outline with success and it looks like it will go great with the new scenes I'm making!

  • @ESHABAMBOO
    @ESHABAMBOO 4 ปีที่แล้ว +1

    Well explained, and very helpful can’t wait to make mine! Appreciate it nutty!

  • @chrisdomingo8787
    @chrisdomingo8787 4 ปีที่แล้ว +1

    You explain it so well - it feels so easy to follow and do.

  • @TetoLink
    @TetoLink 2 ปีที่แล้ว

    Your indication of applications has help me a lot. Thank you very much!

  • @CCLemonZ
    @CCLemonZ 4 ปีที่แล้ว +2

    shaping up to be a really good video, keep up the awesome work my man

  • @yourbeautiful8080
    @yourbeautiful8080 3 ปีที่แล้ว

    Thanks for taking the time to create this tutorial. My age is catching up with me as I found it confusing. Loved the final result. Nice work.

  • @konkonwah
    @konkonwah 3 ปีที่แล้ว +3

    i love how he's honest about loving the ad revenue

  • @systim30
    @systim30 4 ปีที่แล้ว

    Dude... you rock... seriously.
    First video i saw was talking about slobs.. and then i run i to this. Everything i was trying to do in Slobs.. but couldn't do... it's a good program for beginners and this just set me on the right path

  • @tristanfoss5004
    @tristanfoss5004 3 ปีที่แล้ว +1

    thank you, i spent a whole morning learning to make this but it looks awesome!

  • @baronblackbird1705
    @baronblackbird1705 3 ปีที่แล้ว

    Have yet to give this a shot, but I really like the video. Will certainly look towards this if my current plan fails (again). Thanks for doing most of the ground work!

  • @SE4LS
    @SE4LS 4 ปีที่แล้ว +4

    Good stuff. I'm already really familiar with After Effects, so I'll be honest and say I didn't learn much but the technique to achieve the desired effect is a good one. The main thing I got out of this vid was that webm converter. The one I've been using is kind of hit and miss when it comes to the final product, so I'll give this one a go instead! Thank you!

  • @abigailcolina9348
    @abigailcolina9348 2 ปีที่แล้ว

    Thanks a lot, I did not know about the masking part and it has opened a world of possibilities.

  • @Aodan
    @Aodan 4 ปีที่แล้ว +2

    I can't wait to do this, I love minimal overlays

  • @thraxol179
    @thraxol179 3 ปีที่แล้ว +2

    When applying set matt effect and selecting the original outline, I get a black image with no outline or gradient, However when I click play I get the rotating gradient but no outline cut out.
    Also when changing matte source from alpha to red, It give me the outline but it's got a couple red pixels around the edge of the outline

  • @GustavoOchoa-MaNuEl_Bqto
    @GustavoOchoa-MaNuEl_Bqto 3 ปีที่แล้ว

    good video, the beauty of this, is doing it by yourself, following the stuff you did, applying the colors you want, the shape you want, and the best... you made an script that convert the avi file into a webm file, that is a nice touch, much apreciate.

  • @chrismooney-singh2055
    @chrismooney-singh2055 4 ปีที่แล้ว +2

    Another good one! I have Hit Film pro and Inkscape. Gonna try it out. Thanks, Nutman.

  • @tenshichan06
    @tenshichan06 3 ปีที่แล้ว

    I cannot like this video enough. It's quite thorough yet my mind is not numb

  • @KSZero
    @KSZero 4 ปีที่แล้ว

    i just watched 3 of your videos and WHY do you only have 17.2k subs? u deserved a fckin Gold Play brother. I'm new here and I enjoyed every single content I've watched. Great job!

  • @xAmosBoss
    @xAmosBoss 2 ปีที่แล้ว

    Was very confused at the start with the controls of inkscape but then learnt after a bit thanks for the tutorial

  • @merice4427
    @merice4427 4 ปีที่แล้ว +2

    I made my overlay and create a new media source but my OBS doesn't show me my overlay, if you had some point to find what is wrong it can very help me

  • @justalfie4444
    @justalfie4444 4 ปีที่แล้ว +1

    dude!! Thansk you so godam much.your helping me so much with my streaming and i cant appreciate you enough. THANK YOU!

  • @silveyfam
    @silveyfam 4 ปีที่แล้ว +3

    Wonderful job! I feel inspired and educated.

  • @SGSavvy
    @SGSavvy 4 ปีที่แล้ว +1

    This video genuinely helped motivate me to keep content creating

  • @thevictorv
    @thevictorv 2 ปีที่แล้ว

    super great video! thanks for the fast tutorial! this was so quick and digestable, even at 2x speed!

  • @lexy3754
    @lexy3754 3 ปีที่แล้ว

    very simple. thanks for explaining the fundamentals

  • @TheRealMikeySullivan
    @TheRealMikeySullivan 3 ปีที่แล้ว

    Any advice for getting rid of "rough" edges? Maxxed the AA out but I still see lots of tearing on the edges of the image when it is animating.

  • @Otterinheaven
    @Otterinheaven 3 ปีที่แล้ว

    Dope. It feels so obvious that the first step to creating animated overlays is to create a video. Thanks :)

  • @BLuJiNX_live
    @BLuJiNX_live 3 ปีที่แล้ว

    you are amazing, finding free stuffs for us needing free

  • @LucreDenouncer
    @LucreDenouncer 3 ปีที่แล้ว +2

    4:32 that's actually the slow way to do that. The quicker way is to go to Edit > Resize Page to Selection. The quickest way is to just press Shift+Ctrl+R.
    Also, the latest version of Inkscape has a dark mode (thank goodness).

  • @gabrielchann
    @gabrielchann 3 ปีที่แล้ว

    Thank you for sharing your artwork. This is a really good tutorial.

  • @midlifecrisisgamingtech5462
    @midlifecrisisgamingtech5462 3 ปีที่แล้ว

    I subbed cause you put alot of effort in your video and i only realise this after i myself tried to make videos on youtube.. keep up the good work

  • @umeisaurusrex
    @umeisaurusrex 3 ปีที่แล้ว

    Thanks so much for the easy-to-follow guide :D !

  • @banity6990
    @banity6990 2 ปีที่แล้ว +1

    Ive followed this completely but I keep having trouble with the set matte part. It doesn't cut out my border after I set the matte source. Can anyone help?

  • @oplixity
    @oplixity 3 ปีที่แล้ว

    The circle one is really sick

  • @telsnt
    @telsnt 3 ปีที่แล้ว

    This video is what I'm looking for in moths! I'm making animated overlays in Adobe Animate. It exports massive video files with alpha channel, in .mov format. Never knew how to reduce this files. The WebM Converter of NGON was the definitive solution! And you show me a great free alternative to Adobe Animate, he HitFilm. Two shots in a single tutorial, thank you so much! You have a new subscriber.

  • @edwardsimongray4877
    @edwardsimongray4877 2 ปีที่แล้ว

    Thanks for the great video! Really helped me out! But how did you get rid of the small red "border" and pixelation that sticks around in the animation?
    Edit: I did the whole process again with a 5 pixel transparent border around the actual border and now it looks way more smooth.

  • @KG-vg5bb
    @KG-vg5bb 3 ปีที่แล้ว

    Great work. Watched the video like... a billion times and made some cool animations.

  • @dravonthatcher2862
    @dravonthatcher2862 3 ปีที่แล้ว

    first video ive seen of yours, youre cool as hell and down to earth. Im using this as a webcam model lol

  • @StickDastardly
    @StickDastardly 3 ปีที่แล้ว

    Fantastic tutorial! I got stuck on applying the matte until I realized my dumbass had the new layer selected in the editor but, once I got that out of the way, I spent an hour staring at the beautiful thing I made! I'll be using this technique to make all kinds of cool stuff for my stream and my TH-cam!
    Although, I used GIMP for making the outline and mask.
    Thank you! New subscriber

  • @Mangomamii
    @Mangomamii 3 ปีที่แล้ว

    hey that uncompressed avi with alpha option doesn't show up for me. What do I choose instead?

  • @yeatesyy6280
    @yeatesyy6280 2 ปีที่แล้ว

    when i do the set matte thing my rectangle stays and thats all i can see and when i export my photo from Inkscape my background doesn't turn black like yours it stays white?

  • @MarkJosephNOng
    @MarkJosephNOng 3 ปีที่แล้ว

    BROO THANK YOU !!! I have at least achieved something for using those tips thank you again , Using those for my livestream setup soon!

  • @monkeyturds
    @monkeyturds 3 ปีที่แล้ว

    I had a similar issue with Premier for transparent backgrounds. I had to export as a quicktime mov file and it was like 50MB for a 5 second file. It has no issue running it but it would be that much less taxing if it was smaller. Excellent video!

  • @Montage614
    @Montage614 3 ปีที่แล้ว

    Hey! Great video! I tried to do this but for some reason it had a red fuzzy effect on the border of my gradient and when I saved it the quality was terrible. Do you know why this would be? Any help would be much appreciated

  • @lillysdad412
    @lillysdad412 2 ปีที่แล้ว

    I'm having trouble with exporting. I always get a black background behind my overlay. I export using the uncompressed avi with alpha, my original image has the transparent background. The black background seems to come when I make the composition shot.

  • @nathman65
    @nathman65 4 ปีที่แล้ว

    dude this video stepped my stream up to another level !!! thanks for the sweat tutorial

  • @stsarmi2047
    @stsarmi2047 3 ปีที่แล้ว +1

    Hey, what do I do if I see red lines on my animated overlay in Hitexpress? The masking isn't working like yours..

  • @badluckastro7205
    @badluckastro7205 3 ปีที่แล้ว

    very useful video, thanks man!

  • @haga2177
    @haga2177 4 ปีที่แล้ว

    How to do in after effects?
    I got stuck in the step where Set matte.
    There is no option in after effects.
    I hope you help. ❤️

  • @squirks
    @squirks 3 ปีที่แล้ว

    for me the duration was 5 seconds and the size was 1.5 gb ! wondershare uniconverter failed to compress or convert it. what should i do ?

  • @starscream8975
    @starscream8975 ปีที่แล้ว

    Thanks instructions where easy to follow but I ran into a issue where the object would not rotate when pressing play till I figured out that I need to add in the degree of the rotation then it started rotating . Now the other issue I am seeing is that it rotates fine but it looks fuzzy do you know why its like fuzzy ?

  • @JoshuaMolina
    @JoshuaMolina 4 ปีที่แล้ว

    what kind of camera are you using? I'm using my canon and I tried doing this. The mask is masking my EOS Web Utility, not the one from my window capture.

  • @carlosbatres9138
    @carlosbatres9138 4 ปีที่แล้ว

    How would II go about adding the same effect to a banner that I have as part of my stream overlay? It is located at the bottom of the screen. I would want a nice gradient running through it too but assume the same spinning rectangle method will not work. Anyone done it before that can give me some tips?

  • @UnknowingTio
    @UnknowingTio 2 ปีที่แล้ว

    thank you so much my champ, you are amazing, gotta check out your other content.

  • @miketech2
    @miketech2 3 ปีที่แล้ว

    i did it all but the border doesnt show up on screen in obs. i can doble click it and the window comes up showing the green animation. but i dont see it on the screen once i close it... it is the top layer

  • @dontrelljanuary9899
    @dontrelljanuary9899 3 ปีที่แล้ว

    Welp I subbed. Great video fam, hope to see more stuff like this

  • @UnknownOrigin_
    @UnknownOrigin_ 2 ปีที่แล้ว

    just come across youre video and its soo helpful! ive been wanting to do something like this for a while for my channel, the only problem is, im trying to log in so it gets rid of the watermark and it just sends me to the website to download it all again, is there something im doing wrong?

  • @skullboyxv2144
    @skullboyxv2144 2 ปีที่แล้ว

    my hitfilm programe doesnt have a set matte in it so what do i use?

  • @RezDK
    @RezDK 3 ปีที่แล้ว

    For some odd reason when i add my webm file to obs it shows up BUT there's a green line appearing only on the bottom and it's rlly annoying me idk why it's showing up can someone help ?

  • @croyfox
    @croyfox 4 ปีที่แล้ว +2

    Im trying to figure out how to do this with Davinci Resolve like he said we could at the begging. Anyone have a clue? Currently stuck at the animating the border

  • @NeilPho
    @NeilPho 4 ปีที่แล้ว +1

    This is great content. Thank you! You deserve more subscribers.

  • @bingusdingus5581
    @bingusdingus5581 4 ปีที่แล้ว +1

    Oh shiz i was reading captions and when i pumped up the volume i was surprised.

  • @p3achygames640
    @p3achygames640 2 ปีที่แล้ว

    Hey! love the video. I have added the filter and border for my stream but i was wondering how to get it from being a rectangle on my just chatting screen to a shape on my gameplay screen without going in and changing the filter manually on streamlabs before switching scenes? :)

  • @SpicyDisco
    @SpicyDisco 2 ปีที่แล้ว

    I feel like im learning witch craft, Learning so much from your videos

  • @Mr_Balls106
    @Mr_Balls106 3 ปีที่แล้ว

    Nice video! Thanks for being super flexible for us the viewers. You have earned my sub and like 😁

  • @MoonX58
    @MoonX58 3 ปีที่แล้ว

    Hi is there are way to soften the edges in hitfilm express, coz when i try to do the animation there are pixelated borders

  • @lorelk8782
    @lorelk8782 2 ปีที่แล้ว

    I only needed half of this video to figure out how to make the ugly black border dissappear around an animated image I drew up - thank you so much for this~

  • @kenw8
    @kenw8 4 ปีที่แล้ว

    Where did you use the exported mask? How can I reshape the video source capture (cam) to whatever shape i want?

  • @Holabella
    @Holabella ปีที่แล้ว

    no one's a better person than you lol thx for the straightforward video and humor

  • @VideoGamesNYC
    @VideoGamesNYC 3 ปีที่แล้ว

    when exporting I don't have the option for export as uncompressed avi with alpha. I'm using a mac. Any idea ?

  • @SirGlockNBawlz
    @SirGlockNBawlz 3 ปีที่แล้ว

    You're amazing I appreciate the videos you have put up!

  • @shenbud3
    @shenbud3 4 ปีที่แล้ว

    love your videos man

  • @Tonskii
    @Tonskii 3 ปีที่แล้ว

    As a newbie streamer/youtuber, i learned a lot from you. Subscribed!

  • @creatorscosmos7381
    @creatorscosmos7381 2 ปีที่แล้ว

    This is a phenomenal tutorial for a beginner like me! Thanks a lot!

  • @highlife7899
    @highlife7899 3 ปีที่แล้ว

    Dont sell urself short. Ur as good as everyone else. Great information. Thank you