16

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: http://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?

Isometric vector drawing example

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

Improve this question
1
  • 1
    So far the best option I've found is what you've commented under @Johannes' answer: convert the lines to grid. It's far from the isometric views offered by any 3D CAD (or generally any 3D) software, but maybe it's a sufficient workaround for a 2D illustration-software (that, yes, has some tools to aid drawing with perspective).
    – Jari Keinänen
    Commented Dec 7, 2011 at 16:53

4 Answers 4

Reset to default
11

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:

The complete arches file can be downloaded from here: iso_arches.ai

isometric arches

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

Improve this answer
2
  • + 1 for the CADtools for Adobe Illustrator CS3, CS4, CS5, and CS5.5 link to plugin. And the isometric setting from the 3D Rotate tool is good also. These are sort of "built in the software" methods to do a correct and accurate isometric drawing... but that CADtools plugin is kinda expensive.
    – Flavius Frantz
    Commented Dec 8, 2011 at 0:32
  • 1
    It might be worth noting that the SSR tutorial has a typo 86.062% should be 86.602%, because it is the value of cos(30) and sin(60), where the angle matches your rotations. If you dont fix this you will eventually be in trouble as things don't exactly align between transforms.
    – joojaa
    Commented Nov 9, 2018 at 14:32
1

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.

Improve this answer
6
  • Uhum, I have CS5, I notice the perspective grid, but can you set it so you get into "isometric" mode ? Cause isometric is not 3D, is 2D, but it kinda looks 3D thats all... and in isometric graphics there's no perspective...[ en.wikipedia.org/wiki/Isometric_projection ]
    – Flavius Frantz
    Commented Dec 7, 2011 at 16:02
  • 3
    so far I manually made my grid with simple lines in illustrator, then I selected all of them and went to View > Guides > Make guides, so all of my lines are now an isometric grid made out of guides(not just lines in illustrator) and with the Smart Guides eneabled I kinda get what I want... not fully, but close...
    – Flavius Frantz
    Commented Dec 7, 2011 at 16:05
  • @Flavius: That is the way to do it. You should make this an answer.
    – Alan Gilbertson
    Commented Dec 7, 2011 at 18:42
  • Edited for clarification. Hopefully this makes more sense now.
    – Hanna
    Commented Dec 7, 2011 at 18:43
  • @Johannes [I have edited my question to clarify some stuff, mostly for me and people like me that don't get these things to easy] Please explain how to do this with the perspective grid in Illustrator CS5 and achieve something like the example in the question, or your example, but I would prefer mine, that is several objects drawn and then arranged on a canvas in an isometric matter.
    – Flavius Frantz
    Commented Dec 8, 2011 at 0:23
1

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.

Improve this answer
2
  • interesting option.. i'll look into it
    – Flavius Frantz
    Commented Dec 7, 2011 at 16:02
  • +1 for 3D software recommendation that has the option to export and then import into illustrator. will be useful not just in this case...
    – Flavius Frantz
    Commented Dec 8, 2011 at 1:15
1

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.

Improve this answer
2
  • He he... of course it showed up, I asked for it, didn't I ? :P :P[jooooke] . Great tutorial, I'll check it out later this evening, thanks for the heads up. :)
    – Flavius Frantz
    Commented Dec 13, 2011 at 12:13
  • But of course! There's a ready-made isometric grid included with the tutorial, which could save some time. :)
    – Alan Gilbertson
    Commented Dec 13, 2011 at 21:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.