Wie zeichnet man isometrische Vektoren?

16

Ich suche vorzugsweise "eingebaute" Softwarelösungen für Illustrator CS2-5.

Ich versuche, diese isometrischen Illustrationen für eine Web-App zu erstellen. Im Moment habe ich in Adobe Illustrator manuell ein Raster erstellt und die Zeichnungen auf der Grundlage dieses Rasters erstellt - aber ich habe keine Hilfslinien, keine Schnappschüsse und ähnliches…

Das Endergebnis sollte ungefähr so ​​aussehen: http://www.twigital.co.uk/

Ich frage mich, ob Sie eine gute Software zum Zeichnen von isometrischem Material kennen, aus der ich es dann als Vektor (.eps oder .ai) ausgeben kann, damit ich es dann in Illustrator importieren und sie mit Farben und anderem Material aufpeppen kann.

Wenn Sie keine spezielle Software dafür kennen, haben Sie jemals isometrische Illustrationen in Illustrator erstellt? Irgendwelche Methoden? Irgendwelche Tipps?

Beispiel für eine isometrische Vektorzeichnung

BEARBEITEN:

Bitte verwechseln Sie die isometrische Zeichnung nicht mit der perspektivischen Zeichnung mit 1,2 oder 3 Punkten.

ISOMETRISCHE ZEICHNUNG:

[Das isometrische System ist nur eine Konvention / Erfindung, die für viele Dinge nützlich ist, nicht um zu reproduzieren, was die Augen in der Realität sehen, sondern wirklich nur eine Konvention, die für Messungen und andere Dinge nützlich ist.]

iso (gleich) metrisch (Messung)

In einer isometrischen Zeichnung wären alle Kanten eines Würfels in Vierergruppen parallel . (2 parallele Linien bedeuten, dass die Linien sich nie treffen, egal wie lange Sie sie zeichnen)

PERSPEKTIVISCHE ZEICHNUNG:

[Die perspektivischen Zeichenkonventionen (1 Punkt, 2 Punkt, 3 Punkt, ... und einige andere) sind immer noch Konventionen, aber sie versuchen zu imitieren und so nah wie möglich an dem zu sein, was das Auge in der Realität sieht (3D), aber so wie es ist Auf 2D (Papier / Bildschirm) ist es nie so, wie es die Realität tatsächlich ist.]

[Eine andere Sache, über die manche streiten könnten, ist die, dass wir zwei Augen haben (nur einige optische Geräte) Konventionen ähneln auch wirklich genau der Realität ... aber das ist für die Philosophie SE: P] *

In der perspektivischen Zeichnung würden sich die Kanten zu einem oder mehreren Fluchtpunkten hin verjüngen .

Mit dem Perspektivenraster in Illustrator CS 5 stehen drei Optionen zur Verfügung:

1- Punkt-Perspektive, 2- Punkt-Perspektive und 3- Punkt-Perspektive.

Nachdem ich alle Informationen von oben verarbeitet habe (Informationen aus dem Internet ... könnten falsch sein, zögern Sie nicht, darüber nachzudenken), gehe ich einfach davon aus, dass es nicht möglich ist, eine isometrische Ansicht mehrerer Objekte auf einer Leinwand (wie in der Grafik) zu erzielen Beispiel oben, twigital.co.uk (danke an George für die Erklärung, wie es in seiner Antwort gemacht wurde) mit einem Perspektivenraster, dh mit 1-Punkt-Perspektive: Linien treffen sich in einem Punkt am Horizont, 2 Punkte: Linien wird an 2 Punkten am Horizont treffen, 3 Punkte ... Sie bekommen die Idee ...

Und bei einer isometrischen Ansicht treffen sich die Linien nie , da sie parallel sind. (Ich denke, man kann es auch als isometrische Perspektive bezeichnen, deshalb bin ich ein bisschen verwirrt.)

!!! Wenn Sie das Raster manuell erstellen , können Sie lernen, wie es funktioniert, oder Sie können eines herunterladen, das bereits hier erstellt wurde . Nachdem Sie alle Schritte in diesem Lernprogramm ausgeführt haben, wählen Sie alle von Ihnen erstellten Linien aus und gehen zu Ansicht> Hilfslinien > Hilfslinien erstellen . Dies ist eine Art Antwort auf diese Frage, aber ich habe nur nach einer "eingebauten" Lösung gesucht und ...

Ich habe versucht, dies mit dem Perspektivenraster in Illustrator CS5 zu tun ... hat bei mir nicht funktioniert. Wenn jemand dies mit dem Perspektivenraster in Illustrator getan hat, erläutern Sie bitte die genauen Schritte dazu.

Einige mögen sagen, ich mache zu viel Stress auf einige Dinge oben, aber wenn Sie eine komplexe App mit Hunderten oder nur 50 zufällig positionierten (auf isometrische Weise) Objekten erstellen und die Objekte nicht perfekt isometrisch sind, erhalten Sie hässliche Ergebnisse hier und da (nicht alle Linien sind parallel und es sieht schlecht aus) oder wenn es sich um eine App für Messungen und präzise verkleinerte Projektionen handelt, werden Sie "schlechte" Zahlen erhalten ... und das wollen Sie wahrscheinlich nicht. .

