Erstellen Sie eine isometrische gitterbasierte 3D-Beschriftung

Erstellen von Briefen basierend auf isometrische Zeichnung Prinzipien sind der perfekte Weg, um die Struktur in einer Display-Schrift zu reflektieren, wie ich kürzlich bei einem Auftrag für ein Magazin über zeitgenössische Architektur herausgefunden habe.

In diesem Tutorial werde ich Sie durch den Prozess des Erstellens eines Rasters führen, das die Grundlage Ihres Entwurfs bildet, und Ihnen dann zeigen, wie Sie Ihre Buchstaben zeichnen, färben und beleuchten, um eine dreidimensionale Architekturszene zu erstellen. Sobald Sie die Grundlagen dieser Technik verstanden haben, können Sie damit schnell und einfach eigenständige Teile oder komplizierte sich wiederholende Muster erstellen.

Klicken Sie hier, um die Support-Dateien herunterzuladen (2,19 MB)



Isometrische 3D-Skizze

50 Zoll Fernseher unter 200 Dollar
3D-Skizze

01 Tauchen Sie dafür nicht direkt in Illustrator ein. Die Arbeit an einem isometrischen Gitter erfordert Präzision, aber Sie erhalten ein besseres Gefühl dafür, was Sie viel schneller erreichen möchten, indem Sie einige Ideen mit einem Bleistift auf Papier skizzieren. Wenn wir die Schritte zum Erstellen Ihrer eigenen Schrift auf dem Bildschirm erreichen, zeige ich den gesamten Vorgang nur in einem Buchstaben, da es viel besser ist, zu experimentieren und eigene Schriftdesigns zu erstellen.

3D-Gitterdesign

3D-Gitterdesign

02 Es gibt viele Möglichkeiten, Ihr isometrisches Gitter zu erstellen, die alle ihre eigenen Vorteile haben. Für mich ist dies jedoch die einfachste Methode: Zeichnen Sie zunächst mit dem Linienwerkzeug in Illustrator eine horizontale Linie über Ihre Seite und duplizieren Sie sie mehrmals, bis Sie eine gute Anzahl von Linien haben. Wählen Sie nun alle aus und doppelklicken Sie im Toolbox-Bedienfeld auf das Schersymbol. Geben Sie einen Winkel von 30 Grad ein und klicken Sie auf die vertikale Achse.

Illustrator Sheer Icon

Illustrator-Bildschirm

03 Kopieren Sie als Nächstes ein Duplikat (Strg / Befehlstaste + F) und fügen Sie es ein. Wählen Sie dann das Reflect-Werkzeug aus. Halten Sie die Umschalttaste gedrückt, um das Ergebnis einzuschränken, und verwenden Sie dann die Maus, um die gescherten Linien umzudrehen.

Reflektieren Sie Illustrator Design

Design reflektieren

04 Zeichnen Sie nun eine Reihe vertikaler Linien durch jede Kreuzung, bis Sie das oben gezeigte Muster erhalten. Eine schnelle Möglichkeit besteht darin, an beiden Enden eine Linie zu zeichnen und mit dem Mischwerkzeug die dazwischen liegenden Schritte zu füllen. Wenn Sie Ihr Raster in Linien gezeichnet haben, wählen Sie alles aus und konvertieren Sie alle Linien in Hilfslinien (Strg / Befehlstaste + 5), um Ihr fertiges Raster zu erstellen.

Zeichnen Sie eine Gitter-3D-Mischung

Zeichnen Sie ein 3D-Raster

