Pixel Art 101: Water

welcome back I moved to Austin and I'd love to give you an office tour but I'm not done yet so that's for next week I'm one of the developers working on dword it's a tower defense dungeon crawler I'd really appreciate it if you guys wish to sit on Steam I recently quit my job so this needs to work out for me and if you go to the site and give us your email you'll be notified when we do the Kickstarter which should be coming up pretty shortly so I love how we did the water indoors and I'll show you the concepts behind it so here we are in a sprite I'm just gonna show you a few quick tricks if you select your background layer and you go to edit adjustments hue and saturation this is a quick way to adjust the color for your grass or whatever alright and then if you you know are used to using Photoshop and you like to just see the layers there's these three dashes with knobs on them and over here you can select where you have these layers if by default it's on the bottom but I'm not doing any animations so I prefer to just see the layers I got one more for you so I'm just gonna drag this out and here you can actually choose to see thumbnails and I love this because wait what did I do Oh thumbnail size there we go then make it like four because now it really feels like Photoshop and for me this is just a workflow that I'm used to so normally I do sixteen by sixteen but you know what today I feel like I'm doing 32 by 32 so you go to edit preferences grid here I'm just gonna switch it to 32 by 32 actually I think I'm just gonna go with black and I'm gonna make the opacity kind of low we can hit apply and see what it looks like I'm gonna make the opacity even lower I like that let's get started so you really want to find a blue that matches your green here we have some water and these two are pretty close the quickest way that you can sort of get the same saturation is by so I go ahead and select your green and then just go over to the blue not super deep blue you know somewhere between light blue and dark blue and this color will be something that fits your color palette unfortunately this I don't think is blue enough for but it'll get you in the right spot so I can just make this a little bit more saturated if you're using this then saturation is over to the right but if you click on the color here you can also switch over make sure you switch over to HSV and the s here is the saturation I love to use this as well so let's go ahead and select this color and we can just drag to the right and it'll be a little more saturated if you saw my furniture video I like to put a highlight on the edge and that's exactly what we will do here so I'm going to increase the saturation and increase the vibrance and here I'm going to create an edge for the grass I'm actually gonna make this even brighter next I'm gonna pick up oops next we're gonna pick a brown and this will basically be the stones we're going for sort of like a Zelda look I'm gonna mess with this color a little bit I think it needs to be darker I love using the preview to see what it looks like because when you're close to it like this it's really hard to see the colors I think we got to go even darker and saturated it a little bit more there we go now it looks more like like a bit of a cliff okay so water is obviously transparent so you would actually see some of this cliff in the water an easy way to do that is you go to your alpha and go to maybe halfway maybe even less and here what you can do let me switch to my rectangle field tool is just draw another block you know whatever somewhere right there and this is the cliff that you can see through in the water but I'd like to fade this because there shouldn't be this hard edge so what I'm going to do is decrease the alpha even more and create this create this nice gradient for for the cliff going into the water I think I made this a little bit I'm gonna made this a little bit too tall but we're going to we're gonna fix all that okay and then where the water touches this cliff this is where there's gonna be some some bubbles some turbulence and this is where we're going to light in the blue light in it quite a bit you almost want to make it white all right so let's just go ahead and draw a line right there that's where the water meets the cliff and you know what not too bad if you're going for a super clean look this actually gets you pretty close I think I think our green isn't isn't bright enough I'm gonna increase the saturation and vibrance on that even more because when I zoomed out I couldn't really see it that well all right I think that's better I'm gonna make this blue even brighter it'd be fine if we even made it white I just want to increase the contrast maybe this color right here maybe make this a little bit darker yeah I like that all right and now I'm gonna turn the grid back on so this is obviously super clean but uh let's start let's start making it look like something right okay so the first piece of detail that we're gonna do is we're going to change this highlight into grass blades I don't really have too much to say here kind of just make a little zig-zag pattern that goes up and tell alright so we have a we have red grass grass edge here and I think it looks pretty good just for fun I'm going to add a couple of grass blades here it'll make it look a little bit cooler alright now to make these grass blades pop we're going to do is we're going to grab the brown and decrease the vibrance this is going to be basically the shadow that's underneath the grass don't be afraid to go pretty dark with this all right I think that looks pretty cool okay so I mess with the colors a little bit and I gave the grass a more sort of leafy look basically what I tried to make sure is that when you do the zigzag do not have all of the points the same height we want some of these points to go higher you want so that way it's not as as even so when you're when you're drawing it in the grid don't don't draw right up at the line give yourself a little bit of room I will probably move this closer to that edge this whole thing but I wanted to make sure I had room to do the kind of a design that I want too all right next we're gonna do the cliff it's just a little cliff nothing too crazy so we're not gonna go super into detail we also don't want too much detail on here there's a couple different techniques you can do but I'll show you a very simple one so just go ahead and grab the color that you use for shading and bring that color down and there's a pick a few spots where you're gonna just pull that line all the way down and almost as almost draw stripes but make them a little bit uneven this will give it a look where some of the stones are further back and some of the stones are a little bit closer so the ones that that are further back where you do have this dark color those um let me say the opposite way so this is how instead of the brighter color bring these out forward a little bit and move the water line forward so that way this isn't a straight line either we're basically gonna do an doing a zigzag here just like we did with the grass except they're gonna be bigger much bigger than the grass blades since I will tile this I'm paying attention a little bit to how it might tile but but not really too much that's something that you can just fix later on okay so now this has a much more natural look and I think that the grass blades to make them stand out a little bit more I'm going to add a little bit more shading up here I think it'll just look a little bit better and I'll make them look like they're hanging off of the cliff just a tad bit more alright so in general this is pretty much it you can also take this same color and add a couple of had a couple of these little little shimmers in the water that's something that of course you would animate later or do with a or B with a particle effect but there now we have some now we have some water shimmers we're almost we're almost done here but I'll show you a few more details that you can add if you want to take this a little bit further by the way you can leave these straight but if you want for consistency's sake this can follow the same sort of pattern that the stones do above it's pretty easy to do and I think it looks a little bit more natural it doesn't have to be exact because the water is not perfectly still so you can have for example this go here and I could have you know this would be a little bit crooked here it actually looks a little bit more natural if it's that if it's not exactly the same as the pattern above it okay the next step is just gonna be extra details so the shimmers in some spots we're gonna make them completely white I'm gonna just pick a few and they're gonna be completely white and then a couple of them we're gonna make them a little bit darker so remember to use your thumbnail here your preview to to see if it's a high enough contrast and this right here will just give it a more natural will give the water a little bit more of a natural look let me make that even brighter you can do the same with the shimmers in the water all right next for the stones I'm gonna pick a brighter color and basically what I'm gonna do is highlight a few of the areas on the rocks I'm gonna pick my light source as coming from the top left so I'm going to highlight the rocks on on the left side only I think that looks pretty good if you want you could also shade the right side of the rocks I don't know if I want to do that though let's see what it looks like I'll just do it in a few places just to give them a little bit more form I don't know if that's necessary you might start looking too messy and then also these darks areas you can go even darker you can go pretty dark in here which will make it look like there's there's really some crevices that the light just doesn't get into you can also use that dark color and pick a few spots on the grass to just add it even darker highlight and then with the grass some people like to give it outlines some don't let's say you do want to give it an outline I'm just going to decrease the vibrance here for now I'm kind of just using it as a shape to shade the grass I'm not completely outlining it and I think this way it actually looks a lot better yeah so there I used it in a few places just like shading not not putting it everywhere so for something like this it'd be the equivalent of doing maybe something like maybe something like that where here it's used to just shade the side this the sides that are the opposite of the side that gets the Sun and if you want to go even further probably for a game you don't need to put this much detail in it but you know if you're doing a piece you don't go in further um you can add highlights to the grass I'm actually going to decrease saturation because decreasing saturation brings it closer to white which makes it look like it's a bit like it's being shined on and we can even go a little bit towards yellow I like hue shifting when I shade so you can even give your grass a few highlights I like to put the highlights near the tips of the grass and there we go we're pretty darn close to being done this line here is a little bit too calm if the water was super common to be like that but I'm actually going to grab this go about half way to the Alpha maybe even less and what I'm going to do is I'm going to make it a little bit Messier here I'm thinking I'm making it thicker with a color that blends it a little bit more I don't know if that's bright enough I might need to go a little bit brighter I'm gonna increase the saturation a little bit in the vibrance actually I'll just pick this color again and not decrease the Alpha so much and now what I can do is I can I drop that color and change if I press F the paint bucket tool and I paint bucket that color I filled all the other ones so I didn't have to go and click on each individual one and I think I like I think I like how that looks might look weird in a few places but I think we're pretty much done you can grab your blue your your and decrease the vibrance a little bit and add a few spots that also have almost just like the shimmers you can add a couple of shadows in the water as well they don't have to be lines like that by the way you can also you can also do these sort of shapes these sort of shapes actually look more natural if I was doing sixteen by sixteen this the lines would pretty much be the only thing that I could do but you can do you can do shimmers you can do shimmers that that aren't perfectly straight and it'll look just fine you don't want the shimmers to be too big though that one's a little big I kinda I kind of like the the lines the best for shimmers it's what you can do when you have a layer where you were just kind of like trying to see if you like something is you can right click and hit merge down and now it's all in that layer now if you're making this into a tile set let's say this was the tile set or whatever you need the the bottom one as well for the bottom one all you really want is the grass because even though it's it's top down view it does have a little bit of perspective so I'm just gonna grab this grass I'm actually gonna do it on another layer so it's easy to to move around so I have it here and now I'm going to go to edit flip vertical and this is going to be the the bottom I'm gonna put it about right here I am gonna bring it close to the edge I'll bring the top one closer to the edge of two and let's fill this with water and now you wouldn't actually see the cliff from this side so we're just gonna draw over the cliff here you can have it there a little bit okay maybe a little bit but in general you wouldn't see the cliff you wouldn't see the cliff here on the bottom part so I'm gonna get rid of it for the most part I don't want spend too much time on this like I hope you get the the point so you would you would really just have something more like that for the bottom part I know that it doesn't look great but whatever you get the point so when you're done or close to done something I always like to do is just go back to edit adjustments and mess with the brightness and contrast in the human saturation so I'm just gonna go here and maybe I think you know what this isn't saturated enough and here I can increase the saturation and now all the colors gets get nice and saturated instead of me having to adjust every single one I think that I actually did have the saturation kind of low but um just for fun you know you can mess with these and guys I think you know I think we're done damn dudes I think we did a pretty good job pat yourself on the back there's a link in the description to my itch where I have free pixel art assets I'm constantly gonna be adding to these so you should follow me check out the spread Nutella not hate sure you can get it at panic pop thanks for watching please share this video with a friend can you guess the game's behind me I think I'm gonna switch them out so it'd be like a little game anyway I'll see you guys next week deadlight [Music] [Applause]

Channel: Pixel Pete (Peter Milko)

Views: 73,633

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, pixel water, pixel art water, water tiles, top down tiles, top down pixel art, pixel art 101, pixelart 101, how to draw, devlife, dev life, aseprite

Id: BeNpNmEANpw

Length: 19min 39sec (1179 seconds)

Published: Mon Jan 27 2020

Reddit Comments

[u/politecreeper]

Awesome tutorial, thanks! Now to start on my own tile set