Tilesets For Pixel Art | Parker Pierce | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Tilesets For Pixel Art

teacher avatar Parker Pierce, Animator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.



    • 2.

      Make a grid


    • 3.

      Sketch your tiles


    • 4.

      1x1 tiles


    • 5.

      2x2 tiles


    • 6.

      Observe others


    • 7.



  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class you will learn the basics of building tile sets for pixel games, starting with building a grid, sketching your tiles, building them in various sizes, and also how to look for inspiration and learn from games already out there. 

Meet Your Teacher

Teacher Profile Image

Parker Pierce



2d Animator (classic/pixel/flash)

See full profile

Level: Beginner

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hi, I'm Parker Pierce. I'm a freelance artist animator. And in these videos, we're gonna be going over tiles. Tile sets are often used in games as an economic tool to keep the workload down. Instead of having everything drawn completely from scratch, you can have ah, recycle of pieces of art that can help stretch your game as much as possible. Um, I'll be doing ah, method that can work in pretty much any pixel art program or photo shop or paint. Whatever program you use, these ideas are universal. And so I look forward to showing you my process for tiles. 2. Make a grid : so the first thing we're gonna do for making tiles is make our own grid. I mean, you can technically do templates, but you grab a template off line. It can be pretty inconsistent. I mean, some people make ah, they make a file that's a grid, but they might scale it up or scale it down, and sometimes that blurs the edges of it or makes it kind of an unorthodox image resolution . Instead of being with powers of two like 16 3 to 64 you might end up with, like, a weird halfway numbers like 68 or turn 12 or 37. So making your own grid is gonna be pretty handy because you're gonna know what it's specs are, and it's just planning to do it. So we're going to start by making a new file. I'm gonna do 32 by 32 because I think that's a pretty good, pretty good tile size base when you guys is 16 by 16 or 64 by 64. But is why I like, you know, just right at the start that there's four squares inside this already, and that's because s Sprite makes its Transparency Checker Background 16 by 16. But I'm ready 32 by 32 just cause that's the resolution I like to work with on tiles. So we're gonna use a medium grey to slap it right in the middle, G for paint bucket. We're gonna fill this entire thing, and we're going to go up to Sprite and going canvas size one. Make sure that it's going from one side or the other. Not not. Center the lies when we expand, the pixels are just gonna kind of wrap around it. Gonna make the width double or 64. Then we're gonna copy that color and many throw sentinel darker G for the paint bucket tool . Fill that in spray canvas size. We're gonna go 64 by 64 and then you can use the one tool to select one of these cubes. Control. See to copy in Trevena paste. Move that over. Have you for wind copy. Control the paste. And now we're starting to build our grid outward. Do the same thing again. We're gonna go to canvas. Size 64 is going to be on 28. I want to make sure that's one way not the other. Not not centered anyways anyway, other than the center. And then we can do control. A. If we don't want toe, copy each square and then copy Control V. I'm holding ship so that when I move it around, it snaps. That's just keeps it keeps it tidy for me, and I got a sprite canvas size. Do it again. 2828. I think I'm going to go up to 2 56 because you can go to 5 12 or in 24 but six works pretty well for me. So canvas size and I think we've done us enough time that you could just do both in its corner, truly a control C control the old shift so that you can slide it over trophy again, shift by it over You wary of a very sensitive scrolling. You were of a very sensitive scrolling Control V. Now we got our grid. This is basically where we're just going to sketch out. What we want to do for are tiles. You can export this out to any drawing program if you want. You can even printed out and then use a pencil or a pen and draw down your tiles That way, a lot of people they just really like doing traditional. They like to feel, get more coordination, you know, manually drawing more so than you tend to be with mouse and tablet. So whichever way works best, the important thing is that you get it back onto your computers, that you can do the pixel stuff. But now you have your very own grid. You can just do control s and save it as a grid. I'm gonna save it as this 13 to buy 32 grid 2056 resolution. That's just my naming conventions. So I know what it is because you might have a 30 none on three to A. You might have a 64 by 64 or 16 by 16 but grids, they'll look the same. They're just checkers, you know, So you can't really It's easier to look at a naming convention to find out what grade you're working with than to just open one up and be like, Oh, as a small one. That's the big one, you know? So what we got and we're going to go on to the planning process 3. Sketch your tiles : this video. We're gonna take the grid and use it as a base to sketch out the tiles that were going to render one. She have your grid. Save it as a PNG I'm gonna save mine has 32 by three to grid 236. Resolution is my naming convention because helps remember where exactly this great is, because you can have plenty of good. You have him 16 by 16. Or you could have him, you know, hard in 28 by 28 because they're all just look like cubes, you know? So I am having the details in there Helps you figure out what it is. Once you got that, you can open it up in photo shop or whichever drawing program you want to use. I'm using photo shop because pretty good program for drawing. Once we have this opened up, you can make a new layer grab pretty much any breast you want. Some people like to draw in a deep red, so I'm just like black lines. Doesn't really matter. And we are going to you will start off by sketching some of your typical pile sets. Grass is obviously a pretty easy one. You obviously have no rocks. This is gonna be kind of a top down Zelda style. I'll sit. May also find no bushes in your game at this point. Um, this is where the grids really come in handy. You might have a different version of Iraq or different version of a Bush might be taller, Wider. You know, maybe you'll have a more triangular one, but it's gonna take up, too. Red spots. However, you didn't have a grid, you may just end up making it's kind of a rough free and then not realizing that maybe when you put it in the game you have a whole bunch of, you know, empty, unused space or, you know, it might be something that should be more centered. But once you have a grid, you know you can more easily plot out what it is you want and helping. It's gonna be also a lot easier to draw out sketches than it is to take one towel to completion and then find out that it's ugly or you don't like it or it's not applicable to where you're at because and sketches. If I'm like oh, that grasses, Gadi words messy. Your it doesn't mesh with the game and just erase it. And I could make a new one. Maybe I want the grass to be more symmetrical. Heck, you know, I could even have multiple versions in the same No planning. Maybe your grass is gonna be more pattern, like more striped. And with rocks. Maybe you want something that's a little it's move there. Maybe a strawberry is gonna be more decorative. Maybe you wanna have more elaborate chunks to it. There's all sorts of different things that you can plan out. Maybe maybe you wanna have a sign. You don't always have to have nature objects. You can use the breads for everything from props to items. Dinner Point is making a sketch page of these way quicker, then polishing them, and that's that's what this is for. It's a time saver. It helps you plan things out, and it's really cheap. Teoh scrap ideas and make new ones. And so I definitely recommend going through the stage of planning out before you make things. Some people, they really know what they want, and they can just skip it and go straight into you. know doing their pixel art. But I was just a safety precaution and just general good procedure. Sketching out is pretty important. So once you have as many things you want sketched out, you can go ahead and save that as a new bile. I'm gonna save this as, ah tile sketch. And I am going to say this as a PNG because I'm going to bring it back into the a sprite to render out a couple of them. Hi, Polish. 4. 1x1 tiles : Once you've sketched out your ideas onto the grid, you know, whether being photoshopped digitally or drawn on paper and photographed and imported on your computer, we can take that image back into a spry and Ross, um, final tiles on top of your preparatory drawings. So I'm gonna drag in the which is that I did. We're going, Teoh, that will click on layer and name this sketch and then with shift and we're gonna make a new lair. We're gonna call this one white out because we're going to use G. We're gonna fill this pure white. Then we can double click on it and drag the opacity back down a little bit, cause we wanna wash it out enough that we can see it. But when we draw on top or not going to get, you know, blocked out by our sketch, though, shift and again is going to get us a just gonna call it main. The main layer might be a line layer might be colors. The first time we're gonna work on is gonna be the grass, and you may initially want to just go straight into it, you know, drop a bunch of little grass pieces. But it's better to plan out your palate first, because grass itself is not difficult to draw, and it's not very complex. So the way that you make your grass good is by having a good palate for it. I'm going to take a fairly neutral green as a working base, and I'm going to make a They are key color where I'm gonna shift towards blue, you saturate a little bit. I'm gonna do that again, shift more towards blue. Maybe I'll saturate that plumes because I like the dark colors. Let me use Ault. Liken I drop back to that main green and then for the brighter colors. I'm a shift towards the warm side when you use more yellows. And so I will do that one more time because five Carter's is a nice, nice place to start. Once you get a rough palette in, you may start to see what colors work with each other and which ones don't because any color on its own isolated is simply just a color. The important thing is to find have the colors relate to each other, for example, all for these colors seem to be matching each other more than the yellow, you know, seems to be been of an outsider. And I guess to some extent, these four colors seem to be matching better than the blue. But we want as all the colors to feel like they're from the same group. I mean, I m for marquee on a copy with control C control V to Paste. And I move this over and I'm going to, uh, fiddle around with the colors to see if I can get something that's a little more cohesive. So for this dark color, actually, kind of like it, even though it doesn't match up with the rest the colors. So in order to make this color match up, I'm going to adjust the transitional color. So it's gonna be this one if I take this one and make it a little darker, a little more saturated, dragging a little closer to blue. You can see now how the three of these fit together a little better. I can continue to tweak the colors, have the screen one dragging a little bit closer to blue. Maybe a little darker, maybe a little more saturated. Maybe the start code is just It's just a little too dark. Maybe I will bring that up a bit. Here we go. And I like this green, but maybe I can make it closer to the yellow so that the yellow matches up a bit more. There we go. Now we're getting somewhere de saturate that yellow a bit, maybe drag a little more towards green. That's better. All right, now that we have, you know, a place to start, I'm gonna make a blade of grass. I'm going to use one pixel, that one pixel of that. This screen is gonna be the body soul used to Xia, you know, Please, three of the body that looks like a pretty decent blade of grass. I'm gonna use em and select the entire thing and press control be now have converted this into a brush by default. It's gonna have pattern aligned to source which notice, as I'm moving around, it kind of has this. Let's look to the shifting luck. Because no matter where you paste, it's going to lock to a repeat pattern. We might know always want that, like in our case, we don't. But it does have its uses If you move down to paint brush, you can actually you get effect like this we're going to do first is drag out some random bits of grass. I'm starting with the back layer first because we're going to be overlapping on top of it. You want things about moving from bottom up is you notice that click back so I can go back to my normal brush. This spot right here I put in herbal to grasp, but now it's it's behind, but it's overlapping the front. So if you ever do, you have to go back, make sure that you can. Being some of these up this control be again. So I can a couple more of those click back E for Racer. I want to make sure that whatever grass pieces I have, they still stick within the box that I have laid out for. You know, each Kyle because you don't want to have, you know, one pixel off tiles. You want animal uniform and there's gonna be some gaps in here, so I'm going to use a box election. I don't want to go back and fill in each one of these little gaps now my hand because it's just tedious I'm gonna do Is the G for Gray are not great int It's great in some programs, but G for paint bucket in general. Not sure why, but this tends to be the hockey for it. Gonna pick one of the colors from the original palette. Maybe this one, cause it's kind of faded out. And if you turn a continuous off, it means that if I feel in any spot here, it's just going Teoh basically feeling all of that sort of color or lack thereof like I clicked there and it felt it in if I had continuous on, it's only gonna fill to the bounds and that even if it's quicker than brushing it in, it's gonna take a while to do that. So once again G for paint bucket are in continuous off, and I'm gonna be saturate this just a little bit. Ah, never too late for power adjustments. Bring this one closer to the Arthurian colors. More more oranges, more yellows, Harry guys getting closer. I'm also going to make sure that the value range is closer to the grass of that. It's not as contrast e value is the artistic term for how light or dark something is. So things that are closer in value range are going to be about the equal amount of lightness or darkness to them. We just got married, and now I am going to go back, and actually, I'm gonna show you something. So I wanted to fill in these gaps because I know they're gonna be kind of a problem when I use him as a tile. But instead of fixing them now, let's see what it looks like if I just paste this tile over and over again by control, seen control V and I zoom out. Then I control the again. It will be one more time. This is what the tie looks like. You'll notice that those gaps that I left loan I'm gonna start repeating themselves. And you're gonna notice when one tile begins, another ends if you don't fix those. So that's why price fixing right here too back. That might be a good idea, would go back and use em. We're gonna grab on those blades of grass again. Control be We're gonna see if we can fill in some of those. Yup, Pretty good. Yeah. I'm going to take this piece. I'm just gonna scoop that up to the top. I'll delete that thes lemon repast. This Chelsea and control V hoops off the Novy. There we go. Now we're starting to see where tiles gonna look like on repeat. Sometimes the scrolling zoom in this program is a bit Wiley. And this is where, um this is where testing is really important. Because anything that you make and close up, you might think it looks absolutely great and wonderful. It's so pretty. So I don't need to worry about anymore. But tile sets, you have to test them. You have to see what they look like out in actual application in order to make fixes. Like, for example, I really don't like how these clump up right here. I still don't like this gap. I don't like how there's a noticeable horizontal line going here now that I have Ah, you know, these Pace it out. I could go back in and make some adjustments. And if I'm making a transitional adjustment, whatever I make on the second half, I have to bring back up here because, you know, if I dio I'll just fix the bottom of this one, but it's still gonna look really weird. You'll see what I mean. So if I but some of these here in a surgical operation, I'm gonna go back, and I'm gonna a couple of these edges, and I'm going to if I could Yeah. There we go. That's better. Mm. All right. All right. Not looking Too bad now. Okay? So once again, the second half might as well just drag all the way down. It's good that up to the top. Leave that half wolf. I'm simply just using the mouse wheel, the zoom in and out. And it's well, I'm pretty crazy, Okay? It's looking better, but this is still going to be a a repeat process. Eventually going to want to eliminate any evidence of horizontal griping if you can. And at this point, it's still not too late to do, um, power adjustment because, you know, maybe I don't like how contrast ing this is. Maybe I want to be more unified. I can go ahead and click on this green and bag it a little closer to green. More A yellowish warm green G mixture continuous isn't checked, I could say who it's that's too saturated, but, uh, gonna fiddle around. Maybe I just need the value range to be a little nicer. Maybe it's just a huge shift. Well, both it's totally okay to just fiddle around with it over and over again. That's pretty much what I'm doing here. Just kind, like this work. I don't know this work. Maybe there. Okay. Okay. Now it's getting pretty good. Um, is three highest greens are pretty well unified, but that's making these two dark blue stand out. So once again, I'm gonna go update those gonna shift that blue little closer into the greens and maybe low . Well, brighter. Not bad. Not bad. Then this blue might just be saturated, Tad, and bring a little writer. Mm. I kind of like that. Like there's a style going there. Some people really like that super blue shadow. And I do too. However, I think for this one, I'm gonna tone that down just a little bit. This will do for now. Okay. Okay. We got a functioning grass tile. Let's see what it might be like with something a little more complex like a rock. Because Iraq is not going to be, you know, basically one color line, which is what grass tends to be. It's it's a blade. It's a small little piece, you know, it's not hard to drop, but Iraq, you know, it's it's not a Michelangelo type thing. It's not like something super articulate detail, but it's still got. It's got its forms and shapes and stuff like that. So we might not use the same process for that kind of a top that we would for a grass. So I am going to go to a black B for brush. You want pixel perfect on because that's gonna keep your lines nice and crisp. If you don't have pixel perfect on, you get clumps like this. And if you're doing things like you're trying to make a specific shape and having pixel perfect off might be, you know something that you want. But as far as just doing straight up line work as a base for your stuff, you're gonna want it on. Let's zoom in, take this rock to completion. I'm going Teoh to start off with people line work. You'll notice as I'm drawing that I'm using the sketch underneath as a guideline, not using it super duper accurately. Sketches are there, too. Help you figure out the final. But they're not. Therefore, when they're obviously not the final, So don't feel like whatever you draw attorney, if you have to, absolutely go with for sure. So this is the This is a sketch that we're gonna be working with so far. And so the next part is back to pallets because, you know, even if the form matters, it's still going to be pretty simple because it's picks alert. So a lot of the punch that comes from your pal set is still gonna be palette. I'm gonna go to kind of an orange. I'm a grab very neutral orange. Then I'm going to right a little more towards the yellows, more saturated. Do that one more time that I'm gonna use Ault to get back to that center color. And I'm going to shift more towards the reds and purples, then for the shadow color just for the heck of it, because I think it might be fun. Deep purple always been a fan of old school pellets that use are those really rich shadow colors. And if I can get away with it, then I'll oftentimes do that. Once we've made our pilot weaken, copy it over to the side and do some more adjustments. See if we could get a more unified and nicer looking set. That's what I'm doing here and used be for brush. I'm going to use Ault. Grab that yellow. I feel like the yellows. Probably the most at a place right now. I'm gonna see what happens if I d saturate that. Make sure continuous is checked because if it's not checked, when I change that color changes it everywhere. Make sure you have that check box. Do that once and already I feel like the Dole highlight. It's something like a rock. You know pretty well, because it's it's not glossy ley grass. It's not gonna have a super vibrant colors. So making the highlights of that Dole is pretty. Okay, um maybe this middle color, I might shifted a little more towards red. Does it work there? Yeah, well, so I will say, though, that having adjusted that color, it changes the context of the lower three because now this middle color seems kind of law. That's nothing about colors is it's not the soon colors you pick. It's the the whole of them that matters, especially when you're working in something that's abstract and low resolution, like a lot of pixel art styles. But for this color, I'm going to saturate a bit. Mawr drag a little more towards red. You Not quite there. Mm. Still not there. Air. We go. Okay. Okay. So fine tuning. Just a little bit more Now, I don't quite like this orange. Yeah, I think that'll do. That'll do. Now. I'm going to this. Fill in some flats and make sure continuous is on because of its off feeling. Everything we don't want that. We just want to fill in the shapes in the rock. Make sure it's checked. That's when the nice thing is about flats, though, is that you can very easily it's things around. If you don't like him, that's that's better. That's better. Okay, now we want to get rid of this pure black line because it's not gonna look very natural. So the beginner way tends to be Oh, let's take a different color and go over every single one of these black pixels with a new color, and you can do that, but it's gonna take a while. So the quicker out is to use a lasso selection either m from our key or que for the I think it's called free form or just blasted. Total, I guess. Don't know I Q's for last. So but it is. We're going to use G for paint bucket and take off the continuous check box. That means any time I color one, these black pixels, it's going to They're all of them now, all of a Murdoch red, I mean, just for dramatic effect. You can see what happens when I use a light color, although that's not what we're looking for. And I still want this top plane to be, you know, a bit different than the side planes because it's on top. So I'm going to take this color and just writing it a little bit. It's OK to contiguous. Make sure you got them one on It's okay to deviate from your palates, you know, here and there. Just make sure you know why and, you know, be safe with it, because more colors you introduce into a palette and more complicated is to make adjustments later on because there's just a lot of colors to work with. Okay, now, what I'm gonna do is they're gonna press are for the Blur tool. What blur tool does is, well, pretty self explanatory. However, you can also use it to find transitional colors for things like anti alias sing or palate mixing. And I am going to go over to the palate over here and just find myself a couple transition colors I'm gonna use for my anti alias ing or to simply give it of these black lines. We're here, for example, between this light yellow and this orange, I now have a color that will replace this dark brown and continuous off looking a little better. Same thing with E others down here. I'm gonna select this. De contagious is off. That's a lot quicker than going back and manually coloring all of them. Mm. Then you will have times where leg, since this is a custom color, can't exactly use that as the transition. But I can, you know, every here and there. You might have to just manually erased the line or not, but sometimes it's easier I go back through and I fix those edges. That's not looking too bad looking too bad at all. Um, maybe I will use that for the other side. Yeah, that's broken. Working pretty well. Okay, Okay, I'm digging it. So this black edge, I think I'm gonna keep that. But might do one more round of grabbing a transitional color, and I dropping that I'm using are once again for the blur tool. Then be for brush, just kind of filling in little bit. You know, us. I'm not lining the entire thing with anti alias ing colors, not trying to make the edge blurry, because that's what it does. You just want to use a little bit. The more picks a lot, you dio the mawr. Your gut feeling is going to be updated. So don't feel like there's any one way it's supposed to be done because, you know, if there was one mathematical formula for the best anti alias saying, Probably be, you know, easily done by computers. I'm like that. So you know it. Anti alias ing is an art form. It's it's something that you can actually kind of express how you want your heart to look just through transitional colors. I mean, there's some people that they don't even use, you know, a middle color like this, they might do something crazy. Like that's what happens if we use a red doesn't quite work the way want. But point is, I can get something Maybe some people don't even stick with, uh, you know, natural colors for everything. Anyways, I just know that there's like, some wild Pokemon art back in red and blue when they had super limited palettes and you'd find that they'd use some of the most unconventional transitional colors for their anti alias thing but look really charming. So once we got one of these ready, you know we could sail. That's but it's pretty cool, but we don't know for sure. How is it gonna look as a, you know, whole because that's one piece of art in the grass is another piece of art. Everything about tile sets is you have to test it out with each other to because another tile sets, they're gonna be in the same ecosystem. You can't just have two pieces of art you like class with each other in a game. Otherwise, it's got a big ugly, Even if the art as there on their own look pretty. So this, um it doesn't look bad, but it could be improved a bit. I feel like it's still somewhat contrast e gonna copy this one over just for safe keeping. Not a mess with this. I'm gonna see if I can get away with de saturating some of these colors. Oops. You want to make sure once again, you have continuous checked on otherwise that the rock that I saved is gonna get affected by this to Maybe not that you saturated? No, no. What? I would lots of trial and error. Mm. That's close. Okay, That could work. Not bad, not bad. So you'll notice that as I'm doing these pal adjustments because I did anti alias in colors , I kind of have to go back and fix those two. So that's one of the benefits of making sure you don't get ahead of yourself and figuring out your palate and making sure it works with the other tiles before you start polishing things up. Because if you don't just a cost more time. And so the way that I would do this isn't stiff trying to fiddle with these fringe colors and be like, Oh, maybe if I just these two will work. Just just clear. I'm nude. I know it sucks, but gonna be a lot quicker, actually. Maybe by clear one of them. Okay, so here is one halfway compromise, if you just. If you know that you're not going to remember where you put all your anti alias ing edges, you can clear one of them, fix the palate and then used the non continuous paint bucket tool and update that for the rest of it. However you keep in mind if you're doing a lot of anti alias saying you're gonna have like if you got like four main colors, you might end up with 16 or 32 anti alias ing transitional colors. So once again, try and figure out your palates beforehand and also keep your anti alias ing smart. If you want to be able to make changes without a costing a lot, I'm gonna go back and ah yeah, this this border just not looking very good. It's too saturated. So I'm going to race some of those use. Our is the blur color to find transitional one. You think that's a little bit a little bit weak? Um, I know. I just think it could be a little bit. Mm. You don't always get, like, the most ideal colors when you use the our tool the blur tool to find your transitions. A lot of times you well, but, you know, you still want to use your own gut feeling to get these colors to work right and stab using that trick. I'm just gonna kind of be lazy and see how well I can get that tow work without doing the but the paint bucket tool. It's gonna manually because it's it's one edge. You don't always got to do that. Mm. Okay, someone get rid of that one. Another case where? Even though this is kind of middle way, Bill, punch up the saturation. No. Right now, we're working off talent like we're not. We didn't take the strip of power. We had to the side. You figure out colors were just kind of like fudging them. So sometimes it's a bit risky. It's, you know. Okay. Okay. Okay. That's all right. Maybe this one. I'll just make it a little bit brighter. I don't know. I'm not quite sold on that. That's all right. Let's see how that looks. Such a wildly active zoom. We control C Control V. Let's compare that to the block that we had before, which seems to be off grid anyways. You can keep, you know, feeling around with pallets. I tend to think that this one on the right blends in with the grass a bit better because it's not as does have a much punch to. It's not as strong, although there is something charming about thestreet long reds in the original. But whatever Appel adjustments you make, you can always keep different versions. I mean, heck, every time you make a new palette, you kind of have a new tile that you can work with so many ways. That's the general gist of, you know, one by one tiles. Things get a little more complicated when you're working with, uh, multiple tiles that connect to each other to make different shapes and stuff like that. But just for simple ones, you know, this is pretty much the gist of it. You draw them out, you test them next to each other and yeah, 5. 2x2 tiles : Okay, so now that we've done, you know, single title stuff what about the bigger things that require multiple tiles or the tile sets that you can no mix and match pieces for two by two sort of tile? If it's just a bigger object, it's gonna be more or less the same process, but a little bit longer. However, you can always take one of the bigger pieces and modify it, make it even bigger. So, first of all, I just take this big rock and, you know, go through the process of, well, polishing it out. Oops, Once again will begin with simple line work not being super que about everything yet because pretty easy to go back and picks rogue pixels like this. And by the end of it, you know, there's plenty of time for polishing. So I go back and I'm gonna pick. I think I am going to go off this rock because I just don't like it. A little more continuous is on. I am plants No. One. I'm gonna a little update here. It's called again. It's also when the nice things about having an already established palate is Look how much quicker. I made that. You know, it's the four times a big rock, but it's still like not them. It's time at all. And I can look at the anti everything on this one and be like, Oh, well, just do something similar, you know? So I'm gonna go and I don't know. I'm still not sold on that a little bit. It's just it's maybe this needs to be dark. And you know what? I'm gonna turn continuous off because kind of do want that change across all boards. That's another thing That's nice is that sometimes you do by accident. But other times you just might want to change all of a certain color. Okay, I like that one better. I think it's because the value range for the darkest one was just a little bit too close to the side ones. And I know if you get you get too far than just a really pops, it looks ugly. But if you got too close together, you kind of have, you know, the same type of issue where it was a same, but the opposite spectrum of issue where just that blends in its like a shade darker, but not really just look slightly different instead, more shadowy. I think you knew what I mean when you saw it. Anyways, grab this color. And then I'm just gonna talking a little bit, because when you have two of them next to each other, media is gonna end up this kind of and again, I just I feel like that's flat. So I think I'm actually going to adjust this one, make a new a new plan. You know, everybody is always improvising, and not everything is gonna go according to plan. That's absolutely OK. Take this color and I'm going Teoh up in town. There we go. OK, so now some transitional colors here. Yeah, it's looking pretty good. 222 Grab This one here. Did us off are Ah. These ones here do the same thing. This sort of process, even them doing it on Iraq. You can pretty easily imagine how this is the same stuff you'd use for gemstones or you on nights, armor or anything. That's kind of like hard edged. You're gonna be, you know, using a lot of similar methods. I don't feel like you always have to do rock for this. So this is only for rocks. It's just happens to be what I'm rendering right now. Um, going to, um that Oops. It's again gonna look at that check box so easy to forget it. This might be one of those things worth speeding up in post. We're not. Not sure if I'm gonna have any nuggets off information. Maybe I will. Now we have a rock which is going to behave. You're the same as one of these, um, single square roc's egg separates. Obviously gonna take up more space. But we can modify this so that we can make rocks that air to buy three or goodbye to for my four things like that. Let's see how we can modify this to something bigger. I am going, Teoh. Well, one of these to one corner, one of these to another. That's odd. Maybe Didn't know. Okay, we got that. It originally didn't take up every single specific pixel edge. Okay, now Oh, yes. So once we have all four of these out, we can kind of build transitional peaks. We're pieces may also have to modify. In the meantime, the point is, these transitional pieces we're gonna have to be able to paste them multiple times because we might want to rock. That's four by four. Or find by five or any other combination will make more sense once we get some of these pieces established. Once we get these going, we're obviously going to have to test them out. Make sure that well, the transitions worked because transitions air Pretty darn important I'm trying to do is make sure that the edges kind of lineup so that if one of these tiles air pasted next to itself, they would flow into each other pretty seamlessly. Also, I'm making sure that any of these plain changes happened before the grid cut off, because that ends of looking more often than not kind of clumsy in the mm Uh, that might actually use. Yeah, I think I'll do that. Well, it's better to me because they tend to look a little clumsy and cut and paste and tiling patterns when you have awkward cutoffs. Oh, just you know, you on the look out for that. Okay, this is actually pretty close. I mean, just a little anti alias sing on the edges and are probably pretty set and don't feel like you can't go back and adjust more, because you pretty much always can. Mm. Don't actually like that when I like how these to line up. So instead, I am going Teoh, change this angle so that it feels like the shape makes more sense. Okay, we're getting there. We're getting there. Take some time and you'll notice that the very dead middle of this rock is just It's flat orange, you know, has a tile. It's gonna be this the centerpiece Skube, blank, orange. And sometimes that's okay. You know, there's a lot of but our set think that Oh, you can't leave any empty room. You have to put detail everywhere and they end up spending extra time to put stuff there. And it looks messy and forced. And sometimes just let blank fix. Be blank. You know, it's not something you always have to dio. You can keep things simple and sometimes actually allowed time. Simple is better. Okay. Okay. So we got we got actually, I'm gonna take this and I'm a deuce and D saturation to see what that looks like. I don't want too much. We'll give it a little textures What I want Remove my brush up to two pixels for once because it's easier to dio stuff like this. And you want. Maybe I told you just said you could leave a blank. But maybe it might actually be nice to put a little texture there. I could be totally over doing it. I think I might just be making to look like cheese. Okay. And continuous off because I kind of wanna want to mess these colors. Um, as a whole. I wanted to go back and yeah, that's looking like cheese now. Ah, Well, you know, I tried. I'm gonna just erase it. You know what? Simple good. Simple is good anyways, ashamed. Try and things gonna bring this back down. Well, more tidy up. All right, so we have this big rock, and we're going to see if we can make various shapes of it. Various remixes of it. I'm gonna move it over to the side, though. First, because gonna make me some space. He's down. Sure. It's still keep among bread. All right, so this Oh, Doug Pixels Dangers of elections. So just so I can see the great a little bit better I'm just gonna drop the opacity because I can always bring it back up. Let's see what happens when I Yes, this one out. But then I make it wider. If I have done my stuff correctly, I should be a paste. Yep. Bad, actually kind of works the same thing with if I want Teoh. What if I wanted to bring it before my four seek me? Here we go. Mm. Okay. So now you'll notice this side doesn't seem to be too off, but this one over here got a little bit of a hard cut to it. Well, I could do is just try and sand that down and see. Then I will cut out this section and copy and paste this one again because I don't want to do the same fixes over the same tile. Multiple places. Yeah, and so now, I mean, technically, speaking of Allah, do I could extend this even further. And this is the beauty of tiles where I didn't have to make a completely new drawing for, you know, and five by four or a four by four. I just had a properly functioning tiles and I tested them to make sure they work well. And this is this is the basis for, you know, everything from, um cliff sides and roads and all sorts of things. And you're, you know, classic top down games. So now, once we've made this three by three, one thing to keep in mind is the adjustments that you make in order to do this may not translate back down, Teoh. The original design. If I cut out these middle pieces and then I try and bring this back down to two by two, you'll notice that, like it kind of works. I mean, you could polish it and try and get you know, these edges toe work Point is, you know, if you want you want your two by twos and your three by threes and all the various transitions toe work. You got to keep moving them down, seeing what they look like, polishing those transitions and then doing it again. And so, you know, there's a lot of different formulas for, uh, this sort of stuff like no game ladders, for example, aren't gonna operate the same way as rocks because rocks and you can you can extend outwards and upwards But you might make you know a ladder, for example. And that one my only tile upwards. And it might not tile outwards, because you may have to. If you wanted to make a super wide ladder, you'd have to now make or completely new tiles to make that happen. But so each kind of object that you're working with is gonna have its own properties for how you gonna set up those tiles? Same thing goes with what? If you're making a house, you might have, you know, your roof stuff. You know, this this might not tile upwards. They look really goofy, but the whole thing might tail, you know, outwards. You know, maybe maybe something like this. So, yeah, each each type of object is gonna have its own tiling requirements. And the best way to find out what you need for certain tiled types is gonna be doing your research and finding them in games. You may find a certain set up that one game uses for their, you know, castle walls that you don't seen a different game or something like that. So, you know, do a lot of do a lot of, uh, library building? No, I do a lot of research and Ah, a lot of practice. And eventually you get the hang of it more and more and you'll of Ah, you know, it got feeling about how to go about doing whatever tiles you need. 6. Observe others: All right, So now that we've made some tile, some very simple ones, you know, where we go from there how do we how do we improve? And one of the ways that we can improve is observation. So I suggest actually grabbing screenshots and sprites and whatnot from other games. Just that you can. They come apart and look at him. If you have the mess P and G's, it's pretty easy to just click and drag them into, uh, a sprite. And then from there you can you can observe and just see what kind of stuff that people dead. And so, this video, I'm just gonna kind of talk about I'll sets. You could even mess around and cut and paste them, too. This is a screenshot from shovel night. And if he wanted to, we could open up our grid and pasted on top to just kind of see where everything lies. Put this in here, control a control, see a control, see, And then we can shift and to make a new layer. And we're just gonna call us one grid. Then maybe we'll drop the opacity to mm. Looks about right. And depending on where you got the screenshot, it might be propped awkwardly or something like that. So if you're gonna use agreed to find out something with your tile sets, you may have to kind of scoot them around until it fits. You'll also notice that the image I'm working with is a J peg, because you can see these little picks a lot of facts. It's best to work with P and G's that haven't been scaled up and scaled down because, you know, pixel er, especially, you get all these blurred edges. However, if you're studying, you can still make do with, you know, P and G's and stuff like that. I just, you know, here in the side of caution, But from here you can kind of tell where things repeat, and sometimes you can play around and be like, all right, so this is no one tile set. You can always extend them out and you'll notice that actually that end pieces not wait, Sam. That's already one observation. The end cap pieces have more shadow on them, but the more you play around with pieces of a background, the more you can learn from them. And so a lot of this is just you like my wonder what what this would look like on repeat. One thing you'll also notice is that you know not being super precise about my cutting pastes like there's this down here that isn't artifact from behind. And so one of things that you'll notice is that now the ground plane right here tiles horizontally does not tile vertically. That's one thing that you can you are to pick up is that I'll sets are made for a reason. Every tile has its own purpose. Basically, you'll notice that, like down here now, there is a unique they agonal set. And so you may, you notice that's a new version. It's not like they pasted something like this and then went on to something like that. No, they made I mean, a diagonal tile. You'll even notice that how my colors are they working with, obviously, the bit hard to tell what's intentional anti alias ing and what's just blur you get from ah J Peg a resize image. So that's another reason why you want to work with crisp PNG files as much as you possibly can, but you can still tell that the main colors are 12 three and black. And so, if you ever like Oh, you know how many colors do I need to make a dirt block? Well, you can see a very successful game has done a dirt block in roughly three colors. And so observing someone else's art can tell you you can also tell how good something looks on a limited scope. Take a good old fashioned Mario. Yeah, and so you can see where there's corner pieces. But you'll also notice that there is a repeat of a middle body and like what we did with the rocks and then the corner piece here may just be a mirrored piece. Take a look me O v well, h for horizontal. It actually looks like it isn't all right, OK, Another interesting thing is, when you look at art from games that were released, a lot of your assumptions about how picks alert ought to be done can, uh, be thrown out the window. Like, for example, I tend to work with avoiding black lines as much as possible. But you notice that the classic Maya block has straight up black, and that was released in the game. You could also argue that was an older style and that, you know you know wouldn't fly by today. But I don't know. Something observed could also be like, Well, if I don't like that black line, well, you can tap with it and be like, What would it look like if all of the lines here where you know a blue instead of a black and because this is a J or not? Yeah, because this is a J peg where I do my bucket fills and notice that it's not really filling in everything perfectly. You can bump up your tolerance that basically looks for the nearest colors and says, Are they within a certain range? Yes, no. And now it filled. All of those in black are all the black ish pixels in blue. Also fund, Sometimes to just take are and, ah, you know, just tweak the pallets or see if you can make a mutation of their tiles like what? If you want to do that's a little a little deeper like that. And obviously another issue with working on this is that it's a balloon up model, and so These are actual pixel size. Each pixel here is a big square. So, you know, be Be careful about where you get your observation material. If we confined a J or a in G. Ah, here we go. OK, This one, you'll notice the pixels are square pixels and wonder if I did a quick test here. Yes, it's not a J. Paige. Please don't think all of the the colors are uniform, which means that I can make very accurate observations about what they did. And so this is another really good tile set that you can see that there's repeating tiles here and then they have the slant up tile set here, and they actually do have, ah, to buy to, um, ladder. And the other thing that you can observe is that the grass have little bits of grass here, but they didn't make everything super duper noisy. And so some of the lessons you can learn by observing games is not just about how pretty in polished and detailed something is. But, you know, where did they simplify? Where do they keep things? Ah, you know, bare and empty. And how does that look? Does it does it look all right that, you know, the grass is mostly just a salt flat color. And in my opinion, yeah, it looks pretty good. You know, with little spire, spitz of flowers and little blades here and there you can infer a lot more detail without having to put in a whole bunch of time. There's also the fact that you can very easily grab the pallets off of these screenshots and repurpose them or modify them. Sometimes it's fun. Just look at the very, very, very old school ones, like How much can you do in practically three colors? You know, actually, two colors and black and white. And so this is an example of the fact that you don't need a Brazilian colors you don't even need and the anti alias thing to get something good you can get away with doing de thering and all that sort of a thing. And so let let's successful games and let ah, professional artist with quality work be your your guide, your recipe book, your example of how to do things well, what what do quality tiles, what not look like and you can even try and like replicate them. If you want, we'll make a new version of them or even see what would happen if I took You know this purple and try to use it as a sort of anti leasing on a different part. Oh, here to learn an experiment from. And if you ever want to get better, you're gonna have to learn from other people because you can't just keep doing the same thing over and over again. Otherwise you're gonna get the same results. And so you have. My recommendation to you is if you can start building a library, just just grab screenshots of everything, grab sprites of everything and just just thumb. And whenever you have a project that knees, a certain style or a certain palette or certain parameters, just dig up some old stuff and see how they did it and decide if you want to go one for one with what they did. Or if you want to use it as a springboard for your own, um, styles. Just yeah, do lots of research. It's good for you 7. Outro : in this video. Siri's I showed you how to make your own grid for your tiles. I showed you how to sketch out a plan, the tiles for rendering. I showed you a few processes of bringing a sketch to a completed tile, as well as ways to make tile sets that correspond to each other. And then I showed you a few examples of how to do your research and how to improve and look for new ways to do more creative tiles and what not. I hope you enjoyed watching.