Eine andere Dimension, neue Meisterschaft – Ein Tutorial zur isometrischen Illustration

Illustrationen sind unübertroffen in ihrer Fähigkeit, gewöhnliche Themen mit Energie zu versorgen und komplexe Ideen mit visueller Klarheit zu kommunizieren, aber was ist mit isometrischen Illustrationen? Sind sie nicht notorisch schwierig und zeitintensiv? In sechs einfachen Schritten macht dieses Tutorial zur isometrischen Illustration den Prozess schnell und unkompliziert.

Müssen Sie eine Zielseite beleben? Langweilige Daten visualisieren? Einer langweiligen Verpackung mehr Durchschlagskraft verleihen? Illustration ist die Antwort an allen Fronten.

In den letzten Jahren haben isometrische Illustrationen an Popularität gewonnen, da sie dreidimensionale Tiefe im zweidimensionalen Raum darstellen. Außerdem macht das isometrische Raster die Notwendigkeit, die Illusion der Perspektive aufrechtzuerhalten, eine häufige Quelle der Illustrationsfrustration, zunichte.

In Adobe Illustrator ist der herkömmliche isometrische Illustrationsprozess mühsam. Erstelle ein isometrisches Gitter, zeichne ein Quadrat, neige es um -30°, drehe es um -30° und so weiter und so fort. Zum Glück gibt es einen besseren Weg. Illustrator verfügt über 3D-Effekte, mit denen isometrische Illustrationen schnell und einfach erstellt werden können: „Extrudieren und Abschrägen“, „Drehen“ und „Drehen“.

Dieses Tutorial zeigt, wie man isometrische Illustrationen mit „Revolve“ erstellt, aber die Erkenntnisse gelten auch für die restlichen 3D-Effekte von Illustrator.

Sind Sie bereit, Kunden zu beeindrucken, Benutzer zu begeistern und die Geheimnisse der isometrischen Illustration zu lernen?

Drehen und verfeinern: Ein Tutorial zur isometrischen Illustration

Wer freut sich nicht über ein eiskaltes Getränk? Lassen Sie uns auf die Freuden der flüssigen Erfrischung anstoßen, indem wir eine isometrische Flasche mit einem Etikett entwerfen.

*Profi-Tipp: Bevor Sie beginnen, finden Sie eine Objektreferenz, um zu erfahren, wie die Flasche aussehen wird.

Schritt #1: Zeichnen Sie die Flasche und die Flüssigkeit

1.1) Erstellen Sie ein neues Adobe Illustrator-Dokument.

1.2) Fügen Sie dem Dokument die Flaschenreferenz hinzu.

1.3) Zeichne einen Umriss der Flasche und der Flüssigkeit darin.

1.4) Teilen Sie die Flasche und die Flüssigkeit in zwei Hälften (wie unten zu sehen).

1.5) Die Strichstärke der Flaschenkontur definiert die Glasdicke.

*Profi-Tipp: Kopieren Sie das Bildmaterial und fügen Sie es als Backup außerhalb der Zeichenfläche ein.

Schritt #2: Wenden Sie den Rotationseffekt an

Wie der Name schon sagt, dreht „Revolve“ die Form um ihre Achse. In Illustrator ist die Position der „Revolve“-Achse vertikal fixiert. Aus diesem Grund wurde die Flasche umrissen und in zwei Hälften geteilt.

*Profi-Tipp: Weder der Flaschenumriss noch das flüssige Objekt sollten Farbverläufe als Füllfarben haben.

2.1) Um den Effekt „Drehen“ zu finden, gehen Sie zu: Effekt > 3D > Drehen…

2.2) Am oberen Rand des Dialogfensters befindet sich ein Feld mit der Bezeichnung „Position“. Wählen Sie „Isometrisch links“.

2.3) Winkel – Dies ist der Rotationsgrad um die Achse des Objekts. Bei Einstellung auf 180° ist das Ergebnis eine vertikal in zwei Hälften geteilte Flasche. Stellen Sie den Winkel für eine vollständig gedrehte Flasche auf 360° ein.

2.4) Versatz – Steuern Sie den Versatzabstand von der vertikalen Achse des Objekts. Geben Sie „0“ ein.

2.5) Oberfläche – Legen Sie die Material- und Beleuchtungseigenschaften des Objekts fest. Wählen Sie „Keine Schattierung“.

Ta-da! Eine isometrische Flasche mit Flüssigkeit. Zeit, sich zurückzulehnen, zu entspannen und – abzuwarten! Diese Flasche braucht ein Etikett.

