7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Adobe Illustrator

Erstellen eines klassischen Vektor-Wappen-Logos

Scroll to top
Read Time: 12 mins
This post is part of a series called Logo and Identity Design.
Inspiration: Fantastic Logos Across the Color Spectrum
Create a Realistic 3D Sphere Logo from Scratch Using CorelDraw
This post is part of a series called How to Create a Logo.
Inspiration: Fantastic Logos Across the Color Spectrum
Quick Tip: Create a Colorful Sliced Sphere to use as a Logo Design

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating
Dieses Tutorial wurde ursprünglich im Dezember 2009 als Tuts+ Premium-Tutorial veröffentlicht. Es ist jetzt kostenlos verfügbar. Obwohl in diesem Tutorial nicht die neueste Version von Adobe Illustrator verwendet wird, sind die Techniken und Verfahren weiterhin relevant.

Im Laufe der Jahre habe ich langsam eine schöne Sammlung von Kunstwerken auf Wappenbasis in meinem Portfolio aufgebaut. Normalerweise habe ich zu jeder Zeit eine Provision auf meinem Tisch, die von einem Kunden stammt, der fragt: "Können Sie Ihre Cresty-Sache machen?" Dies kann von übermäßig detaillierten Stücken mit vielen komplizierten Vektoren reichen, die ineinander und auseinander weben, bis hin zu sauberen und minimalen Markierungen.

Egal auf welchem Weg, es gibt einige Prinzipien, die jeder meiner Kreationen zugrunde liegen. Was mich schön zu diesem Tutorial bringt!

Ich werde Sie durch die Skizze bis zur fertigen Vektordatei führen und ein Wappen sowie die Techniken erstellen, mit denen ich sie erfolgreich vektorisiere. Ich werde mit den Grundlagen der Bézier-Kurvenmanipulation beginnen. Wenn Sie ein fortgeschrittener Adobe Illustrator-Benutzer sind, nehmen Sie bitte Kontakt mit mir auf. Wir werden von der Erstellung der Hauptformen zum Hinzufügen von Details in Weiß übergehen und sehen, wie Sie mit einer begrenzten Palette Tiefe und Interesse für Vektoren erzeugen können. Anschließend bearbeiten wir die Objekte mit dem Pathfinder. Die, sobald sie gemeistert wird, Ihnen eine Killer-Fähigkeit verleiht.

Benötigen Sie schnell ein Logo? Stöbern Sie in unserer unglaublichen Auswahl an Logo-Vorlagen, die über GraphicRiver verfügbar sind. Oder wenden Sie sich an einen Designprofi von Envato Studio, um Ihre individuellen Anforderungen an das Logo-Design zu erfüllen.


1. Wie kann man das Pferd und die Gazelle erstellen?

Schritt 1

Erstellen Sie ein neues A3-Querformatdokument und platzieren Sie (Datei > Platzieren) die Datei "Sketchcrest.jpg", die Sie mit diesem Tutorial heruntergeladen haben, auf Ihrer Zeichenfläche (dies ist bereits für Sie erledigt). Doppelklicken Sie nun auf die Ebene in der Ebenen-Palette. Daraufhin sollte das Popup-Fenster angezeigt werden, in dem Sie es umbenennen können. Nennen Sie es Vorlage. Klicken Sie auf OK, erstellen Sie eine neue Ebene und machen Sie dasselbe, nennen Sie es jedoch schwarze Volumenkörper.

Create the HorseCreate the HorseCreate the Horse

Schritt 2

Beginnen wir mit dem Pferd von der linken Seite. Wählen Sie das Zeichenstift-Werkzeug und beginnen Sie an der Spitze des Schwanzes. Stellen Sie sicher, dass in der Symbolleiste die Option Keine Füllung ausgewählt ist, und arbeiten Sie sich bis zu den Flügeln vor. Wir streben hier nach eleganten Federn. Wechseln Sie also weiter zwischen dem Füllen Ihrer Form mit Schwarz, während Sie die darunter liegende Ebene ausblenden, um ein klares Bild und keine Füllung zu erhalten. Die Vorlage zeigt an, dass Sie auf dem richtigen Weg sind.

Create the HorseCreate the HorseCreate the Horse

Schritt 3

