【Vtuber Tutorial】✦ Let's make a Vtuber Overlay Together Using Canva + StreamElements ✦

hello and welcome to how to make your own vtuber stream overlay using canva and clip studio yeah also clip studio clip studio is not really that necessary for this tutorial it's just for final touches that you might want to do so let's get started alright so now we're here in canva so this is um canva the website for canva there's a lot of things you can do here i also make my youtube thumbnails here it's a very convenient website for layouts and like graphic design because it's very simple to use and it has a snapping feature that makes it easier to arrange things in a very symmetrical or just a nice and orderly manner so first of all you can use this video format for streams uh i'm pretty sure most people use 180 p kind of setting for their size and i i personally use that for my stream so you can probably make it bigger but for streaming usually the quality is lower for like faster faster transfer of bites or something i'm sorry if i'm getting the terms wrong so just quickly make a video make a video canvas template thingy and here you go just select this middle canvas thingy and pick a solid color to start off with we're going to focus on layouting first before we do the design elements so we're going to pick a color i'm just going to go with a blue color blue that doesn't hurt my eyes would be good and there now we have this rectangle plain very plain rectangle so next we go to the elements tab elements tab is where most things are and we're going to focus on lines and shape we're going to try and go through all of the other things later when we're designing the overlay a bit more so first it's a rectangular shape would be good you can be fancy and pick like a fancier shape or you can just go with the plain rectangle okay maybe not this one so that's like a little corner if you'd like kind of this shading look that's also okay i erased the background so we're just gonna pick i kind of like this one because of the nice little curved edges i think it's simple but very fancy so we're now we're just going to shrink it so you can as you can see there's like the curves on the corner are very big first thing to know is if you use these corners that have like um the straight line it will adjust the shape but it will not adjust the corners so it'll be very nice if you want to maintain the corners of certain vector shapes this isn't this doesn't work for all the objects but it works for vectors like these rectangles so what you're going to do is uh select the circle in the corner and use that and it will shrink the edges to make them more um small and less um less pretentious looking to make the it will help make the edges smaller and now i'm gonna go and resize it in this way i'm just gonna put it all over i think for most games the sizing is also 180p but you might want to crop it a bit more because i think for games you want to crop off some edges sometimes i don't know if you do display capture you might want to crop off like the bottom task bar of your computer it really depends on how you're going to be using your your entire layout and so now it will keep this shape for the most part if you resize it and right there it seems a bit big you kind of lose space i think this is a pretty good size if you're feeling a little lost feel free to go check out and google some other people's youtube overlays and you'll get a better idea of what you might like in your overlay and just take inspiration from those and i'm gonna keep it this dark color for now but later we're gonna turn it into green so that we can use chroma key on them but it really depends on what color if your background is green don't make your um screen also green so here we have a shape and now let's do some labels stream labels are the things in your overlay that goes new follower new subscriber or like donations and stuff so just those little stats that show up in the screen i don't know if um you might not think it's necessary i think for youtube streamers like if you're a youtube youtuber you might not need that at all so we're just gonna find one you can like maintain this kind of format and just make everything like this or you can choose a rounded square if you prefer or like something like this could also work it kind of gives the robotic vibe if you have like a robot themed feature maybe that will work for you go like white and you can change the corners like that wait they're all one by one that's kind of nice if you want to like alternate your bolts on the corner so just the same way just resizing it it will not adjust the corners very much if you use this but if you make them big and then you try to shrink it to the same size as earlier it's gonna be limited it's gonna look really clunky like a lego it's lego looking now we're just gonna resize it about like that and just resize it a bit more maybe so um the first overlay that i made using this kind of technique i kind of made the name labels too big but it really depends on you should they keep this or should they just use a plainer shape it's also rounded square if you're if you like that around this square could work it's gonna shrink it resize it something like this all right so i'm gonna use this rounded square i'm gonna use this rounded rectangular shape you can put your labels on top of the stream or below the stream so i'm gonna i think i prefer it this way and we're just gonna put four of these this is just the layouts don't think about it too much just kind of place things where you want them to be as you can see they start they align you see that the little purple lines are the snapping the all the snapping and then they leave a little margin you can kind of feel it if you try this out yourself and there you go there's like a little more space in this one i love it i think the gaps are not i'm gonna even this one maybe a bit more if it doesn't snap properly you can just use your keyboard and move the arrow the direction you want and i'm just eyeballing it right now since i'm not that technical with it so this is gonna be for um followers and this one's gonna be for subscribers it's gonna be donations and cheers uh it really depends which ones you wanna keep on the screen but for me those those four are what i keep you'll also put goals like follower goals and stuff that could work so now we're gonna label it with text you can either use text or a symbol you can use like a heart to identify the followers or a shape to identify the subscribers like um subscribers usually like stars i think so it would be like um heart star and dollar sign then for bits uh you can use like a diamond so it really depends on you though but to save space people would use symbols instead of the actual labels but we will try to do the labels today for this one i'm gonna copy and put down a shape a color for the shape these colors are not going to be final but it might be a bit difficult if you don't have your colors set up properly from the start i'm just kind of looking at which ones i want to have and since i'm just testing the layout i'm not too particular about it anyway right now it looks really small but it will be much bigger if you set it up on stream don't worry about it too much i think a little darker something like that for this so once you've set up your actual shape divisions and stuff it will easily snap to the layout which is very convenient be like that or you can just make it a full bar sometimes you won't be able to see the handles corner handles if you're not zoomed in so go ahead and zoom in i think i'm gonna switch it to this i'm gonna erase it so my tutorial is mostly gonna be just showing you what canva can do but uh in the end the graphic design details kind of are up to you you just have to like experiment with what kind of combinations you like but this uh this program reminds me of like when i used to make powerpoint presentations in school it's very easy and simple to use when you're making your own overlay without a proper source of graphic graphics and stuff and you have to make everything as you go it might get a little confusing so i i do think that you being able to use pre-made vectors and shapes make it a lot easier for you to go ahead and test out different layouts and experiment which ones you like the most and i like i like that convenience in canberra so now we're gonna make a text here this will be the label so we're gonna do you follow oh i like this font i think it's very childlike very cute and then here we go i'm just gonna shrink it and put it there it's a bit smaller maybe and then it will center you can see the blue line up you can see the purple line appearing here when you snap it and i think that's the convenience you know you don't have to like eyeball everything sometimes the shapes will immediately allow you to snap things so i'm just gonna go speed it up here and just like do all of the labels for a bit there we go we have all the labels done and you can just put the names here at the bottom later so the things that will update and stuff i use stream elements you can also use i think streamlabs has also labels that update automatically as you stream so that will just be left blank and so here we have pretty plain layout all together and then we're gonna put a little shape for chat uh we're just gonna use a shape for now i use a another rectangle you know we're not we won't get sick of the rectangles they're just uh since we're gonna focus on the layout first there's going to be a lot of this and so now that you got everything kind of set up i think we should put the word for chat just copy this and drag it here it's quite um it's a lot easier to put text if you're just copying and pasting this way um the fonts and the settings and the colors will be already automatically there chat there you go just drag it to the corner tada and then you can put like a line a dividing line temporarily hold shift to keep the line straight just go here and drag it right there and then you can change the then you can change the style of it like the little dotted line and then the weight that's the convenience of the vector shapes and and objects in this uh program and you can go to your uh uploads you can upload your own assets here uh please don't mind all of the random things i have here we're just gonna put these two um at this point once you've gotten the layout done i recommend putting a png of your vtuber and or your logo you know whichever one you have and just select that and put it on top see if top cheer is going over it there's a lot of layering to be done when you're doing the overlay and just bring this to the front this way it'll be in front and this is um just this png this is just a png of my current model it will help me pull um some colors that are complementary and kind of just see what it will look like if it's on stream because you don't know if you make an overlay without considering your model or your logo sometimes when you put everything together it will just clash and then you'll have to like readjust everything it's just a lot of extra work so here's the logo right i see a lot of people putting their logo here and then putting chat below it like my logo is a bit big make it smaller put it in the upper corner and we can remove the chat people do know it's chat but labeling chat also works so here we have there and yeah doesn't seem very it seems very simple now i'm gonna crop the extra um negative space on my png so i'm gonna uh if you wanna layer it you might wanna remove the logo after you're done with your overlay so that you can put the chat underneath it or you can just like set up the chat here at the bottom of it i think some people put their youtubers lower as well let's do that i've been doing this recently on my stream so it doesn't block everything it's a bigger youtuber so there's more space to show stuff and there we go uh so you can't really do an easy outline if you want to follow this outline kind of look for everything you might want to select this and select the color of the border and just send it to the back send to back and there you can see it kind of zoom in it's one way to do it some shapes already have a border so maybe take that into consideration when you're designing which ones work better for you yeah now that we're done with the layout it's time to go do other things so i'm gonna prop these a bit more now that i'm looking at it there's a lot of empty space at the bottom and considering that you can put more things if you just readjust your entire setup a bit more group it once you're done with your design just group it once you're done with this kind of thing you just group it and you can just move them all together a little um less hassle once you've gotten that done and see you can just move it around wherever you want it to be maybe you want to put this here like attach it to the corner that would work now that you're done with the layout it's time to add a little add a little personality it's time to personalize this point you can like look up things that you like so i made it a little simple i just put the layout stuff but it's not final in the overlay that i made previously in canva i found this back the background of bamboos but let's think of something else it's not bamboo then what maybe trees so maybe a tree theme these are very cute you can adjust them to fit your colors and you can put them in the corner like that so it's nice you found something and then if you click something you like you can also see for other things that are similar to that in theme so maybe like flowers or [Music] mushrooms maybe pumpkins or leaves if you want leaves in your background you can put them in the background um i recommend just like selecting a bunch of things you like and just leaving them all here it's gonna get really cluttered but um it'll be easier to see whether or not they fit your theme once you've already moved it in um so here's a lot more trees there's a lot more alternating trees but why there's so many of the same kind of trees and you can see the colors do not match using a palette or like a general color scheme might be easier i kind of like the flowers but i want to try the trees as well so here we're just going to switch out the palettes as we go okay so maybe i want pink trees pink yellow and blue and purple do work well but i'm gonna keep them all pastely so it doesn't clash and my background is rather cool toned so i would like to maintain that entire cool tone vibe i think the yellow would work and then making this red a purple to work better so i think with making overlay sometimes it's all about moving things around just to see if they fit which is stressful and it's in its own way i'm starting to think i don't like the border but the border does help because sometimes you don't know whether your game is going to be like a bright screen or a dark screen so having a little corner on your frame for the screen is very helpful and i don't think i like the trees so now i've finalized that i will use this flower pattern at the bottom of my screen ah no why did i make a new one yep so here's the flowers we're gonna shrink it a bit more increase the size and at this point you can like remove the bee tuber for a bit or like move it to the corner or you cannot see it and kind of just look at it and i feel like this is a very delicate kind of style and it's flashing with everything else so yeah now that you have the layout you can just switch out these things that i put earlier you can put the logo here in the corner we can use some notes notepad notes so here's a little bit of a notepad thingy if you prefer no won't work i'm thinking of something longer to use for chat keep in mind that some shapes and objects don't have editable colors like this one it should be a png that would not work for us what we're looking for is something that we can change the colors to so that would be like a vector shape so i'm gonna have to give up on anything that has a pro label on it until i get pro so i'm assuming that if you're watching tutorial you might want to save a bit more and like not um commissioned an overlay elsewhere i'm just gonna go act like i'm shopping and just grab a bunch of things that i like i wish there was a way to filter the pro objects and the ones that are not pro but i think um i think i think canva is trying to tempt us into getting pro so they like put all of the good things in with the things that are free you know just alternating them so you get to see the extensive catalog that they have so i like this but i don't think i wanna keep it so i'm gonna save it if you have things that you like but you're not sure if you wanna keep to experiment more you can just put them in the other in another slide and this way you kind of get to keep them and just you know see other things first and then come back uh it's a bit harder to see now so i'm just gonna change this middle part to green like a green screen green so it um i know which part i'm gonna delete later but it looks like a blackboard we're just gonna go ahead and um pick a label we'll put some text on it something like at um at keraleo you can put your handle here and the hashtag maybe your art tag or your live tag and then resize it a bit more and just group them and then grouping is very helpful if you want to rotate something everything is rotated at the same time so here's a little note uh i feel like now this is clashing but it should be an easy fix we're just gonna look for some tape i'm gonna select these we're gonna go to the other i feel like for stream labels sometimes it gets confusing because they're much smaller so if you wanna go design them without bothering with everything else you might have to go to another slide just to see them better so we're gonna put some trial text here so for these kinds of designs you might not have to put it in a separate layer to see like how the text would look but for this one you might want to put like trial name so you can see how that would work with this kind of tape design but white maybe we're going to copy this top area put it in the middle something like that would be better than the box but this does have a lot more space because the tape is unadjustable so if the tape is unadjustable since it's symmetrical i'm just gonna go expand it by putting two of the same object together let's just put it in the back there you go it's a longer tape now because it's two tapes attached to each other this is a since um there's no outer lines it's not very you're just gonna have to like you have to be creative with the methods you use to make new shapes and stuff like this circle is too plain so yeah i feel like this is a bit more artistic than these these just look like little window tabs alright so i had to ungroup them so i can group them again i select everything and group them oh before you group them you should remove the names inside just enroll them removing the names then grouping it again i almost forgot and now we're gonna delete this no and we're gonna delete the extra things as well no here we go very nice very cute i think i'm gonna put them on top since um probably more space there and i think if you're a youtuber you tend to have like random things added here if you want stream avatars and you kind of want that space at the bottom it'd be very ideal to kind of make it this way so there's like space here for avatars or i don't know a table or if you have like collab guests the space in the bottom is also very helpful deciding an overlay really relies on you thinking about uh things like that like what is necessary and what they need to do for the background it seems pretty simple but making a gradient here in canvas a little weirder but i feel like the realistic background is truly clash with like the clip art look so yeah we're gonna export it like this as is i think a notepad has too much space i don't know might wanna might wanna add another i'm gonna put my live just download it it's a quick download and download then done so here's i called it's automatically called new follower because that was the first text that i put um don't mind that doesn't matter that much i'm gonna go here to quick studio ah and now it's time to use the handy dandy magic wand tool this might be a bit difficult if um the objects you chose were a bit more difficult to like select in that case um maybe you don't you don't have to do this last step it's just a little extra step might be a bit more annoying to do but i just want to add that like finishing touch to give it more pizzazz i'm gonna copy it ctrl c command c just paste it so um get some patterns like these like ah thin stripe it's so gigantic these are kind of repeating patterns that are also vector-ish so if you want like lines like that you can manually draw the lines yourself but you can also just get a pattern like this and once you've got the shape right just flip it and um i would flatten or rasterize this image this way i can recolor it and then do this opacity lock there we go so here's the other overlay i made and i like the note that i made here and i like the chat is big and readable and i use symbols instead of the other thing so in this one the if you can see the lyrics it is how it originally looked very bland when it came from the when it came from canva the background is very bland so i put a multiply layer on it and i put this gradient and then i put an overlay on top of it to kind of soften the colors a bit and a little soft light on top to add that blue hue on top it's just a very simple look and i ended up using it as my background as well so this this is how it turns out is the background i'm currently using for my um little camera area in the side it's very simple very nice and very quick and so i put um i kind of forgot to put like a a border inside if you happen to not have it like like this what you can do is select here and just erase the green part and once you've erased the green you can go and do the thing we used to do for the logo tutorial and here you go and you can just extend it a bit here i'm gonna make it red so you can see the extension of it you can put that and you select the color you might prefer for the border the darker purple that i used works very well and there and this way you can just use this as is without on the green i prefer the green because i'm extra like that i put the green just because you know just in case i want an animator or something but i don't know i didn't think it through very much if you want you can just export as a png like this and just use it as is and then this way um your overlay should look something like uh like this after there's the chat and you can see how gigantic everything is because i didn't size them very well the first time i made the overlay but i think it's also quite helpful in case you have some viewers who watch you on mobile now they can see everything because it's too big i am so small compared to this overlay and uh we can look at the overlay that we did export i can like switch it out with that there we go ah it's also very cute and everything's kind of smaller i think the frame is a bit bigger and my logo is already there so i don't have to have this outside logo and this is how the overlay that we did in the tutorial looks um i think everything is still too big but it's not bad at least i'm pretty sure people who you who um watch my stream on mobile will be able to see my links you know that's important and you can see the problem if there's no border here you can use the technique i showed you earlier to put a little border outside your white vectors with no outline and i hope this tutorial helped i'm sorry if it's a bit messy it's actually my second time recording it but i hope it was still very informative if you have any more questions or things that i missed um go ahead and put it down in the comment section below and i'll try to answer it as best as i can and after this i'm gonna have a little clip of something i recorded for the stream elements tutorial all right so we're gonna quickly tackle how to do stream elements i'm pretty sure this video is already very very long and i hope if you had enough patience to like last this long i will work hard to make you understand how to use stream elements so after you make an account okay there's like a dashboard and stuff those are not that important we're gonna just talk about overlays today so we're gonna do my overlays and um alright so i'm gonna make a new black overlay so it's a 180p we'll go ahead with that and we're gonna name the overlay um tutorial overlay okay so first things first go ahead and upload the image of your overlay so we go to static and image and set image here and upload your overlay right there i'm gonna go and drag my overlay here from my downloads folder once you drag your file into stream elements it should look like this and just go ahead and click upload and it should start loading the image and now you selected submit i'm going to type the size it's going to be 1920 and 180 there you go that should cover the full screen and then afterwards you should lock this if you want you can rename it let's rename it overlay and now you've got that what we're gonna do in the stream element tutorial is just give you the basics so follower subscriber top donation top cheer and chat and also the alerts so the fastest to do is alerts they're not really gonna go through customization of alerts so just make an alert boxes should work for every single alert let's just put them there i think the default stream elements alerts are very cool compared to the zombie thingy from streamlabs and there's a lot of variety so we're gonna do like um emulate so you can see just what we have a follower event would have this there's the subscribe resubscribe for 13 months 31 months if you don't have anything to switch for them yet they they work really fine as is so that's it this is your stream box stream alerts box you can put it anywhere you think won't bother the stream or you want to put it in the middle that's okay too and uh the next thing that i would put something fast would be tap again i like this but it's not really necessary for everyone kappa again just kind of shows like um a cool pop-out thingy top against a cool effect i don't know if everyone would like it but i really like it it kind of hypes up the stream a bit so if you do this there will be like emotes flying all over the place these are all of my emotes even the old ones and that's a lot you can adjust how many um emotes you want to do or how many the duration is and stuff like that it's just a little simple effect that'll make your stream a lot cooler right so now we're gonna do the chat next easiest thing would be to set up chat you put chat here so chat is just this black box for now so you have to like customize it and put it like in the area try to keep it where the margins are and there we go and what i do is i change the theme to custom this will make it transparent and then we can just go ahead and change the text so i think the time consuming part in using stream elements is looking for font but that just kind of for anything really is to find that perfect font that doesn't clash with any of your themes or it doesn't look bad with your overlay so let's pick after for now i'm not really too particular because i don't think i'll be using this overlay just make it full opacity this will make it transparent so go full opacity and then just go up here and it's nice to me or um you can't really do an eye drop so you might have to guess the color or go to canva and pick the color code there but i'm just gonna guess a bit that works for me let's see about the sizing i don't know what size this automatically is maybe 13. i'm going to save it then we're going to test a checklist a check message do a test message on obs so type test there we go it's so tiny 13 is super tiny so we're gonna raise it a bit maybe 20 would be good save it and then go test again it's a little bit bit better but it's um kind of too thin you can do bold and this will like affect your chat settings so go guess three all right i don't think uh it did make the text thicker so now that that's done you have chat and now it's time to do this um your labels so they are really called labels here so we're gonna do um latest follower and then what else latest subscriber and um let's see for tips latest temporaries and tips if you want you can do like top tipper i think for mine it's actually just set as a reason donation but i don't know i see a lot of people do top tipper and top cheerer here we go so oh no everything says no data oops so if you don't have any i'll be no data i don't know if that's proper but maybe in this current session i think it's per session or something here you can change the all-time top tipper or last 30 days so i'm gonna do it last 30 days which makes sense to me it's um is this like a monthly thing everything resets anyway so yeah now here you have the thing and they say latest follower and stuff because you can't just leave it as is with like the labels already there but since we already made it for the overlay so i'm gonna go remove that moving it to just like leave the name and then you'll just have to like organize it yourself and try not to switch things up so it's a really long thing just put name and currency amount and also for this one just remove that entire label and here we go so here is the cheer and here is the donation all right so first thing you should do is probably adjust the margin and set it to center put the position so that it always is in the center of the widget so here put it in center and just do that for everything because some people have long names if you don't have the box figure it's gonna crop the name so for example the name is like three words all at once it's like ipsum the lore if it's like really tiny you're not gonna be able to maintain everything so if you if you don't have it like size properly it could like go out or get cropped i'm not sure which effect is worse i'm gonna copy this real quick and go to each of these and just paste it enter and now we go back remove all of the text shadows text shadow remove text shadow remove text shadow remove and um we can change the font so just pick a nice font here's pangolin oh pangolin angle engelin looks similar to the other fonts that i already have i forgot about it pangolin we're just gonna do pangolin for everything so let me teach you how to put it on stream here's your overlay right and what you're going to want to do is go to your sources i just took out my sources so you can see it better my sources are a mess please do not judge so here is the stream overlay basic which is the stream overlay that i used before so it's yes you can see this is for the other um the other overlay that i have so i'm just gonna show you how to use it you're gonna wanna right click that go to properties and this this little window should pop up uh i'm sorry it's cropping so badly but this window should pop up and it will show you like what the overlay browser source looks like so this is a browser source file by the way if you do not know you can add it you can go to sources and add it here and it will be under browser file browser and it will be here and it will click its browser source and that's where you put your um your new setup it'll turn out like this so these are mostly my overlays sound alerts and some of the um react pngs for when i do collabs so that's about it and we're just going to use the ones i already have so it's easy because you have to size it don't forget to resize the width and the height according to how big your overlay is which is 920 by 180 if you follow this tutorial so now we head back to stream elements and over here you're going to want to click this overlay url it's the link thingy and then head back to obs and just switch the links here again and once you switch the links when you go to your stream you can see that the text is already here and let's do some test chat check oh you can't see it it's behind my neck all right there you go that's what that's gonna look like isn't it very good uh so i think it looks really good that's this is a pretty clean overlay there might be a little less screen size but you can always um trial an error when you're working on it and oh i kind of forgot that the overlay has a green window all right we have to go back uh so if you leave your overlay here uh it's fine if you put your overlay in um in your browser source the image will appear as is and another one way to do it is to just put a chroma key on your stream to like turn this entire part transparent but i don't recommend it because i think one of the alerts is green so it might turn invisible so what you should just do is just erase it and just use the image on obs and just leave it separate from the browser source so this is just a guide to kind of allow you to find where all of the sections are i like to place it properly when you have it against your png of your overlay so you're just going to want to erase this so it's going to be invisible it's going to be right there but it should be fine once you save it and now we're back at stream there you go it's transparent and you can see your display capture and your mouse and things that appear and let's do some um emulation so you can see the alerts while on stream it should look something like this it's like a double now let me just go into that so no there's too many emotes and just play around with the settings and stream elements i know it's really intimidating compared to streamlabs which has everything on the program but once you know all of the basic stuff about using stream elements it's not as difficult and as intimidating anymore so yeah i hope you found this bonus tutorial helpful and i hope you have fun making your overlay please tell me how the experience was down in the comments below so that's about it thank you for watching um please like comment subscribe and click the notification bell um down below [Music] bye bye titan

Channel: It’s Just Kaeril

Views: 4,759

Keywords: vtuber, live2d

Id: UjRhthS8fN8

Length: 43min 42sec (2622 seconds)

Published: Thu Nov 04 2021