05 Wenn Sie dies noch nicht getan haben, aktivieren Sie Smart Guides (Strg / Cmd + U) und aktivieren Sie die Option Am Punkt ausrichten (Strg / Cmd + Alt + '), um eine präzise Positionierung zu erzielen. Um die Buchstaben zu erstellen, konstruieren wir eine Reihe von Würfeln entlang unserer 30-Grad-Linien. Zeichnen Sie jede Seite eines Würfels einzeln und arbeiten Sie ohne Füllungen.

Am Punktwürfel ausrichten

Am Punkt ausrichten

06 Wenn Sie jede Seite gezeichnet haben, setzen Sie sie zusammen, um Ihren ersten Würfel zu erstellen. Stellen Sie sicher, dass Sie die verborgenen Gesichter einschließen, da Sie sie möglicherweise später aufdecken und verwenden möchten, je nachdem, wie Ihre Buchstaben aussehen sollen. An dieser Stelle lohnt es sich, einige grundlegende Schattierungen hinzuzufügen, um eine Lichtquelle zu definieren. Ich habe mich dafür entschieden, dass meine Lichtquelle von links unten kommt, sodass meine obere Ebene dunkel ist, die rechte Ebene einen mittleren Gradienten aufweist und die linke Ebene ziemlich hell ist.

warum das Apple Trackpad das beste sein könnte

Lichtquelle, versteckte Gesichter

Schattierung, versteckte Gesichter

07 Beginnen Sie mit dem Erstellen Ihres ersten Buchstabens, indem Sie Ihre Würfel duplizieren und neu positionieren. Hier bieten sich Smart Guides und Snap to Point an. Sie werden sehen, dass eine definierte Lichtquelle jetzt hilft, die Buchstaben klarer zu visualisieren.

Briefe virtualisieren, Würfel duplizieren

Briefe virtualisieren

08 Wenn Sie mit der Form des Buchstabens zufrieden sind, fügen Sie eine erweiterte Farbe hinzu. Da wir hier nicht nach perfektem Realismus suchen, können Sie die Regeln ein wenig brechen, um einen ästhetischen Effekt zu erzielen. Zum Beispiel habe ich aus Interesse einen mittleren bis leichten Farbverlauf für jeden Würfel beibehalten, obwohl es in Wirklichkeit nur einen Farbverlauf auf dem gesamten Gesicht geben würde.

Ästhetische Lichtquellenbeschriftung

Ästhetik

09 Machen Sie jetzt die Buchstaben gebäudeähnlicher. Entfernen Sie zunächst einige der Vorderflächen, um zu erkennen, was sich dahinter befindet. Färben Sie diese Rückseiten in einem etwas dunkleren Farbton für mehr Tiefe. Sie können auch einen blauen Farbverlauf hinzufügen und in der Transparenzpalette mit der Deckkraft spielen, um Fenster zu erstellen, und in den unteren Ebenen einen grünen Farbverlauf hinzufügen, um Grasflächen zu erstellen. Probieren Sie Farben und Texturen aus, um Erde, Pflaster, Monoblocking und alles andere zu schaffen, was Sie sich vorstellen können. Ich bleibe bei der flachen Farbe für mein Gras, aber Sie könnten zum Beispiel durch Film Grain etwas Textur hinzufügen.

Erweiterte ästhetische Beschriftung

Fortgeschrittene Ästhetik

10 Wenn Sie Ihren Basisbuchstaben fertiggestellt haben, zeichnen Sie einige Schatten entlang des 30-Grad-Rasters, um die Höhe in den Strukturen anzuzeigen. Wenn Sie Schatten zeichnen, verwenden Sie die Deckkraft, um eine Überblendung darzustellen, anstatt einfach zu Weiß auszublenden. Sie erhalten ein natürlicheres Aussehen sowie die Möglichkeit, problemlos Hintergrundfarben darunter hinzuzufügen. Denken Sie auch daran, dass Schatten nicht schwarz sind - sie sind dunklere Schattierungen der Farbe, auf die sie geworfen werden. Wenn Sie beispielsweise einen Schattenwurf auf Gras haben, sollte dieser dunkelgrün bis klar und nicht schwarz bis weiß sein.

wie man Make-up in Photoshop aufträgt

3D-Schatten

Beschattung

elf Um den Buchstaben eine gewisse Skalierung zu geben, müssen wir ein weiteres erkennbares Element hinzufügen. In diesem Fall ist es sinnvoll, Personen in die Szene aufzunehmen, da wir mit Gebäuden arbeiten. Zeichnen Sie einige grobe Silhouetten und passende Schatten erneut auf die 30-Grad-Gitterlinien.

Skalieren Sie Bilder und fügen Sie Elemente hinzu

Bilder skalieren

12 Sobald Sie eine kleine Auswahl an Figuren haben, fügen Sie diese Ihrer Szene hinzu. Stellen Sie erneut sicher, dass Ihre Schattenfarben übereinstimmen, und versuchen Sie, die Schatten an Positionen zu platzieren, die Sie interessieren, z. B. in Fenstern und in Nischen.

Schatten und Farbe in der Szene

Einige Betriebssysteme enthalten Video- und Audiobearbeitungssoftware
Szene erstellen

13 Machen Sie weiter wie zuvor und beginnen Sie, die anderen Buchstaben zu zeichnen. Suchen Sie nach interessanten Kompositionen und prüfen Sie, ob es verschiedene Möglichkeiten gibt, denselben Buchstaben für Variationen zu rendern. Möglicherweise möchten Sie auch einen großen Rasen hinzufügen. Verwenden Sie ihn, solange die Lesbarkeit nicht zu stark beeinträchtigt wird.

Komposition, Lesbarkeit, endgültiges Bild

Fertiges Bild

14 Wenn Sie alle benötigten Buchstaben gezeichnet haben, platzieren Sie die Quelle. Ich füge auch eine kleine Menge Film Grain hinzu, um das retro-futuristische Gefühl zu unterstützen. Fügen Sie dann die Wörter hinzu, die Sie veranschaulichen möchten, und sehen Sie, wie sie zusammen aussehen. Dies ist der Punkt, an dem Sie möglicherweise feststellen, dass einer der Buchstaben in der Sequenz nicht ganz funktioniert, und Sie haben die Möglichkeit, kleine Verbesserungen vorzunehmen.

Filmkorn, Schnittfolge

Bearbeitungssequenz

fünfzehn Die letzte Phase besteht darin, über die gewünschte Komposition im Bild nachzudenken. In diesem Fall möchte ich den isometrischen Stil fortsetzen, also habe ich die Buchstaben entlang der 30-Grad-Winkel in meinem Raster angeordnet. Dies gibt dem Stück eine coole falsche Perspektive. Nach wie vor können Sie die Wörter nach Belieben experimentieren und anordnen - versetzt, absteigend oder gerade. Spielen Sie herum und sehen Sie, was am besten aussieht. Das Letzte, was ich getan habe, ist, einen Farbverlauf im Hintergrund hinzuzufügen, um das Stück zu erden und meine Lichtquelle hervorzuheben. Ich füge auch eine kleine Menge Film Grain hinzu, um das retro-futuristische Gefühl zu unterstützen.