Isometric assets using Hexels

Hello all again!

Our latest posts here at Stranded Soft were a bit more complex than usually, but this one is easier and also quite enjoyable.

Today I want to introduce again Hexels, a software tool created by Hex-Ray Studios. It’s designed create cool graphics using different shapes as pixels, like triangles or hexagons.

I’ll show how to work with trixels to create isometric shapes faster than ever. Give Hexels a try, you won’t regret it.

Quick example - Awesome, isn't it?

Quick example – Awesome, isn’t it?

Trixel set up and basic usage

This is not my first time using Trixels here, you can see some assets for my Unity interface here.

The first step to use trixels is setting them up in the mode tab; just select trixels in the drop down menu. There are some other options you can explore, like glow or the canva’s size in the document tab.

trixels mode!

trixels mode!

Everything is ready now! time to draw an easy isometric cube in 3 quick steps. Just pick some colors and paint like this:

building isometric cube step 1

Building isometric cube step 1

building isometric cube step 2

Building isometric cube step 2

building isometric cube step 3

Building isometric cube step 3

And that’s it! Just as simple. Of course you can do the same and much more in Photoshop or Gimp, but for me this is faster, easier and it’s really fun to use.

Let’s build something cool

A cube is fine, but Hexels can do much more. Trixels are somehow like pixels, so why not use some pixel art techniques with them? Newer versions also support layers and independent opacity for them, a feature that works like a charm when adding some lights and shadows to plain objects:

lights and shadows with opacity

lights and shadows with opacity


Hexels also support lines between pixels, but I usually try to avoid using them. Layers are not currently supported for lines and they are drawn in top of all the trixels, but sometimes they are useful.

adding lines

Adding some lines


Increasing the amount of trixels in the document tag you increase the detail you can achieve with them. The more trixels you have, the little they are. In my case I’m able to draw some details inside the building with my current trixel size:

inner details

inner details

Hexels also supports glow effects, but usually is not so useful to have every Trixel glowing like a Christmas tree. That’s why enabling the glow only in some layers is so cool:

layer independent glow

Layer independent glow

And also there is a tool to draw lines using Trixels (or any other “pixel” shape). Just click where you want to start the line and where you want to end it:

trixel lines

trixel lines


Once the the work is finished, it can be exported as image with or without transparency, or even adding an image to the background of the project.

Configure export options

Configure export options

And that’s how it looks at the end. Its only made in some quick steps using some layers to add some texture to each surface. It’s awesome how quick you can draw any shapes without even consider if the perspective is fine or not.

Final result!

Final result!


Much more than simple Trixels

For now I’m only using basic Trixels, but there is much more. In my next post I’ll start with advanced Trixels, additional details using Photoshop and a quick example about how Hexel’s built in animation mode works. Until next one is released, you can create bigger an better assets using the same steps I wrote in this one, the only limit is your imagination!

building bigger worlds

Building bigger worlds



Hope to see you again in StrandedSoft.

Have a nice week and thanks all for coming!


2 thoughts on “Isometric assets using Hexels

    • There are only a few independent tutorials and a little information in their web site. Also, since Marmoset bought Hexels, the last beta has got discarded, so features like animation aren’t available anymore.
      It’s so sad, it was a good software.

Leave a Reply

Your email address will not be published. Required fields are marked *