 If you're mainly a programmer like me, you might have found yourself in this situation where you have to make some sprites for your game, so we usually gravitate towards making something in pixel art. It's faster, especially in game jams, stuff like that. So since my brother is an expert at doing this, he has a very, very big portfolio of pixel art, another kind of style that he mastered and works on every day. So I have to help us with our programmer art and give us some tips that we can follow regardless of our level. He's gonna be covering a few topics. Please make sure to check the timecodes if you want to check something in particular. And I hope you enjoy this kind of video. I leave you to it. Hello everyone. My name is Toen. I am Emilio's older brother and I'm a digital artist. Today I'm here to show you some very basic concepts of pixel art to improve or transform any sprite into something readable and nice to the view with a few simple steps. For that, I'm gonna be using this neat little app called Pixelorama, which is open software and completely free, but of course you can do the same in I'm about to show you in literally any program you have for editing graphics. I have a sprite that I have ready for this tutorial, so I'm gonna start opening that one. It's open. It's a 64 by 64 pixels sprite. First of all, you don't have to follow this step, but I do like having a white background on the sprites right now. This is the alpha, so there's nothing in here. Okay, when talking about pixel art, we are talking about pixel efficiency, which means that every sprite needs to convey the most amount of information in the most clear and readable way on the smallest space possible. That's why there are techniques that are universal among pixel art sprites because of how the medium works. And we're going to start with the colors, the swatches or color palettes. Having a limited amount of colors throughout all of your sprites will make everything feel cohesive and in a sense part of the same world. So for that, I have ready a website. It's called LowSpec and we want this section called the palette list. And here you have an incredible amount of pixel art palettes. We just made our different users and some professional palettes used in other projects that you can choose from. There are palettes with different number of colors to choose from. There are bigger and smaller palettes. But for now on, we're going to use this one called LowSpec 500. You can see here 42 colors to use. It's just going to be enough. I already downloaded this palette to my computer. I'm just going to go to the palette picker, pressing this little bottom here to import. This is the one CM 1632X. I'm going to open this and we're going to see all the colors in this palette ready. All right. So the colors are not very important. You can use basically any swatches. And if you have enough proficiency, you're going to make it look good. So using these swatches, I'm going to paint again the main colors of my sprites. First the blue of the hat, something like this. Then the skin. We're going to go for an orange kind of something like this. That's enough. Great. Then the shirt, which is green, I'm going to choose like a dark green. Or let's do some lighter green, something like this. Nice. Also for the trousers, I'm going to choose the same color as the hat. Okay. And finally the shoes. We're going to choose like this nice red for the shoes. All right. Already you can see the colors feel more balanced. They are not very hard to watch like before, but there's still some work to do. We're going to focus on the outlines. In pixel art, you really don't need outlines like the ones in this sprite. But they are very useful to make the shapes of the sprite pop out from the background in any environment. The most common outline style is the one pixel wide line, which is very simple. You can see it here in a vertical line or a horizontal way, one pixel following the other. But when we have diagonals or curves, then the line gets, as you can see, a little rougher, a little harder to read, a little uncomfortable to see. We're going to clean up the lines to make them of a consistent thickness and smooth curves, removing all the extra pixels in the corners like this. I'm going to select the eraser. We're going to take all the extra pixels from the corners and you can see instantly the difference between the previous one and this one. So what you want to is to prevent any lines to touch them in diagonals like they do in if they go horizontal or vertical. So we want to do the same for our sprite right here, our little guy. What I'm going to do, I'm going to paint with the color that I want inside the object or the sprite. And I'm going to remove the lines from the inside in this case because I want to keep the volume. I don't want to shrink the sprite, I want to keep the volume. So I'm going to take mainly from the inside. So first I'm going to pick the blue of the hat, I'm going to paint all the corners like this. Maybe we can even take this one out. It's okay like this. Nice. In some occasions like this you don't have to do it. We can fix this later with color. Next one is the skin. By the way, I'm pressing right click to pick the color. I'm on top of, I'm going to paint like this, nice and round. Other thing that we don't need is the outlines for every line in the drawing. In this case you can see the eyes and the nose is very conflicting, it has conflicting shapes. Actually you can even think this has glasses instead of just the nose. So we're going to take those lines completely. We don't need all the outlines for every object. We're going to pick and choose our bottles. Right, now we can see the eyes defined inside of the face. And for the nose I'm going to take this one and we can take this also, this one too. Or we can, as an artistic choice, leave some of the lines in there like that one. There we go. Next one, the body. I'm going to do the same with the body. Let's leave it like this. Let's take this off. Maybe we don't need this much. Now I'm going to take this out, okay. Next one, I'm going to go with the hands, this, this, this one too. We have a lot of pixels here colliding in this place. I'm going to stretch the belly. I'm going to move that line a little to the right. Yeah, at least this feels a little cleaner. All right. Now trousers here. Okay, a little curvy here. Let's take from the outside this time. I'm going to select the rubber. I'm going to take out from the outside some, something like this can work. Okay. And finally, we're going to take the red off the shoes and paint this out. You can see here in this case, when I paint those corners, I make the shoes like rounder or feel like square and I don't want that in this particular case. So we have to choose from where to take out the corners. I'm going to take out from the outside. So it's going to feel like it has the same shape, like going down in a diagonal like this. Nice. Nice. Now you can see the difference. Everything is cleaner. You can see the shapes better defined and smoother. But as I said before, we don't need all the lines in here. The general rule is to leave the outlines for the outside of the shape. So we don't need, for example, the outline of the face. I can take the same color of the face and take that out like this. We can even leave this one out like this. For now, it feels a little weird. Don't worry. Just follow the steps. Next I'm going to take this one out. Now I'm going to take this and make it like this. We don't need the line of this shirt because it's inside and we don't need the line of this trouser because it's inside. I'm going to leave it with the line of the color of the shoe like this. The face here feels a little weird, but we're going to fix that very soon. What I'm going to do now, I'm going to add the same concept with it, with the color, but we're going to apply it to the lines. All the lines that we want to keep are going to be the same color as the main object, like let's say the shirt, but they're going to be in a darker green. It's going to choose maybe this little darker, this. Great. Yeah, feels better. Okay, this one too. I'm going to add this one here. Now we're going to do the same with the skin. We had previously this orange, so we're going to go with something a little darker like that, same with the hands. Maybe this hand is too big, so I'm going to fix that. I'm going to remove a few like that. Perfect. Okay, next one is the hat on the trousers. I'm going to pick a darker blue. Okay, this. I can remove this line here, adding like a blue like this, but instantly going to feel weird like the hat is cutting here. That's because we have the bill here that it's supposed to be out, going out and making a shade. So in this case, we're going to leave the line. We're not going to touch it. Next, finish with the shoes and then select the darker red for the shoe. Yes. And since the line in the floor is connecting to the ground, we can leave it like this or we can finish the line. It depends on your artistic preference. Now, I see inside the head, we have some lines that we want to also clean. So we're going to paint those here. We can add a little detail to the hand in here. Just doesn't make a big difference. Just a little touch. Also, I'm going to remove this pixel here because I want the shape of that to be symmetric. So I'm going to remove one from here. I'm going to add it like that. Also, I can remove this one in here. Second thing that we can do is adding the highlights. Now the colors still feel a little dark. That's something that I like to do personally. I start with darker colors and then I add the highlights, which means the colors from the light. Or you can go the other way. You can start with brighter colors and add the shadows. But personally, I choose to do it this way. So I'm going to add the shadow from this direction. Let's go. Let's go. I think the sun is over here and like it's coming like this. So everything is going to be highlighted from this direction. For doing that, I'm going to select the nicer blue, something like this in here, inside of the shape. Nothing like that. Nice. Next, the shirt. I'm going to select the clear green. I'm going to hit the shirt this direction all the way. Maybe we can go like something like this, maybe. This is not very important. This is up to the shape that you want to give that. OK, maybe a little bit in this arm. Something like this. Second part of the trousers, like this. Maybe the sun comes all the way from here. A little bit here. Yeah, that feels nice. And the shoes, brighter red for the light over here. OK, I can also do the same with the skin. I'm feeling that the skin can be a little lighter, something like this maybe. OK, so now we can do the same with it with the main shapes and apply it to the lines. Because right now we have the outlines with the same color for every angle of the sprite. So we're going to add from the angle of the light, we can maybe even remove the outlines, adding the same color like this, let's say. Since the arm is in this way, it's going to feel like that. And maybe we can use the darker blue for the trouser and for the hat. Only in the areas where the light is hitting, you see. Maybe here also, because you have the build in this way. We can do the same in the face. Take this out. We can do the same in the hand, this maybe. And then the other one, well, since it's over here, maybe it's fine that we can also clean it up like this if we want. And here with the red of the shoe, maybe not so bright. But we can go something more like this. Maybe we can take this one out. This, right. Yeah, already it feels better. Let me take this one in here to close it up. And let's say the nose also, it's going to be affected. So let's add a little color like that. Yeah, nice. So here in the mouse, a little detail. I forgot to add the highlight to the face. Right. So I'm going to add the highlight also here. And I'm going to think that this hat is on the way. So maybe there's going to be a shadow here in the face. So I'm going to go maybe something like this, let's say. Also we can use the nose for the same, but it's fine. We don't need that for now. Let's say something like this maybe. Let's go one more down just to make the shade more clear of the hat. And since we're hitting here the eye with shadow, I'm going to also use a little gray here in the eye. Maybe that's too strong. How about this? A little pinky. Let's choose another one. Like yeah, maybe something like that. Next, we can add a little bit of color if we want. Like let's say details on the cheeks. If you want more detail, make it like giving it a little more of character. Since this is in shadow shadow, let's do something like that. From now on, of course, it's all of the artistic choice that you want. You can maybe even break a little bit these lines if you don't want them to be so strong. There are other techniques that you can use. We can also take this off to make it rounder. I can paint this one too. I don't like that one. Well, you can see the main difference. Of course, I'm going to take care of this sun direction thing over here. So this is what we have right now. It's different from before. It's not better, not worse, because art is subjective. But it has all the basic, basic techniques that you want to consider when you're improving your artwork or your sprites, basically using the palette, using clean lines, don't happen to use the outlines for every single shape of the sprite. And then you can get creative with it and you can choose to do different artistic decisions, depending on each sprite, of course, and adding other details inside without crashing it with outlines, like before. With a little more time working on it, with a few changes here and there, I finally got the sprite to look like this. And of course, now that we chose these colors for the character, we can use softer shapes for elements such as the background and decorations, always restricted by the swatches we are using to have a hierarchy of colors inside your game. And so your player won't be mistaking a platform, the enemies, or any interactive objects with a background or decorations. And that's basically it for today. This is, of course, only the tip of the iceberg, but with this, you can instantly make more readable sprites and you can continue improving your skills with more tutorials. You can find even great tutorials on the website I've showed you before, the one with the swatches. And once you understand the rules and techniques of pixel art and why the artists use each of them, then it's time for you to break them and do what you think is best for your own. And that's it. Thank you. Thank you very much, Toyin. And if you guys want to see more of his art, you can check his YouTube channel where he does Dwarf Fortress Let's Plays with amazing storytelling and his signature pixel art. If you don't know what Dwarf Fortress is, you are actually missing out. Also, thank you very much to all my patrons. I promise that the next update for Dialogic is coming out soon. I've been doing a lot of stuff, so it's hard to work on everything, the videos, the plugins, job, and everything else. But as always, if you have any questions, please, you're welcome to join my Discord server and ask. There's a community of very nice people that are always helping and keeping the community fun and active. Okay, won't keep you here any longer, even if there's probably only two of you. Bye now, but yeah. Thanks again and bye.