*Profi-Tipp: Verwenden Sie die Funktion „Aussehen erweitern“ nicht auf der Flasche, bis das Etikett erstellt ist.

Schritt #3: Bereiten Sie das Etikett vor

3.1) Verwenden Sie die Flasche, um die Etikettenabmessungen zu definieren.

3.2) Im Beispielbild (unten) ist die Höhe des Körperetiketts ersichtlich, aber die Höhe des Nackenetiketts ist nicht klar, da die Oberfläche nicht parallel zur Achse ist. Eine ungefähre Höhe reicht aus.

3.3) Die Etikettenlänge wird mit der Kreisumfangsformel 2πr berechnet.

3.4) Wenn ein zufriedenstellendes Etikett entworfen wurde, wandeln Sie beide Etiketten in Symbole um. Die Palette „Symbole“ finden Sie unter: Fenster > Symbole

3.5) Ziehen Sie die Etikettendesigns einzeln per Drag & Drop in die Palette, um Symbole zu erstellen.

*Hinweis: Symbole in Illustrator und Sketch funktionieren ähnlich.

Schritt Nr. 4: Ordnen Sie das Etikett der Flasche zu

Solange die Flasche nicht mit der Funktion „Darstellung erweitern“ vektorisiert wurde, ist sie vollständig editierbar.

4.1) Wählen Sie die Flasche aus und rufen Sie die Palette „Aussehen“ auf: Fenster > Aussehen

4.2) Wählen Sie dann „3D Revolve“ und das Dialogfeld von früher erscheint.

4.3) Um das Design der Flasche zuzuordnen, klicken Sie auf die Option unten links: „Map Art“.

4.4) Damit kann ein Symbol für die Flasche ausgewählt und angepasst werden.

4.5) Achten Sie darauf, das Symbol der richtigen Oberfläche zuzuordnen (siehe unten).

4.6) Klicken Sie auf „Scale to Fit“, und das Etikett wird der Flasche zugeordnet.

4.7) Befolgen Sie die gleichen Schritte für das Nackenetikett.

Schritt Nr. 5: Vermeiden Sie eine unordentliche Datei

5.1) Jetzt ist es an der Zeit, die Flasche mit der Funktion „Aussehen erweitern“ in Bezierkurven zu verwandeln: Objekt > Aussehen erweitern

Illustrator ist nicht in erster Linie für die Manipulation von 3D-Objekten gedacht. Durch das Erweitern des Erscheinungsbilds eines Objekts wird eine gruppierte Sammlung kleinerer Elemente erstellt, die die Illusion eines 3D-Objekts vermitteln.

5.2) Um Ordnung zu halten, kombinieren Sie die Elemente mit dem „Pathfinder“- oder „Shape Builder“-Tool (siehe unten).

*Profi-Tipp: Durch das Verbinden von Objekten entstehen unerwünschte Ankerpunkte. Reduzieren Sie sie, indem Sie zu Objekt> Pfad> Vereinfachen gehen. Für diejenigen, die Illustrator regelmäßig verwenden, wird das VectorScribe-Plug-in und sein Tool zum Entfernen von Punkten dringend empfohlen.

Schritt Nr. 6: Fügen Sie Leben mit Farben und Farbverläufen hinzu

Erwecken Sie im letzten Schritt die Flasche mit Farben und Farbverläufen zum Leben. Hier kommt individuelle Kunstfertigkeit ins Spiel. Fügen Sie Reflexionen, Glanzlichter und Schatten für ein realistischeres Aussehen hinzu oder verwenden Sie Striche und eine vereinfachte Farbpalette für eine grafischere Atmosphäre. Mit einem soliden Fundament sind die stilistischen Möglichkeiten endlos.

Ein Hoch auf isometrische Illustrationen!

Isometrische Illustrationen verleihen einer Vielzahl von Designprojekten Tiefe, Dimensionalität und Persönlichkeit. Verwenden Sie die in diesem Lernprogramm beschriebenen Prinzipien, um weitere isometrische Möglichkeiten zu erkunden, und vergessen Sie nicht, die anderen 3D-Effekte von Illustrator auszuprobieren: „Drehen“ und „Extrudieren und Abschrägen“.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Visuelle Haltbarkeit – Warum Webdesign-Illustrationen altbacken werden
• Eine Schritt-für-Schritt-Anleitung zum Entwerfen benutzerdefinierter Illustrationen ohne Zeichenkenntnisse
• Neue Realitäten: VR, AR, MR und die Zukunft des Designs
• The Designer's Edge – Ein Überblick über Photoshop-Plugins
• Sich entwickelnde Emojis: Entwerfen für das neue Gesicht des Messaging