Monday 8 March 2021

Easy isometric figures

If you would like to play on a virtual tabletop using isometric figures, you'll need a program that enables you to swap tokens. Maptool, Roll20, Tabletop Simulator and Foundry can do it... I'll try to make a more comprehensive list one day (if you know which other VTTs let you swap figures, let me know in the comments).

And you need four illustrations representing four facings for any figure you want to use. There are different ways to make them.

But, here, our ressource of choice for making iso figures will be the cardboard figures easily available on the web.

Because they are plentiful and cover most gaming periods, they can easily give you all you need to populate your virtual tables.

Caveat: It is of course possible to simply draw or paint the four facings (or at least two with mirroring), but it is a quite obvious task and nobody needs directions for that.

The four illustrations, four directions isometric figure

The first style of iso figures is the easiest one, but that one doesn't use cardboard figures. It is simply making a 3D figure on HeroForge and export its four isometric views. I have already covered it in a previous post, so, if you are interested, it is here.

The only thing that was not covered, is that I resize the images by comparing them to an iso figure drawing that I use as my standard for size. Nothing fancy here, on photoshop, I just paste the images from HeroForge on a page with my standard figure and then resize them until they look the same scale (yes, good old eyeballing...). I note the percentage of scaling and apply it to the HeroForge images.

I finally place the images on bases, but more about it later.

The two illustrations, four directions isometric figure

This one is the typical situation where you turn a paper miniature (with front and back, like those from Okumarts, who by himself already covers most rpg settings) into an isometric figure.

It is quite easy to transform the 2D figure into an isometric one:

First, you skew the two faces of the figure 22,5°, once to the left and one to the right. And resize them at 90% in height (mathematically it should be a little more, but I think that 90% looks better).



Resize the figure just as for the four illustrations figures above. With the added benefit that when working from figures placed on a page, it is enough to "eyeball scale" one of them, the same scaling can be applied to all of them (or even better to all of the figures from the same designer).

Secondly, you give those 4 images some depth by adding some white border, but not everywhere. You use "drop shadow" on them. But a white shadow (I know, it only makes sense in a graphic program).

 Here are the settings (for left and right).

You must choose which one of the two possibilities depending on the orientation of the image.



And then, I place the images on bases, more about it later.


The one illustration, four directions isometric figure

For that one, you'll need one illustration, but seen from the side (as my older paper figures or those from some designers).

You can also make this kind of figure from any other illustration, on the condition that it goes from head to toe and is mostly seen from a side. Illustrations with lines drawn work better for that, rather than painted ones.

And those figures are made using the same method as those with two images above.


The only difference is that after you have skewed your image 22,5° (once to the left and once to the right), you duplicate them and flip them.

And, of course, give them some depth... Now, I put them on bases....

That was easy enough... No?


But you could ask why I put those figures on bases? Here is why:

Basing the isometric figure

As you could read from the explanations above, I place the isometric figures on bases. There are three reasons for that.

The first is that, as I use very different types of figures, it gives them an unifying appearance, they look more as a part of the same game.

The second one is that I can use an indication of the direction the figure is facing on the base. With some drawings, the facing could be unclear without it.

Worse, in some isometric figures available on the web, there is only one orientation available and no base for indicating it. In a situation like the one depicted here under, you would have a complete mess, with figure fighting one another being depicted back to back and no idea of who is going where or seeing what. Top down figures on map give clear indication of these things. Isometric view is a huge visual improvement, but it would be a big step backward if without orientation. So, please, if you make isometric figures, please, make a rear view...

The last reason is that because I am using mostly "flat" maps (meaning maps made from top down ones instead of those drawn isometrically), there is no elevation elements on the maps.

Using bases gives a "pawn on board" look that seems more natural to the eye than a 3D rendered character on what is a topdown flattened view. This is, of course, completely subjective and YMMV... widely.




10 comments:

  1. Thanks for this tutorial! The drop-shadow effect is simple yet adds a lot of depth to the figures. I overlaid a subtle gradient from black to clear on top of the figures to simulate a shadow to great effect.

    If it's not too much trouble, may I ask how you made the bases? They look great, and finding a similar solution for my own isometric project is the only step I'm stuck on.

    ReplyDelete
  2. Here is the link for one of the bases. Of course, you have to adapt the layout to show the different directions. As you'll see, there are a few layers, but as they have their own styles, it is quite easy to give them different shapes.
    https://www.dropbox.com/s/6svhwzp3l6xobll/Base.psd.zip?dl=1

    ReplyDelete
  3. And BTW, I'll have to have a try at the gradient. Seems like a good idea...

    ReplyDelete
  4. Came here to ask the same question about the bases, and what do you know, it's already been answered a month ago! I'm fairly new to this "isometric" fad ;) and need all the help I can get (and the assets I can get my grubby hands on). Thanks @Bhoritz! Awesome work here.

    ReplyDelete
  5. Thanks for the comments. I try to use isometric figures as much as possible, given the better display it provides. But, I am still using topdown tokens a lot, because they don't need preparations at all.

    ReplyDelete
  6. Yeah, it does add a lot to prep! But you're right the display is way better.

    ReplyDelete
  7. Hi Bhoritz, just to confirm: when skewing to the right and to the left, is that a horizontal or a vertical skew or both?

    ReplyDelete
    Replies
    1. Skewing vertically to the right 22.5 deg seems to produce an isometric-like facing, but skewing again to the left just reverts the figure. What am I doing wrong?

      Delete
  8. Sorry. It understand that the formulation could be misleading.
    So, it is indeed skewing vertically.
    First, you take your original unskewed drawing and skew it to the right. It gives you one orientation of your figure.
    Now, you take again your unskewed drawing and skew it to the left. It gives you another orientation of your figure.
    I hope it is more clear. Sorry again.

    ReplyDelete
    Replies
    1. Thanks for clarifying! Didn't pick up that they were supposed to be the separately front-left and front-right facings, though I had a suspicion looking at the orientation. Just in time for my game today.

      Delete