Flavius ​​Frantz
quelle
1
Bisher ist die beste Option, die ich gefunden habe, die, die Sie unter @Johannes 'Antwort kommentiert haben: Konvertieren Sie die Zeilen in das Raster. Es ist weit entfernt von den isometrischen Ansichten, die von jeder 3D-CAD-Software (oder generell von jeder 3D-Software) angeboten werden, aber möglicherweise ist es eine ausreichende Problemumgehung für eine 2D-Illustrationssoftware (die ja einige Werkzeuge hat, um das Zeichnen mit Perspektive zu unterstützen).
Jari Keinänen

Antworten:

11

Für Twigital verwendete der Designer ( Chris ) Illustrator, ein Raster und das 3D-Drehwerkzeug. Beachten Sie, dass es Voreinstellungen für isometrische Rotationen gibt.

Wenn Sie mehr als das benötigen, was Illustrator standardmäßig bereitstellt, testen Sie das CADtools-Plug-in für Illustrator , das Tools für das isometrische Zeichnen und die Bemaßung bietet.

Ich habe noch ein paar Ressourcen zu teilen. Basierend auf diesem Tutorial habe ich die obigen Schritte als Aktionen aufgezeichnet, damit Sie diese mit Tastaturkürzeln auslösen können:

  • Links = CMD + Umschalt + F1
  • Oben = CMD + Umschalt + F2
  • Rechts = CMD + Umschalt + F3

Um diese zu erhalten, müssen Sie nur diese Datei herunterladen: Isometric.aia und im Illustrator gehen Sie zu Aktionen (Fenster> Aktionen) und aus dem Kontextmenü (das winzige Symbol oben rechts mit dem Pfeil nach unten und 2 horizontalen Linien) (=)) Wählen Sie Load Actions und navigieren Sie zu Isometric.aia

Es ist auch ziemlich einfach, die Aktionen von Grund auf neu zu erstellen.

Ich habe auch ein paar Bildschirmaufnahmen gemacht:

Die vollständige Archedatei kann hier heruntergeladen werden: iso_arches.ai

isometrische Bögen

Es gibt drei wichtige Dinge, die im Video möglicherweise nicht ersichtlich sind und sich als nützlich erweisen werden:

  • Verwenden von Punktfang / einem Referenzgitter, um Objekte einfacher zu platzieren
  • Verwendung einer Einheit für Module, damit verschiedene Teile zusammenpassen
  • Beim Zusammensetzen von Objekten mit sich wiederholenden Teilen werden Symbole anstelle von Gruppen verwendet

um Tweaks zu vereinfachen

George Profenza
quelle
+ 1 für die CADtools für Adobe Illustrator CS3, CS4, CS5 und CS5.5 Link zum Plugin. Die isometrische Einstellung des 3D-Rotationswerkzeugs ist ebenfalls gut. Dies sind "eingebaute" Methoden, um eine korrekte und genaue isometrische Zeichnung zu erstellen ... aber das CADtools-Plugin ist ein bisschen teuer.
Flavius ​​Frantz
1
Es kann erwähnenswert sein, dass das SSR-Tutorial einen Tippfehler aufweist. 86.062% sollte 86.602% sein , da es sich um den Wert von cos (30) und sin (60) handelt, bei dem der Winkel mit Ihren Umdrehungen übereinstimmt. Wenn Sie dies nicht beheben, werden Sie irgendwann in Schwierigkeiten geraten, da die Dinge nicht genau zwischen den Transformationen ausgerichtet sind.
Joojaa
1

Illustrator CS5 hat ein großartiges neues Tool namens "Perspektive". Mit diesem Werkzeug können Sie ein 2D- oder 3D-Perspektivenraster einrichten, mit dessen Hilfe Sie Objekte zeichnen können, um ihnen eine Dimension zu verleihen. Es "klebt" Formen und Text an eine bestimmte Ebene und passt Größe und Winkel an, je nachdem, wo es platziert ist.

Hier einige Videos von Adobe, in denen genau erklärt wird, was das Tool ist und wie es ausführlich verwendet wird:

Perspektivraster definieren

Zeichnungsgrafik In Der Perspektive

Außerdem gibt es hier ein Video-Tutorial von Terry White, das sich mit ähnlichen Dingen befasst.

Und hier sind einige verschiedene 3D-Tutorials , die nicht unbedingt das Perspective-Tool in Illustrator verwenden.

Ich denke, dass dieses Tool der beste Weg ist, mit Illustrator das isometrische Gefühl zu erreichen. Wenn Sie nicht über CS5 verfügen, müssen Sie einige grobe Methoden anwenden, um Ihre eigenen Raster zu erstellen, und was nicht.

