HOW TO MAKE SPRITES & SPRITESHEETS FREE USING GIMP

okay welcome so the question is how do I make a Sprite and combine my Sprites into a Sprite sheet all right this is a game developer question um so let's get into that I'm Tim welcome to Graphics editing.org please like And subscribe for more videos like this one so let's go ahead and start and if you don't know really what a Sprite is is it's it's part of what's called game development assets which is basically all the little pieces of your game that are um just real stuff that you got to use to put your game together kind of like ingredients in a in a recipe and a Sprite is basically a 2d it's a 2D image so we're going to go ahead and start and go file new and let's make our Sprite like 120 by 120 pixels and we'll make sure that click on the advanced options go to the background color and make sure that's transparent so once you've done that you've got your little sprite here and what a Sprite ends up being is like say you got like a character and your character is gonna move along the screen like let's let's make like a little circle or something I'm going to zoom in first and say you got you're making a little mobile game and you can decide what size Sprite you want if you want large Sprites or small Sprites but say we're making a little character for our mobile game and we want small Sprites because we want our game to be super fast on a little Android phone or something like that iPhone now let's go ahead and let's just make an outline basically of a little character and this is going to be just basic this isn't going to be anything um record-breaking or shattering the the purpose of this is that we just wanna these are my colors hit okay bucket fill I'm gonna go ahead and just create some something to look at and for no other reason then I just want to show you guys a Sprite so this is going to be my first Sprite I just put something on the page on the template and what I'm going to go ahead and do now is and the way I would do this is I would create a folder on your computer and I would call it like whatever makes sense to you like uh brights and then in there I would name my different Sprites whether it was like you know my characters I'd make another folder for um you know weapons maybe he throws Fireballs or daggers or something you know another one for like platforms you know whether say you're making like a little platformer or maybe you're making like Flappy Bird and um you want like little enemies flying through the sky and then maybe you want another a little folder for Collectibles so maybe your little Nyan Cat can you know catch rainbows or whatever you're doing collection uh collectibles you know and you're gonna make a folder for basically all the different stuff in your video game and the sky's the limit it's up to you you can do anything so but right now we're going to be working in our characters and we're gonna just start with basically we're gonna call it purple circle and this is just because we're making a quick tutorial just to show you the basics of sprite development and so now we got our folder and maybe it's in a bigger folder called our Android game and in our Android game we have our Sprites and in our Sprites we have our characters and in our characters we have character number one which is purple circle and what we're going to do is go back to and you want to save every thing you're working on at its own project so we're going to file save we're going to go find that folder how to make oh no it's the Android game so Sprites characters purple circle and we'll call this um whatever you want this one to be so this one will be basically purple circle one and you can give it more descriptive names like purple circle flying purple circle firing a fireball purple circle dying um anything and then just go ahead and hit save and it will automatically save it as a DOT xcf which is a right here which is a project file that what that means is I can close all this out and say I I have to go to sleep now and go to work or school tomorrow and then I come back home after that and I'm like I want to go work on purple circle so I can go into here and double click on the dot xcf file which is the project and I can get right back to work on this little sprite that I'm working on so in this first one we'll just basically have a default so which will be something like um it'll basically be just purple circle let's make a new layer layer new layer we'll call this like face and we'll just give them an eye go ahead and copy that and paste it Ctrl C and then Ctrl V to paste and then go to layer to new layer so we can put that second one we just paste it in onto a new layer and then we'll get our Mouse arming our mover tool and we'll click and hold and drag it across here and there we go um we'll go make a new layer call it like mouth and then we'll do something similar oh grab our rectangle select tool and we'll make a little mouth and this will be our basic default Sprite select none and let's go ahead and give it a background color of the character so called character background color and we'll go ahead and grab our ellipse which is e that's the circle there we go got to be selected on the tool and then hit e and then it will change so and we'll go ahead and drag this out so that way the outline properly covers it and we'll just make the let's make it like a weird green color there's a nice one and then bucket fill tool and fill it in and select none now you can see that we're on the wrong side the color should be behind the outline so we'll drag it in our layers to underneath and there we go so this is our basic um first Sprite so let's go ahead and hit file save and what that did was it just updated our project file so we can close it out and open it up and you'll see that later on when you went back to work on it you'll be right where you left off and you always want to do that because you don't want to lose any work so now that we have this let's go ahead and save it and what we'll do is we'll export it as by going to file export and we'll save it as purple circle1.png and the reason the reason you want to say dot PNG is because ping is a file format for pictures that has the capability of having transparent backgrounds so go ahead and hit export take your compression level down to zero because we do not want to compress when you compress you lose quality and you don't want to do that later on you can compress a copy of your entire Sprite sheet if you want to fiddle with having a faster loading spreadsheet by compressing it a little bit but right now don't worry about that just try to make the highest quality Sprites that you can so let's go ahead and look at our folder and there we go and let's double click on our image and there is purple circle one so that's pretty good got a basic something to look at Sprite to look at now we'll go let's go back over here to all right so that's purple circle one so let's go ahead and make purple circle two and maybe on purple circle two the only thing that changes is the color maybe the color of the background changes so we'll go click on the uh the color of the background layer and we'll select the select by color tool and we'll click on that green then go to colors Hue and saturation and we'll just adjust the Hue to something else like yellow let's bring up the saturation a little and hit OK and now we have a different color so now we're basically looking at a new Sprite so let's go to select none and we'll go ahead and file save as and we'll call this one purple circle two and hit save and then we'll go ahead and save the Ping file too file export purple circle two dot PNG we're saving our second Sprite export export and there's our second one now what we're doing is we're going to actually create the Sprite sheet so since our Sprites are like 120 by 120 . what we're going to do is we're going to make a small Sprite sheet that we can put these on let's do one more color let's make like a red one color hue you can actually just click on the entire layer and go to color Hue and go look for a new color I kind of like the other colors like I like that one too so here's a red so let's go ahead and click on the that one's pretty good let me go ahead and change the Hue saturation and we'll bring the saturation level up and make it a little bit lighter and that's pretty good I like that right there so wait okay and we ended up with kind of like a dark pink so file save as we're gonna because we want every Sprite on a different project so we're going to save the project first just change the two to a three and hit save so that way we have a new DOT xcf will hit save and then we'll go ahead and save also by exporting we'll go ahead and save the PNG file which is the actual Sprite so purple circle three here's our new Sprite and oh there we go and now all we have is three different Sprites so let's create a Sprite sheet and a Sprite sheet is basically just a bigger template a bigger picture that has all of your Sprites on it and then when you put in your video game you can have the video game rotate through the Sprites depending on which one you want to show at that given moment in your game so since our Sprites that we just made are 120 pixels by 120 we'll make it like three Sprites wide and you can make huge price sheets price sheets that are like 2 000 pixels by you know like 2048 by 2048 and you can have just like all the Sprites you want from the game as many as you get on there on there but we're just making a small Sprite sheet for a demo demonstration so since 120 times 3 is what is it 360. so we'll go ahead and make a new new sheet file new and we'll make it 360. it will make it 360 by 360. but you can make it any size you want it depends on how many Sprites you're going to end up having and we'll make the background transparent and hit OK and what we're going to do is we're going to import by going to file open as layers and we're going to import purple circle one purple circle two hold down your control so you can click multiple ones and then purple circle three and click on that one and then it open and you'll see them all load up as individual layers so and what we're going to do now is we're going to just arrange them here's one we'll have our second one here and our third one here just using our move tool and grabbing on the color and moving it where we want and we got room for two more characters so we can have like you know another different character on this row and then another different character on this row or we can have these three um we can have this row it can be him shooting a weapon and then the bottom row we can have him dying for in case he runs into something that kills him so let's go ahead and zoom in by clicking on the magnifying glass click and hold just outside the top left drag down to just outside the bottom right let go and the reason we're going to do this is because we want click on your first one we want to make sure that the border is exactly on the border of the temple we have to we have to put them in the right place so that the game can find them where they're supposed to be so just drag it until this outside line of this character that square you see it lined up here and then what I like to do is use a guide and on you can grab the guides by just clicking in this ruler area and holding hold and drag to the outside the other side of the Sprite and then go over here grab the yellow one oh you want to do the same thing for the top too so grab that ruler up there and grab drag it down to the top of the template and just fit your character right in there then this one you do the same thing you'll put it up in this corner see when I'm lining it up just lining them up perfectly symmetrical within our template and then I'll grab another guide by clicking and holding it on this ruler dragging out to the outside of the yellow one and then once I go to the the pink one I'll click on him and do the same thing and we'll go ahead and get our next row ready too by just clicking up here in this ruler on top and dragging down to the bottom of these Sprites and let go and let's go ahead and zoom back out not that far Zoom back in and there we have it and I could go ahead and show you that it's just a gray like tic-tac-toe almost but just imagine you make a large Sprite Sheet later on this a huge tic-tac-toe with like a hundred going left and right and 500 going up and down you know just different Sprites from your game and I'm gonna grab I'm gonna grab one of these and drag it to this guide just so I can like zoom in here and go ahead and just get the last guide set up same way I did before we're gonna drag this down and there we go and now I'm going to put then I'm going to put him back so there we go now we'll Zoom back out there we have it and that's perfect you'll be able to make your next six Sprites and then just import them with file open as layers and then use your move tool and drag them to where they go and then once you bring them into your video game say you're using Unity or game maker or something like that you'll be able to just bring your Sprite sheet in and start using your Sprites so we'll go ahead and save this Sprite sheet for purple circle so we'll go ahead and file save as and we'll call it the purple Circle Sprite sheet and then we'll hit save and we'll go ahead and save the Ping too so file export as and then we'll say file uh purple circle spritesheet dot PNG and hit export and Export and go out of here and there it is there's our surprise sheet and we also have the project file so we can always just go right back in and we can pick up where we left off there we have it so and let's go ahead and double click on our Sprite sheet that we made check that out we can make like a little animation now so once again I'm Tim thank you for visiting Graphics editing.org I appreciate you watching this YouTube video and if you found this helpful make sure you like And subscribe and hit the Bell notification so you can get more videos like this if you have any questions leave it down in the comments and I'll be sure to answer

Channel: Graphics Editing

Views: 3,976

Keywords: how, make, sprites, spritesheets, sprite sheet, free, gimp, graphics, editing, game development, tutorial

Id: IwfrTPEWwXc

Length: 21min 9sec (1269 seconds)

Published: Mon May 08 2023