Redesigning Link for 2D (Unity Character Design Tutorial)

how's it going there my name is Thomas Preston creator of a game called pinstripe also about to finish a game called once upon a coma and launch that in a month on Nintendo's switch Xbox ps4 pretty much every other platform you can think of click the link in the description if you want to wishlist that game also you can support on patreon that would really mean a lot to me help me make videos all right guys a lot of us want to make 2d games and create 2d characters a character that stands out but I can't tell you how many times have created a 2d character and maybe you can sympathize with me created a 2d character that just looks like junk or maybe it looks amazing when it's like this big but when it's that big it looks like crap well I want to show you how you can make a character a 2d character look amazing when he's this big or this big there's a lot of principles graphic design principles specifically design principles used with logos and I was actually a graphic designer for three years a graphic designer and a web developer for three years so I've used a lot of those principles so what we're gonna do today you're gonna love it I promise we're going to take link from breath of the wild and we're gonna make him into a 2d character something you might use in a platformer so let's go ahead and get started [Music] now before we get started I want to thank our sponsor hosting though if you've ever thought about creating a website or hosting a game on a server I'd highly highly highly recommend posting er they're really fast they're easy to use highly affordable and you can click the link in the description for 15% off to see just how affordable and amazing they are oh and there's a website builder to make things really easy for you guys trust me I used to be a web developer there's a reason why I used to be a web developer because being a web developer is really tough creating websites from scratch is tough you guys don't need to do that you got to make games or play minecraft or whatever so use their really efficient amazing professional-looking website builder tool now for game developers you can actually use their cloud hosting service and store your or your users data in their cloud service that's pretty cool oh and there's more if you guys like minecraft you can do minecraft servers so head on over to hosting or click the link in the description for 15% off and go ahead and get started support hosting er because they support our wonderful relationship alright so the first thing I do is I start out with 10 20 by 10 20 and I'm just gonna Google an image of breath of the wild this one's really cool with Thomas the Tank Engine and Link and I'm just gonna blur it and it's gonna give me a nice sort of gradient of the kind of colors that you see in breath of the wild then I'm just gonna find an image of link in this case it's an action figure but I figured it was a good sort of straight on shot link so he'll we're just gonna use that and we're basically gonna show you I want to show you here if i zoom out you can actually see it's not gonna look great as a 2-d game looks great in 3d but 2d not so much so what we're gonna do is use really basic shapes I'm gonna start out with a generic circle here and kind of trouble getting the right color which not starting off great here but that's okay we start out with a generic circle here and I'm just gonna create an oval shape for the chin cut it in half and then flip it and then delete the top portion and that's gonna give us a nice sort of lemon shaped chin and now we have a really simplistic shape of links face so far so good and as you'll notice as we work through this illustration even though we're not in Adobe Illustrator and doing vector art I kind of treat it like it is vector art there's a lot of basic shapes involved anytime something is sort of behind I'll do a gradient and anytime I need a specific shape I'll use the pen tool get a nice rounded shape especially here towards the collarbone and then I'll typically always sort of flip it in mirror the character as we're moving along so you'll see that we're creating this character not in the pose that link is currently in as the action figure rather we're actually gonna be creating him in what's called tee pose the tee pose is great for anytime you want to rig a character obviously tee pose you can use it in 3d or 2d and tee pose is basically putting your character in a t-shape it's kind of like that Leonardo da Vinci image of the character sort of spreading his legs and his arms to give you a better idea of what he's gonna look like so that you can rig him later so right now I just took a rectangle a blue rectangle with some rounded corners and that's just using the shape tool and now I'm cutting it into pieces and making it look kind of like what length shirt is again you'll notice that I am mirroring one side so I usually don't worry about the right side I'll just get the left side done of whatever object I'm working on in this case a shirt and then I'll just flip it now in this case you'll notice that I'm getting a nice shape typically a character you want him to have an a shape if you take a look at link on the left side he's got an a shape the from the left shoulder all the way down to his foot it's basically a straight line so that's what I'm trying to achieve here I'm getting an A out of link now I know it looks like he's not wearing pants but that's okay we'll get to that in just a second here but I'm trying to get an idea of what he's actually going to look like underneath I didn't want to draw him naked for obvious reasons but I'm trying to get an idea of what he's looking like and that's why I used this tool here to get an idea of this what is it the straight polygon lasso tool it gives me an idea of what he looks like so now we're moving on to his arms and you'll see I'm just flipping and reflecting his arms from left to right and you'll notice me zooming out a lot zooming out is your best friend when it comes to 2d character art and it's the same principle with like creating logos you want to make sure that your character looks really really great from small distances and also you wanted to look great when the camera zoomed in but mainly your character is gonna be much smaller than an actual 3d game on screen and that's just typically the way my T my 2d games work so anyway moving on we're gonna be working on the boots here I didn't want to get too specific with my boots in fact for my characters I tend to have a very simplistic way of doing feet they're very sharp and pointy almost like Wind Waker but earlier you just saw me really quickly googling The Legend of Zelda - and you'll notice that Legend of Zelda 2 is linked is basically facing perfectly to the right whereas in a lot of 2d games what's actually happening and I'm creating that here as well the character is actually facing forward in 2d games and then they're sort of just pivoted to the left or right depending on the direction of the players moving so I'll show you how that's gonna look at the very end even though we're at a perfectly straight angle here you can actually make it look like they're facing a certain direction okay finally link has his little kilt here it doesn't look like he's pantless that's always good and I'm just finishing up his little skirt or kill excuse me so moving those boots up just stretching and scaling and cutting and as you guys can see I'm approaching this illustration a lot like I'm an architect using basic shapes and scaling and and cutting and using the selection tool to fill in certain areas or cut away certain areas almost like I'm chiseling away at something the alternative is to do something like a sketch the problem with doing a sketch in something like a 2-d game is your sketch can look amazing from far away but I'm sorry from close up but from far away your sketch can look terrible especially in a 2-d game so you want to make sure again that your character looks great from far away and I found that the easiest way to do that is to make sure you're designing with simple shapes first to get an abstract look of what your characters actually gonna look like in this case we're actually working on the hands you can see they're just two simple circles right I didn't get too complicated because quite frankly the hands are gonna be basically five pixels wide when we're playing if we ever created a 2d version of zelda on like a 2d side-scroller version of zelda the hands would be absolutely tiny so I'm gonna go ahead and steal a Master Sword image I like that one and we're gonna put it straight up and we're gonna cut out the handle here get the color correctly and I'm just gonna make it look like it's sort of in my hand and we'll just work on ensuring that the Master Sword is not necessarily as detailed as the 3d version but we're gonna get the generic principles out of it and you know when I'm working on this kind of stuff I often think I'm kind of like one of those street artists you see at theme parks or whatever where they do they do character caricatures caricatures of tourists basically it's similar with 2d art you're creating a caricature of something that's 3d and what a caricature basically is overall I guess fundamentally it's taking the things that are that make you you and emphasizing those things and really forgetting about the things that don't really have much to do with you so you can see I'm creating I'm taking all of the important things the things that make the breath of the wild version of Linc look like Linc and I'm putting them in this illustration and that's really important because guys again he's gonna be small he's gonna be tiny on the screen there's no reason to waste our time on small details in our illustration when in reality the players not gonna be able to notice them anyway and in fact if you add small details to your character design it's actually going to distract them from the things that make your character look like Linc so adding too much detail can be a huge distraction so here we are just using the shape tool and also the selection tool to try and just cut away at various pieces of the sword and dragging and ensuring they're weird using a perspective tool actually to make these little flourishes in the sword and I felt like I needed to add this detail because this is this little detail is especially something that makes the Master Sword look like the Master Sword so as you can see we've finished up the Master Sword it looks pretty much like the Master Sword from far away I'm just adding an inner stroke here it's just an effect you can add to a layer and I'm going to decrease the size of it it's gonna give it that blade that sharp look on the edges so far so good you'll notice we haven't added any shading yet there's it's just black colors we're adding the shield here obviously guys we need a front-facing shield and at backwards facing shield and flip between those in the actual animation but in this case I'm just gonna show you what it looks like facing backwards I didn't want to spend too much time on the shield finally we can get to the point where it looks like he's actually wearing pants which is always a good thing link is now wearing pants and you notice that actually the original Zelda games it looks like he was wearing tights but in this case he's wearing khaki pants which is really nice so we're gonna just create this sort of ruffled look here just some simple polygon shapes duplicate replicas are duplicated Meerut add a little bit of shading here just to get an idea of what it looks like I usually do my shading at the very end of my 2d animations but sometimes I'll add it in just to make sure that I'm telling my mind where things are on the z axis of the character and it's not an actual z axis it's just a z axis in my head because 2d doesn't really have a z axis so we finished up the pants we're gonna really worry about too many of those flourishes and details on links shirt as cool as those white flourishes and threading are I'm not gonna worry about them much rather worry about this strap here because that's like links one of Link's key features is that that 45 degree angle strap across his chest so I think now we can finally work on his face and because we're creating a more simplistic link I'm gonna actually reference the wind waker eyes and even though I kind of figured out how to do the eyes here and it's just basically creating circles and cutting pieces of circles of the circle and then doing some distortion you'll notice that I did a pretty good job of replicating the Wind Waker I hear but in the end it just didn't actually work with the style but we're gonna go ahead I'm gonna go ahead and talk to you about how I did the eye here so the top is a thicker sort of circular crescent shape the bottom one is much thinner so I'm just sort of making really thin here and dragging it down scaling it down and we're gonna gonna get a wind waker looking eye here in just a bit and then filling in that eye with some white and i actually really learned something while doing this Wind Waker achieved links blue eyes while also remaining very simplistic by adding a blue gradient on top of a black eye so it's kind of killing two birds with one stone you're getting that simplicity but you're also saying hey links got blue eyes so overall it looks pretty good I wasn't super happy with how it looked but I decided I was gonna just move forward and now we're gonna move on to the shape of the nose you'll notice that we have a sort of Rembrandt lighting which is basically you have a triangle shape at the cheek now in this case it's not necessarily Rembrandt it's kind of got a more of a butterfly lighting effect but we're just gonna add it sort of a overlay effect you have black on the right side and then white on the left side and then you apply a soft filter or an overlay blending filter to it and then you just sort of gradient out the edges and you get this 3d looking nose now the mouth was is probably the easiest part of doing a 2d illustration honestly just simply because you know you don't really need to worry about it too much because it's so small so I just did a little rectangle for the mouth now I'm centering everything up finishing up the face now the hardest part of pretty much any character is the hair especially link whereas something like these ears you can just get them done and really quickly just draw a triangle add a gradient to them duplicate and put them behind his head but the hair is where it gets really challenging I find that if you're going to be working on hair it's easy to do a really basic shape of the hair almost as if he was like I don't know Don Draper with like a 1950's hairstyle and then once you've finished that then you can actually go ahead and add all of the various big chunks of pieces like Goku hair towards the foreground on his forehead I mean so here we are making him look like Don Draper apparently it looks like a pretty boy that's okay we're gonna keep or we're going to move forward with these these big chunks of pieces here to give it more of a messy look or I guess an anime look to add these pieces of hair coming in front of his eyes so pretty cool and I found that just adding a little bit of shade just a tiny little shade with the brush of white and black and then putting an overlay filter on top of it or in this case it's a soft life filled site soft light filter really works so I'm just rotating and duplicating and trying to get an idea of what it looks like now you notice me in this portion of the illustration I will be zooming in and out often and the reason why is because we're getting pretty detailed here and the reason why we're getting detailed is again details you typically want to avoid you don't want to get too detailed with a 2d illustration but you also want to be adding key features well this is definitely a key feature for link the the hair coming across his eyes the blond sort of leaf shaped hair coming across the eyes so I definitely didn't want to forget about this part as much as I was tempted to just forget about it I knew how important it was to get link to have this long hair so it was a lot of guessing and checking and going back and forth trying to figure out how to make it look it wasn't easy but I think the most important thing I learned about link especially the breadth of the wild version is he has pretty much one thick hair coming straight down pointed at his nose which I thought would look strange but it actually ended up looking a lot better than my previous attempts so I ended up using three on the left and then one on the right and it's not perfect I'll I'll admit but this was an illustration done in like 50 minutes so I I wasn't gonna focus too much on getting it perfect and you'll notice that it's kind of not amazing but you never need to worry while you're doing an illustration honestly just just go for it and keep going keep going because things don't look perfect as you're creating them obviously so if things don't look perfect don't worry about it you can go in and start adding shading and tweaking things later and you'll notice that even though we don't end up with a perfect design for link it's definitely it definitely gets pretty good and and you notice here I'm tweaking the eyes even I felt like the eyes just didn't look good and so I felt like I was gonna try out a different version of eyes I definitely don't want to go with the typical Thomas brush style eyes I've just button eyes I wanted to try something a little bit different and challenge myself so what I did here was simply made the eyes a little bit white and we're about to do that in just a second but right here what you'll notice is I'm adding shading to give the hair a little bit of depth so I'm putting shading on the the face and a gradient on the face to make the hair look like it's it's elevating away from the face I'm a big fan of using the gradient tool to create shading it creates a very soft smooth matte look for your characters and I really like that so you can see I'm adding shading to everything now once I finish up the generic geometry of my shaves the very basic essentially vector art then I'll start just adding in the shading and I always keep in mind where the light source is coming from so in this case generally generally speaking the light source is coming from the top left corner imagine the Sun is it what like 3 o'clock depending on where you're looking so it's coming at an angle towards Lynx head and so I'm adding shading based on where son is sometimes I'll add shading on both sides of an object even though it's not technically true so you'll see I have shading on this side and then I'll also put shading on the left side because it just for some reason didn't feel great and then I decrease the opacity I'm gonna add shading to the lips of these boots to make things feel a little bit more alive and then I'm gonna go back to the eyes cuz they're still driving me crazy and that's okay that's the thing about eyes guys you want to make sure your eyes are perfect eyes are what make us feel something when we look at a character so you really want to make sure the eyes are perfect now admittedly the eyes don't end up perfect in this video they're just not going to because I did this in again less than an hour but overall it kind of looks crazy doesn't he so I'm gonna try and add a little bit of a cut to his eyes to make it look like cheeks there we go he looks he looks a little bit happier now a little bit more cartoony and friendly and I like that not bad so now the most exciting portion and that's that is sarcasm the most exciting portion of working on your illustration is just combining things and merging things because I don't know if you noticed but I was just creating layer after layer after layer after layer it was kind of a mess and so I'm merging things together now and renaming things and converting things of smart objects and but for the most part I pretty much rasterize everything when I feel comfortable with it I even increased the size of his head because I felt a little bit small and like the whole time I was working on the illustration I knew his head was too small but I figured I'd just do it in the end and so his head is a little bit bigger now I'm you can see me dragging things around and what I'm actually doing is I'm just selecting things and in order for me to know that I've selected a certain amount of objects I'll just drag it around and if I can drag a certain amount of objects around I know what I've selected and which is kind of a silly way to select things to be honest but that's how I do it and I'm just merging things together so I have his shirt as one object I have his arm as one object his bicep as another object so that I can actually animate these things in unity now the shield and his hand and his forearm on the right side are all one giant rasterize object but on the left side I want his sword to be able to swing and move so the sword is a separate object and his left forearm or if he was looking at us sorry my dog is itching hey Jenny hey Jenny I'm recording buddy I love you but I'm recording but yeah so you got to sort of figure out what you're gonna want to animate and then cut things based on what you're gonna want to animate so his feet and his calves are all one object so you can see me merging these together so we have a right thigh a right foot or slash right leg left leg left thigh and now I'm just naming things it's really important to name things because it can get really complicated especially if you guys are making a little bit more complicated character you really want to make sure that you're naming things appropriately so I'm not gonna animate this character in this video that's for another video but it's surprisingly easy to do in unity but what I'm gonna do is just sort of show you guys how I'm going to position the character in unity but I'm just gonna do that in Photoshop typically you're gonna want to save your character as a PSB not a PSD and PSB in this case i save it as a PSD but if you're gonna import it into unity save it as a PSD so this is me questioning whether I'm actually gonna show you how to animate it and then I realized you know what I can just capitalize on another video so there will be a video eventually about me animating but this is just me showing you this is what he would look like now rotated so see we've got a 2d character and you can imagine him running left and right flipping back and forth flipping to the right and flipping to the left looks pretty good I mean it's not perfect right but I thought it kind of looks pretty cool if you guys enjoyed this video this is the outro Caleb by the way so what do you think pretty cool right I thought it was really fun taking a 3d character like link and making him into a 2d character guys keep practicing you can do it you can make amazing 2d art if you guys like this video please click the link in the description and support on patreon or just subscribe hit the notification bell and leave a comment I'm trying to answer if I can I love you so much this was really fun thank you thank you thank you so much what am i doing I think I'm running out of ideas about what to say so I think I might just end this video now should I should I [Music] you

Channel: Thomas Brush

Views: 30,480

Keywords: thomas, brush, simple, 2d, character, design, draw, tutorial, adobe, illustrator, vector, how to, Graphic, Design, Art, Artist, Digital, Wacom, Tablet, Drawing, animation, Game, Photoshop, Fantasy, Creation, Create, scratch, Illustration, Illustrator, unity, game dev, indie game, game career, game design, nintendo, switch, unreal, unreal engine, C#, how to make games

Id: jJ8Ck9gLpJE

Length: 25min 28sec (1528 seconds)

Published: Fri Oct 04 2019