SearchThisVideo: Twitch Stream: PART 1 – RPG Overlay Tutorial for Online Games

Copy Help
  • Public/Private: Change the visibility of this video on your My Videos tab
  • Save/Unsave: Save/Unsave this video to/from your Saved Videos tab
  • Copy: Copy this video link to your system clipboard
  • Email: Copy this video link to your default email application
  • Remove: Remove this video from your My Videos or Saved Videos tab
Watch at: 00:00 / 00:00:20[Music]youWatch at: 00:20 / 00:40hello everyone and I am actually goingto be going over my my steps in creatingoverlays for really fun imagery that youcan have when you're using xsplit or OBSto host your online games so before weWatch at: 00:40 / 01:00start here's how I do my online gamesI'll either use roll20 or fantasygrounds for game board or a die roller Ialso use Zoomer Skype for video I do notuse Google Hangouts that it's toounreliable too unpredictable and I'vehad problems with it in the past so IWatch at: 01:00 / 01:20just avoid that altogether and I'm gonnashow you some really cool tricks to makesome overlays so that when you're doingyour games live or when you're prerecording them for YouTube they lookslick now some of you out there haveseen my overlays before you've seen themon my youtube channel when you'vewatched my stars without number gamethat's a really popular overlay some ofWatch at: 01:20 / 01:40the other ones but since we're doingDungeons and Dragons I try not to go forthe really crazy unique overlays insteadI try to go for something simple[Music]Watch at: 01:40 / 02:00Watch at: 02:00 / 02:20so I'm gonna be running Dungeons &Dragons and I'm gonna do the cursorWatch at: 02:20 / 02:40estrade and I've purchased the booksthrough fantasy grounds so I have a lotof the art work that has come with itthat I think is really unique and I'mgonna go ahead and make this so thefirst thing you need to realize is I doall of my games at 1080p which meansresolutions gonna be 1920 by 1080 so I'mWatch at: 02:40 / 03:00gonna go ahead and click new and I'mgonna call this main main page actuallyyou know what I'm gonna call it introthis will be the page that I fade to andthen fade to my game this is when I tellmy players okay guys we're getting readyto be live in three two one and thenWatch at: 03:00 / 03:20I'll transition to my main page it'simportant to think of this stuff whenyou're making your overlays just becauseI find it's easier to make sure that youhave everything so I've got my 1920 by1080 I'm gonna do this again only I'mWatch at: 03:20 / 03:40gonna call this webcam frame okay thenI'm gonna do it again and I'm gonna callthis main so this is when the charactersare role-playing and they're not reallyrolling or there's no battle mat they'reWatch at: 03:40 / 04:00just talking there we gothen I'm gonna make another one and I'mgonna call it roll play rolling so Idon't need a battle map for this onethis is just gonna be having all thewebcams and then a section for the dieWatch at: 04:00 / 04:20roller and then I'm gonna do it oncemore combat rolling there we goso there's gonna be four differentscenes that I'm gonna use a no BS orxsplit I'm gonna have those webcamscenes ready but for the introduction IWatch at: 04:20 / 04:40want to choose a cursive straw picturefor the web cream camframe you'll understand why this isimportant main you know you'll see whatI have plans for that so the first thingI'm gonna do is what do I want on myintroduction page so I definitely want apicture and I found a really cool cursedWatch at: 04:40 / 05:00estrade picture that I intend on usingChris Estrada overlaid tutorial BAM Ilove this picturenow with you can select all copyand paste into your window withPhotoshop you can go anywhere on theWatch at: 05:00 / 05:20image with your cursor and press shiftand alt and grab it and then drag itover to the introduction tab and drop itthanks for the follow master flowersjohn poland this son of a hereokay I love this man so much he brings alot of flavor to the games that I'vebeen in even if he is a kill stealingWatch at: 05:20 / 05:40Dragon Slayer who puts his party tosleep so that he can ride the dragonlike Falkor it crazy okay there might bea lot of bitterness to that John but I'mgonna tell you that was one of the mostcrazy amazing things I've ever seenjust this halfling going yeah on top ofthis green dragon it was ridiculous ifWatch at: 05:40 / 06:00you guys haven't seen that go to theYouTube channel dark vision and look upthe minds of fin delver game because itwas actually one of the most fantasticthings I've ever seenso here's my curse destroyed picturethis is a great introduction picture butit's too small so again to keep theproportions and to keep it centered I'mgonna hit shift and alt and I'm justWatch at: 06:00 / 06:20gonna expand it and see if it makes itlook - poopy by doing so not bad what Ilove about DDR is you can actuallystretch D&D pictures out and in and youdon't really have to worry about loss ofquality too much it doesn't look betterup no does it look better down all theWatch at: 06:20 / 06:40way that's centered how about down nowthere's really I'd rather Center itthere's nothing too unique about the topor bottom now this right here is anamazing picture of Castle RavenloftRavens andWatch at: 06:40 / 07:00the sexy evil man himself so I'm notdone with this intro page though Ireally want people to know it'sChristmas Tron so I'm gonna open this upand for those of you who are in my tokentutorial I made my webcam smaller sothat you can see the tools that I'musing I'm gonna go kirsov straudWatch at: 07:00 / 07:20logo.png Oh lookit there's a bunch ofthem um oh I kind of like the one withthe white font here so let's click onthis guy there it is right there I'mgonna right click save image as and I'mWatch at: 07:20 / 07:40gonna put it into the cursed estradeoverlay tutorial as curse of straud logoI use programing casing where I caseevery word and I don't worry aboutspaces or underscores I just think itWatch at: 07:40 / 08:00makes it cleaner you can name it howeveryou want ultimately it just depends onwhat your organizational style is and ifyou see me go through my folders you cantell that I have the organization'sstyle of a madman I also want a Dungeons& Dragons logo.png there we go who areWatch at: 08:00 / 08:20kind of like this one that one is not aPNG it lied to me lucky for you guys Ialready saved one so I'm gonna go intopictures here and I've got it rightthere I'm gonna copy it go onto myWatch at: 08:20 / 08:40desktop go to the cursor strata overlaytutorial and paste it because I like tokeep all of my materials together nowthe other thing that I have that I useis my logo for my channel and IWatch at: 08:40 / 09:00definitely encourage you guys use yourlogo just because it helps with brandingso people can go oh this is a yo ofgoats video it's very handy and I'vemade a coupleP&C this is this is where myorganization skills need work because IWatch at: 09:00 / 09:20am not finding themhey this isn't awkward at all everybodyha ha ha ha haan interesting fact I actually want toopen this this was one of the originaloverlays I made and I hated it so much Irealized that making them simpler withWatch at: 09:20 / 09:40less fancy oh I've got to use paper andparchment it just works better wow I amnot finding my logo so I'm gonna skipthat because that's really not importantand I know I have it somewhere aroundhere like there's some logos thereWatch at: 09:40 / 10:00definitely find your logo and use it ifyou can or if you're like me oh therethey are they're black I don't know whyit's like thatthank you windows copy and then I'mgonna pop that in my curser estradefolder as well there we go so now we'regonna go back to our Photoshop documentWatch at: 10:00 / 10:20file and open and cursed estrade this isgonna be the biggest one so I'm gonnashift alt drag this to my introductionpane and drop it there we go we've gotour beautiful cursive strawed logo I'mgoing to plant it right here off to theWatch at: 10:20 / 10:40side but I'm gonna make it a littlebigger there we gonow one thing you could do is you canadd some effects to it you could do adrop shadow I think for this one thedrop shadow kind of takes away from theimage you could do an outer glow andreally make a pop you could change theWatch at: 10:40 / 11:00color of the glow so if you want it redyou know if you want it to be a darkpurple even though they can't really seethe glow it's there as a nice effect Iprefer white and for this one I'mactually just gonna make the glow sosmall that it's barely noticeable but Iadds some differentiation between theWatch at: 11:00 / 11:20logo and the backdrop so it doesn't justbleed in the other thing that I'm goingto do is a lottimes when people click on your channelto watch a video after your little intropiece they're gonna want to have itcatch their eyes immediately and they'regonna make a judgement on your videowithin the first 10 seconds so if theyWatch at: 11:20 / 11:40see this photo and they're like wowthat's really nice I like that thenthat's good newssome of them I've actually been askedwhat game are you guys playing and a lotof us are like well duh it's Dungeons &Dragons it's Christmas tried do rememberthat not everybody plays Dungeons &Dragons so I'm going to take this P&Glogo that I have of Dungeons & DragonsWatch at: 11:40 / 12:00I'm going to shrink it down and I'mgonna put it on the bottom here in thecorner just something that they know I'mplaying Dungeons & Dragonsyou could add a glow effect on this tooI'm not going to and I'll show you why Ijust think it's too much too much glowyou can if that's your personalpreference but I want cursive straw toWatch at: 12:00 / 12:20pop and then I'm gonna open up my logowhich for some reason even though itsays wish without shadow it has a shadowthat's fine and shrink it down and I'mgonna pop that to where it's lined upWatch at: 12:20 / 12:40pretty well you know what I hate that Ihate that it has a shadow do I reallyhave both of them with shadows or isthere one that says without shadow andI'm just blind clutter as you can see Iactually have a folder named clutter andWatch at: 12:40 / 13:00clearly it's not clutter cuz I use itall the time no shadow okay that's theone I wantwell if that's case I'm gonna close thatdelete that I don't want a shadow Ithink it just takes away from the beautyof our little intro page here stillWatch at: 13:00 / 13:20legible I can see my little d20 wax sealand I'm gonna move it up there we goagain if we add we can add natural glowto it if you want it kind of helps topop out for me it just clutters it andI'm okay with that I'm okay with the wayWatch at: 13:20 / 13:40that it looksmaybe if you want you could pop this inthe corner over here you could move theDungeons & Dragons up to the top youknow however you want to do it I thinkthat just looks ugly in fact you knowwhat I don't even like my logo on therebecause it really makes it cluttered soWatch at: 13:40 / 14:00we'll just pop this in the lower cornerthere we go we've got our introductionpage we're gonna file export export as Ialways export as PNG even even if itdoesn't have transparency just becauseI'm happier with that and we'll go aheadand plop it in here now one thing IWatch at: 14:00 / 14:20always tell people save your document orsave your Photoshop file or yourfile however you're saving it to thesame folder because if you're looking atthe layout and you realize you know whatI want to change out the background or IWatch at: 14:20 / 14:40don't really like the way that looks youcan save it bingo so we're done with theintroduction for the time being I'mgonna close out of it now on my nextdocument I've got webcam frame and theone thing I the reason why I put webcamframe in is just so that I can get agood 1980 and 1920 by 1080 I chooseWatch at: 14:40 / 15:00bright green and I'm basically gonnafill this shape with bright green I'mgonna go to file export export as PNGexport all put it into the same fileWatch at: 15:00 / 15:20folderI'm not gonna save this there's no pointbecause this is only temporary now thisis where my particular design gets alittle different than most people I'mgoing to open up word not everybody hasword but everybody's got somethingWatch at: 15:20 / 15:40that's similar to word but you'll seewhy I use it so I'm gonna get this blankclose this out I'll feed these fileslater cuz I'm terrible at that and I'mgonna go to insert picturesand where is oh that's right it's in thedesktop Chris trot overlay and I'm gonnaWatch at: 15:40 / 16:00insert this webcam remember the onlyreason why I have this image in thefirst place is as a way to shape whatI'm designing using the 1920 by 1080formats so that sixteen by nine webcamsfit right in let's add a border oh Ilike that already you could play aroundWatch at: 16:00 / 16:19with the picture borders you couldchange the effects that's a thickerborder I don't like that I like this oneso there you go you can also change theweight you know if you want thickerlines thinner lines I was a fan of theway it was I'm just gonna leave it thereWatch at: 16:19 / 16:40we go now what I envision is a goodpicture border or webcam border is wewant some place to put a name down hereat the bottom some shape or whatever andthen I like to put the stats on theright hand or left hand side I do theright hand normally so I'm gonna go toWatch at: 16:40 / 17:00insert and I'm gonna go to shapes andwe're gonna check out some of these coolshapes some of the flow shirt shapes areactually really awesome here they areright hereyou could choose different shapes but Ithink what I'm gonna do is I'm going todo a square just a simple rectangle I'mWatch at: 17:00 / 17:20gonna start it actually you know what Iknow what I'm gonna do I have an ideaand it's gonna look beautiful I'm gonnado a triangle whenever you draw atriangle hold shift it'll make it anequal triangle and there we go I'm gonnaWatch at: 17:20 / 17:40rotate it no the triangle by holdingshift I'm gonna rotate it so that it'sflat like that and then I'm gonna bringit down see how that little green arrowpopped up that's showing me that I'm onthe edge of my webcam it needs to comedown a little bit more there we go underWatch at: 17:40 / 18:00format I'm gonna change the shape fillto blackshape outline to black there we go let'scopy this and paste it and I'm gonna putit on the other side rotating it andbasically snap it into the same spot heWatch at: 18:00 / 18:20needs to go back just a little bit nowyou don't have to worry about lining itup quite yet then I'm gonna go to insertand I'm gonna go shapes pick therectangle and I want to shape oopsWatch at: 18:20 / 18:40I want the rectangle don't hold shiftcuz it'll draw a square like that reallyquick do the shape fill shape outlinethere we go it needs to go upthat's pretty flush and it also needs togo a little wider down it's gonna takeWatch at: 18:40 / 19:00some playing around with but I thinkthat's pretty good now what we're gonnado is we're going to copy this triangleso you can go control C control Vcontrol C copy's control V paste do nothit ctrl P because that'll try to printWatch at: 19:00 / 19:20it and we're gonna rotate it to bevertical just like that I'm gonna put itup here at the top see how that greenair that green line is showing me thatit is lined up with the top there we goI need to go over a little morevoila maybe up or no over one more thereWatch at: 19:20 / 19:40so it's it's all flush but this time I'mgonna go into the formatting tool andI'm gonna make the shape fill white andI'm gonna add a little more definitionto this I like that there we goWatch at: 19:40 / 20:00actually you know what I don't like thatI lied I don't want a border I'm so badthere we go I'm just gonna do whiteokay so there we are we have that nowI'm gonna hit ctrl + V to paste this I'mgonna bring it down I'm gonna rotate itWatch at: 20:00 / 20:20and I'm gonna bring it down until it'sflush with that then I'm gonna click onthis and go bring forward and we'regonna draw a rectangle now we're gonnaWatch at: 20:20 / 20:40go insert shapes rectangle we go I justclicked anywhere it made a very basicshape I can kind of see where that whiteis ending for now I will put on a borderjust so I can see what I'm doing I thinkthat's a good idea you'll see there's aWatch at: 20:40 / 21:00method to my madness of a thought ofthis design just kind of like sittingthere we areone more there now it's flush I'm gonnaWatch at: 21:00 / 21:20lower this make sure it's flush nopeneeds to go out a little more out onemore maybe one more no not three oneall's I did was make it the same exactWatch at: 21:20 / 21:40there we gothat's good enough and then I'm gonnadraw it down to attach to this othertriangle at the bottom and I'm gonnamake the shape fill white now for thistriangle I am gonna add an outline realquick just so I can make sure it's alllined upWatch at: 21:40 / 22:00and there we are now what's really neatabout this is I'm gonna drag this down alittle bit just enough to swallow thatthere we go and then I'm gonna drag thisup a little bit again enough to swallowWatch at: 22:00 / 22:20that that border there here we are I'mgonna turn off the outline for therectangle no outline and then we'regonna draw some oh I need to expand thisa little bit I need to shrink it thereWatch at: 22:20 / 22:40we go then I'm gonna go to insert shapeline I'm gonna come up here and do aline down to there change the weight soWatch at: 22:40 / 23:00shape outlines gonna be black you couldchange the weight right here to make ita little thicker I kind of want it tomatch the the weight of the triangleswhich looks like two and a quarter andWatch at: 23:00 / 23:20then I'll drag it over to get rid ofthat other there we goso it's not perfect but we don't need itto be right now we're just doing anoutline go back to insert shapes lineWatch at: 23:20 / 23:40actually there is an easier way I'mactually going to grab this line copypaste and smack it on the end here itdoesn't have to be perfect I'm justbasically theory crafting right now andWatch at: 23:40 / 24:00trying to get everything establishedplaying around with the layout okay youknow what I think this would look betterif this expanded out to say hereWatch at: 24:00 / 24:20I'm gonna expand this one outWatch at: 24:20 / 24:40this triangle needs to go up a littlebit I'm very picky so if it seems likeI'm just I can't make up my mind you areabsolutely correctI I can't make up my mind and then I'mgonna draw this triangle down or thisWatch at: 24:40 / 25:00line that's not a triangle I need to goback to math and then I'm gonna bringthis up to the front and you could dothat by right clicking and go bring tofront right clicking bring to front andwhen I did that of course the rectanglesslid a little bit okayWatch at: 25:00 / 25:20it's a little choppy but here's my ideaI have my webcam frame the name is gonnago here the name of the character andthe name of the player and I'm gonna putthe stats right here where it'simportant and everybody can see them Ithink this is good so next thing I'mgonna do is file export change file typeWatch at: 25:20 / 25:40oh no there's an easier way to fileprint where it says Adobe PDF you coulddo print a file oh no that's right I amnot used to this new version save asWatch at: 25:40 / 26:00there it is that's right they put it inthis one I will go to desktop and I'mnot gonna save it as a Word document I'mactually going to save it as an imagemmm there's a way they do it in thisnewer version of Office and I suck soWatch at: 26:00 / 26:20bad at the newer version of Office oh itwas here save is another file type nopeI guess I don't have any of that addedbut that's fine I don't need toWatch at: 26:20 / 26:40oh man I haven't done one of these in solongWatch at: 26:40 / 27:00let's see there's word document PDF XPSdocument plain text okay now this iswhere my favorite thing about word comesinto I'm actually going to print screen'Watch at: 27:00 / 27:20open up paint paste I've got two windowsopen so you'll have to excuse that I'mgonna select select all this there we gocut file new don't save paste file saveWatch at: 27:20 / 27:40as and this is gonna just be in mycursed estrade as video border I know alot of this seems crazy but like I saidthere is a method to the madness sowe're gonna go back to photoshop fileWatch at: 27:40 / 28:00open video border right there over herein the right hand side you'll see thatthere's a little padlock next to whereit says background in the layers menuI'm gonna click that off add a new layerwhich is transparent and bring it to thebottom and we're to do some cleaning upWatch at: 28:00 / 28:20so the first thing I'm gonna do is I'mgonna zoom in and just oh I still havegreen selected that's why and just fillthis with a black lineWatch at: 28:20 / 28:40there we go and then I'm going to usethe eyedropper to select the green hereand go back to my paintbrush and justWatch at: 28:40 / 29:00clean up the shape a little bit gettingrid of these weird random pixels thatsometimes happens when I don't line upshapes right there we go go to theeraser tool make sure you have a heartWatch at: 29:00 / 29:20eraser and not a fade eraser make surethat the size is reasonable and justkind of clean it up that is correctI'm gonna make it a little smaller sothat I can make sure I get that piecethere we go my biggest advice I can giveWatch at: 29:20 / 29:40anybody is don't rush your overlayshonestly highlight everything that'soutside of the box and then press DeleteI've got my transparency now and thenWatch at: 29:40 / 30:00I'm gonna go back to the eraser controlD to deselect and just clean it up alittle bit doesn't have to be perfectnow the next thing that we're going todo is we're gonna eliminate this greenbackground hereby clicking on that and then hittingdelete ctrl D D selects select yourWatch at: 30:00 / 30:20eraser tool come up here and clean upthe corners cuz that will drive youcrazy and I didn't do racer maybe onepixel view zoom in and just go to eachWatch at: 30:20 / 30:40corner if that little tiny tiny bit ofgreen bothers you you can change it justlike that for me it doesn't reallybother me at all I don't care but if youwanted to clean it up and you're likeyou I can see that I know it's thereWatch at: 30:40 / 31:00it's haunting me now what the hell do Idoyou know you can go to each of thecorners here and just clean it up alittle bit but I mean we're reallytalking about eliminating three pixelsyou know that's not a big dealview zoom out there we go and I thinkthat's goodWatch at: 31:00 / 31:20phew 100% there we are that's a prettylarge webcam so now under main I want tochoose a background to put here and Iwant to choose something that justscreams cursive strods so I'm gonna comeup to Google and I'm gonna searchhaunted woods roleplay fanner I don'tWatch at: 31:20 / 31:40know why I capitalized images so here'ssome haunted woods maybe a haunted woodisn't the right word we're gonna changeit to force because I'm not seeing whatI'm looking for there's a good oneWatch at: 31:40 / 32:00there's a good one we're mainly lookingfor things that are 1920 by 1080 orlarger or something that can be expandedand won't hurt oh my goodness there itis right there open a new tab redirectWatch at: 32:00 / 32:20this is a Pinterest so I'm goingstraight tothe cursed forest this is a tutorialthis isn't what I wanted at all that'sWatch at: 32:20 / 32:39right I'm not doing it rightsave image as and cursed forest it'sthis is really cool I love Pinterest forthis reason people can make really coolart they can have tutorials anythingWatch at: 32:39 / 33:00that like that I can hit visit it'lltake you to the page you can click on itand it'll take you to the page or youcan save the pin and while I'm here Idon't really see anything else thatcatches my eye let's see what else theyhave that one is golden but it's aWatch at: 33:00 / 33:20little too smallmight be fuzzy if we made it bigger butluckily it doesn't really matter toomuch I like that one a lot it's openthat up I like that one a lot I like howthere's hidden there's a person thereyou can see that's very spooky so we'regonna go save image as and I'm gonnaWatch at: 33:20 / 33:39call this cursed forest to safe let's goback to photoshop real quickfile open cursed forest - well we'll trythe first one we'll see we'll see howthey flavor you know yeah I do like thatWatch at: 33:39 / 34:00other one betterit just it screams curse estrade to menow a cool thing is is before I copythis image over if I really wanted to Ican make some adjustments to it so I'mgonna go adjustments down tohue/saturation and you can make itWatch at: 34:00 / 34:20darker you could turn down thesaturation I'm actually gonna make itzero right there that right there I likeso I'm gonna shift and alt and drag itover to main plop it down there we goWatch at: 34:20 / 34:40so I have my haunted woods that I likeif you want you can even stick with oneof the cursed estrade ones one of theones that I had wasso Ravenloft but I didn't really youknow like it too much I think it's a Iwant to use it in the game I want it tobe shocking when people see CastleRavenloft the other ones that I've seenWatch at: 34:40 / 35:00I've got some images here this one isreally cool I might go with this one Ialso like this one so they're bothWatch at: 35:00 / 35:20really neat but I think for now we'llstick with the cursed forest well I dolike that one better so I know that I'mgoing to need five cameras me and myfour players and I always like to putthe DM in the middle so I'm gonna go toWatch at: 35:20 / 35:40my video border and I'm gonna selectthis and I'm gonna move it over to youknow that's right edit undo I'm gonnaclose out of this castle cuz I don'tneed that right nownor do I need the Raven bingo go back tomy webcam video border and drag it to meWatch at: 35:40 / 36:00plot there we go we have our webcamborder I'll put this one in the middleover here now before I start messingwith the size I really want to know whatit looks like oops I really want to knowwhat it looks like when I include otherWatch at: 36:00 / 36:20borders am I gonna have room to fit allthese guys it's okay if they overlap alittle bit but I don't really want themto overlap a whole bunch so I kind ofwant this one to be right here and thenWatch at: 36:20 / 36:40I'm gonna shrink it downso we'll put that one right here I'mgonna get rid of the first one that Ipasted because I realized that it's toobigcopy the layer move it over and makesure that it matches and yes the bordersWatch at: 36:40 / 37:00can touch now as a DM I will not haveany character stats so I'm going tohighlight this to get right in betweenand I'm going to go to edit copy editWatch at: 37:00 / 37:20paste then I'm gonna get my transformtool out and right click and fliphorizontally and then I'm gonna place itwhere the center is hereWatch at: 37:20 / 37:40there we goenter everything looks greatperfect I'm now gonna take my erasertool and actually my marquee tool I'mWatch at: 37:40 / 38:00gonna select this empty space cuz like Isaid I don't need this section over herebecause I'm a DM so I don't have statsso my DM pain is gonna be blank to makethis easier because I'm dealing with ohWatch at: 38:00 / 38:20yes and merge those two together mergelayers to make this easier I'm gonna goahead and do an outer glow real quick onall of the layers I'm working on I mighteven just keep it for the game outerglow and then I can see right off theWatch at: 38:20 / 38:40bat that I need to make these a littlemore even sometimes Photoshop will dothis really annoying thing where it's aWatch at: 38:40 / 39:00couple pixels off there we go go back tothe player one copy and make another oneno the player editWatch at: 39:00 / 39:20control-j which copies the lair and I'mgonna put this one over here and see howPhotoshop automatically snaps it is like3737 my spacing is good then I'm gonnado again ctrl J and I'm going to putWatch at: 39:20 / 39:40this one up herecontrol-j and i'm gonna put this oneover here and line everything up so thatit's all square there we goWatch at: 39:40 / 40:00I am also going to take my cursive strawlogo here drop it into Maineshrink it down and put it in the middleof these two webcams we go we're gonnaWatch at: 40:00 / 40:20add a glow to that one as well and I'mgonna make it even smaller than it wasbefore so instead of eight pixels let'stry six perfect now this one might be alittle hard to see because the forestWatch at: 40:20 / 40:40one way you can get the logo to showbetter is if you do a drop shadow makethe distance really small make thespread quite big and the size a littlebigger so that it looks like it's gotalmost a a black shade around it andWatch at: 40:40 / 41:00then I'm gonna drag it below all thewebcam frames there we go so we got ourlogo to the campaign that we're playingwe've got our cameras up here up at thetop you can add whatever you want ifyou're streaming live you can add it aWatch at: 41:00 / 41:20text chat what I might do with this oneis I might just keep it like this selectthe logo and all the frames and justCenter it a little more I like to keepmy designs fairly simple there we goWatch at: 41:20 / 41:40um perfect I just had an idea let's goto Google real fast and let's look upshield shape PNG images for shield shapewho wants some light this will workWatch at: 41:40 / 42:00right here it's a PNG we'll save it saveimage as shield outline large Nolet's do this one then that one's goodWatch at: 42:00 / 42:20let's actually save this one save imageas PNG good shield so one of the fontsthat I use and this is gonna beimportant is called modesta Modesto capscondensed that is the DND font that theyWatch at: 42:20 / 42:40use on the cover of their books and Ireally like it I'm telling you thisbecause we're about to use it in just amoment so we're gonna go to my desktopback to the cursive straud folder I'mgonna pick up that shield and then I'mgonna color the inside of it white turnthe Specht black real quick yeah thereWatch at: 42:40 / 43:00we go now I have it I'm going to copythis and move it over to my main pageslap it down ctrl T zoom out ctrl Ttransforms it and then I need to zoomout so I could see it and just shrink itdown to about yea big doesn't have to beWatch at: 43:00 / 43:20too tremendouszoom in zoom in and then for that oneI'm gonna add a stroke to it and we'reWatch at: 43:20 / 43:40gonna make the stroke a little smallerto match the lines yeah there we go okayand I'll drag that up to hereWatch at: 43:40 / 44:00now a cool thing is I lay them out I'mgoing to click this and this top onehere of the layers I'm going to rightclick and go merge layers so now they'reWatch at: 44:00 / 44:201 and if I move it around you can seeit's one layer I don't put it back whereit belongsand then I'm gonna copy that and move itback down over hereWatch at: 44:20 / 44:40copy that and move it over here perfectcopy that and then move it up here thereWatch at: 44:40 / 45:00we go and then what I'm gonna do is I'mgoing to get rid of everything else allthe other ones that I used to have thatdon't have the shield anymore that waythere's only one frame so I've got myWatch at: 45:00 / 45:20frame in the middletime you don't think you need them inlike two hours right I remember you yeahwhy does it show up his dark vision oh Idon't know uh go ahead and let Mike knowWatch at: 45:20 / 45:40that I'll get with him and we'll be ableto do that later if he's busy I can meetup with him another day thank you thoughthat is weird that it showed up his darkvision so oh if you used beyond and youlogged in to dark visions Twitter T ortwitch account to use D and E beyond youare still locked in dork visions twitchWatch at: 45:40 / 46:00accounts so make sure that you log outall right so there we go we've got allthe pains up here and now we do somereally cool stuff where we can startyeah use your own main account slackerWatch at: 46:00 / 46:20and before you leave have dark visionfollow my channel no I'm just kiddingI'm gonna highlight here and then I'mjust gonna hit delete on the layer twoor and delete that we're gonna highlightthe area around this webcam will deleteWatch at: 46:20 / 46:40that and we're gonna highlight the areaaround this webcam and basically do thesame thing to all of themWatch at: 46:40 / 47:00there so now when you're in OBS orxsplit you're gonna slap the webcamsbehind there and it's gonna look reallyreally really cool now we have thisweird bleed effect with the curse ofstrawed here you see how it's showingunderneath not a big deal we just clickWatch at: 47:00 / 47:20on our curse estrade logo draw a littlemarquee box around here and just hitdelete where's the curse struck logosthat this one it's so tinyWatch at: 47:20 / 47:40oopsie that's not it well there's oneway to find out we'll go through herethere it is it's that one oh I see nowWatch at: 47:40 / 48:00mmm yes yes yes yes yes I see why it'sdoing that that bleed may not be okay Imay need to change that affect so we'llgo to the drop shadow and we'll make thespread smallerWatch at: 48:00 / 48:20now the other cool thing that you can dois you can add another outer glow toyour effect so I can go I'll close outof this menu outer glow oh that's rightWatch at: 48:20 / 48:40I disabled that because I was reallyannoying yeah that's funny[Music]we can change the outer glow to besomething a little more dark yeah thenwe'll get rid of the shadow effect yeahthere we goooh much better yes I like that there weWatch at: 48:40 / 49:00go so we've done that now this is almostdone our layout is almost done thebeautiful thing about what we've donehere is these webcam frames I'll be ableto drag on to the other scenes and thosescenes will be much quicker to make soWatch at: 49:00 / 49:20let's go ahead and go into our text tooland do the fun stuff now you'll noticewhat I do is I work on one webcamfinalize it copy and then paste over theothers just because it makes it easierso I think for player name we're gonnaWatch at: 49:20 / 49:40do a test here I definitely want acharacter named character let's put itat the top so you can see what I'mtyping character name player name I'llWatch at: 49:40 / 50:00select all the text in here and I'mgonna make it relatively small likeeight six I'm starting to realize thatmaybe I don't like this font for whatI'm trying to do so I'm gonna go back toa better font for thisWatch at: 50:00 / 50:20four five four should work and I'll dragWatch at: 50:20 / 50:40this over to where it's roughly centeredcharacter named player name there we gonow at a hundred percent you could seethat that's pretty legible we couldWatch at: 50:40 / 51:00probably even make that smaller if wereally wanted to it's important for methough for when I'm planning I'm gonnanudge this over just so that it's oh noactually that's that's a good point JohnI like that I like that idea see JohnWatch at: 51:00 / 51:20this is why you're here helping me out Ilike that idea a lot what John issuggesting is brilliantWatch at: 51:20 / 51:40like that rightnow way it's on the inside everywhereWatch at: 51:40 / 52:00yeah that's good thank you John yes it'sit's actually quite easy with andPhotoshop it's it's not a not too muchof a problem well if that's the case I'mgonna put the drop shadow I liked somuch back in there we go and give it theWatch at: 52:00 / 52:20cursive straw drop shadow let's changethe spread just a little bit or the sizegive it that Haunted ghostly look seeJohn this is why I keep you around allWatch at: 52:20 / 52:40rightand then yes that's goodso now let's go with another one for thestats we're gonna do some placeholdersof course but I will go back to the newdesto for the surfer you keep him aroundWatch at: 52:40 / 53:00for the bear oh good one tooth toothgood one and we'll make this back to thenest oh let's give it a stroke let'sWatch at: 53:00 / 53:20make the stroke smaller maybe evensmaller there we goI can already tell you that this isgonna have to be smaller itself butdon't panic I mean if you're workingthis far out and you're like you know Ican barely read that that's super tinyWatch at: 53:20 / 53:40do remember that at a hundred percentit's not that tiny in fact I might evenmake it tinier yeah I think I willlet's make it a two point five okay soWatch at: 53:40 / 54:00we know we've got strength and I'm gonnahit ctrl J to duplicate it this mightnot even work out with the shield I'llWatch at: 54:00 / 54:20have to see Dex why is why did I makethat so big the beauty of doing it thisway too is it always seems like yourWatch at: 54:20 / 54:40first frame is gonna take the longestpond oh that's right oh you know whatthat's actually not a bad way to do thatI think the reason why it was so heinously huge is because I need to just putWatch at: 54:40 / 55:00STR there we gonow do you guys think that's too smallat a hundred percent is that somethingthat looks okay I think it looks okayWatch at: 55:00 / 55:20I can already tell you I might have toget rid of shield I think I'm going toWatch at: 55:20 / 55:40let's um no actually you know I'm notgoing to it is a little small isn't itwell then let's do this let'sWatch at: 55:40 / 56:00I could shrink the shieldonce I actually add so what I'll do isI'll make this caps again so that it'sWatch at: 56:00 / 56:20easier to read STR there we go lower itdown and I'm just gonna enter a bogusnumber here for a filler and just putlike 14 highlight make it blackWatch at: 56:20 / 56:40shut up computer change the font of thisprobablymake this larger not six geez okay andWatch at: 56:40 / 57:00let's bump that it what do you guysthinkWatch at: 57:00 / 57:20and you guys sup perfect okay so let'slet's move the Dex let's make thisbigger that's why I like looking at itfrom afar oh yeah yeah sometimes it getsreally small I like looking at myproject from afar but then also bringingWatch at: 57:20 / 57:40it in up close I know that twitch box isannoying that way and we'll move thisdown we'll make Kon biggerWatch at: 57:40 / 58:00and then we'll move it up to where itlines up everything else there we goand we'll go ahead and make another copyWatch at: 58:00 / 58:20of this number yeah when it's it's veryclean font that's one of the reasons whyI like using it you can get away withmaking it smaller than most other fontsand that stroke just really helps and[Music]Watch at: 58:20 / 58:40it's duplicate Khan and do Wisdom nextWatch at: 58:40 / 59:00almost lining up there we go and thenwe'll also copy wisdom and dointelligence strength Dex Khan in twizzWatch at: 59:00 / 59:20charisma oh well I can fix that you cansit out there on your own wisdom andthen we'll copy that and do charismaWatch at: 59:20 / 59:40you know what find exactly what it'swaiting for come on line up baby line upWatch at: 59:40 / 01:00:00that doesn't seem lined up at allPhotoshop you a liarWatch at: 01:00:00 / 01:00:20oh well as long as it's decentand then charisma definitely last butnot least I can pop right there and thebeauty of all this is that the shieldWatch at: 01:00:20 / 01:00:40doesn't need to have a label so I canactually move this up to here the shieldis just gonna have a number and once weplay these numbers more we'll be able toWatch at: 01:00:40 / 01:01:00fit him in betterShh oh yeahWatch at: 01:01:00 / 01:01:20so I think I'm gonna add a stroke tothis one and make it white and then makethe stroke like - 11.5 No - all rightWatch at: 01:01:20 / 01:01:40we'll make it tooWatch at: 01:01:40 / 01:02:00and then we'll lower the charisma down alittle bit just to make it look a littlemore even will lower wisdom down theWatch at: 01:02:00 / 01:02:20first fourteen can go up dexterity cango up second fourteen can go up I didWatch at: 01:02:20 / 01:02:40that wrong fourteen copy can go up outthereKhan can move up psycho fourteen isgonna follow Khan intelligence can go upWatch at: 01:02:40 / 01:03:00go the third copy is gonna go is thatnot lined up there it goeswisdom is good where it is no actuallyWatch at: 01:03:00 / 01:03:20can go up one notch there we go allright so that's not too bad I don'tthink I think that's goodnow my other idea for this is onceWatch at: 01:03:20 / 01:03:40tokens are made for the characters likewe'll just use Maria hereWatch at: 01:03:40 / 01:04:00my idea was to slap these tokens onright here that way when you arewatching and you see the person's facesyou also see their token that way if Ido battle maps you'll know and thenWatch at: 01:04:00 / 01:04:19under the character name I can copy thisand Maria is this character's name theplayer name which is the same file isAaron Bryant and let's take a step awayWatch at: 01:04:19 / 01:04:40even from back here you can still readeverything so this is actually good Ilove your idea John about movingeverything to the other side I love thatI like how all the shields are facingWatch at: 01:04:40 / 01:05:00the middle that makes it really easy andof course the most important thing thateverybody's gonna want to know is armorclass so we're gonna make this one a bitbiggerWatch at: 01:05:00 / 01:05:19slapper right in the middle of theshield so we now have a very informativeWatch at: 01:05:19 / 01:05:40overlay that shows their stats shows theAC has the name has the character tokenso that people see it and at the sametime it doesn't look like a bunch ofdiagonal lines and stuff like that weactually look like we did a little workto it I just notice something when I cutWatch at: 01:05:40 / 01:06:00this layer I didn't cut it all the wayout so I need to fix thatthere we go now the beautiful thingWatch at: 01:06:00 / 01:06:19about Photoshop is I can add a folderand I'll drag this up and I can callthis folder stat folder and then I cancreate another folder and put it in theWatch at: 01:06:19 / 01:06:40stats folder and call this one Erincreate another folder call this oneEthancreate another folder oops that's not afolder that's a layer you're a madmanJames and I'm gonna call this folderWatch at: 01:06:40 / 01:07:00Tanner and create another folder drag itdown and call it Mike I've got my fourcharacters now the reason why I did thisis because I'm gonna take the int wisdomWatch at: 01:07:00 / 01:07:19conducts all the fourteensand the character name no actually justthe stats and I'm going to drag themWatch at: 01:07:19 / 01:07:40into the stat folder and this was Erin'sso I'm gonna put it in Erin's folderthen I'm gonna ctrl J to duplicate allthese and drag him into Ethan's folderthen I'm gonna hit ctrl J and drag allthese into Tanner's folder and then ctrlJ and add them into Mike's folder andthe reason why I did this is so thatWatch at: 01:07:40 / 01:08:00when I'm using Photoshop I can takeEthan stats which I've saved herehighlight them all go to the move barand move them down and you can use thearrows if you want which isWatch at: 01:08:00 / 01:08:20painstakingly slow instead I'm justgoing to line this upin the same way that I have the otherone and of course it's having a hardtime telling what I want to snap to soWatch at: 01:08:20 / 01:08:40I'll just manually do it how about thatPhotoshop you're cranky cranky creaturenow I'm gonna do the same thing withtanners I'm gonna grab the move bar dragit all over I didn't select them that'smy fault not photoshop so I'll blameWatch at: 01:08:40 / 01:09:00Photoshop though I like doing that andthen I'm gonna drag this over here towhere it's even and then line it up towhere it's more centered there we goand then I'm gonna take Mike's copy allof that and drag it and now this isWatch at: 01:09:00 / 01:09:20interesting because this should justlink and it just it there we go so nowI've got all the stats on all thewindows nulls I have to do is go to thename title right here where it saysWatch at: 01:09:20 / 01:09:40Maria I'm gonna copy that and then dragit down to hereand Ethan's character's name is lo CAGlo CAG and then I'm gonna highlight thatWatch at: 01:09:40 / 01:10:00Aaron Bryant change that to EthanJesperson then I'm gonna copy Ethan'sWatch at: 01:10:00 / 01:10:20move it on over herethank you for Auto snapping I love thatfeature I'm gonna call this code ringlet me review my characters that areWatch at: 01:10:20 / 01:10:40actually in this party and see if that'sreally his name I can't rememberyeah code Hrenexcellent and this one's Tanner MartinWatch at: 01:10:40 / 01:11:00and then I'm gonna copy Tanner's move itup heretake some time there we go and I'm justgonna call this I don't know cuz I don'tWatch at: 01:11:00 / 01:11:20know that character's name yet I'm gonnacall this mic cuz I don't know his lastname yet but I will get it and there wego so now since I've got the Maria onehere that I added I can also open upcode runes and do the same exact thingWatch at: 01:11:20 / 01:11:40and actually I love what you recommendedJohn this is looking fantastic withthese tokens where they're at and I canactually line it up with the photo andthen shrink it down so it's roughly thesame size bring it over here actually itWatch at: 01:11:40 / 01:12:00looks like it was a little biggeryeah and then with Tanner's because he'son the right side and we did change thatWatch at: 01:12:00 / 01:12:20we're gonna bump it over just a tadand we're gonna open up a new one lo CAGluckily these don't have to be perfectWatch at: 01:12:20 / 01:12:40and you can just I really why did youundo my resizing you can just kind ofeyeball it lo CAG is gonna be centeredand then brought up to be level there weWatch at: 01:12:40 / 01:13:00go so I've got the tokens you get thegeneral idea of what I'm going for withthe overlays oh I almost forgot the mostimportant name tag and I'm just shamefulfor itWatch at: 01:13:00 / 01:13:20Watch at: 01:13:20 / 01:13:40there we go so we just did our firstmajor window I think this all looksgreatand I will show you the steps that I'mgoing to do to recreate this for theother windows but first we are going toWatch at: 01:13:40 / 01:14:00take a 10 to 15 minute bio break so thateverybody can go use bathroom get somecoffee and then we'll be back tocontinue on for the role play rollingand my idea with role play rolling isit's gonna have our webcams the fourplayers will be together the DM will bein the top right and then a window soWatch at: 01:14:00 / 01:14:20that you could see the dice being rolledand then in combat rolling I'm probablygonna put one two three four three of uson the top two of us on the side andthen two windows so I'll probably dothat but other than that I'll leave thestream on the intermission page andWatch at: 01:14:20 / 01:14:40we'll come back and finish this in aboutten minutes a no problem John and youknow and if you got a bug out during theintermission I do save this as a Vlad Imight break this up into parts and putit on YouTube so that people can see itbut a lot of people who struggle withoverlays I think they're overWatch at: 01:14:40 / 01:15:00complicating it and they're not justbeing creative this one I'm kind of justimproving on the fly as I go and Ihonestly think that once people see howeasy it is and how you can make mistakesgo back and change things fiddle aroundwith things a lot of its tinkering thereis no set science you make some killerWatch at: 01:15:00 / 01:15:20overlays but until I get back in twominutesI will see you then bye bye[Music]Watch at: 01:15:20 / 01:15:40you

About The Author

You Might Be Interested In

Other videos in this game title

Comment (0)

  1. This is so helpful as someone looking into streaming for the first time. Thank you for sharing your process!! I would, however, ask permission before using people's artwork like this. Even if I also wasn't making a profit, I'd ask first and would not alter the images for streaming. Food for thought!

  2. Greetings Jarl.

    First, thank you for the video tutorial, congrats on being so thorough.

    Second, I hope you wont mind, you might think of it as people being slackers but even though I watched this and the 2nd pt I just dont think I'm going to make this (but I need it). Are there templates or people selling this as a product? I know my party and myself would be interested in having this awesome setup made for us so we can focus on playing.

    Again, its nice to know what it takes, but sadly I will be one of those asking can someone just make it for us? I ask you because your opinion on who can offer something as complete as what you make is valuable, also, how would it work you think? I hope you have been asked this before and know/or heard of a solution to my request.

    Thanks again.

  3. holy crap, this was an amazing tutorial! it helped even more since the process was almost mirrored in gimp. i cant thank you enough for these videos, jarl. cheers.


Your email address will not be published. Required fields are marked *