Team Awesome Vom handgeschriebenen Schriftzug zum Vektor in Adobe Illustrator

Was Sie erstellen werden

Wollten Sie schon immer ein typografisches Logo für Sie oder Ihr Team erstellen? Es ist nicht so schwierig, wie es scheint! Viele Leute sagen, dass sie weder malen noch zeichnen können, aber Typografie gehört zu unserem täglichen Leben. Wir schreiben immer Namen, E-Mail-Adressen, Telefonnummern und dergleichen. Wir haben also alle einen guten Start. Wir kennen alle die Formen der Buchstaben.

Ich werde Sie nun durch alle Schritte führen, die erforderlich sind, um ein Logo für "Team Awesome" zu erstellen.. 

Was wirst du brauchen

Um dieses Projekt abzuschließen, benötigen Sie Folgendes:

  • Papier
  • Bleistift
  • Adobe Illustrator

1. Planen Sie Ihr Logo

Schritt 1

Notieren Sie sich das Wort oder die Phrase, die Sie erstellen möchten, bevor Sie mit dem Skizzieren beginnen. Das hört sich vielleicht dumm an, aber glaub mir, es ist wichtig! Während Sie die Wörter schreiben, werden Sie anfangen zu sehen, wie die Buchstaben "tanzen" und miteinander spielen.

Für dieses Projekt erstelle ich ein Logo für "Team Awesome". Dies ist der Name des Ausbilderteams und der Community-Mitglieder im Bereich Design & Illustration auf Tuts +. Da Sie dieses Tutorial gelesen haben, begrüßen Sie das Team!

Für mein "Team genial"Logo, ich habe mich gefragt, wie ich" Awesomeness "visuell darstellen kann. Das erste, was mir in den Sinn kam, waren Superhelden. Was ist mehr als ein Superheld? Ich möchte, dass mein Logo einem Superheld-Logo ähnelt.

Schritt 2

Nehmen Sie sich etwas Zeit, um darüber nachzudenken, wie der Name, den Sie für Ihr Logo verwenden, visuell übersetzt werden kann. In diesem Fall wird unser Logo alle Schrift sein, daher werde ich Elemente verwenden, die in die Beschriftung integriert sind. Für dieses Logo habe ich mich für einen Blitz entschieden.

Schritt 3

Gekritzel! Beginnen Sie mit der Erkundung verschiedener visueller Möglichkeiten. Spiele mit Typ und Elementen. Zu diesem Zeitpunkt müssen Sie nichts verfeinern, nur Gekritzel!

2. Wahl eines typografischen Stils

Schritt 1

Denken Sie beim Skizzieren darüber nach, welchen Stil Sie haben möchten und welche Botschaft Sie mit Ihrem Logo oder Schriftzug vermitteln möchten. Wie soll Ihr Logo aussehen und sich anfühlen? Was soll die Person, die Ihr Logo betrachtet, fühlen? Scott Biersack bietet eine Reihe von Tutorials, mit denen Sie die Typografie besser verstehen können. Gehen Sie weiter zu Scott's Training über Hand Lettering Fundamentals. Dies wird Ihnen helfen, wenn Sie Ihre Gedanken durcharbeiten.

Schritt 2

Nachdem Sie nun über die Nachricht nachgedacht haben, die Sie übermitteln möchten, müssen Sie einen bestimmten typografischen Stil auswählen. Ich möchte, dass mein Logo funky ist und einen schönen Fluss hat. Um dies zu tun, entschied ich mich, es in einem zufälligen Skriptstil zu erstellen, der der Handschrift ähnelt. Um ein besseres Verständnis der Typografie zu erlangen und einen Stil zu wählen, der am besten zu dem passt, was Sie vermitteln möchten, lesen Sie dieses Tutorial von Scott Biersack: Handbeschriftung: Typen verstehen.

3. Erstellen Sie Miniaturansichten

Nun werden Sie verschiedene Möglichkeiten erkunden und versuchen, alle Elemente miteinander zu verbinden.

Schritt 1

Erstellen Sie zunächst verfeinerte Miniaturansichten. Ich mag es, die Miniaturen als Mini-Versionen des Logos zu skizzieren. Auf diese Weise kann ich in dieser Anfangsphase klarer erkennen, wie sich das Logo verhält und ob es funktioniert oder nicht. An dieser Stelle werde ich skizzieren viel. Haben Sie keine Angst, viele verschiedene Versionen zu machen. Außerdem beginne ich zu definieren, wo ich meine Bezierpunkte zu diesem Zeitpunkt platzieren möchte.

