Isometric Pixel Art Tutorial - Pixel Art Tips

here's how to make isometric pixel art the most important thing to remember is the two  by one pixel rule it's like a staircase going up   in two pixels copy paste this flip horizontally  copy and paste that flip vertically there we go   a single isometric tile that we can start a  grid with there are different variations of   the isometric grid a 2 pixel base 3 pixel base  4 pixel base this one even has an extra pixel in   height for a good reason you can even have 5 6  7 pixel bases if you want it's really up to you   if we first compare the 2 pixel base and the three  pixel base and you want to make a cube which i'll   show you in a minute notice how in the two pixel  version we have to decide which side to put the   edge on but in the three pixel base we're giving  ourselves an easy center line this is really just   a style choice if you're doing freeform art you  can choose whatever style you think looks best   but if you're making isometric tiles for a game  the 4 pixel base with the extra pixel in height   is a common base used for game assets this is  because it tiles really easily you can tile the   other variations but if we try it you're left  with these different shaped grid sizes which is   not what we want to properly tile the two pixel  base size you'd have to cut off a pixel from the   bottom and two pixels from one of the sides you  can imagine when you're creating grass tiles path   tiles buildings and maybe when you're creating  a character to move on the grid the setup is   going to be a little bit more complicated and  it's going to adjust the maths you're going to   use in the programming too so for game dev you  might want to go with this self you are left   with a large square in the section area which  might not look as clean but it tiles really   easily and if you keep the sizes in powers of  two it'll make your life a whole lot easier as   well you can create whatever grid setup looks  best to you the larger the grid size the more   detail you're going to be able to fit in the space  challenge one create an isometric grid using any   variation you want for the purposes of this video  we're going to stick with a 2 pixel base grid   here's some isometric art from the community  it's a chill creative space where we do   regular challenges and help each other learn  check out the links in description to join in   making a cube is simple join your base from  the grid copy and paste this and increase to   the height that you want connect the sides and  draw on your edge you can render the cube in   any style you want outlines no outlines coloured  outlines highlights there's a lot of options the   cube is a fundamental building block which you  can use to create other things like half cubes   steps ramps walls simply by adjusting the height  and moving things around challenge two create a   cube in your grid in whatever style you want why  not try messing around with the two see what you   can make out of a cube to create a cylinder we'll  use a cube as a base and use the scottish flag   method draw a box around the top edges of the cube  join two by one pixel lines from corner to corner   and that's how we get our scottish flag scotland  now choose some points on the diagonal lines and   with the circle or ellipse tool if you drag from  point to point you'll get a nice ellipse that you   can use for the top of your cylinder further apart  the points you choose are the larger the cylinder   will be if the flag is on a different layer you  can hide it or just delete the excess the ellipse   might require some cleanup but it's a nice base  to start from that you can adjust until it looks   right to you then you copy and paste move it down  add in the sides and stylize however you want just   like the cube challenge three create two cylinders  of different sizes using the scottish flag method   what about cylinders on the side well there's a  nice technique for this too we want the ellipse   to be on this face we can use a pixel shifting  technique to get a flat view of the face so i   shift these two pixels down by one shift these  down by one and these down by one and we have   our flat view of the face draw a circle into  that space with the ellipse tool the smaller   you make this the smaller the final cylinder will  be and then shift it back up into the perspective this usually requires some cleaning up so just  tweak it until it looks right to you copy and   paste this face move it to the other side connect  it up and stylize how you want the pixel shifting   technique also works if you want to put designs  on the side just like this little clock here it   might be skewed at first but once you put it in  a position it should look alright obviously the   larger the pixel art the more detail you'll put in  and it might even be easier to clean up challenge   four use pixel shifting to create a sideways  cylinder this one is pretty hard so don't worry   if you struggle with it making a pyramid or cone  is pretty simple identify a midsection of your   ellipse or diamond grid shape connect the line on  top draw on the bottom to fit the grid shape you   can also make it as tall or as short as you want  to stylize it in your own way you can even put   them on top of cubes or cylinders to create towers  challenge five make a pyramid and a cone to make   a roof draw a two by one line along the edge  identify the midpoint and draw a vertical line   there create one side of the roof for this side  i'm using a two pixel line and then the opposite   side this time i'm doing it with a one pixel line  how you drawing these lines really depends on how   tall and wide you want the roof to be fill  that in and copy and paste this to the back   join them up and stylize however you want you  can make any height roof you want but some of the   cleanest setups are the two by one pixels and this  one pixel with the flat line on the other side but   feel free to do whatever you want challenge six  make some roofs adding shadow is pretty simple   first identify the light source run the first  shadow line from the base of the object copy   and paste that to the other side fill that in make  sure you shade the planes according to the light   source the plane that receives the most light will  be the lightest in this case the top plane of the   cube the side receives less light so it's darker  and the back plane is in shadow so that will be   the darkest notice that it's the height of the  light that will dictate the length of the shadow   if we increase the height of the light it'll  reduce the cast shadow from the box because more   of the surrounding area is lit up and obviously if  you change the position of the light the position   of the shadow will also change make sure your  shading represents that change in position too   these planes are now both in shadow the light  is in an awkward spot and you're not sure of   the direction of the shadow you can just draw a  line from the light source going through a corner   of the object copy and paste this for the other  corners join up the ends from the base of the   object and then fill that in making sure to change  your plane shading if necessary challenge seven   add some light and shadow to a cube now you have  a whole bunch of isometric construction techniques   that you can use to block out a scene and take  to a final piece which brings us nicely to the   final challenge create an isometric house scene  using all the techniques that i've shown here's my   process on how i would attempt this first you need  an idea while you're searching for inspiration   online make sure you can do that freely and  safely with help from this video's sponsor nordvpn   block malware ridden websites and secure your  information from hackers maybe you want to make   your favorite green ogre's swamp house but the  reference movie isn't available in your country   well with over 5200 servers in 60 countries  you can easily access it with just one click   or let node vpn do all the work with autoconnect  get protection on up to six devices no matter what   you use desktop mobile tablet and more node  vpn is available on every major platform and   it's the fastest vpn out there so you don't have  to compromise on speed go to nordvpn.com/saultoons   using code saultoons at the checkout to get a  two-year plan plus four additional months with a   huge discount again that's nordvpn.com/saultoons  make sure you check out the links in the   description huge thanks to nordvpn for supporting  this video hello it can also help to gather   references i had a medieval style house or tower  in mind so i found some photo references to help   spark some ideas i then started off with this grid  in a 240 pixel by 240 pixel canvas the grid size   is 18 pixels by 9 pixels then roughly sketched up  my idea which developed into having these floating   platforms everywhere i then constructed all of  the isometric parts using all the techniques   that i've just shown it's not always about what's  technically right it's about what looks right to   you i started detailing things and adding in the  surrounding areas this was a very relaxing part   of the process i wasn't sure what colors to make  it at first so i did some color roughs a saturated   colorful daytime scene a purple and yellow  complementary colored nighttime variation and   the final orange and blue dominant daytime scene  which is the one i decided to go with because it   gave off this warm and inviting feeling which is  kind of the vibe i wanted to go with and then put   in all the flat colors and change the outline from  black to a dark blue to make it softer and less   contrasting added in a new layer for shadows i  thought the light source would be the sun from the   very far left and i tried to find that throughout  in the shadows the scene was actually quite   complex so i decided to jump in blender to quickly  mock it up in 3d to get a better understanding of   how the light and shadows were supposed to work  after that i just kept playing with the little   details try to keep the focus around the main  wizard tower by adding the most details in that   area i wasn't happy with the cloud surrounding the  piece it looked a bit claustrophobic so i scrapped   all that and to finish the piece off added lumbah  into the scene my little dwarf character from   previous tutorials and i added some vines onto  the tower to make it look a little bit more dated dlet me know what process you  used for your work in the comments   thanks for watching everyone and  i'll see you in the next video

Channel: Saultoons

Views: 175,436

Keywords: isometric pixel art tutorial, isometric pixel art, isometric, how to make isometric pixel art, pixel art tutorial, pixel art, isometric tutorial, aseprite, isometric pixel art tutorial for beginners, how to create isometric pixel art, isometric pixel art guide, how to isometric pixel art, isometric pixel art in aseprite, isometric pixel art tutorial aseprite, isometric pixel, gamedev, pixel, timelapse, pixel art for games, art tutorial, speedpaint, how to pixel art, pixel art tips

Id: ybDAPEd6HCE

Length: 8min 3sec (483 seconds)

Published: Thu Oct 07 2021