How To Make Flat Isometric Block like Minecraft Affinity Designer

Bismillah Walhamdulillah
Assalamu'alaykum for Muslim and Hay Everyone ! :)
I just purchased Affinity Designer for Windows and really love play around with this software. Today I will show you quick design tutorial using Affinity Designer . 
We will make flat isometric block like Minecraft block with Afinity Designer. Sure  this is not totally like Minecraft block , they are popular, maybe their arts are far better than what we will  did in this tutorial. But , no problem, we can make this simple.

How To Make Flat Isometric Block like Minecraft Affinity Designer

Well, you will need basic skill of vector designing , like how to draw line and coloring your design 😜. Don't worry, it's very easy. And , sure you will need software editor , we will use Affinity Designer in this tutorial as the main title. However, you can also use Adobe Illustrator or Inkscape or what you have in your computer , if you like, because I think, the method will little bit similar .

Let's get started !. 

1. Start New Project and Setting Grid

We will make 3D designs... No, no.. I am sorry, we will make 2D designs that look like 3D. So, start new project and setting the grid view to Isometric. But, I prefer use Triangular grid.

To do that, just go to View > (check) Show Grid  or press Ctrl +' . With this command allow you to show the grid on workspace

Then, we go to View > Grid and Axis Manager , and we will set the grid details here.
Un-check Use automatic grid , click Advance
Choose Grid Type : to Triangular ( or Isometric if you like Isometric ) .

I recently set the grid detail value bellow 

  • Spacing : 64 px ( Spacing size between major grid )
  • Division : 8  ( 8 divider in single major grid. 64 px / 8 = 8 px per minor grid )
  • Gutter : 0 px (space between major grid)

I feel better with that setting but you can set the value above as you like. Click Close if you done.

If you feel confuse 😵 because of my bad English, please see the Gif image bellow . This tutorial is not guaranteed of headache problem so we make "moving image" to avoid them .

Create Triangular Grid Affinity Designer YandiDesigns

2. Excellent , Now You Ready to Draw Your Sword Line

I think this is the most difficult part in this tutorial , but we will using this tiny snapping grid item  to make this mission run smoothly.
If you cannot find this item in your inventory , just go to View > Snapping Manager . Please check Enable Snapping and all the box snapping options in there.

Next we start to draw 3D box line using Pen Tool like this image bellow. Please don't drag when draw the line using Pen Tool .Simply just click the corner of triangular grid from start to finish, until you found the object shape that you like.

affinity designer tutorial yandidesigns

Then you can make side grass line to make different between the grass itself and the dirt part.

affinity designer tutorial yandidesigns

That is the difficult part in this tutorial and we do it smoothly . Good job !

3. Coloring The Block

The next step is how to color the block and it must look like 3D block ?.
Yup ! We can make 2 or more color, the main color and the shadow color. One is for normal color the others are darker or even lighter color as shadow.

"Me" have Partial Blindness in me eyes. It's Deutan Red-Green color. so some times I feel difficult to select color , specially when the color mixed into one palette. But, don't worry , I still can play with RGB value to make color. 😸⇢ Never Give Up <mode> 🔧

To color the object is easy, just select the object then go to Swatches tab and select your color . Or you can go to Color tab if you still don't have your own palette with your favorite color.

coloring minecraft block affinity designer yandidesigns

You also can make filled line block style like above, I think it's looking great. You just play with stroke thickness to do that . But, in this section we will remove the stroke (No Line Style ) in the Stroke tab. Just block the whole object , go to Stroke tab , in Style choose No Line Style.

4. Add Tiled Color Manually to Make Block Textures

Create some mini rectangles 8 px X 8 px and or 16 px X 8 px then make the darker color of it.
Press V in your keyboard to select Move Tool.
Click one of rectangles you have made then hold Ctrl + Drag  Mouse to the top and side of the Block and make some tiles for your block textures. Hold Ctrl + Drag Mouse will duplicate the object. It will save your time copy and paste-ing the object.

Tile minecraft block texture affinity designer yandidesigns

I am not finish placing tiles in the image above , because it will be difficult to me without zooming , also it will make the Gif file size , larger. Please , follow that step until you feel the tiles textures on your block.

5. Congratulations Sir , You Have Made A New Elements 

Hehe , that sound like Jarvis . Here my complete tiled block , don't forget to group the elements and give some name.

Grouping minecraft block in affinity designer

Times To Play Around and Check The Quality of Our Minecraft Block Design

Grass minecraft block affinity designer

We add the resources files and also made more block (15 block) based on the block in this tutorial . You can download it , by clicking the button bellow. 🍕 ( with price of snack for the artist  )

15 minecraft design block

Please like and share . Thank you for all your support ! . Have a nice day.

Again , I am sorry for my bad English, If there are any word that you dislike please forgive me. 😊

Next Post »
Load comments