Isometric Pixel Art Basics

hello there silverly b here and today i'm going to be talking to you guys about the basics of making isometric pixel art i'll be focusing mainly on isometric pixel art for games but i'll also get into a little bit of the basics of pixel art and isometric pixel art in general so let's begin first if you've never made any type of pixel art before the first thing you should worry about is the editor that you're going to be using there are many available out there some of them are free such as pisco pixel art and and some of them are paid such as photoshop or a sprite i personally use pixel art and i have also used pisco before they have both been sufficient for me but if you're making lots and lots of sprites then the tools on a sprites can help you out as well as save your time so i'd recommend looking into it now whenever you're choosing your editor there are basic functionalities that you expect them all to have such as having a pencil an eraser a select tool etc other than that what you must look for is that it has layers and that it can export to png with a transparent background those are the main things that it must have especially if you want to make sprites for a game now that you've chosen your editor what you must do is think about your time what size is it going to be if you want your tire to be seen as a square then its height must be half of its width on the isometric perspective i normally use a tile that is 66 pixels wide and has 33 pixels in height i use it because i can then easily divide this tile down the middle and create four sections then i can just as easily divide these four sections into 16 and even 64 letter squares if i wanted to it is not necessary that all your tiles have the same size but it will make your life much easier if they do once you've decided on the size of your tile you should start working on the grid some people can kind of freehand the isometric perspective but i personally prefer to have a grid to guide me i normally just start by making my tile i know that this line right here must have 17 in height in order for my tile to have the correct dimension i do one of its sides and then just mirror this to get the other side then i just mirror this half once more and finish it once my tile is done i can copy and paste it throughout the page until it looks like a grid that i want i then just duplicate this layer and offset it so that it now subdivides my tile i also make sure to fix the gap from moving the layer then i duplicate this first and the second layer and join the copies together so now i have the first layer with my grid the second layer with an offset and the third layer which is them joined together then i give this third layer an offset as well so now i have another subdivision i leave the main layer with a hundred percent opacity because this is the most important one i give the second one an opacity of 40 and at last i give the third one an opacity of 10 you could also just make them different colors it would work out just the same in order to focus on my grid i also use a white background behind it all once you have the grid it is time to start working on the blocks and the isometric perspective shape first let's start with a block get on a new layer and just follow along the grid you've just created trace the tile for the block and then just give it a height by using a line going straight down and then tracing the bottom of it then what you need to do is think about where you're going to be placing your middle line since the width has an even number of pixels you can't pinpoint exactly where your middle pixel is so you have to decide between the left or the right pixel in the middle i normally go with the left one but the right is just as valid if we were to take a look at how our tiles behave whenever we use a left or a right middle tile we can just make these little blocks here the green one is going to be the line at the left pixel and the red one is going to be at the right first we can check that when we position a little block in front of a taller block it is very clear for the green here that it is aligned and for the red that it doesn't align properly when we try to position the smaller block to the side of the dollar block we can see that now the red ones are aligning and the green ones aren't if we were to then position a block here at the front of the tall green block then this would all go back to looking normal if we did the same for the red one it would now be misaligned if we finish this by making a square here this would all go back to normal why am i showing you this well if you were to make a tile board where a few of the edges would be shown like this it is important to know that the order you must draw the sprites is going to affect how your game looks for the green this is the one where the middle pixel is on the left you should order your tiles from top to left and then the rules from top to front this will guarantee that it looks okay as for the red ones this is the ones that have the middle pixel on the right you should draw it from top to right and then the rows from top to left now if this is too much of a headache for you don't worry you could just skip this middle outline and separate these sides with different colors and not worry about the order at which you draw all of this okay so once you've understood how to draw a block now it's time to look into how to cut it here's our cube first mark on the surface that you want to cut the shape of what you want to cut then mark how deep you want your cut to go by following this line you are working on how deep this cut is now just connect it all here on the end here you go a simple cut into our cube i just then removed the line and it looks like a cube with a little entrance now let's make a hole on the roof just follow the grid to map out how this hole is going to be looking like i'm just making another square here then you can copy the top of the square and paste it a few pixels down this will mark how deep this hole goes now just use a line to connect both of these together there we go we will be doing the same here on this right face of our cube and we will open up a little window here after that we can kind of add a little button to it and we just need to erase some of the lines and there we have it now to more complex shapes let's start with the prism in order to do this i just mark the middle of the cube and extend it up i do the same for the other side of the cube then i connect these two notice how one of them is on the right pixel and the other is on the left pixel now just connect the top of these lines to the corners of the cube the line on the left pixel should connect to the left pixel of the corner and the one on the right should connect to the right pixel of the corner here we have our little prism now we just clear up the lines and look it looks like our little cube has a little roof on top of it very cute another way to do this shape would be to mark down where you place it and connect the corners just like this remember to connect the right pixels so left corner to left corner and right corner to right corner or your lines will be different then once you're done just erase the lines that aren't supposed to be shown anymore what some other people use is they make a line with the inclination that they want and then they just copy and paste it just connecting the corners it is also an alternative to make this sort of ramp shape now the most difficult shape the circle first choose the size that you want your circle to be i'm going to be using this little cube for a reference take the line height that your circle is supposed to have make a square out of this height and then make a bigger square out of this at last divide your initial square in four in order to make a circle that would be placed at the top of our cube you just need to create a circle that has the size of the bigger square then place it on the bottom subdivision of the reference cube sometimes you might have to add or remove a pixel so it looks okay but once you're done just erase everything else from our circle now flip it vertically and place it on the top quadrant all we need to do now is create a circle from one of these smaller squares and place it here trying to fit this smaller circle into an ellipse then just erase the extra lines copy this and flip it over and here you have it on ellipse that is our isometric circle now to make a circle on the side of your cube if your editor has a good rotation too then you can just rotate your circle so it fits the side of it since this one i'm using doesn't have that i have to do the same process to make an ellipse here on the side start with the big circle and this time it will be positioned like this on the top left corner clear out the outer lines and then flip it horizontally and vertically and position it on the lower right quadrant now this part is a bit tricky and mostly i go by heart you need another one of these small circles and you need to position it on the lower left like this it still won't be able to reach the other quarter i've made some tests where i used a circle of three quarters of this square and it worked but i think it also looks okay if you just use another one of these smaller circles to measure out this part of the ellipses and here you go just clear out the lines and flip it to the other side and there you have it an isometric circle now if you wanted to make a cylinder out of it paste two circles one will be the bottom of the cylinder and the other will be the top then connect them with two lines and there you go a cylinder clear out the lines that are supposed to be visible and that is it you can also change the height of the cylinder very easily if you wanted to now that we've talked about shapes let's talk a little bit about color first you need to choose where the light will be coming from what side do you want to be the brightest and the darker one whenever you're thinking about choosing a lighter color or a darker one most people just change its brightness or sometimes even its value if we were to do that our block would look like this it's okay but if we also change the hue making the color yellowish when it's supposed to be lighter and purplish when it's supposed to be darker then it adds another dimension to our lights and shadows you can even take it to some extremes and use some high value colors with just the change in hue to mark the shadows that gives the colors a more stylized look now the main thing when talking about color is make or choose a color palette there are many sites out there that can generate color palettes or extract them from an image such as coolers adobe colors and specific for pixel art you have low spec a color palette is going to limit the amount of colors that you have to work with but this limit helps you focus a lot more on your style and the atmosphere and mood that you're trying to set and you don't have to worry about constantly choosing a color you already have all the colors that you're going to be using right there so this was it for the basics of isometric pixel art next video i'll be posting about how to make this style set right here if it is already out you can go watch it right now if you found this video helpful please consider leaving a like if you have any questions leave them down in the comments below and for more videos such as this one don't forget to subscribe thank you so much for watching bye

Channel: SilverlyBee

Views: 1,827

Keywords: tutorial, art tutorial, pixel art, pixelart, pixel art tutorial, pixilart, piskel, gimp, photoshop, aseprite, isometric, isometric pixel art, isometric pixel art tutorial, pixel art for games

Id: rApVXwADY84

Length: 12min 22sec (742 seconds)

Published: Thu Aug 26 2021