Pixel Art 101: Trees

welcome back let's draw some trees I'm one of the developers working on dirt it's a tower defense dungeon crawler RPG you can wish this they don't speak now we'll be doing a Kickstarter early next year sometime so in getting ready to draw trees rocks or almost anything the grass color is very important it's kind of gonna decide the palette of everything on top of it in general I don't like to make it super saturated because the objects on top of the grass are gonna be saturated I also don't like to make it completely blue or green I like teal just right in between I'm gonna draw a couple of trees but I'll start with this one because it's very simple I drew this tree for Game Boy and I'm going to color and explain how and why I'm calling it that way so I'm just putting on a solid color there now if you remember I don't like to have outlines on the bottom of objects so I'm going to actually remove remove that outline on the bottom here all right that's good enough maybe a couple of highlights would be nice highlights on the edge generally look better and then maybe one like right there it was a little bit thinner since this does look like a pine tree there we go I think that's a little bit better alright so you got the green of the grass and you got a tree that's green so how do you side wood means to use in the tree right well generally to make sure that it doesn't look the same you want to you'll want to you shift it so I'm not gonna color the tree the exact same color has the grass but check this out if you just you shift it a little bit towards yellow or a little bit towards blue now it stands out I'm gonna go a little bit towards yellow and make it a little bit brighter because in general I want the objects that are on top of the grass to be brighter than the grass so here we go I colored it in and it pops now it stands out on the grass because it is a brighter color but add some lighting to this break this up into into pieces you can see how there's a little bit of detail but not everywhere so it's not too messy you don't want your art to be messy there's a there's a mistake that a lot of pixel artists do and that is just adding is over detailing is adding way too much detail and then it decreases the readability of your art makes it harder to tell what the person is looking at and it gets messy and if everything is messy it takes longer for a person's brain to make out what they're looking at and you're also drawing attention to things that aren't important so let's make sure that we don't make our trees too messy we have this green which you can paint you can tell barely different than the grass coat but from this green what I want to do is I want to go lighter because of course the top part of the tree is gonna get more light so here I went lighter but instead of just going lighter I didn't go even lighter it took for you to be able to tell you can check over here to see whether it's it's it's enough of a change for your eye to notice so I'm going even lighter but I'm also going to hue shift and if I want things to go to be brighter I'm gonna hue shift towards yellow so I'm gonna go left a little bit and this uppermost part is gonna be more yellow however you can see that it actually kind of looks darker when I went more yellow so what we need to do is increase the vibrance but not just the vibrance because that makes it extremely saturated but also increase the decrease this saturation so as we make things brighter we're probably going to want to decrease the saturation to make it look natural if the colors are natural you want to decrease saturation when you brighten things and check this out you can see there's a nice transition out here in the tree so this this bottom part this is gonna go this is going to be darker so for darker we're gonna go towards blue for hue shifting now towards blue and you can see there's a nice transition here but this looks a little too bright doesn't it we've shifted towards blue but it's still it's kind of bright so what we need to do is is decrease the vibrance maybe decrease it even more and now we have a nice transition here in colors you know this will take time you'll need to mess around with this so it looks nice and smooth I have an example of a few here that I did for a transition and I'm going to go through these colors really quick so you can see what I was talking about this one up here look at the saturation it's really low and it's towards the yellow as we go towards the middle we're moving closer to the blues and we're increasing the saturation looking saturation here it's really low my reverence is really high vibrance gets decreased saturation gets decreased but also you shifted to shifting towards towards green and then as you can imagine this one's sort of a medium and now we're huge if ting towards blue and we're decreasing vibrance you can see the barbash is going lower and lower alright so now let's it make this blend I don't like to have outlines in the middle some people like that in their art but personally I don't so let's go ahead and get rid of that the reason I did that for this Gameboy tree is just because of the fact that there's not enough colors to do what I'm doing but now how do we make the tree how do we blend them right okay so I split this up into sections and I drew the line straight across because that what I want to show you is how to blend these two and then I'll show you how to give it form here we go so to blend between these remember I'm not gonna be drawing these big leaves because this is a really tiny tree it's a 16 by 16 bucket it's a 16 by 32 but it's a really tiny tree so and it's also a fine tree so I'm not gonna be drawing big leaves on this one I'll do a tree like that next just stick with me what you want to do is you want to put a couple of these green dots a little bit it into the whatever other sections you can have structuring and I said does not pixels oh my god anyway so this right here already looks kind of like a transition but it doesn't look super natural so some of these need to be a little bit longer so make some of them longer into this direction and make some of them longer into this direction and as you can see over here this already looks more natural except for the fact that it goes completely completely straight across so let's go back to that straight line what you need to do to give it form since you're looking at it from above is that this needs to have a curve to it that's it just needs to have a curve to it you know something something like like this it doesn't need to be a perfect curve either because we're gonna kind of mess it up a little bit alright there we go I did a curve to all these sections and now it makes the tree look a lot rounder so now let's go ahead and do that same technique where some of these some of these pixels will go up and some of these pixels will go down I'm looking over here into the into the preview window to see how it affects the shape of it really think about where these need to go this parts actually kind of hard because you need to kind of do a little bit of trial and error to see like for example if I did this that doesn't look good that messed up sort of the round shape of it so you need to be careful that this still has it still has somewhat of a round shape okay and now if you want to have a little bit more fun with this I think this is this is fine this is pretty good these are kind of drastic changes in color I'm doing this on purpose so that it's easier for you to visually visually see but if you want to have a little bit more fun I think also you take a few of feet a few of these pixels and put them into the other section and this just makes it look a little bit what it makes it look a little bit more natural okay to make it seem like it pops even more what we want to do is we want to put a highlight on the edge so what I'm doing is I'm taking the color that's above and I'm putting it as a highlight on the section below that maybe look that made it look rounder there we go now it makes sense to have it on the edges in this section but at the top it can't just be around the edge because this isn't a flat object so you do kind of need to actually paint in a section that that will be highlighted at the tippy-top it's a too bright for the top at whatever you get the point you can mess with the colors it's a little a little too yellow but what I like it also this section down here we should totally add another darker color and this time it's not gonna have a highlight on the edge it's a little complicated but it's not gonna have a highlight on the edge instead it's going to have a darker color on the edge remember the technique I told you grab the black go to go to about halfway and then maybe not that far and then put that on top and this will give you a transition color so the reason I'm not putting the highlight on the edge but I'm actually putting a darker color on the edge near the bottom here is because this section of the tree wouldn't have wouldn't have lighten it wouldn't have light so we're actually darking instead of lightening lighting lighting it near the edge on this one so that's like a more messy version of it some people like to have a black outline around their entire object but what I like to do is near the top take the darkest color that you that you use on the inside and use that to color the top and what that does is it makes the object look more three-dimensional I talk a lot more about this I talk a lot more about this in my furniture shading tutorial and you should check that out to understand why I'm doing this to the outline but what this does is it makes that top part look like it's getting a lot more light and what I do is I go about half way with this sort of transition and then at the very top I'll go even lighter and as you can see now it looks like it has a lot more form it really looks like the top of that tree is getting that lighting okay so I know this isn't perfect I don't want to mess with this for too long though I think you guys get the idea you can spend a lot more time drawing this kind of truth let's go on to drawing a bigger tree where you can see the individual leaves okay so let me show you one of the fastest ways to draw a decent-looking round tree so let's say we draw a round tree here and you let's say you want to shade this right so when you're shading something like this do not shade in a v-shape and then also do not shade in a nice smooth shape this is fine for side view but not for that top-down look if you want that top-down look what you actually want is to do a u-shape something a lot more like this so this next circle is gonna go right there and then I'm gonna go brighter I should hit [ __ ] shows these colors so we do that you can do these on separate layers so you can move them around I'm just winging it but I'm popping these on top of each other and when these when these stack on top of each other these layers you don't want them you don't want them to stack like that you actually want the center point to be about here have these colors run up the edges go go around the edge you know that's what gives it that top-down look is where you can see where you can almost see around the corner you want these these colors to go near the edge so you can almost see you know the side of the tree the more that you can see this cut the more that you can see a color like this the more you can see it around the edge the more top-down that it looks in a sprite there's this mirror tool and that's a nice tool so I'm gonna use that for the tree just to save me some time you can see how this color it doesn't end on the side it actually goes wraps around and the lower you get the less it's gonna wrap around and the top one obviously you can it wraps around completely you can see the full circle and now we can you just need to blend these layers between each other and for this we need to draw some leaves something like that but for 32 by 32 those leaves are almost too big we don't really want to go bigger than this you will probably end up drawing leaves doing that little zigzaggy thing also the closer you get to the side the thinner your leaves are gonna become and then over here in the front these are gonna be these are gonna be wider I'm over-exaggerating here but I think you get my point look at my hand and you'll see what I mean you see how wide this is my hand is as I turn it which is the side of the tree it gets thinner and thinner so make sure that your leaves get as you are going towards the side of the tree the ones in the front or thick the ones on the sides are gonna be like one pixel thickness you can see that this gives it a nice perspective all right somebody's gonna go and draw a bunch of leaves here and basically what I'm doing is I'm using the lighter color and with the lighter color on drawing leaves on the darker color so then I'm gonna use this color to now draw leaves in this section but to make it blend a little bit better I'm going to put the leaves in between the leaves that I have in the previous section basically I'm drawing the same leaf next to it but the the the different color and these don't have to you know be perfect it'll look natural if they're not but if you want a really clean look then ya make all your leaves very nice very nice shapes did you see what I did there a simple way to draw the leaves oh gosh simple way to draw the leaves it's the kind of just job draw a bunch of little used but remember you have to give it perspective so the u-shape is going to go like this and remember this one's wider than the side ones I don't want spend too much time on this you guys get the technique here so it's not super symmetrical we're just gonna add a little bit of variability a little bit of variability than these and something I like to do is take the brighter color and in a couple of areas just highlight just highlight the lower color so you see I'm just adding a few highlights using the color that is right above it yeah maybe something like that then up here you know you can have an even brighter color let's go really really bright you can go as messy with this as you as you want the longer I work on this the Messier it's gonna get depends on the look you're going for with your game if you're trying to make it look hyper detailed then yeah sure add leaves everywhere if you want it to be kind of clean probably just go for this v-shaped look so here I'll show you what the what the v-shape technique will look like remember this one I did the Rings but if you've got a good eye and you know what the kerb should look like you can just go in and literally do a little thing like that I think this is the quickest way but it's a little more difficult than drawing the Rings because yeah it's a little more difficult than drawing the Rings because you have to know what the curve does suppose it should look like now I'm just going in and making them look a little bit more like a little bit more like leaves this is kind of a clean look and this is me making it kind of messy which it does look more detailed but you can you can go in and add details like little highlights in this version as well so this is the general technique but I'm gonna just speed through this next part where I'm gonna take it to the next level just follow along and you'll see how just spending more time with something like this even though this does look like what we're going for it you're spending more time too tweaking things and constantly trying to get them a little bit better will go a long way [Music] [Music] so what I'm doing now is I'm going in and adding contrast to a couple of a couple of sections here just to make certain certain parts pop more I mean okay I just keep doing this for a while right you kind of have to decide how far you want to take it if you're drawing a bunch of tweets for your game you don't might not want to spend so much time on on every truth this this top part is a little too smooth we should probably do something like that you know big look more make it look more natural so with the stump I like to add shading right under right underneath the leaves that wasn't dark enough but there we go that makes it look like the tree has some volume right because it's casting a shadow all the way down to the to the trunk and then I do give the trunk an outline but I don't I don't give it an outline from underneath just like the previous tree I don't like to do that the only other thing that you really need to do with the trunk is think about each of these each of these roots and to give it to give us some perspective and form what I do is I I almost give it an outline by putting giving it darker edges and you can go you know you can use black for shading there are areas that are going to be so dark that they be black so I'm just shading back that corner right there and then of course might as well if we're doing shading might as well so add a highlight so I do like to that I do like to add highlights to the to the roots this one will probably have a highlight in the center and I do like to shade in between you want to you want to darken it in between the roots do not take this light color and go that high up because remember this right here is darker because of the other shadows so don't take these lines all the way to the top it's better to just keep them sort of near the near the bottom I know that for wood a lot of people like to do sort of this sort of this sort of technique and that does look like wood and that is excellent and you should do this on your trunk if your pixel density is large enough but but for the size of this tree I don't think I can put a pattern in here without the pattern looking too much like shading the thing is I can I can sort of imply it so I can use the shading to sort of imply that there is that texture in the wood so some of these lines I'll just pull up a little bit higher you know I'll take this and I'll pull this one a little bit down kinda like we did with the pine tree and pull this one a little bit up and by doing that it does does it sort of imply that there is some kind of texture on that stump of course you want to add a big fat shadow remember for shadows I just like to I just like to go fully black with a V you can move stuff in a sprite and then what I do is I take that shadow layer oops that's wrong okay that's what you need to name them I think that shadow layer and then I'll just make that alpha I'll just lower the output I like the Alpha is somewhere around 25 30 % the closer the object is to the ground the greater the shadow will be so if the object is really tall you want the shadow to be very dark anyway somewhere around 30 is usually good for a shadow and there you have it there is your tree there's a lot of techniques for doing trees and you can skip a lot of the techniques that I was showing you if you want to simplify it but in general this will work for you I'm not super satisfied with this color right here I think it's a little too yellow but I think you get the general idea and this will suit your hemming this technique will suit your needs now I'm sad I'm gonna export those trees and you can use them in your game I'm gonna have a link in the description to my itch where I have pixel Pete's art assets you can use all these assets in your games they're free in the top right corner it'll say that you can follow me and you should because it'll notify you whenever I update these assets I just realized I've made it to exactly 100 followers she had active followers Christmas is coming up and if you didn't know I started my own clothing line and I saw some pretty snazzy stuff like this try Porsche by the way if you're a cheapskate there is literally a free section hot panic pop but the shirts are zero zero zero like this is not a joke if you like pixel art follow me on Twitter I'll see you next week

Channel: Pixel Pete (Peter Milko)

Views: 156,838

Keywords: petermilko, peter milko, pixelpete, pixel pete, pixel art, pixelart, pixel art tutorial, pixel tree, pixel trees, how to draw pixel, pixel art tutorials, pixel art tree, pixel art tree tutorial, pixel tree tutorial

Id: V92YHgQY-uo

Length: 27min 36sec (1656 seconds)

Published: Wed Dec 18 2019