Monofactor

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

How I Created Turqua: 3d Isometric Vector Icon Tutorial

Phase 2: Adding the Effects

8- We have got ourselves a lovely hexagon from 3 squares.

Of course there are a couple of much shorter ways to achieve that, but I made it the long way for you to better understand what we are doing.

Onwards; let’s duplicate (copy/paster or ctrl+alt+click move) the top side of the box and prepare the gradient toolbox ready:

08_duplicate_top

9- Now let’s add a shiner on the top.

To do that, we will apply radial gradient from white to full black(

black cmyk values:

  • C: 100
  • M: 100
  • Y: 100
  • K: 100

) on the duplicated top side:

09_radial_gradient_w_fullblack

10- To remove the black, let’s set the transparency level to screen:

10_apply_screen

11- Sexy, ha.

Now we will do the same for the front left and right sides, with their own 45 degree gradient angles:

11_same_goes_for_next_sides

12- We are halfway done.

Now after screening the sides, let’s get back to our base hexacon and unite the sides to make the base 3 sides one piece:

12_unite_pieces

13- Now we will duplicate that base hexagon and place it on the top of the original hexagon, scaling down a bit with giving 90 percent multiply level to it.

This will give us an inner cube:

13_duplicate_and_multiply

14-Beautiful!

But seems like screen levels on the front sides are too heavy.

Considering the lightsource coming from the top center, it is supposed to spread along the front left and right size among with losing strength.

Let’s reduce the screen levels just a bit:

14_decrease_mutliply_level

Since we are done with the main parts of the cube, we can add a little more details about light:

Onwards to the next page:

Pages: 1 2 3

Discuss

99 Comments Posted

Would you like to add one yourself?

+   Add Comment

  1. MM

    Is there anyone having the .ai file to share or can the poster republish the archive (because that’s corrupted).

    Thanks in advance!!

  2. Banners Broker

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

  3. Io

    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.

  4. Illustrator | Pearltrees

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

  5. Elizebeth Phyu Phyu Tin

    nice….. :)

  6. Audra Zeekler

    Very clear internet site , thanks for this post.

  7. well

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

  8. 15 Illustrator Tutorials for Creating Isometric Illustrations | Red7six

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

  9. Alexandra Barcelona

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

  10. Micah Smith

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

  11. jeff

    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

    I can’t download this source, *_*

  13. The Icon Directory For Designers

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

  14. Excellent 3D Adobe Illustrator Tutorials « Web Designer Blog

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

  15. eagrapho » 30 High Quality Illustrator Icon Design Tutorials

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

  16. Illustrator – 40 Tutoriais de Ilustração 3D « Jhony Sato

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

  17. Cgbaran

    Great tutorial thanks

  18. 45 полезных техник для работы с 3D в Adobe Illustrator – Mendart блог.

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

  19. Jeffrey Heiserman

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

  20. Christian Skelton

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

  21. zams

    Nice tutorial but how can you found this idea?

  22. me

    LIKE! but the zip is corrupt..

  23. Sty*Lisch

    Nice work.. Thanks a lot! =)

  24. David1536

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

  25. Adobe Illustrator 3D精彩教程 | 爱米粒

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

  26. 50 Excellent 3D Adobe Illustrator Tutorials « TMHs Web Tips

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

  27. Kent

    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!

  28. Icons « onlineincomeblog.info

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

  29. 30个高质量的图标设计教程 | Booto'Blog

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

  30. chips zynga

    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

  31. Clair Heling

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

  32. Programacion PHP

    Muchas Gracias, excelente tutorial. Espero por mas.

    Pablo, desde Argentina

  33. daniel

    SWEET … thanks a lot nice tutorial m8

  34. mejoh

    I have no reply

  35. Karthik.K

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

  36. The Best Illustrator Tutorials For Creating 3d Effects | pc-aras

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

  37. Jess

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

  38. 55 Adobe Illustrator Icon Design Tutorials - interactiveME

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

  39. B

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

  40. 55 Adobe Illustrator Icon Design Tutorials | Programming Blog

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

  41. 55 Adobe Illustrator Tutorials

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

  42. 55 Adobe Illustrator Tutorials, With the eye for Design den wir bringen Klein und Mittelstand mit Erfolg ins Internet

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

  43. 55 Adobe Illustrator Icon Design Tutorials « Noupe

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

  44. socketz

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

  45. AMB Album » 50 Excellent 3D Adobe Illustrator Tutorials

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

  46. Yüksek Kalitede Simge (Icon) Tasarlamak için 60 ayrı ders : Olur Olmaz Herşey

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

  47. Maverik

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

  48. Imran

    Beautiful Technique.

  49. 设计师的图标宝典 | EnjoyWeb20

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

  50. June Top Picked Illustrator Tutorials | Chemist2dio Labs

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

  51. 50 Excellent 3D Adobe Illustrator Tutorials | Graphics of the World

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

  52. 50 Excellent 3D Adobe Illustrator Tutorials | Search Engine Optimisation

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

  53. 50 Excellent 3D Adobe Illustrator Tutorials | Tutorials | Smashing Magazine

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

  54. 22 Icon Design Tutorials | Blog YODspica Ltd

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

  55. Chm

    Looks very good!

  56. Ian

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

  57. 3d Isometric Vector Icon Tutorial : Photoshop Tips

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

  58. 40 Useful Adobe Illustrator 3D Tutorials and Techniques | The Muliati.Com goBlog

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

  59. 40 Useful Adobe Illustrator 3D Tutorials and Techniques

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

  60. Daily 5 from February 17, 2009 « StartAhead

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

  61. Vectips Monthly Roundup: December | Castup

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

  62. Vectips Monthly Roundup: December | Vectips

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

  63. Omar

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

    - Thanks alot.

  64. mox

    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>