Grass Tileset

Welcome in this lecture we're going to be creating our grass tile set for a platform game. Let's get started. First we're going to create a new project here in pixelate we'll make this five tiles wide three tiles high. You can choose your own height. Six multiples of two or best powers of to have 16 16 or 32 32 64 64 but just know that the larger it gets it gets exponentially more difficult to polish it because there are so many more pixels. So I'd highly recommend just starting with something small like 16:16 K. once we have this set up we need to actually create our tiles because all of these are the same tile they're all tiles zero and that's not what we want here. So I'm going to add some new tiles and we want nine of them and you can set this right here to be five wide just like our just like our system up here are just like these were five wide. And let's just go all the way until we're filled like this so it should look just like this. But you can see these have different numbers now. So this one right here is one. As soon as two and we're going to actually fill these in to correspond with the tiles that we have right here. So fill these in so that each correspond with our tiles over here. OK. So now each of these should be its own tiles. And if we right click you'll see it will tell us which tile it is. Right click on each one and it should just count all the way up to 14. So now we can start blocking out our our grass tiles so here and them and then do. I'm going to select the rectangle shape and I'm just going to start up here come all the way down to here and fill this in. Then I'm going to press D and right click and we should be able to erase. There we go. I don't know. OK. Now we've got the basic outline for grass here. And I'm going to actually remove just a little bit from this like this on the edges. K just like this. And what this does is just gives a little bit more variation to the edges of this and we might actually take more of these corners because we can although probably these ones right here are a little bit more but especially on the bottom ones you can probably get rid of a lot of it once. I don't know that might be too much. Let's come back just a tad here. Go. OK. OK so we've got our basic blocked up shape for this grass. Now we're going to color it. So let's start with the green here and I'm just going to take this green that we already have and move it a little bit more into the blues because I like them to be. I like it to be a little bit more blue. And then we're going to take this and we're going to duplicate it just right click can do duplicate. And then you can drag this around wherever you want it. I'm going to put it right by my green and I'm take this and I'm in a huge shift. See how it says shading up here. Technically you can just huge shift any anyway like new shift and lightness but shading does both at the same time swing come to a darker green like this and that will slowly hue shift towards blue as well. So it gives us a really nice kind of a huge shift towards Blue which is exactly what we want and we're going to duplicate this one as well. Duplicate we'll do that one more time. And we'll do shading towards the blue. OK I just did two steps for each one. Now we'll duplicate this main green that we have and this time we'll go shading but we'll go lighter towards the yellow and that should give us a nice. Wait a minute. We duplicate it or not. We did but I must swap places with the other ones so there we go. I've got dark blue green lighter green brighter. And then this one right here is already kind of bright. So we're probably only going to use these four right here. And so we'll start with the darkest. We'll just fill it in that's going to be our base then we'll start by. I'm going to kind of come close to the edge on this side like this. You can see that like that. And then not very much on the bottom here too. But at the top we're going to come down lower left clear down to here like that and just fill that and it doesn't have to be perfect yet we're just kind of doing stuff quickly here. OK. So we've got that. Now we're going to come. Brighter come here. Do the same thing. And I would actually increase the size of this. I can paint just a little bit thicker. You go decrease it back down for down here. Can fill this in. And then we'll get our brightest here. OK. So now what we need to do is we need to choose a light source because this doesn't really have a lights or something to grab this dark blue right here. And I want to say that we have one light source coming this direction right here and it's like a yellow Let's paint it the color. And we'll have another light source coming this direction. There's like a blue and having two light sources can instantly make something more interesting. So if we're doing it this way we're going to want to shade a little bit this right here is going to not have very much of this green on it. The lighter green it's going to be quite a bit darker over here. And same with down here. So we can probably get rid of this kind of like that and that gives us a little bit more of our of what we're going to be going for. So we can we can select our brightest tone here. And I found that when you're doing grass Let's start with this middle tile on you. You kind of want to do criss crossing angles like this. OK. And then you can kind of just come straight up and there you've got kind of a leaf coming down. Can you see that. Like this and that creates a pretty good sense of the grass. And these criss crossing angles like this can really really help it feel like it can really help mix it up a lot. So it doesn't all look the same. And you can make some of them bigger. But this is the general idea. Something like this the one right here because it seems like it's a good spot for one we'll have one this one right here can come back in a bit. Oh it will be smaller. Some of them you can go more like just Ingold all the way. Let's get this from somewhere like there the one right here. I'll do one right here too. Kind of like this there. So that already looks pretty good. Even just with that. So now we can start shading these. So you know make them 3-D just a bit. We can grab our darker blue or darker green to add the shading here and some of them you'll go like if you want to make them look higher up you can give it a thicker shading like this when we can look make it look higher up from lower and you start to get the idea here. How this is going to look that immediately pops out from the edge there. So now let's do the same thing. With this thicker green that we've got going on and we can make some crisscrossing here to something like this. K and this can come over here some more. I'm choosing a few spots here to just go all the way up with with a darker color and then down here some of this is already crisscrossing a bit so we can just keep that because it looks pretty good actually. You can see that's pretty easy to just kind of criss cross them at that angle and you start to get a really good you start to get a really good kind of grass look without a lot of work. You can add a few that kind of poke out. Down here this is just like saying OK there's a little bit of light hitting these ones. We don't want to hit that center when no come here we go in here we'll come down. Just a tad to this and we can bring some of this brighter down right here. I feel like there's a little bit of a space missing there that I can fill in. And it's already looking really good. I'm going to try on some of these bumps that were left up here. I'm going to try and add a little bit of a leaf to them. I like that and have them pop up just because that kind of makes more sense. OK. So we can do here. And we're already off to a really good start. So we'll keep this site over here. We'll add more crisscrossing to this side because it's going to be kind of the brighter side. Remember this is where we're going to have more light hitting. So let's add some stronger stronger leaves over some brighter leaves over here. I should say for that one right here. This also gives you leaves a little bit of a sense of like the sameness which is good it makes the artwork kind of come together and feel very polished without without as much polish I feel. I mean I guess you're polishing it as you're doing it. So there's that a little bit because we're kind of just these leaves that we're doing you could consider them already polished pretty much where we're taking the time to put in the polish on them. But it quickly is like I feel like it's quicker this way. A little bit and it just starts to look really polished really fast. With only four colors and it's good to stick with a low color count especially when you're first starting in my opinion. KAYE A couple of things we need to do here. So let's start. We've got kind of the bright side of our grass looking really good now. So let's start doing the other side. Now what we're going to do is we're going to pick we're going to pick our this color right here our mid-tone green which is this one and we're going to take that and re duplicate it. I'm going to right click and do a duplicate. Drag it over here put it right next to the previous one. To do this. OK. And then we're going to just Hugh shift this. It's going to be the same color but we're going to shift it pretty much all the way to blue. And then I'm going to actually lower the saturation just a bit so drag this drag this to the left appear you know it's go all the way to blue. OK. And that should give us kind of this color right here that's going to be our secondary light source. And I actually want it to be just a tad brighter. Getting this color right is tricky. And you cannot zoom out and see how much does it stand out. Does it does it stand out enough. And that doesn't look too bad so I'm going to try using this. So then what we're going to do is we're going to start crisscrossing our leaves with this color. Over here because this is going to be our secondary light source and it's it's going to create kind of like a having a light source that comes from below concrete. First of all it makes it more interesting. And then second of all it can create a little bit of an an an easy feel. Like like it's not quite right because light doesn't normally come from below. So when you first do it it's not really going to look like that's what you want you're going to be like this blue it looks terrible but it's going to really help make the picture more interesting. What's here. And will probably will probably end up showing just a little bit of the blue maybe even in here this on that leaf right here on this leaf. Maybe this one is going a little too far in there. Maybe just a tad right here. Let's just take it out. OK once you've done that you can do the same thing. You can criss cross your other green this get a little bit of this in here. And we'll still want to shade this blue to make sure you get your shading this across. This one in criss cross with the shading there and actually go down lower with that like the crust and just a bit. And this really comes in a little too far. Still going to get rid of this this is tricky for sure. And getting the color right to is tricky. So let's test let's. Let's I'm going to shift our color just a little bit more towards green because I feel like I went a little bit too close to the blue or press F so I can fill this and this color I think that's just a little bit better. Hopes. Go. Yeah that looks pretty good. So we're getting really close. There's a few things we need to do here. First of all we need to make sure that our come into your tiles right here. And we're going to right click on this and we're going to put it right here next to itself and let's actually add Let's go to our tiles and we're going to actually change how many we've got here so come to document resize canvas and we're going to do instead of five tiles why we're going to 10 tiles why size. And this way you can see how well it how well it works when it repeats like that. And we're just going to make some minor changes or Presti to switch back to this. Get rid of a little bit of that. So it's not quite as strong. And I'm actually going to make this one right here brighter. And you can see that tiles a little bit better now. And then lastly probably actually want to get rid of some of that and maybe get rid of the middle one. There. So that tiles just a little bit better. I think let's test let's test tiling or right click on this. Let's test tiling this horizontally and this one clearly needs a little bit of work. So let's do let's get rid of that. Get rid of this and the whole time you're going to want to look and see how it works with this over here still so you can see this no longer works quite right. But if we add that in and then we add something in here to we can kind of make it work but then we have to come here and add something here as well. But that kind of forces it to work for us. And then we really should crisscross this just a bit. So that goes the opposite direction because this kind of an X right there. OK I think it's interesting. Maybe you will kind of get rid of that and then come up higher so we don't get X as much. OK so that looks good. Now let's switch to this one and try tiling it. This one clearly needs some work as well because you can see here. Let's put it over here so we can see it closer to what we really have. You can see that there's this awkward little bit right here. We want to get rid of this and honestly other than that tiles pretty well though. So those are all pretty good. So let's put these back in where they need to be each of these because now we need to do is set up our inner tiles right here. And that's pretty easy so we'll grab this color. Whoops this color right here. These are going to be the inner corners so we have the outer corners like this we just need the inner corners and this is going to be we'll grab our rectangle tool again all the way down like this and fill this in. Like this. And then we'll grab our pen tool right click here. Now we can erase we're going to erase this right here and kind of how much you want to do here is up to you. I'm going to do me that much like that. And now the tricky part is to remember which side is going to receive what light. So the bottom corner on this inner tile is going to get this light right here. Well let's start by doing this all the way around this because we know we're going to need this and then we'll grab this color and we'll do some a little bit of crisscrossing right here. So this is going to get some light like that and then these right here are going to be the top edge. So we can give them some of the brighter light like this. Well let's start with this. I guess we might not actually use the brightest something like that and we'll grab a little bit of this blue over here too. Maybe something just about like that is crisscrossing here. Yes. And don't forget to shade and we've got our inside corners and that's not too tricky there. We're just going to make the inside corners not super thick. Now we need to test this to make sure this all works is lookin lookin really good but we need to test it. So it's taken inside corner in the top corner a bottom corner and try and put them together. Right click. There you go. OK. That doesn't look too bad honestly. And we'll do the surgery here which would come out right there. OK. So we went we went pretty far out with this. So we're going to need to compensate a little bit by getting rid of some of this right here. And that doesn't look too bad. But then how does then we have to test how does this see that looks a little bit awkward now. So we've got to get rid of some of this here. As well let's get rid of just this and we can add a little bit of this back. Now it's better without it there. That's pretty good and it looks pretty good up here too. So well we could get rid of all this. How does this look kind of follows. Not sure how I feel about that. So another solution is to actually just add back to this a little bit. So it's not quite so indented and I think this is the easier solution. Yeah that looks better and it's easier anyways so let's just do that. We just add back the pixels in there so it doesn't come out as far as other corners to see how they look. So I'm going to do this corner with this right here and with the top that looks good. Well looks pretty good. I think this is all going to look pretty good so let's save. I'm going to save this as platform grass tile set. Save it. Yes. And then we'll do document and come to our resized canvas again and this time we'll do 10 high as well. And we're just going to test to see how how this looks like what can we make with this. So we'll come over here and we'll zoom in a bit. Grab this. Come down. This will turn a corner come across for a bit. We'll get an inside corner here and come down make another corner. Do an instant loop. See how this looks when we do that. We'll do a corner out this way. Come over. Loop back around this way and immediately come this direction. I'm just I really just want to see how these corners look. Let's Throop let's loop down and then back this way can we instantly loop we could. That looks pretty good actually. Although you'd never do that game would be pointless. But you can do it then we'll loop back this way. Come up and we'll step back. And I got to say this tile set looks pretty nice. I think it looks really good. So hopefully you guys enjoyed this video. Thank you so much for watching it. Oh one more thing though. You can actually save your tiles as an image. So if you do file save as. See this saved as grass tile set up PNB. That's what we want to save does isn't it. Come to pixelate it grass tile set save that save it as a dot pixel so that saves is first as something we can edit later. Now we want to export and do export tile set. And what this will do is it will save just this image right here pretty much which is our tile set. So save and then I'm going to open up my documents here come in to documents and pixel at it and you can see there we've got the platform grass tile set in it saves it doesn't save this right here. It saves just our tile image right here in a nice friendly layout that we can that we can use later. So thank you guys so much for watching this lecture. Hopefully you learned something and enjoyed it. And I will see you guys later.