Schritt 2

Zeichne die Buchstaben als einfache Linien und füge den Buchstabenformen dann Tiefe hinzu. eine Art analoge Version des Versatzpfad Befehl. Es ist eine gute Technik, die Sie an Ihre eigene Handschrift oder Form anpassen können. Nehmen Sie sich also die Zeit zum Üben. Gut, warte.

4. Auswählen und Verfeinern der Skizze

Schritt 1

Wählen Sie die grobe Bleistiftskizze aus, mit der Sie arbeiten möchten, scannen Sie sie und vergrößern Sie ihre Größe. Dies ist die Vorlage, auf der Sie die Vektoren aufbauen können.

Schritt 2

Sobald das Bild gescannt wurde, drucken Sie es erneut und zeichnen Sie den Strich darüber, um Anpassungen vorzunehmen und eventuelle Probleme zu beheben. Scannen Sie dann diese Skizze erneut, um das Bild für die tatsächliche Ablaufverfolgung in Illustrator zu verwenden. In der Regel mache ich in letzter Zeit noch einige Änderungen an dieser Skizze.

5. Definieren der Platzierung von Bezier-Griffen

Schritt 1

Sie fragen sich vielleicht: "Definieren der Platzierung meiner Beziergriffe ... jetzt? Auf Papier?" Ja! Tun Sie dies jetzt, bevor wir mit dem Vektorteil beginnen. Dies hilft, später einen schnellen Workflow in Illustrator zu erstellen, und ist auch eine gute Übung zum allgemeinen Vectoring.

Schritt 2

Nehmen Sie Ihre ausgewählte grobe Skizze und definieren Sie Schlüsselpunkte, die Ihnen beim Erstellen Ihrer Vektorformen helfen. Dies ist keine Regel. Manchmal müssen Sie später und dort Punkte hinzufügen oder entfernen. Sei kein Bezier-Nazi! Es geht darum, die Kurven richtig aussehen zu lassen. Untersuchen Sie sorgfältig die Formen der Buchstaben und versuchen Sie, die äußersten Punkte zu identifizieren. Verfolgen Sie Linien um die Buchstaben, um die äußersten Punkte zu identifizieren. Markieren Sie sie mit einem Stift oder einer Markierung auf dem Papier.

Bewahren Sie dieses Dokument als Referenz auf. wir nennen es unser Bezier-Referenzblatt.

6. Vorbereitung der Skizze

Wenn die Skizze ausgewählt ist und die Position der Bezierpunkte definiert ist, müssen Sie die Skizze so vorbereiten, dass sie in Illustrator nachverfolgt werden kann. Dazu öffnen wir die Skizze in Photoshop und konvertieren sie in ein Bitmap-Bild (Bild> Modus> Bitmap) und als TIFF-Datei speichern.

7. Einrichten des Frameworks in Adobe Illustrator

Schritt 1

Nun ist es an der Zeit, das Illustrator-Dokument einzurichten, um die Formen unseres "Team Awesome" -Logos zu erstellen. Klicken Sie zuerst auf Datei> Neu ein neues Dokument erstellen. Meins ist A4 (210 x 297 mm) horizontal, Farbmodus: RGB. Ich verwende die CS5-Version, aber es sollte keinen größeren Unterschied in neueren oder früheren Versionen geben.

Schritt 2

Platzieren Sie Ihr Bild, indem Sie auf klicken Datei> Platzieren und wählen Sie die zuvor gespeicherte TIFF-Datei aus. Weiter so!

Schritt 3

Diese Skizze wird Ihre Vorlage sein. Ich male es mit einer hellblauen Farbe, damit ich durch die Linien sehen kann. 

Es ist eine gute Praxis, Linien hinzuzufügen, die als Hilfslinien dienen, um die Formen zu positionieren. Ich benutze ein hellgraues für die Guides. Dies ist keine Regel - Sie können mit Farben spielen, um zu sehen, was für Sie am besten funktioniert. Hellgrau wirkt für mich. Es ist wichtig, dass Sie Ihre Skizze sichtbar machen. 

Nennen Sie diese Ebene "TEMPLATE" oder einen anderen Namen, von dem Sie glauben, dass er Ihnen helfen wird. Wenn alles fertig ist, erstellen Sie eine neue Ebene und nennen Sie sie "TRACE". Ich empfehle die dunkelblaue Farbe für die "TRACE" -Schicht.

