Pixel Art 101: Rocks

hey game devs welcome back let's draw some rocks I'm one of the developers working on dwarf it's a tower defense dungeon crawler and I did a lot of this pixel art and I'll teach you how to do some of it alright yeah we have a favorite wishlist the game on Steam so here's the word for our a little man he's a little dwarf dwarf the dwarf is a 16 by 16 character and I'm gonna show you how to do these rocks sixteen by sixteen but whatever it applies to any resolution so check this out there's a couple of cool couple of cool things for me to show you here are some crystals and I'll show you a technique for doing crystals and that's uh check out this this spot - over here this is basically what I'll be teaching today is how to do rocks like this these are boulders and that's kind of the rock technique just you know connect a bunch of them together and magma mines oh yeah what else we got then we got stalagmites over here alright let's get started alright so when you're drawing rocks you'll be tempted to just do gray but gray is borning go a little blue you know no I'm saying go little blue go a little brown don't just go like straight up great reserve that for like metal or something alright here we go so I like to start by just doing the shape of a rock and since it's a natural natural thing you don't want to make it you don't want to make it a perfect circle so the shape that I go for it is I sort of pick a point and I don't put it in the center so when you're drawing your rock don't don't do that you know don't also don't do this it looks more it looks better if the tallest point is a little off to the side not in the center it just looks more natural and then let's just fill that in all right so whatever there's a rock I think it's a little too bright let me switch the HSV hue/saturation vibrance or value or whatever wanted those and that's uh that's desaturate just a little bit i'm messed with the color is a little bit more later but okay alright there we go so let's add an outline for this you you will probably want to go all the way black a lot of a lot of pixel art games a lot of pixel art uses straight-up black for for the outlines i do prefer to however weight down the grass later i'm just gonna outline this real quick okay so i do not like to put an outline where the image touches the floor i don't like to do that and then i also let me make this a little bit lighter I also don't like to have black near at the top so let's say this is our base color all right we're gonna shade with a darker a darker version of it maybe I'll saturated a little bit and I'm going I'm transitioning this you know a little bit here and then I like to take that color and put it in near the top that's actually a little too bright I need to make that darker here's a cool cool look trick you can take your color go about halfway on the Alpha and then go on top of another color and now it's like a it's like it's like when you mix colors when you're painting or whatever that's kind of what it feels like so that way it still has it literally has this color in it so that's a good way to that's a good way to mix colors is to do the 50% opacity alright so here we got a rock this edge looked a little too sharp so whatever I'm just softening it up a little bit I like this like this if we go here looks pretty good actually I think I should make yeah that turns it that transition a little bit better there we go there's our there's our ROC shape I hope this made sense to you the reason why I'm lightening this top is if you watched my furniture video or my shading video etc when there's light coming from above if you make the outline lighter it gives it a sense of lighting and you should definitely watch my furniture video because a lot of the techniques actually work with natural stuff like rocks as well but the furniture is a great way to get a really quick grasp of it because those are the furniture objects are you know a lot more square so it's a it's a lot easier for it to make sense in your head then it will when we do forms like this okay so the next thing that I always do when I draw rocks is I duplicate a whole bunch of times because it's really easy to draw a stupid-looking Rock I get rid of that we don't need anymore oops so I'm just gonna have like whatever three here and then I'll do three variations and I'll pick my favorite one or work with the one that I like and if I like all of them well then I drew three rocks and that's fantastic either way right so the next thing I'm going to do is create a highlight and a shadow obviously if you just went across that gives it no form so we're going to just bend it a little bit you know something like this and I'm gonna fill that in I I like to have the darkest color not actually go very high up because we'll bring it up higher later on when we do cracks and stuff like that and then we could highlight this as well but before I highlight it what I like to do is just use this darker color just sort of like create the shape of the rock you see how this bends in a little bit it kind of looks like this would be a good spot for another piece of the piece of that stone and whatever I'll just color in this in like that whatever just draw some kind of shape and then we'll make up the rest if it's too round like this it doesn't look so we're natural so what you want to do is draw oopsie so what you want to do is draw sort of like segments sort of like break it up into into pieces and let's say let's say for me it's this I think this looks a little too too basic so I'm gonna add one more here in the middle and check that out that already looks pretty decent for a rock don't put highlights too low down here because we still want it to you know to keep form so do something about like this for this one I think this one is fine maybe we'll do a little like a little highlight there makes it look more natural if there's different parts that are highlighted and makes it look less spherical so it's nice to to just have little random highlights within the within the shading this one looks kind of wonky let me um let me give it a little more form somehow there we go maybe something like that pretty cool little technique right to give your to give your rocks some some nice shapes it kinda looks like there's a lot too much dark here so I'm just gonna maybe put a dot there or something like that alright so we got our like first basic shading now what I want to do is I'm looking here and it's not really that dark so I will want to go darker and I'll probably just try this color first oh that's too dark that's too dark so I'll do that trick that I showed you again I'll grab this color go about half way and then I'll put it over this one now I have a nice in-between color and with this color you can I do like to sometimes put this dark color on the bottom remember I don't want to go with on the bottom with black and I don't want to go on the bottom too dark but this this is fine I do I do like doing this so I'm just putting this on the very bottom to increase the contrast with this with this shading but to give it even more form here's a cool little trick you can take this and you can put it in here to make it look like there's crevices in the rock I like to put it usually near the edge which makes the crack look a little bit more prominent and then I like to put it somewhere in the middle so maybe something like this I think actually and I think I'm gonna leave that one like that and then from the bottom you can also have it work its way up as well so here I'll show you with this one let's say we want a sort of like a crack to go up through here you get to you know how we did cracks with this color now you basically get to do the same thing but with a width with a darker color so you feel free to kind of draw you know draw cracks in the rock with this color you don't want to do it here though you want to make sure you do it near the bottom because this color is too dark to be up here near the near the top we want this to look like there's there's enough light there that this color wouldn't appear here it wouldn't be possible all right and let's do it on let's do that here on this left last one oh that's one too I think I'm just gonna do something like this [Music] okay sweet those rocks are looking pretty snazzy already I think this isn't this could go darker I should win darker with this these two colors are too close to each other it doesn't look bad here on the rock but doesn't create quite the contrast that I wanted the quickest way for me to do that is to just select all these and you go to edit adjustments and there's brightness and contrast and here I can just increase the contrast it'd be more annoying to replace the color or recolor it so here I'm just gonna pull this up a little bit and maybe pull the brightness up because let me show you if you increase the contrast the whole thing's gonna get darker so if you increase contrast you also have to increase the brightness I overdid there a little bit let me tell me it down I think that's a lot of contrast though better it's almost too much contrast right control-z control why no no that's not too much contrast and controlled be the deselect I don't remember if that's the default hotkey or if I did that but I denied a shadow yet we might as well add a shadow the quickest way to create a shadow I think is to duplicate your layer then go to edit adjustments brightness and contrast and just put the brightness to zero so now they're completely black basically you filled it in black move that under whatever your whatever your thing was so I'm just gonna move this move this down one and then if you double click the layer in a sprite by the way if you want a key I'm I am giving out keys whenever I get them so in the comment section below just let me know you want to keep so here in the opacity I just like to bring it down to around 30 or something like that and that was a pretty quick way to do shadows right let's rename this to rock shadow of course if you have a bigger object it's not gonna be as simple you'll want to make it the shadow larger or whatever but this is a quick way to do shadows for things that are near the ground on the ground all right now we need to add in our highlight I think so we're just gonna grab our color and all you gotta do is increase the vibrance and let's see that's not that's the sign of contrast it's hard for me to tell here whether the contrast is good enough I like to look up up at the little preview window because if I can't tell if I can't see it clearly in the preview window then I know I didn't make it high enough I think that might be a little too high let me find a sweet spot I also like to decrease the saturation sometimes I'm not huge if ting here for the rock you could hue shift when you're doing the so I could go left or right to give the rock a little bit more color like check it out if I go a little bit left make sure you probably have to lure here you see how we can sort of like give the either Hewitt tint it's kind of a cool I think it makes objects of more interesting if you hue shape as your shade so I will I'll do a little bit of it and this is a little bit of a blue shade and I'm just going more blue with the highlight let's say let's say here we have a rock and there's flat parts of the rock that are pointing up these are the parts that you want to give this highlight you don't want to really shade it like a like a circle you want to shade it you want to give the highlights more so like this now check it out if I grab a darker color and put it here on the sides you see what look it's creating it's creating this stone both where it looks like there's a top and the side and that's the this sort of technique is what we want to do with this rock so we don't want to just give it this little shine at the top we actually want to highlight highlight parts of it and my favorite parts to highlight are usually the edges or the part that is the most flat so for example let's say this rock right here we want to emphasize this edge I like to put the highlight right here near the edge so I'm just gonna do that with all three of these and then I guess we'll talk about it a little bit more as you can see I'm highlighting the edge and then I'm sort of picking a large chunk and putting a highlight on the large chunk this makes it look like it's not super super round sometimes I like to emphasize the highlight and you can do that by creating more contrast by putting a darker color in between two areas like that like I just did right there this gave it a lot more form don't get too complicated though there's beauty and simplicity you know ma I mean I don't know that I'm kind of done we could kind of do a lot more here but I don't think I want to the only thing really left to do is to make parts a little bit more reflective it depends on what kind of rocket is of course but some rocks you know how they have those like little shines in them I think they're called sedimentary rocks so let's go even brighter and then sort of like pick a few you want to go really bright with this then almost white decrease the saturation yet and then pick a few areas that are gonna be just like okay that's too bright few areas that are just gonna be these little shines and it really makes those edges look sharper too and there you have it Daniel I think those look pretty good I hope you understood my technique and I did make these rocks look pretty complicated too I feel like I should draw one more and kind of like oversimplify the the process of the shading so let me just do one more here's one side here's another side here's another side and if you look here you can see that the shading makes makes sense right looks like there's a light coming from above it looks like there's a side that's a little bit darker and aside a little bit lighter you can tell that you can tell that the lighting is coming in from from this angle so also don't forget to take you know the brighter color and put that in here an edge remember we did this in the furniture tutorial this is kind of the kind of the same thing you're putting a brighter color near an edge and it just emphasizes that that's like a sharp corner and let me copy this and then and then this is the shading technique but I'm gonna make it a little I'm gonna make it look a little bit more organic a little bit more rock like so all you got to do is take the same thing and then sort of like duplicate this technique in another part of it so here I'm gonna pick another part that's the top another part that's let's say the side and it's almost like I'm combining it's almost like I'm combining the shapes and look it's creating these these these stones now it looks like it looks like a little rocks next to each other but of course these are super square but this is the technique that I did to do these rocks all right so now I'm just gonna try to make it a little bit less less square and more like the like the other rocks so I'm just gonna Brown this a little bit make it make it a little bit rounder and then another quick way to make it look less flat is to add those those cracks so I add some had some cracks in this this part right here looks pretty flat so I'm gonna go ahead and pick like let's say this spot right here and then I'm going to let the crack grow out from from from that spot but remember we don't want this color on top of this one because this is the top so make sure you lighten it as it comes to the top it's gonna get lighter there's a there it is you know you start with this basic shading add more pieces to it and make it rounder I don't like you know starting like this I'm doing this in my head I was doing that in my head when I was doing these but I realized that maybe I need to explain what's going on in my head and why I'm shading things away I am this is sort of the technique the the thing is with this though you don't have to have the light coming in from the side if the light was coming more from the top then what would what would happen is you could have the highlight on both sides and you would have this darker color on both sides as well yeah I mean whatever disregard that I do want to show you something really awesome though this is a mountain and dwarf and check out this rock shading its flow through the mousse and right so and she helped me out with that art and you should follow him on Twitter and also follow me there's a link in the description to my itch and if you go to my itch there's gonna be a free to use in-game pixel art and I'm gonna add those rocks to that so you don't have to drop those rocks you could just use the ones that I made and I'm gonna keep adding to this they should follow me in a top right corner here it'll say follow pixel P and I'd really appreciate that let's just take one last look at dwarf so I can point out a few of those techniques here you can see there's a highlight near the edge a highlight near the edge of highlight near the edge and I didn't you know didn't make the top too bright you don't want to do that and you don't want to make you look too round you sort of want to pick sides you see how there's like a slab here a side that is shaded here a side here a side et cetera you can I think I think you get the idea yeah buddy oh yeah I forgot I said I was gonna show you how to do crystal stuff with crystals basically you want to go all the way white when you when you're near the edge which makes it look reflective and then the same thing pick sort of like a point you want high contrast near the edges increase the contrast near the edges and sort of pick a spot where you're gonna go all the way white so it looks like it's shiny here's a good example of this you see how the edge is is brighter than these two colors it makes it look more reflective and then even in here there's brighter colors in some areas so that way it doesn't look super smooth here's another example of that just the area where you go a little bit brighter and that's how you do crystals by the way panic pop is my clothing line and I'm legit given all your free shirts on the site I hope that helped I'll see you next week dev light you [Music]

Channel: Pixel Pete (Peter Milko)

Views: 151,176

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

Id: DIB7VorgJno

Length: 23min 14sec (1394 seconds)

Published: Wed Oct 30 2019