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.

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.

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

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:

 

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.

 

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:

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:

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:

 

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.

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.

 

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!

 

 

Hope to see you again in StrandedSoft.

Have a nice week and thanks all for coming!