8. Beginnen Sie mit dem Erstellen der Vektorformen

Schritt 1

Klicken Sie in unserem zuvor erstellten Bezier-Referenzblatt auf die Schaltfläche Stiftwerkzeug (P) und füge an den definierten Stellen Punkte hinzu Verschiebung Taste, um die Position zu beschränken. Dadurch bleiben die Punkte abgewinkelt , 45º und 90º, So können Sie mit Ihrer Form bessere Kurven mit weniger Punkten erstellen und später einfacher bauen und steuern. 

Schalten Sie die Ebene TEMPLATE weiter ein und aus, um die Kurven zu sehen, und passen Sie sie bei Bedarf an. Für die Formen verwende ich eine rosa Farbe (# ff00ff). Auf diese Weise können Sie die Linien über der blauen Skizze sehen.

Schritt 2

Beginnen Sie mit dem Großbuchstaben A und erstellen Sie jeden Buchstaben separat als anderes Objekt, bis die Komposition abgeschlossen ist. Wiederholen Sie dies für alle Buchstaben, schalten Sie die Ebene VORLAGE ein und aus und achten Sie darauf, wie Ihre Punkte platziert werden und wie Ihre Kurven aussehen. Sobald Sie sich an diese Technik gewöhnt haben, werden Sie sehen, wie einfach es ist.

9. Platzierung der Punkte

Für die meisten Leute ist das Arbeiten mit Bezier-Kurven der schwierigste und manchmal furchterregende Teil. Es mag auf den ersten Blick knifflig erscheinen, ist es aber nicht. Schauen Sie sich die Screenshots unten an und stellen Sie fest, wie alle Punkte platziert werden. 

10. Fertiggestellte Vektorformen 

Schritt 1

Nachdem unsere grundlegenden Vektorformen fertiggestellt sind, ist es jetzt an der Zeit, unseren Fortschritt zu überprüfen. An dieser Stelle werde ich es normalerweise noch einmal ausdrucken und weitere Einstellungen mit einem Stift vornehmen.

Schritt 2

Dies ist meine gedruckte Skizze. Ich werde dies jedoch nicht erneut scannen. Ich werde darauf nur Bezug nehmen, um Änderungen in Illustrator vorzunehmen.

11. Anpassungen

Schritt 1

Duplizieren Sie die TRACE-Ebene und nennen Sie sie REVISION. Nehmen Sie auf dieser Ebene ggf. Korrekturen anhand der gedruckten Skizze vor, wobei die anderen Ebenen erhalten bleiben und erhalten bleiben.

Schritt 2

Sie haben die Vektorformen vervollständigt und verfeinert. Duplizieren Sie diese Ebene und nennen Sie sie FINAL als Backup, falls Sie sie später ändern müssen.

12. Styling

Jetzt ist es an der Zeit, das Logo zum knallen zu bringen! Lassen Sie uns etwas Leben geben, um es noch erstaunlicher zu machen.

Schritt 1

Schneiden Sie einige Buchstaben aus, damit sie interlaced aussehen. Sie können in einigen Bereichen Formen hinzufügen und mit Minus Zurück Befehl von der Pfadfinder Panel, subtrahieren Sie sie von der ursprünglichen Form.

Sie können dies tun, indem Sie die ausgeschnittenen Formen unten platzieren und auf klicken Objekt> Anordnen> Nach hinten senden oder schlagen Shift-Control- [.

Schritt 2

Öffne das Pfadfinder Panel durch Klicken auf Fenster> Pfadfinder oder klicken Shift-Control-F9.

Schritt 3

Klicken Sie mit den beiden ausgewählten Formen auf die Schaltfläche Minus zurück Taste. Voilà!

Schritt 4

Fügen Sie Ihrem Objekt eine Kontur hinzu, indem Sie darauf klicken und auf klicken Objekt> Pfad> Versatzpfad. Eingeben 1 mm und klicken Sie auf OK.

Malen Sie die Kontur dunkelblau oder schwarz, damit wir beide unterscheiden können. Machen Sie sich jetzt keine Sorgen über Farben - wir ändern das später.

Schritt 5

Nun wollen wir etwas mehr Tiefe hinzufügen. Duplizieren Sie die Konturebene, indem Sie auf klicken Bearbeiten> Kopieren (Kontrolle-C), und fügen Sie es auf der Rückseite ein, indem Sie auf klicken Bearbeiten> Zurück einfügen (Control-B).

Wählen Sie die beiden schwarzen Konturen aus und klicken Sie auf Objekt> Überblenden> Erstellen oder klicken Sie auf Strg-Alt-B.

Nach dem Anwenden des Effekts werden Sie feststellen, dass die Mischung komisch aussieht. Korrigieren Sie dies durch einen Doppelklick auf die Werkzeug mischen Taste auf der Werkzeug Panel.

Wählen Sie in dem daraufhin angezeigten Dialogfeld Abstand: Angegebene Schritte und eintreten 60. Wählen Sie nach dem Anwenden des Effekts Objekt> Überblenden> Erweitern und es wird in Objekte konvertiert.

Öffnen Sie bei ausgewählten Objekten die Pfadfinder  und suchen Sie die Vereinen Taste. Klick es an. Dadurch werden alle Objekte zu einem einzigen Objekt zusammengeführt.

Und es ist fertig! Herzlichen Glückwunsch zu Ihrem… Was? Nein, noch nicht! Zoomen Sie hinein und Sie werden sehen, dass einige Linien voller Punkte sind, sodass die Kontur in einigen Bereichen gezackt aussieht. Wir müssen das loswerden!

Eingeben Gliederungsmodus Beim Klicken Steuerung-Y und klicken Sie auf die Lasso-Werkzeug Taste (Q) auf der Werkzeug Panel. Wählen Sie die zusätzlichen Punkte mit Lasso-Werkzeug und gehe zu Objekt> Pfad> Ankerpunkte entfernen. Wiederholen Sie dies für alle benötigten Teile, bis Sie schöne glatte Formen haben.

13. Farbe und Details

Schritt 1

Sobald alles korrigiert ist, ändern wir die Farben. In meinem Fall mache ich dieses Logo für eine tolle Gruppe von Menschen und ihre Farben sind die beiden unten, also bleibe ich bei ihnen. In diesem Schritt können Sie mit den gewünschten Farben spielen.

Ich denke immer noch, dass etwas fehlt. Es ist immer noch nicht das Superheldenlogo, das ich mir vorgestellt hatte, also habe ich eine Ellipse auf den Hintergrund eingefügt und sie mit der helleren Farbe bemalt.

Schritt 2

Jetzt einige Details hinzufügen. Zuerst füge ich eine weiße Kontur um die Extrusion hinzu. Klicke auf Objekt> Versatzpfad und eintreten 1 mm.

Duplizieren Sie die weiße Kontur, indem Sie sie markieren und auf klicken Bearbeiten> Kopieren (Steuerung-C) und füge es durch Klicken auf der Rückseite ein Bearbeiten> Zurück einfügen (Steuerung-B) Ich werde meinen "Schatten" mit einer Farbe malen, die dunkler als die Ellipsenfarbe ist.

Schritt 3

Nun werde ich einige Highlights hinzufügen. Klicke auf das Rechteckwerkzeug Taste auf der Werkzeug Paneloder schlagen M, und zeichnen Sie einige Rechtecke und malen Sie sie blau, damit sie besser sichtbar sind. Ich werde meine zusammen mit dem Extrusionswinkel positionieren. Ein ... kreieren Zusammengesetzter Pfad aus allen Rechtecken, so dass sie einen einzigen Pfad bilden. Klicken Sie bei Auswahl aller blauen Rechtecke auf Shift-8 oder gehe zu Objekt> Zusammengesetzter Pfad> Make.

Wählen Sie die Extrusion aus und klicken Sie auf Objekt> Pfad> Versatzpfad und eintreten -1 mm im Dialogfeld.

Wählen Sie den generierten Pfad und die Rechtecke und in der Pfadfinder Panel suchen Sie die Sich schneiden und klicken Sie darauf. Kopieren Sie den generierten Pfad durch Klicken auf Bearbeiten> Kopieren (Steuerung-C) und wählen Sie dann die Extrusion aus und klicken Sie auf Bearbeiten> Vorne einfügen (Steuerung-F).

Tolle Arbeit, Team!

Yay! Unser Team Awesome Logo ist fertig und glänzend! Genial!

Dieses Tutorial soll Ihnen helfen, Handbeschriftung und Vektor besser zu verstehen. Es klingt zunächst komplex, aber je mehr Sie üben, desto einfacher wird es. Ich hoffe, dass alle Informationen, die ich gegeben habe, für Sie nützlich sind und dass Sie die hier gezeigten Techniken und Tipps für Ihre eigenen Projekte anpassen können. Danke fürs Zuschauen und bleib super!