Creating Isometric Pixel Art From Scratch

  • 48 favourites



36,561 visits, 112,645 views


This tutorial hasn't been translated.



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Section 8: Finishing up our core tile templates

This section will mainly be copying and pasting too for now, we will make one more elevation for the slopes as well as make them in multiple directions utilizing the flip horizontal method to save time. We’re also going to be making an extra elevated block via the same methods (copying and pasting not flipping the image) Once we get this done we will work on detailing our current tiles and hopefully adding life to them =]

I won’t use an image for this one right here, as we’ve literally just done this in the last section of the tutorial, use the select tool and highlight the slope tile. File > New. Then paste it in like we did before, then flip the image with Image > Flip Horizontal. CTRL+A to select all and then paste it back into our main document then align it accordingly into the grids next tile slot (beside the current slope)

Now we need to create the slope in the other directions, take the block and copy that over to a new grid slot and try to figure it out yourself, just to test what you have learned so far... It will require a couple of straight lines unlike the other rotation of the slope. If you really get stuck, see the image below for how it should end up looking, but I encourage you to try and work it out on your own.

Now another little test... (I promise I’m not just being lazy lol) we need to elevate these and I will show you how to elevate the block and the slope, then you can go and reproduce what I’ve showed you on the other slopes, I will include an image at the end of this section on what you should have everything looking like. Hopefully a good few of you have managed to figure it out based on what we have done already. If not, don't worry just look at the image for reference and try again.

Now for the part I will be showing you how to do, elevating the block...

To elevate the block we will need to copy the entire tile and paste it into the grid slot below. Select the top portion of the block with the selection tool. Like this:

Then you will want to move the selection up to the top of the tile border like in this next image, once you’ve done that, proceed to connect the edges (borders)...

Doing the same thing with the sloped piece. I will post the end result of it here and I am sure you can use what you’ve learned from me in this tutorial so far to replicate it, I guess this also checks to see if you’ve been paying attention!

Here is what the elevated slope should look like once you’re done:

Now use the method of copying and creating a new document to flip it over for the other direction =]

Here is where you'll need to use your head a little =] I wasn't going to show you about the elevated slope but I had a friend follow along and they said that it would help a lot more so I included it, hopefully now you have more than enough to go an and elevate the additional two sloped pieces.

This is what you should have everything looking like before we move on to Part 2 for detailing the tiles:

Now this is a great start for our isometric tiles although there is no detail just yet, we will make sure that our world isn't as cube like as our base tile templates! So don't worry if you think that our tiles will be strictly cube like but we need to take baby steps and these are the stepping stones to creating some cool tiles for our games.

I do have more to release for this series of tutorials but I'm going to hold some of it back, I've noticed a few errors with the screenshots I have taken and I need to go over and take them again and while doing that I want to make a few changes to the tutorial and that is another reason I decided to release the series of tutorials in parts, this is a great start but the detailing part of the tutorial won't be released just yet, sometime in the next week is when I hope to have it published.

For those of you who installed Tiled, go through the process that I have mentioned earlier on in the tutorial to test out your tiles, you should see that everything matches up just fine for now, but before exporting them remember to turn the grid off and also, you might want to fill the tiles with a colour or two, just throw a green on the top and for the sides of the elevated pieces throw some kind of dirt colour down and you should be pleased with the outcome... Don't threat about the black outlines, through the detailing stages of the tutorial series we will fix that so that the tiles blend seamlessly =]


If you need any help don't hesitate to ask, and I will appreciate any and all feedback, i hope as the tutorials go on the quality of them will increase due to feedback from YOU! the viewers =]

Do you like the step by step approach, do you like the way I have presented the tutorial so far and things like this would help, this is actually my first written tutorial and I don't know how to format it efficiently within the Scirra site just yet, but as time goes by I am sure that things will improve :P


Sorry for the little delay on publishing this, I had a few things come up =]

I hope to make a village simulation style strategy game (gathering resources and building up your village) once I learn enough about Construct and once I complete my current project, hopefully someone can make tutorials for that style of game through the use of my graphics once these tutorials are further along the way? (wishful thinking I know but here's for hoping :P)


  • Order by
Want to leave a comment? Login or Register an account!