How to Draw Isometric Art

Download the reference files:

Relevant links:
Creator Resources on Newgrounds

--------------------------------
Facebook:

Twitter:

Newgrounds:
--------------------------------

[Jazza]

Something I forgot to mention in this video: Isometric art is great for games because it can be tiled, which enables art to be used and re-used, saves the artist time and effort, and keeps the visuals consistent and appealing.

[noxabellus]

Just so you know, most games use a slightly different angle, where the grid cells have a 2:1 ratio for width/height. About 26.565 degrees in Illustrator. This ratio allows the pixels to have an even rise/run so you don't get jaggy lines. It also makes the math for drawing tile maps really simple.

[alisaangeldust]

You should re-do this one since now you're way more fluid and experienced in video-making and art

[Augestein]

Hey. I found you again, I remember when I used to listen to you while I was looking for a job, and then I got one and could never remember what you were called. i liked these style of videos. Keep it up!

[robertsteinberger]

11:15 "So this is our medieval house, just draw a few medieval lines" cracked me up.

[ralphdratheus]

Q: Whats is the most Australian thing you could say?
A: Well... when I was puttin' together a mates

[lavender]

@Jazza, im watching in 2019 and I’d like to say that I’m proud of how far you’ve come

[NeilRoy]

Fun things to try, create a piece of a castle wall, just a short section, make sure the ends of it lines up with the grid, then once you draw something you like, copy and paste it to create a longer wall, piece each section together, maybe even fit the tower in there, create a gate for it etc.   For a game you then load in these pieces to create various maps, or you could save the pieces and use it to create your own scenes for art, reusing buildings, wall sections and such to recreate different scenes.  That is how they use these in the games, because all the angles are the same, the pieces fit together seamlessly (if created properly).  In programming, you would store your map in a 2D grid, and always always always, draw your maps from the back to the front, this way taller graphics in the front will overlap things in the back.  Just envision the isometric map like a slightly rotated, diamond shaped 2D map.

Oh, about that tower, you could have drawn the top by making two circles, a smaller circle within  the larger one, then draw the lines down for each section and erase the gaps, that would make the angles more accurate and probably be a lot easier. 

Another way to do the round shapes (like the tower) is to draw a square at the bottom, as if you're drawing a square, box shaped tower, then draw a circle that fits inside that square and of course, then erase the lines from the square, copy and paste.

Another good game to look at for this style is Age of Empires 2.  A note though, hills can be really tricky from a programming standpoint.  It's interesting to note that Diablo 2 doesn't have any hills at all.  They just made the levels look so interesting that you don't really notice. :)

[themusicbox]

Hi!

Your thumbnail is from an indie-collaboration I led years ago called Novus Dawn. It was an isometric tactical RPG which unfortunately never saw full completion. But despite all that, I'm glad it's being useful in other ways. :D

[saudaminisingh]

YouTube is recommending me this video after 6 years😅🙄🤔

[NeilRoy]

Another note about Isometric objects for games.  Usually the bottom should fit to the grid in such a way that you can place objects close together, or on top of each other (connecting, like a wall), but the height of an isometric tile can be just about any height you wish as the levels are drawn from back to front so any tall objects (like trees or tall buildings etc) will hide what is behind them.  With that in mind, if you're making graphics for a game, than make certain you draw things like trees with a transparent background so you can see what is behind them.

[FodderMoosie]

I was following along pretty well for the first few minutes, especially with the description of the different styles. And I feel like the drawing of the house cleared some things up for me.

Then you got all artistic and intuitive and excellent and I was totally lost. But, like, in a good way. I'm not complaining — now I know I can get better!

Maybe.

Thanks!

[Jazza]

Sure have. Several. Go to my Jazzastudios website and under games you'll find a few isometric ones.

[cinderheart]

Would love to see you update this please. I miss you doing tutorials and other real art stuff.

[TheWilliamlk]

for all of you pen and paper artists here's a great resource for isometric drawing

[exotyktechnologies]

For Isometric, I think 30 degrees prevents art displayed into browsers to have anti-antialiasing artifacts. So if you design HTML5 games like using Construct2, stick to 30 degrees.

[cbarre]

Jazza made a tutorial on it yet now didnt know what it was.

[fidgetyrock]

Thats the fucking key to effective game design I knew it was a simple secret! 30 degree 2D design the easiest and yet most complex design that exists! See ya later when I release a game surpassing even baldurs gate.

[webwraith]

A quick note, the old Ultima games (I believe 7 and 8) used the oblique style for their art.

[gavinmosser]

A method my art teacher taught me for finding the middle is complete the square or rectangle and draw an X on two panels/faces. that marks the middle points. It's helpful to me maybe others can find it helpful.