Das Erstellen starker, flüssiger Linien ist sehr wichtig. Der Schlüssel besteht darin, zu steuern, wie die Linie in die Ankerpunkte Ihrer Bezierkurven ein- und austritt. Jeder Anker hat einen Arm, und diese Armlänge und dieser Winkel wirken sich auf Ihre Kurve aus. Um Anpassungen vorzunehmen, wählen Sie das Direktauswahl-Werkzeug in der Symbolleiste aus und klicken Sie auf den Anker, den Sie bearbeiten möchten. Die Arme sollten angezeigt werden. Jetzt können Sie die erforderlichen Anpassungen vornehmen.

Create the HorseCreate the HorseCreate the Horse

Schritt 4

Eine weitere Schlüsseltechnik für diese Abbildung besteht darin, den positiven und den negativen Raum so gleich wie möglich zu halten. Ähnlich wie in der Typografie erzeugt ein gleicher Abstand zwischen den Zeichen einen wünschenswerteren Effekt. Wenn Sie bei der Erzeugung der Wirkung von Haaren oder Federn die Punkte gleichmäßig platzieren, wird das Gesamtbild harmonischer.

Create the HorseCreate the HorseCreate the Horse

Schritt 5

Unter Berücksichtigung dieser Punkte ziehen Sie den Rest des Pferdes weiterhin in festem Schwarz. Wenn Sie fertig sind, machen Sie dasselbe für die Gazelle auf der rechten Seite. Wenn wir fertig sind, müssen wir eine zentrale Anleitung für unseren Schild und den Rest der Komposition festlegen. Beachten Sie, dass ich begonnen habe, die Position gegenüber der Skizze leicht anzupassen.


Schritt 6

Konzentrieren Sie sich beim Schild darauf, nur die linke Seite zu nageln. Dann einfach kopieren (Befehl-C) und vorne einfügen (Befehl-F). Wählen Sie dann Objekt > Transformieren > Reflektieren und setzen Sie den Wert auf 90°. Aktivieren Sie Vertikal und klicken Sie dann auf OK. Bewegen Sie nun das neue Objekt, während Sie die Umschalttaste gedrückt halten, um die rechte Seite zu bilden. Dies stellt sicher, dass sich das Objekt nur in einer geraden Linie bewegt, und hilft dabei, die beiden Hälften auszurichten.

Create the HorseCreate the HorseCreate the Horse

2. Wie kann man den Schild erstellen? 

Schritt 1

Sobald Sie die beiden Hälften ausgerichtet haben, ziehen Sie mit dem Direktauswahl-Werkzeug eine Auswahl über die beiden Ankerpunkte, die sich oben auf dem Schild treffen. Drücken Sie nun Befehlstaste-J, um die Pfade zu verbinden, und wiederholen Sie dies für die beiden anderen Punkte am unteren Rand des Schildes.

Create the ShieldCreate the ShieldCreate the Shield

Schritt 2

Jetzt werden wir dem Schild weiße Details hinzufügen. Kopieren (Befehl-C) Sie das gesamte Objekt  und fügen Sie es vorne ein (Befehl-F), jedoch auf einer neuen Ebene. Nennen Sie diese neue Ebene "Weißes Detail". Ändern Sie nun die Füllung in eine 1pt weiße Kontur. Lassen Sie es ausgewählt und gehen Sie zu Effekt > Pfad > Pfadverschieben, wählen Sie -2 mm im Feld Pfad verschieben und klicken Sie auf OK. Gehen Sie nun zu Objekt > Aussehen umwandeln. Sie sollten eine vollkommen gleiche weiße Konturlinie in Ihrem Schild haben. Wiederholen Sie diesen Vorgang, um Ihre zweite Zeile zu bilden

Create the ShieldCreate the ShieldCreate the Shield

3. Wie kann man den Drachen erstellen?

Beginnen Sie nun wieder auf Ihrer Ebene "Black Solids" mit dem Zeichnen des Umrisses des Drachen. Halten Sie sich zunächst an die Grundformen und fügen Sie die Details anschließend als separate Elemente hinzu. Dies hilft, diese Bezierkurven in Schach zu halten.

Create the DragonCreate the DragonCreate the Dragon

4. Wie kann man die Schriftrollen erstellen? 

Schritt 1

