: How to draw isometric vectors? I am looking for "built in" software solutions for Illustrator CS2-5 preferably. I am trying to create these isometric illustrations for a web app. Right now I've
I am looking for "built in" software solutions for Illustrator CS2-5 preferably.
I am trying to create these isometric illustrations for a web app. Right now I've manually set up a grid in Adobe Illustrator and doing the drawings based on this grid — but I've got no guides, no snap and stuff like that…
The end result should be close to this: www.twigital.co.uk/
I am wondering if you know of a good software for drawing isometric stuff from which I can then output it as a vector (.eps or .ai) so then I can import to Illustrator and pimp them colors and other stuff up?
If you don't know of a software especially for this, have you ever done isometric illustrations in Illustrator? Any methods? Any tips?
EDIT:
Please do not confuse Isometric drawing with 1,2 or 3 Point Perspective Drawing.
ISOMETRIC DRAWING:
[the isometric system is just a convention/invention, useful for a lot of stuff, not to reproduce what the eyes sees in reality but really just a convention useful for measurements and other stuff]
iso(equal) metric(measurment)
In an isometric drawing, all the edges of a cube would be parallel in sets of four. (2 parallel lines means that the lines will never meet each other no mater how long you draw them)
PERSPECTIVE DRAWING:
[The perspective drawing conventions (1 point, 2 point, 3 point..and some other) are still conventions but they do try to imitate and be as close as possible to what the eye sees in reality(3D), but as it is on 2D(paper/screen) it is never like reality actually is.]
[Another thing that some may argue is that do to the fact that we have two eyes(just some optical devices)* and the image actually unites(is created) trough some magic that happens in the brain, makes another point why none of these conventions truly accurately resemble reality either... but this is for the Philosophy SE :P]*
In the perspective drawing, the edges would taper towards one or more vanishing points.
With the Perspective Grid in Illustrator CS 5 there are 3 options :
1 point perspective, 2 point perspective, and 3 point perspective.
After processing all of the information from above(info from the internet...might be wrong, feel free to deliberate) I make the simple assumption that it is not possible to achieve an isometric view of multiple objects on a canvas(like in the example above, twigital.co.uk (thanks to George for its explanation of how it was done in his answer) with a perspective grid, that is with 1 point perspective: lines will meet in one point on the horizon, 2 points: lines will meet at 2 points on the horizon, 3 point... you get the idea...
And with an Isometric View the lines never meet, as they are parallel. (I think you can also call it isometric perspective, that's why I'm a bit confused)
!!! But if you do build the grid manually it is possible, you can learn how to do it or you can download one already done here. After you do everything in this tutorial select all the lines you've created and go to View> Guides> Make Guides . This is sort of the answer for this question but I was just looking for some "built in" solution and...
I did try to do this with the perspective grid in Illustrator CS5...didn't work for me, if anyone has done this with the Perspective Grid in Illustrator please explain the exact steps for doing so.
Some may say I do stress to much on some stuff above, but if you make a complex app with hundreds, or just 50 random positioned(in an isometric manner) objects and the objects are not perfectly isometric you'll end up with ugly results here and there(not all the lines will be parallel and it looks bad) or if its an app for measurements and precision scaled down projections you'll end up with "bad" numbers... and you probably don't want that..
More posts by @Jessie844
4 Comments
Sorted by latest first Latest Oldest Best
I think the perfect tutorial for your purposes just showed up on the Digital Arts website. It's not only a "How To," it's a whole case study in its own right.
For twigital the designer(Chris) used Illustrator, a grid and the 3D Rotate tool. Notice it has presets for isometric rotations.
If you need more than what Illustrator provides by default, try the CADtools plugin for Illustrator, which provides tools for isometric drawing and dimensioning.
I've got a few more resources to share.
Based on this tutorial I've recorded the steps above as actions so you can trigger those using keyboard shortcuts:
Left = CMD + Shift + F1
Top = CMD + Shift + F2
Right = CMD + Shift + F3
To get these, all you need to do is download this file: Isometric.aia
and in illustrator go to Actions (Window > Actions) and from the context menu (the tiny icon
on the top right with the arrow pointing down and 2 horizontal lines (=)) choose Load Actions and browse to Isometric.aia
It's fairly simple to create the actions from scratch also.
I've also done a few screen recordings:
How to use the isometric transforms actions to create a box -
IllustratorIsometricWithTransforms.mov
How to use the 3D extrude effect to create a box - IllustratorIsometricWith3DExtrude.mov
How to use the 3D revolve to create isometric cylinder/cone like objects - IllustratorIsometricWith3DRevolve.mov
How to use 3D extudes to create arches (mixing straight and round shapes) - IllustratorIsometricExtrudeArches.mov
The complete arches file can be downloaded from here: iso_arches.ai
There 3 main things which might not be evident in the video which will come in handy:
using point snapping/a reference grid to place objects easier
using a unit for modules so different pieces fit together
when assembling objects with repeating parts, using symbols instead of groups
to make tweaks easier
Illustrator CS5 has a great new tool called "Perspective". This tool allows you to set up a 2D or 3D perspective grid that helps you draw things to give them dimension. It "sticks" shapes and text to a certain plane and adjusts its size and angle depending on where it's placed.
Here are some videos by Adobe explaining exactly what the tool is and how to use it in-depth:
Defining Perspective Grids
Drawing Artwork In Perspective
Also, here is a video tutorial by Terry White, kind of going over similar things.
And here are some miscellaneous 3D tutorials, not necessarily utilizing the Perspective tool in Illustrator.
I think that this tool is the best way to get that isometric feel using Illustrator. If you don't have CS5 then you'd have to use some more rough methods of making your own grids and what not.
Alternatively you can always try finding separate software to fill you needs. Either way I hope this helps!
EDIT
To clarify, the Perspective tool is by no means "True 3D" it's merely a 2D object with the illusion of 3D (just like isometric).
Take this image for example.
This is an isometric image, and this image could be made with the perspective tool in illustrator. Granted, there's better software out there for this, but I think this is one of your best bets for doing it inside of illustrator. The perspective tool takes some getting used to, the tutorials will definitely help with that.
I think the difference you are seeing between the examples I posted previously and your "isometric feel" is merely the angle of the image. Isometric is typically more top-down (just at an angle) whereas the other examples are looking more directly at the object. But that's just how they decided to make their image.
I could be thinking too complicated, but either way I thought that I should share.
Well, my first thought was Rhinoceros, which is a 3D software (for windows)
With it you can quite easily make 3d text and basic 3d objects like cubes, cylinders and stuff..
Furthermore what I had in my mind was the Make2D feature. It allows you to make 2d drawings out of 3d objects..
You can then save those lines in .ai format.
Here's an example of (not 100% accurate) iphone that I have made (long ago) that I now converted to lines and from that brought to Illustrator. The image
If what you want is to fill it with color.. that may be a bit tedious work as you need to join paths before you can fill it.. Select 2 or more lines and Ctrl+J.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.