Pixel Art 101: Cliff

i'm one of the developers working on dwarve it's a tower defense dungeon crawler rpg and you can wish to sit on steam now while i was streaming dwarf one of the most requested things for me to teach how to draw was this clip right here i think it's a really great clip so let's get to it okay so we can start by going to file new and whatever your tiles are in your game like 16 by 16 or 32 by 32 make that the size of the canvas so here we go we have a 16 by 16 canvas and we're going to draw within this space so i put a dot in each of these corners just to show you what's about to happen go to uh view tile mode and then pick tile in both axises now whatever we draw in here is going to get tiled in every direction the pixel art program i'm using is called a sprite please click the link in the description if you're gonna get it because if you buy it through humble i get a tiny kickback i'm not sponsored by them okay so now let's pick some colors for these stones instead of just choosing gray what i like to do is either go to blue or red and add a little bit of hue in there so for example that looks a little bit more interesting there's a little bit of blues in there and then from here we're going to create a lighter and a darker version of this but we could probably use this as our base so i'm just going to go to the paint bucket tool and i'm going to go ahead and color that and now i like to zoom in a little bit because i'm going to use the preview to see the tiles not really this entire area here so i think by default alt is a hotkey for color picking if it's not you might as well make it all my your finger will be right there and we'll color pick this color and then we want to go a little bit lighter and as we go lighter i'm also going to hue shift a little bit more towards the greens so i'm going to move just a little bit okay so this will be our lighter color and we can use this to create highlights it might be hard for you to draw a rock without sort of having the shape of it so let's pick a dark color first i'm gonna um alt select i'm going to use the eyedropper again to choose that base color and i'm going to go darker and as i go darker what i'm going to do is i'm actually going to go back i'm going to go towards the the back towards the blues now something that might make it easier for you to draw these rocks is to make sure you turn pixel perfect on is to quickly sort of just outline where the stones would be so for example i'm going to make this one stone here and then don't put a gap between stones so don't do something like this also don't put them the same height offset them a little bit let me get rid of that pixel there so for example if i'm doing another stone here i actually want to use some of the same outline build off of the outline so another another good area for a stone would be right here see how these two lines meet and then if we go to the top of the tile we need to connect it either to the top of this stone or add a stone in between now these stones are very similar size so we'll probably want to not have all the stones the same size for example if i did another stone here it's too similar in size so make sure that some stones are big and some are small just don't make the size variations too ridiculous we don't need a stone that tiny so something you can do that that might make it easier to draw the tile map is actually get rid of your your grid and if you get rid of your grid it might be easier for you to connect these stones okay so i'm going to put a large stone here since there's a big gap between these two and now we just have this one area here that needs a little bit of work to look more natural i think this is a good opportunity to put a small stone so maybe something like that now you see we have this area here and we could try to and we could try to add smaller stones in there but then the pattern becomes too obvious another thing we can also do is just have a dark area it's all right to have areas that are really dark i'm going to shrink it though so that way it's not as obvious but it's okay to for example pick pick corners like maybe this edge here and add a little bit more darkness to it your outlines don't have to be the same thickness everywhere especially when you're doing something like stones so see how i'm just adding dark spots and then we can go back to the highlight color and add highlights on top now if you're adding highlights on the left make sure all your stones have highlights on the left if you're adding hides on the right make sure all your stuns have highlights on the right this will make the lighting look more consistent i usually like to do the top and then one of the sides and also when i do a highlight i don't go all the way to the edge so for example i would not do a highlight like this instead what i would do is pull it away from the edge just one pixel and this makes it look like the stone is rounder this video is sponsored by skillshare skillshare is an awesome online learning community with like thousands of inspiring classes for creative and curious people like you you can explore new skills or improve your passions there's a ton of creativity to be had and you can learn just about anything if you want to become a better artist i recommend you learn some fundamentals like color theory look at all these awesome color theory videos one of my favorite ones is this one right here ariel creates several simple projects that really get you comfortable with color theory skillshare is less than ten dollars a month with the annual subscription and the first 1000 people to use the link in my description will get a free trial of skillshare premium okay so i'm just going to touch up these highlights here and something that that i like to do is don't make your highlights too perfect so um it's okay to for example skip skip a spot and then add a highlight or do something like this because the rocks aren't super smooth maybe if you're doing bricks you can make them smoother but for something like stones it's okay to for example have a highlight here and it's okay to have a highlight zigzag a little bit i like to make the stones a little bit more reflective they just have a little bit of shine now sometimes stones sparkle i'm going to pick the highlight color and i'm going to make it even brighter and then i'm going to go to yellow and this yellow is gonna really make it look like the sun is bouncing off of it like it's shimmering but you could try other colors for example blue and if you want to change for example all these colors in your composition all these yellow colors turn off contiguous and then check this out when i fill that it updated all of them usually a piece of artwork looks better if you have multiple hues in it so if you have for example greens that go to blue or greens that go to yellow like if you're doing a tree don't just make the whole tree shades of green have the top of it a little bit yellow and have the bottom of it a little bit of blue and that's what we're going to do with this rock too so when we add shading here we're going to add blue to the tint of the shading but for now i'm just going to improve these highlights here and tell you guys and tell you guys the story so i just bought a house and i was building a shelf i had a piece of wood on top of the shelf which is dumb i know and i was putting books into the shelf and i look up and a piece of wood fell from the top of the shelf and the corner hit me right in my forehead and that's why i have that's why i have this gash on my forehead i it almost looked like i needed stitches but um i don't have health insurance right now so i figured i would just let it heal these stones don't really have the best shapes but as i shade i'm going to try to fix that just a little bit of blue there we go i think that's pretty good maybe i need to go a little bit lighter so instead of guessing colors like trying to go lighter this way actually those are pretty good guess another way to make sure that these two colors blend better is to go ahead and color pick this color and then lower the alpha to like 50 i'm gonna do it even less and click on top of oops let me uh then click on top of the color that you're trying to blend it with so by using alpha you can have two colors look more similar just keep putting them on top of each other and it'll blend them together this way these two now will blend much better okay so let's just go ahead and shade the bottom of each one of these stones i don't want to go overboard with the shading but you can use shading to really give the stones some some shape some cool shapes i'll give you an example so this stone right here that's really big when you're shading you don't have to just go around the edges we can go up the middle and then it almost looks like there's a crack in the in the stone so you you know use the shading to create cracks and uh some aging in there you see how i'm just um you can just sort of almost randomly add this here and there and it looks like it adds a lot more detail to your stones i don't want to overdo it though because then it's going to start getting messy and that's a mistake that i see very often in new pixel artists they add too many pixels so i'm actually going to remove some of these another thing we can do if we don't want to remove them is just make them lighter because the problem isn't that they're there the problem is that the contrast is too high so if we just lower the contrast we can even do this near the edges of the shading you can have multiple levels to the shading there we go now i blended those details a little bit more into the stones the contrast isn't as high i think the stones now have some pretty interesting shapes and the shimmers on them are very high but we need to make the darks darker so you make the lights lighter and then you and you make the darks darker so in here in these crevices we need to go darker and you can go almost fully black in these in these crevices but i think that that contrast is way too high so i can't i can't go very dark unless i made these outline colors darker so let's try going just a little bit dark and then maybe we'll create more stages of the darkness so this one this one the contrast isn't too high so we can go ahead and put this around so to make it look like there's a little bit of texture feel free to skip a pixel and then add a dot kind of like how we did with the highlight here you skip a pixel and then you continue it you can do the same thing with not just highlights you can do the same thing with shading as well and that kind of gives it a little bit more of a natural look it gives it a little bit more texture it starts to look less clean but in a lot of cases when you're drawing natural stuff that's not a bad thing so i'm just going in the corners here and i think i've gotten all the corners and we've darkened up the corners then we could go even darker if we wanted to we have to be very selective about going this dark all over so it would have to be just very few places where we would go this dark i have to be very selective about this damn i hope yours look as good as mine so from here what you would need to do is make a top towel and a bottom tile and basically what you do is you go back to view and you turn off the tile mode you don't need the tile mode on anymore wait did i turn it off oh you have to go to none oops there we go and what you can do is you can copy this ctrl c and you can create a new document or you can go to sprite and the size and here we can increase this as much as we want by the way you can just drag out the edges how cool is that and then once you do this you can control d to deselect and then control v to paste the layers oh i've got the flat in it it's not iphone i only copied that one layer so you can right click on our layer and hit merge down and it will merge it with the layer below it and now this tile is in its own layer so if we copy it now and paste it we have all the layers in it the best program i found for tiling is called pixel edit pixel edit is only nine bucks it's cheaper than a sprite and you can do almost the same stuff so in a sprite what i can do is i can copy this tile and hit ctrl c and go to pixel edit and then in pixel edit we can just hit ctrl v and paste it so now what i can do is click this tile placer tool you hold ctrl you click it on your tile and as you can see on the right here it got added now once it gets added i can draw this tile around and the cool thing about this program is now if i go and i update one of these tiles it updates all of them oh yeah and what i can do is i can draw a scene let's say this was grass i can draw a grass up here really quickly i know this is crappy grass i'm just trying to make a point and now i can hold control on top of this tile and we just made a new one a grass tile now i can paint this across so the amazing thing about pixel edit is that you can draw these scenes and really see what your art looks like so i'm adding this tile to my pixel pizza art assets which are free to use in your games there's a link in the description below and please follow me on it because you'll get notified when i update the art pack i'll see you guys next week dev live if you guys want to support the channel i've got my own clothing line called panic pop there's a link in the description i totally got to make pixel peat merch like dev life or something right but that's for another episode don't forget to subscribe click the subscribe button

Channel: Pixel Pete (Peter Milko)

Views: 25,219

Keywords: petermilko, peter milko, pixelpete, pixel pete, pixel art, pixelart, pixel art tutorial, how to draw pixel, pixel art tutorials, 16bit, 8bit, how to draw pixel art, how to draw pixelart, draw pixel art, draw pixelart, pixel art video game, 8bit game, 16bit game, pixel art 101, pixelart 101, sprite size, canvas size, 16x16, 32x32, pixelart tutorial, pixel art cliff, pixel cliff, pixelart cliff

Id: Qu6TJscBpj8

Length: 14min 23sec (863 seconds)

Published: Fri Feb 19 2021