Jetzt gehen wir zur Schriftrolle unten über. Wieder müssen wir uns nur auf die linke Seite konzentrieren und wir werden es umdrehen und neu positionieren, um die rechte Seite zu bilden. Bevor wir jedoch beginnen, wählen Sie das Schildobjekt auf der Ebene "Schwarze Volumenkörper" aus, fügen Sie eine 1-Punkt-Konturlinie hinzu und wählen Sie "Kontur nach außen ausrichten" in der Kontur-Palette. Zeichnen Sie nun die beiden Grundformen, aus denen die Schriftrolle besteht.

Create the ScrollsCreate the ScrollsCreate the Scrolls

Schritt 2

Um die Bildlaufdefinition zu erhalten, müssen einige weiße Linien hinzugefügt werden. Wählen Sie Ihre weiße Detailebene aus und fügen Sie mit dem Zeichenstift-Werkzeug weiße Konturlinien mit einer Breite von 1 Punkt hinzu, um die Falten zu definieren. Wenn Sie fertig sind, verwenden Sie eine 0.5-Punkt-Konturlinie, um Linien innerhalb der Bildlaufformen zu zeichnen, um sie detaillierter zu gestalten.

Create the ScrollsCreate the ScrollsCreate the Scrolls

Schritt 3

Jetzt müssen wir die linke Seite der Schriftrolle wie zuvor umdrehen. Kopieren (Befehl-C) und Einfügen vorne (Befehl-F). Wählen Sie dann Objekt > Transformieren > Reflektieren, setzen Sie den Wert auf 90° und aktivieren Sie Vertikal. Bewegen Sie nun das neue Objekt, um die rechte Seite zu bilden, während Sie die Umschalttaste gedrückt halten. Sie müssen in die Mitte zoomen und an den Enden jedes Pfads Befehlstaste-J drücken, um die beiden Objekte vorne miteinander zu verbinden.

Create the ScrollsCreate the ScrollsCreate the Scrolls

5. Wie kann man die Krone erstellen? 

Schritt 1

Nun zur Krone. Stellen Sie zunächst sicher, dass bei Ihrer Drachenzeichnung die Farbe auf Kontur eingestellt ist, wie Sie unten sehen können.  Die Krone besteht aus drei Formen. Ein Oval unten, ein gebogener Streifen und eine detaillierte Oberseite. Beginnen Sie mit dem Einstellen der ovalen Kopfstütze. Verwenden Sie das Ellipse-Werkzeug, um dieses Element zu erstellen. Kopieren Sie und fügen Sie vorne ein und verwandeln Sie das Objekt in eine weiße Füllung. Halten Sie die Alt-Umschalttaste gedrückt und ziehen Sie die Begrenzungsrahmenarme nach innen, um das Objekt so zu skalieren, dass es hineinpasst.

Create the CrownCreate the CrownCreate the Crown

Schritt 2

Fügen Sie nun eine weiße Linie hinzu, die nach außen um das schwarze Objekt ausgerichtet ist, und wählen Sie das Zeichenstift-Werkzeug aus. Zeichnen Sie den Streifen über die Kopfstütze. Wenn Sie fertig sind, fügen Sie diesem Element eine weiße Konturlinie hinzu. Machen Sie sich nun daran, die Oberseite zu zeichnen. Wie bei einigen der vorherigen Schritte müssen Sie nur die Hälfte zeichnen und dann das Bildmaterial umdrehen und verbinden.

Create the CrownCreate the CrownCreate the Crown

Schritt 3

Bevor wir mit der Krone weitermachen, müssen Sie zwei Dinge tun. Positionieren Sie es zunächst so, dass es direkt auf der Mittellinie liegt. Zeichnen Sie dann einen weißen Umriss hinter die Krone, um sie vom darunter liegenden Drachen zu unterscheiden.

Create the CrownCreate the CrownCreate the Crown

6. Wie kann man Details hinzufügen?

Schritt 1

Sobald dies abgeschlossen ist, können wir einige Details hinzufügen. Wählen Sie Ihre Ebene "Weiße Details" aus und zeichnen Sie mit dem Zeichenstift-Werkzeug einige Glanzlichter. Stellen Sie sich in Ihrem geistigen Auge vor, wo Licht auffangen würde, wenn es über der Krone scheint. Wenn Sie fertig sind, verwenden Sie eine Mischung aus dem Form-Werkzeug und dem Zeichenstift-Werkzeug, um der Krone mehr Definition zu geben.

Add DetailsAdd DetailsAdd Details

Schritt 2

