Monofactor

Home » Blog » Freebies » How I Created Turqua: 3d Isometric Vector Icon Tutorial

How I Created Turqua: 3d Isometric Vector Icon Tutorial

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:

final

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:

01_draw_a_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:

02_create_sides

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:

03_rotate_top

4- Ok now let’s do the same for the front left side with one difference; the rotation will be isometric left:

04_rotate_fleft

5- Same goes for the fron right side; rotating isometric right:

05_rotate_fright

6- Now let’s  object > expand appearance them to make the 3d rotated sides more editable:

06_expand

7- We can now put them all together, to form a box:

07_put_together_the_sides

Since we are almost done with the basic shape, we can move along with the effects to apply on it.

Pages: 1 2 3
Posted in Freebies, Tips & Tricks
, , ,

Discuss

97 Comments Posted

Would you like to add one yourself?

+   Add Comment

  1. Banners Broker
    Apr 28, 2012 at 4:53 pm · Reply

    Sweet web site , super pattern , rattling clean and apply genial .

  2. Io
    Apr 27, 2012 at 10:23 pm · Reply

    Hi,
    Im having trouble with my gradients in CS4.. Basically, they are coming out very ‘blocky’ i.e. unsmooth.

    Here’s an image to clarify: http://i.imgur.com/xHrOM.png

    Tried everything advised so far but can’t seem to find a solution.

    I’m creating a flux-capacitor logo for my Time Machine drive so this is IMPORTANT!

    Thanks in advance.

  3. Illustrator | Pearltrees
    Mar 17, 2012 at 12:03 am · Reply

    [...] How I Created Turqua: 3d Isometric Vector Icon Tutorial | Monofactor [...]

  4. Elizebeth Phyu Phyu Tin
    Feb 27, 2012 at 9:43 am · Reply

    nice….. :)

  6. Audra Zeekler
    Jan 25, 2012 at 4:19 pm · Reply

    Very clear internet site , thanks for this post.

  7. well
    Dec 11, 2011 at 3:16 pm · Reply

    there’s some problem with the source u.u Could you re-upload plz?

  8. 15 Illustrator Tutorials for Creating Isometric Illustrations | Red7six
    Nov 20, 2011 at 1:46 pm · Reply

    [...] How I Created Turqua: 3D Isometric Vector Icon Tutorial [...]

  9. Alexandra Barcelona
    Nov 4, 2011 at 12:14 am · Reply

    I had trouble downloading the source as well. Could you re-upload it please?

  10. Micah Smith
    Nov 3, 2011 at 4:29 pm · Reply

    Could you please give instructions on how to apply the effects to finish the design to the 3D isometric images? Thanks.

  11. jeff
    Jun 1, 2011 at 11:02 am · Reply

    Great tutorial, had some trouble with aligning the isometric side and the last item step in the turorial. So decided to download your file but it seems to be corrupted, mind re-uploading it? Much appreciated.

  12. nttv
    May 24, 2011 at 11:54 am · Reply

    I can’t download this source, *_*

  14. The Icon Directory For Designers
    May 14, 2011 at 5:24 pm · Reply

    [...] 3D Isometric Vector Icon Tutorial [...]

  15. Excellent 3D Adobe Illustrator Tutorials « Web Designer Blog
    Apr 7, 2011 at 9:19 am · Reply

    [...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]

  16. eagrapho » 30 High Quality Illustrator Icon Design Tutorials
    Mar 22, 2011 at 2:03 pm · Reply

    [...] a Vintage TV Set Icon in Illustrator Make 3D Yet Flat Looking Shopping Basket Icons 3D Isometric Vector Icon Tutorial How to Design a Set of Multicolored Buddy Icons Create a Stylized First Aid Kit Icon in [...]

  21. Illustrator – 40 Tutoriais de Ilustração 3D « Jhony Sato
    Jan 24, 2011 at 9:31 pm · Reply

    [...] 20. Vector Icon isométrica 3D Tutorial [...]

  22. Cgbaran
    Jan 20, 2011 at 4:26 pm · Reply

    Great tutorial thanks

  23. 45 полезных техник для работы с 3D в Adobe Illustrator – Mendart блог.
    Jan 11, 2011 at 2:17 pm · Reply

    [...] 20. Создание изометрической трёхмерной векторной иконки [...]

  24. Jeffrey Heiserman
    Dec 2, 2010 at 11:14 pm · Reply

    Great tutorial! This is very helpful for the project I am working on right now.

  25. Christian Skelton
    Nov 15, 2010 at 11:52 am · Reply

    The completed illustrator file doesn’t seem to work anymore?

  27. zams
    Oct 2, 2010 at 7:40 pm · Reply

    Nice tutorial but how can you found this idea?

  28. me
    Oct 1, 2010 at 4:04 pm · Reply

    LIKE! but the zip is corrupt..

  29. Sty*Lisch
    Oct 1, 2010 at 10:19 am · Reply

    Nice work.. Thanks a lot! =)

  31. David1536
    Sep 15, 2010 at 2:41 am · Reply

    Great job!! But how did you do the bubble letter on the side of the box, That would be Sweeeeeet.

  34. Adobe Illustrator 3D精彩教程 | 爱米粒
    Jul 6, 2010 at 5:42 am · Reply

    [...] 一个国个际 象棋场景图利用倾斜工具和三维旋 转工具来制作三维棋子20. 三维等边形制作教程利用Illustrator工具比如三维旋转工 具来制作一个简洁漂亮的图形21. [...]

  35. 50 Excellent 3D Adobe Illustrator Tutorials « TMHs Web Tips
    Jun 5, 2010 at 5:50 pm · Reply

    [...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]

  36. Kent
    Jun 2, 2010 at 5:07 am · Reply

    It looks very modern and technology-inspired. I’m digging the glossy-chrome effect. I’ve been trying to design a 3D logo-emblem somewhat like this for myself (more or less, in essence) and it did not come out as what I hope it would! I didn’t manage to get it looking right like yours did. Finally, I decided to use the professional services of an online logo design site instead (http://www.logodesignstation.com) and got the logo I wanted at an affordable price and fast too, within 24 hours. I did provide this link for reference and inspiration to my designer as I liked how yours look. I’m not going to design a logo without any professional help anytime soon although it’s fun. Thanks for posting this, btw!

  37. Icons « onlineincomeblog.info
    May 18, 2010 at 12:30 pm · Reply

    [...] 37)3DISOMETRIC Vector Icon [...]

  40. 30个高质量的图标设计教程 | Booto'Blog
    Apr 5, 2010 at 2:41 pm · Reply

    [...] 3D Isometric Vector Icon Tutorial [...]

  41. chips zynga
    Mar 21, 2010 at 4:27 am · Reply

    eventhough I dedicate the majority of of my working day on the web using games like facebook poker or pet society, I nevertheless like to dedicate some free time to research a few sites sometimes and I’m comfortable to report this most recent article is in truth more or less good and greatly more desirable than 1 / 2 the various spam I read today , anyways i’m off to enjoy a smattering of hands of facebook poker

  42. Clair Heling
    Mar 19, 2010 at 7:27 pm · Reply

    Woah what theme is this? i really like it :D

  43. Programacion PHP
    Feb 28, 2010 at 12:38 am · Reply

    Muchas Gracias, excelente tutorial. Espero por mas.

    Pablo, desde Argentina

  45. daniel
    Jan 24, 2010 at 7:10 pm · Reply

    SWEET … thanks a lot nice tutorial m8

  46. mejoh
    Dec 29, 2009 at 12:05 pm · Reply

    I have no reply

  48. Karthik.K
    Dec 5, 2009 at 7:02 pm · Reply

    Hey awesome tutorial. But the ZIP file is corrupt! :( Please check that pls.

  49. The Best Illustrator Tutorials For Creating 3d Effects | pc-aras
    Dec 3, 2009 at 9:58 pm · Reply

    [...] 23. How I Created Turqua: 3d Isometric Vector Icon Tutorial [...]

  52. Jess
    Oct 27, 2009 at 10:47 am · Reply

    i love it, however,
    please, i cant dowload the files.
    Could you help?

  54. 55 Adobe Illustrator Icon Design Tutorials - interactiveME
    Oct 11, 2009 at 8:56 pm · Reply

    [...] 3d Isometric Vector Icon Three dimensional shapes are less complicated to create in Illustrator than you may think. The 3D Extrude and Bevel effect can be used to create interesting designs. In this tutorial you’ll learn how. [...]

  55. B
    Oct 7, 2009 at 11:10 pm · Reply

    Beautiful. Is it possible to do something similar in inkscape?

  56. 55 Adobe Illustrator Icon Design Tutorials | Programming Blog
    Oct 7, 2009 at 12:40 pm · Reply

    [...] 3d Isometric Vector Icon Three dimensional shapes are less complicated to create in Illustrator than you may think. The 3D Extrude and Bevel effect can be used to create interesting designs. In this tutorial you’ll learn how. [...]

  57. 55 Adobe Illustrator Tutorials
    Oct 6, 2009 at 5:43 pm · Reply

    [...] 3d Isometric Vector Icon Three dimensional shapes are less complicated to create in Illustrator than you may think. The 3D Extrude and Bevel effect can be used to create interesting designs. In this tutorial you’ll learn how. [...]

  58. 55 Adobe Illustrator Tutorials, With the eye for Design den wir bringen Klein und Mittelstand mit Erfolg ins Internet
    Oct 6, 2009 at 5:43 pm · Reply

    [...] 3d Isometric Vector Icon Three dimensional shapes are less complicated to create in Illustrator than you may think. The 3D Extrude and Bevel effect can be used to create interesting designs. In this tutorial you’ll learn how. [...]

  59. 55 Adobe Illustrator Icon Design Tutorials « Noupe
    Oct 6, 2009 at 2:22 pm · Reply

    [...] 3d Isometric Vector IconThree dimensional shapes are less complicated to create in Illustrator than you may think. The 3D Extrude and Bevel effect can be used to create interesting designs. In this tutorial you’ll learn how. [...]

  60. socketz
    Sep 23, 2009 at 2:48 pm · Reply

    I don’t understand the phases 9 and 10. Select group or the path? I don’t know. Be more explicit please. Thank you.

  61. AMB Album » 50 Excellent 3D Adobe Illustrator Tutorials
    Aug 30, 2009 at 8:52 pm · Reply

    [...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]

  62. Yüksek Kalitede Simge (Icon) Tasarlamak için 60 ayrı ders : Olur Olmaz Herşey
    Aug 26, 2009 at 5:26 pm · Reply

    [...] 30. How I Created Turqua: 3d Isometric Vector Icon Tutorial [...]

  63. Maverik
    Aug 14, 2009 at 7:17 pm · Reply

    very nice. But the illustrator file is damaged. Can you fix it ?

  64. Imran
    Aug 4, 2009 at 12:56 pm · Reply

    Beautiful Technique.

  67. 设计师的图标宝典 | EnjoyWeb20
    Jul 2, 2009 at 12:51 am · Reply

    [...] 3D Isometric Vector Icon Tutorial [...]

  68. June Top Picked Illustrator Tutorials | Chemist2dio Labs
    Jun 23, 2009 at 4:22 am · Reply

    [...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]

  70. 50 Excellent 3D Adobe Illustrator Tutorials | Graphics of the World
    Jun 17, 2009 at 10:20 pm · Reply

    [...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]

  71. 50 Excellent 3D Adobe Illustrator Tutorials | Search Engine Optimisation
    Jun 17, 2009 at 3:18 pm · Reply

    [...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]

  72. 50 Excellent 3D Adobe Illustrator Tutorials | Tutorials | Smashing Magazine
    Jun 16, 2009 at 5:44 pm · Reply

    [...] 3-D Isometric Vector Icon Learn how to create a 3D isometric vector icon in Illustrator. [...]

  73. 22 Icon Design Tutorials | Blog YODspica Ltd
    Jun 5, 2009 at 9:36 pm · Reply

    [...] 3d Isometric Vector Icon Tutorial [...]

  76. Chm
    May 31, 2009 at 1:48 pm · Reply

    Looks very good!

  80. Ian
    Mar 26, 2009 at 2:42 pm · Reply

    Screen transparency didn’t work for me in CMYK colour. I had to set it to RGB to achieve the effect.

  81. 3d Isometric Vector Icon Tutorial : Photoshop Tips
    Mar 24, 2009 at 3:39 am · Reply

    [...] So, if you want to know how, just go and find out how! [...]

  83. 40 Useful Adobe Illustrator 3D Tutorials and Techniques | The Muliati.Com goBlog
    Mar 20, 2009 at 8:59 am · Reply

    [...] 3D Isometric Vector Icon Tutorial Create a simple and beautiful 3D icon using a variety of Illustrator tools such as the 3D Rotate [...]

  87. 40 Useful Adobe Illustrator 3D Tutorials and Techniques
    Mar 9, 2009 at 4:39 am · Reply

    [...] 20. 3D Isometric Vector Icon Tutorial [...]

  88. Daily 5 from February 17, 2009 « StartAhead
    Feb 19, 2009 at 3:36 pm · Reply

    [...] 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 [...]

  91. Vectips Monthly Roundup: December | Castup
    Jan 1, 2009 at 10:32 am · Reply

    [...] 3d Isometric Vector Icon Tutorial [...]

  92. Vectips Monthly Roundup: December | Vectips
    Dec 31, 2008 at 9:38 pm · Reply

    [...] 3d Isometric Vector Icon Tutorial [...]

  94. Omar
    Dec 18, 2008 at 2:20 am · Reply

    awsome! Not only did i learn how to make the 3d isometric icon, but also some tricks that i dint know about.

    - Thanks alot.

  96. mox
    Dec 17, 2008 at 5:51 pm · Reply

    Nice man.

    Two thumbs up :)

    Thanks 4 sharing.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>