The original tutorial was here before. But as some of you followers know, it’s been air in the catastrophy of my server aftermath.
So here it is, revised and even more detailed, the making of a 3d isometric vector icon with Illustrator.
I will try explaining this in the longest way.
So this one will not only be just a 3d shiny box icon tutorial, but also an article to give an idea about how to design isometric scale icons.
What is Isometric Anyways?
Isometric projection is a 3d method, being a form of ortographic projection; representing a 3 dimensional object in 2 dimensions.
In a bit simpler english; we can make 2d objects easily converted to 3d objects by adding equally measured perspectives. That’s what we will do to create our 3d vector icon =)
Here is what we will try to achieve:
Phase 1: Making the Square into a 3d Box with Isometric Projection
1- Okay. To do that, we will need a square first.
Open a new Illustrator document, preferably in cmyk color and draw a 100pt x 100pt square:
2- Next, we will need to duplicate that square 2 times to prepare the front left and front right sides of the box imitation:
3- Now we will rotate our top side isometrically to build the top side of the box.
To do that, let’s go to effect > 3d > rotate > select isometric top:
4- Ok now let’s do the same for the front left side with one difference; the rotation will be isometric left:
5- Same goes for the fron right side; rotating isometric right:
6- Now let’s object > expand appearance them to make the 3d rotated sides more editable:
7- We can now put them all together, to form a box:
Since we are almost done with the basic shape, we can move along with the effects to apply on it.
Tags: 3d vector, free, illustrator, vector icon tutorial
Nice man.
Two thumbs up
Thanks 4 sharing.
nice work thanks
awsome! Not only did i learn how to make the 3d isometric icon, but also some tricks that i dint know about.
- Thanks alot.
bautiful banana
[...] 3d Isometric Vector Icon Tutorial [...]
[...] 3d Isometric Vector Icon Tutorial [...]
[...] 3d Isometric Vector Icon – Monofactor [...]
[...] 3d Isometric Vector Icon – Monofactor [...]
[...] are a good way of learning some new tricks. This one at monofactor is a very good one. For me especially because of the subtle finishing touches that [...]
[...] 20. 3D Isometric Vector Icon Tutorial [...]
[...] 20. Объемные векторные иконки-кубики: [...]
[...] 20. Объемные векторные иконки-кубики: [...]
[...] 3DISOMETRIC Vector Icon [...]
[...] 3D Isometric Vector Icon Tutorial Create a simple and beautiful 3D icon using a variety of Illustrator tools such as the 3D Rotate [...]
[...] 20. 3D Isometric Vector Icon Tutorial [...]
[...] So, if you want to know how, just go and find out how! [...]
Screen transparency didn’t work for me in CMYK colour. I had to set it to RGB to achieve the effect.
[...] 3DISOMETRIC Vector Icon [...]
[...] 3DISOMETRIC Vector Icon [...]
[...] 3DISOMETRIC Vector Icon [...]
Looks very good!
[...] 3d Isometric Vector Icon Tutorial [...]
[...] 3d Isometric Vector Icon Tutorial [...]
[...] 3d Isometric Vector Icon Tutorial [...]
[...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]
[...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]
[...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]
[...] 3d Isometric Vector Icon – Monofactor [...]
[...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]
[...] 3D Isometric Vector Icon Tutorial [...]