Jetzt gehen wir zu den anderen Elementen über und fügen Details hinzu. Beginnen Sie am Drachen und definieren Sie zunächst den Hals. Zeichnen Sie mit dem Zeichenstift-Werkzeug die Skalierung und versuchen Sie, sie gleichmäßig mit der gleichen Breite wie die Linien zu verteilen. Lassen Sie sie sich an einer dickeren, schlängelnden Linie vom Kiefer bis zur Krone treffen.

Add DetailsAdd DetailsAdd Details

Schritt 3

Klicken Sie nun auf das Symbol des Zeichenstift-Werkzeugs in der Symbolleiste und halten Sie es gedrückt. Für das Ankerpunkt-hinzufügen-Werkzeug sollte eine Auswahl angezeigt werden. Wählen Sie dieses Werkzeug aus, zoomen Sie hinein und fügen Sie für jede weiße Skalenlinie zwei neue Ankerpunkte zum schwarzen Bereich darunter hinzu. Verwenden Sie anschließend die Punktlenker, um die Waage bis zum Hals abzurunden.

Add DetailsAdd DetailsAdd Details

Schritt 4

Sobald Sie den Hals fertig haben, fügen Sie die Highlights und Definitionen hinzu, wie wir es mit der Krone getan haben. Sie können auch eine weitere Schicht Schwarz über die weißen Elemente legen, wie ich sie für das Auge habe, wobei sich die Linie vom Hals und innerhalb der Flügel nach unten schlängelt.

Add DetailsAdd DetailsAdd Details

Schritt 5

Sobald Sie den Drachen haben, wie Sie möchten, fügen Sie dem Pferd und der Gazelle das Detail hinzu. Versuchen Sie, sie im Gleichgewicht zu halten. Mit anderen Worten, fügen Sie dem einen und dem anderen nicht viele Details hinzu.

Add DetailsAdd DetailsAdd Details

7. Wie kann man das Logo finalisieren?

Schritt 1

Nachdem Sie alle gezeichneten Elemente installiert haben, folgt der schwierige Teil. Der Pathfinder kann etwas temperamentvoll sein. Wichtig ist, dass Sie sicherstellen, dass keine Streuanker ausgewählt sind und dass die Reihenfolge Ihrer Objekte korrekt ist. Stellen Sie beim Subtrahieren von Weiß sicher, dass das Weiß oben liegt (Objekt > Anordnen > Nach vorne bringen). Beginnen Sie mit dem Pferd, denn das ist schön und einfach. Wählen Sie alle weißen Formen aus und klicken Sie in der Pathfinder-Palette auf das Symbol oben links (Hinzufügen oder Vereinigen, je nachdem, welche Version Sie verwenden).

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 2

Lassen Sie nun das Weiß ausgewählt und klicken Sie bei gedrückter Umschalttaste auf das schwarze Volumenobjekt unten. Wählen Sie nun das zweite Symbol aus dem linken Symbol in der oberen Reihe (Vorderes Objekt abziehen oder Subtrahieren, je nachdem, welche Version Sie verwenden). Jetzt sollten Sie ein einzelnes Objekt haben. Sie müssen das blaue Auge erneut hinzufügen, um Ihre Form zu vervollständigen.

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 3

Fangen Sie an, die Gazelle und den Drachen in Angriff zu nehmen, sobald Sie mit dem Pferd fertig sind. Das Platzieren einer Volltonfarbe hinter den Objekten kann Ihnen hier helfen. Sie werden feststellen, dass Objekte über die Ebenen springen. Denken Sie jedoch daran, dass Sie zu Objekt > Anordnen gehen. und dann die Objekte vorwärts oder rückwärts senden. Notieren Sie sich die Verknüpfungen, um dies zu beschleunigen.

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 4

Nachdem Sie die drei Tiere fertiggestellt haben, fangen Sie an, die Krone in Angriff zu nehmen. Hier müssen Sie von unten nach oben beginnen. Wählen Sie zunächst die Objekte mit Konturlinien aus und gehen Sie zu Objekt > Erweitern. Dadurch wird die Kontur in Feststoffe umgewandelt. Wählen Sie nun Ihren weißen Hintergrund für die Krone und subtrahieren Sie (obere Reihe, zweite von links in der Pathfinder-Palette) vom Objekt unten.

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 5

