Because I’ve been asked to do this sorta stuff in the past and got a comment on my most recent thing asking how to do it, might as well do a [probably not all that useful] tutorial regarding the isometric stuff, and just going through how I’d go about drawing a scene:
0: what is ‘isometric’ anyway?
Isometric tiles are drawn such that the edges of a grid square are drawn 2:1; 2 across, 1 up/down. If you’re going for 16 pixel tall tiles, they’ll end up 32 pixels wide, so remember that.
The most important thing the isometric perspective changes is that instead of the one vertical face that would be shown on an elevated tile, two are shown off instead. Obviously you should be drawing things so that they’re taking advantage of the perspective [otherwise why bother], but with messier details [grass, rocks, trees/bushes, and so on] just go with however you draw those things usually.
Pick one of the two sides, and make that the lighter one. This isn’t really necessary, but it definitely helps with making things look better down the road. I’ve also made the bottoms of the walls fade to black, but that’s really not necessary either.
Not that much of a step, but roughing up the edges of the grass tiles goes a long way to making them less gridlocked. Having the grass hang off the edges is also a pretty easy trick to making the tops and sides of the tiles feel a bit more cohesive.
There isn’t really much of an in-between with the rocks, but really all you’re missing is a bit more intermediate detailing.
Rocks are somewhat of a pain until you realize that having some areas that aren’t filled with details is fine. I really don’t have too much information to share here, other than the best course of action is to load up a picture of some cliffs or a mountain or something and try and emulate what’s going on there
I also turned two of the grass tiles into stony ones to show off how you could do flat surfaces. Really, just scuffing it up a little is all you need to do. Again, it’s fine if there’s some areas that are left as single fields of color; not all rocky surfaces are cracked and pockmarked to oblivion, after all.
Here, I’ve gone and thrown down a first pass of the grass details. Obviously the exact layout changes, but going through and having such a first pass makes it a bit less tedious when you go through the other steps.
While there’s a lot of ways to do grass, the one I’ve settled on is like this:
You make it as follows:
1. Fill your tile/space you have a base shade on with a bunch of short, lighter lines that may or may not touch up against one another. Having them bend towards the top is usually useful.
2. Using another light color, color the tops of the lines. Repeat with an even lighter shade if you really want the grass to look lively.
3. Using a darker color, darken some of the bits in between the blades of grass so that there’s a bit more going on behind the grass itself.
4. Fiddle around with the tile for a good while more so that it loops nicely.
Anyway, the final result of all that is as follows:
Hope this is of some use.