Alternativ können Sie immer versuchen, eine separate Software zu finden, die Ihren Anforderungen entspricht. Ich hoffe so oder so, das hilft!

BEARBEITEN

Zur Verdeutlichung ist das Perspektiv-Werkzeug keineswegs "Echtes 3D", sondern lediglich ein 2D-Objekt mit der Illusion von 3D (genau wie bei der Isometrie).

Nehmen Sie zum Beispiel dieses Bild . Dies ist ein isometrisches Bild, und dieses Bild kann mit dem Perspektivwerkzeug im Illustrator erstellt werden. Zugegeben, es gibt eine bessere Software dafür, aber ich denke, dies ist eine Ihrer besten Möglichkeiten, dies innerhalb von Illustrator zu tun. Das Perspektiventool ist gewöhnungsbedürftig, die Tutorials werden definitiv dabei helfen.

Ich denke, der Unterschied, den Sie zwischen den Beispielen, die ich zuvor gepostet habe, und Ihrem "isometrischen Gefühl" sehen, ist nur der Winkel des Bildes. Isometrisch ist normalerweise von oben nach unten (nur in einem Winkel), wohingegen die anderen Beispiele direkter auf das Objekt schauen. Aber genau so haben sie beschlossen, sich ein Bild zu machen.

Hanna
quelle
Ähm, ich habe CS5, ich bemerke das Perspektivenraster, aber können Sie es so einstellen, dass Sie in den "isometrischen" Modus gelangen? Denn isometrisch ist nicht 3D, sondern 2D, aber es sieht irgendwie alles so aus wie 3D ... und in isometrischen Grafiken gibt es keine Perspektive ... [ de.wikipedia.org/wiki/Isometric_projection ]
Flavius ​​Frantz
3
Bisher habe ich mein Raster manuell mit einfachen Linien im Illustrator erstellt. Dann habe ich alle ausgewählt und bin zu Ansicht> Hilfslinien> Hilfslinien erstellen gegangen. Alle meine Linien sind jetzt ein isometrisches Raster aus Hilfslinien (nicht nur Linien im Illustrator). und mit den Smart Guides eneabled ich irgendwie bekommen, was ich will ... nicht vollständig, aber in der Nähe ...
Flavius ​​Frantz
@Flavius: So geht das. Sie sollten dies eine Antwort machen.
Alan Gilbertson
Bearbeitet zur Verdeutlichung. Hoffentlich macht das jetzt mehr Sinn.
Hanna
@Johannes [Ich habe meine Frage bearbeitet, um einige Dinge zu klären, hauptsächlich für mich und Leute wie mich, die diese Dinge nicht so einfach machen.] Bitte erläutern Sie, wie dies mit dem Perspektivenraster in Illustrator CS5 gemacht wird, und erreichen Sie so etwas wie das Beispiel in Die Frage, oder Ihr Beispiel, aber ich würde meine vorziehen, das sind mehrere Objekte, die in einer isometrischen Angelegenheit gezeichnet und dann auf einer Leinwand angeordnet werden.
Flavius ​​Frantz
1

Ich könnte zu kompliziert denken, aber so oder so dachte ich, dass ich teilen sollte.

Nun, mein erster Gedanke war Rhinoceros , eine 3D-Software (für Windows).

Mit ihm können Sie ganz einfach 3D-Text und einfache 3D-Objekte wie Würfel, Zylinder und so weiter erstellen.

Außerdem hatte ich das Make2D- Feature im Kopf . Sie können damit 2D-Zeichnungen aus 3D-Objekten erstellen.

Sie können diese Zeilen dann im .ai-Format speichern.


Hier ist ein Beispiel für ein (nicht 100% genaues) iPhone, das ich (vor langer Zeit) erstellt habe und das ich jetzt in Linien konvertiert habe und von diesen in Illustrator gebracht habe. Das Bild

Wenn Sie es mit Farbe füllen möchten, ist dies möglicherweise etwas mühsam, da Sie erst Pfade verbinden müssen, bevor Sie es füllen können. Wählen Sie 2 oder mehr Zeilen aus und drücken Sie Strg + J.

Joonas
quelle
interessante Option .. Ich werde es untersuchen
Flavius ​​Frantz
+1 für 3D-Softwareempfehlung mit der Option zum Exportieren und anschließenden Importieren in Illustrator. wird nicht nur in diesem Fall nützlich sein ...
Flavius ​​Frantz
1

Ich denke, das perfekte Tutorial für Ihre Zwecke ist gerade auf der Digital Arts-Website erschienen . Es ist nicht nur ein "How To", es ist eine ganze Fallstudie für sich.

Alan Gilbertson
quelle
Er er ... natürlich ist es aufgetaucht, ich habe danach gefragt, nicht wahr? : P: P [jooooke]. Tolles Tutorial, ich schaue es mir später an diesem Abend an, danke für die Hinweise. :)
Flavius ​​Frantz
Aber natürlich! Das Tutorial enthält ein fertiges isometrisches Raster, das einige Zeit sparen kann. :)
Alan Gilbertson