Das nächste Objekt ist nun der Streifen. Sie müssen zuerst den schwarzen Volumenkörper hinzufügen/vereinen und dann die weiße frühere Konturlinie von der Form subtrahieren. Im Pathfinder sehen Sie eine große Schaltfläche mit der Bezeichnung Erweitern. Überprüfen Sie nach jeder Subtraktion oder Hinzufügen, ob dies markiert ist. Wenn ja, klicken Sie darauf und es wird Ihr Objekt aufräumen!

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 6

Sie müssen hier experimentieren, versuchen und irren, um den richtigen Effekt zu erzielen, aber versuchen Sie, mein Bild so anzupassen, dass der Großteil der Krone und des Drachen miteinander verzahnt sind. Wenn Sie die Hauptformen festgelegt haben, vervollständigen Sie die Krone, indem Sie die Details finden.

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 7

Die letzten Elemente sind der Schild und die Schriftrolle. Die erste Aufgabe besteht darin, Objekt > Erweitern Sie die Konturlinien des schwarzen Volumenkörpers, aus dem der Schild besteht. Wählen Sie dann alle verbleibenden Konturlinien aus und klicken Sie auf Objekt > Erweitern, damit nur gefüllte Objekte übrig bleiben.

Jetzt wollen wir, dass das Pferd und die Gazelle oben auf dem Schild sitzen und der Schild oben auf den Schriftrollen und dem Drachen. Dazu müssen wir das schwarze Schildobjekt mit dem Drachenschwanz und der Schriftrolle verbinden. Wählen Sie jedes dieser Objekte aus, während Sie die Umschalttaste gedrückt halten, und klicken Sie dann im Pfadfinder auf Hinzufügen/Vereinigen.

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 8

Sobald die Objekte vereint sind, wählen Sie die weiße Linie aus, die den Schild umgibt, und subtrahieren Sie diese von Ihrer Form. Subtrahieren Sie nun einfach alle Details Ihrer weißen Linie vom Rest der Schriftrolle und des Schilds, und Ihre Hauptstruktur sollte vollständig sein. Denken Sie daran, Objekte weiterhin rückwärts zu senden und zu erweitern!

Finalize the LogoFinalize the LogoFinalize the Logo

Schritt 9

Der letzte Schritt besteht darin, den mit diesem Tutorial heruntergeladenen Typ "Vectortuts+" als EPS hinzuzufügen. Ich habe es bereits für Sie erstellt. Subtrahieren Sie es von der Hauptstruktur, und Sie sind fertig. Ich habe auch die Füße der beiden Tiere ein wenig aufgeräumt und ein paar streunende Anker an meinen aufgeräumt, damit Sie das Gleiche tun können.

Finalize the LogoFinalize the LogoFinalize the Logo

Schlussfolgerung

Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie waren mit dem Pathfinder nicht allzu frustriert. Glauben Sie mir, mein Computer ist bei vielen Gelegenheiten fast durch das Fenster gegangen, als ich mich zum ersten Mal damit befasst habe. Ich kann nicht betonen, wie wichtig eine Funktion des Pathfinder ist. Wenn es darum geht, diesen Arbeitsstil zu kreieren, haben meine Illustrationen eine ganz neue Dimension erhalten und sind für mich und meine Kunden viel einfacher zu verwalten. Noch ein Tipp… Speichern Sie immer eine Kopie Ihrer Arbeit, die mit allen Konturen und Objekten getrennt ist.

Crest Logo Illustrator TutorialCrest Logo Illustrator TutorialCrest Logo Illustrator Tutorial

Logo-Vorlagen von GraphicRiver

Benötigen Sie ein neues Logo? Starten Sie Ihr Geschäft mit einer unserer unglaublichen Logo-Vorlagen, die Ihnen über GraphicRiver zur Verfügung stehen. Markieren Sie sich mit dem perfekten Logo für Ihre Branche und sehen Sie sich unten einen unserer Favoriten an.

Royal Brand Logo Vorlage

Inspiriert von dem obigen Tutorial bringen wir Ihnen dieses unglaubliche Royal Crest-Logo. Dieses wunderschöne Logo verfügt über ein exquisites Wappenmuster, wobei zwei wilde Löwen einen wunderschönen Schild tragen. Laden Sie dieses Paket herunter, um dieses Vektorlogo für Ihr wachsendes Unternehmen zu verwenden.

Royal Brand Logo TemplateRoyal Brand Logo TemplateRoyal Brand Logo Template
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.