Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Typography

Erstellen Sie ein rationalisiertes, geometrisches Zeichen und ein Ambigramm

by
Read Time:14 minsLanguages:
This post is part of a series called Design Essentials.
Design a Print-ready Ad in Adobe InDesign
How to Create a Wide Range of Custom Color Swatches in Illustrator

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Das Erstellen einer eigenen grafischen Identität ist nie einfach. In der Tat könnte es das Schwierigste sein, was Sie jemals getan haben. Normalerweise gibt es keine Frist - nur ein anspruchsvoller Kunde mit irrationalen Erwartungen: Sie selbst.

Bei dem Versuch, den richtigen Look zu finden, habe ich mich nicht durch gängige Schriften und trendige Farbschemas gekümmert. Da die meisten meiner Arbeiten experimentell und vollständig selbst gemacht sind, warum sollte mein Logo nicht auch gut sein?


Einführung

Das erste, was Sie wissen sollten, ist, dass das Erstellen von Letterforms nicht für jeden geeignet ist. Für die meisten wird die Verwendung einer vorhandenen Schrift empfohlen. In der Tat kann man fragen, "wenn Ihre Wortmarke so einfach ist, warum sich die Mühe machen?" Warum nicht einfach eine Schrift verwenden? "Ich bin sicher, dass es da draußen eine Menge besser aussehender Schriften gibt. Aber keiner von ihnen macht mich so glücklich wie diese. Sehen Sie, ich habe es gemacht. Wenn Sie ein praktischer Mann wie ich sind, bedeutet glücklich mit etwas, dass es Ihren Anforderungen entspricht. Was möchten Sie also aus Ihrem Logo herausholen?


In diesem Tutorial zeige ich Ihnen, wie Sie ein Logo erstellen, das die folgenden Anforderungen erfüllt. Zuallererst bin ich ein Bildbearbeiter, der vorwiegend Arbeiten in digitaler Form anzeigt. Das ist schon ein Hinweis darauf, dass meine Schrift auf dem Bildschirm gut aussehen muss. Serifenlose Schriftarten sind gut digital, daher ist dies bereits ein guter Grund, in diese Richtung zu gehen.

Zweitens braucht meine Arbeit eine Signatur, ein Symbol, etwas, das eine bestimmte Arbeit als meine eigene identifiziert. In der digitalen Welt nennt man das ein Wasserzeichen. Sehr früh entschied ich, dass das Symbol ein Monogramm sein würde. Altmodische Dinge haben mich schon immer angezogen, und das könnte eigentlich mehr als eine sentimentale Entscheidung sein. Monogramme nehmen wenig Platz ein, können sowohl in großen als auch in kleinen Formaten angezeigt werden, bieten jedoch genügend Informationen, um erkennbar zu werden. In einem sehr langen Prozess des Skizzierens erkannte ich, dass mein Monogramm zu einem Ambigramm werden konnte (liest das Gleiche, wenn es auf den Kopf gestellt wird). Das ist +1 für Großartigkeit. :)

Gut, deshalb möchte ich eine einfache serifenlose Wortmarke und einen dazugehörigen Ambigramm. Nun, wie kann man daraus mehr als eine Skizze machen? Es gibt verschiedene Möglichkeiten, eine Schrift zu erstellen. Da ich in meiner Arbeit so ein Kontrollfreak bin, entschied ich mich, dies durch geometrische Konstruktion zu tun. Das bedeutet, dass nichts grob geschätzt wird. Kurven werden erstellt, indem eine Reihe von proportional skalierten Kreisen ausgerichtet wird. Ihre Radien werden durch genau abgewinkelte Linien bestimmt und die Schriftgewichtungen werden metrisch festgelegt. Einfach gesagt, nichts bleibt dem Zufall überlassen.


Schritt 1

Bevor wir uns damit beschäftigen, dachte ich, ich würde einen meiner Briefe im Vergleich zu Futura Std zeigen. Auf diese Weise bekommen Sie ein Gefühl für die Proportionalität Ihrer Kreise. Dies ist auch das Raster, das wir gerade erstellen.



Schritt 2

In den folgenden Schritten belasse ich den Buchstaben 'e'. Dies wird als Orientierungshilfe dienen, auch wenn wir es von Grund auf neu erstellen. Diese Briefschüssel, die wir gerade erstellen, wird später in ein "a", "e" und ein "c" umgewandelt.

Erstellen Sie zunächst Ihren ersten Kreis. Dies wird sozusagen die Schüsselecke sein. Stellen Sie in diesem Abschnitt sicher, dass die Smart Guide-Option von Illustrator aktiviert ist (Befehl + U) und das Einrasten aktiviert ist (Option + Befehl + "). Dies ist nicht nur eine Zeitersparnis in dieser Situation, sondern auch notwendig.



Schritt 3

Erstellen Sie eine horizontale Linie, die sich von einer Seite des Kreises zur anderen erstreckt.



Schritt 4

Gehen Sie zu Objekt> Transformieren> Drehen und drehen Sie die Linie um einen Winkel von -25 Grad.



Schritt 5

Ziehen Sie die Linie entlang des Pfads nach links. Auf diese Weise haben Sie einen klaren Schnittpunkt der Pfade mit dem Kreis.



Schritt 6

Die Linie befindet sich jetzt über dem Kreis, da sie später erstellt wurde. Wir möchten, dass der Kreis oben ist, da wir versuchen, dem Kreispfad einen Schnittpunkt hinzuzufügen. Ändern Sie entweder die Anordnung, indem Sie den Kreis an die oberste Stelle bringen, oder schneiden Sie den Kreis aus und fügen Sie ihn ein (Befehl + F). Bewegen Sie den Mauszeiger dann über den Schnittpunkt und fügen Sie mit dem Stiftwerkzeug (P) einen Punkt hinzu.



Schritt 7

Kopieren Sie die Zeile und fügen Sie sie ein (Befehl + F). Gehen Sie zu Objekt> Transformieren> Reflektieren. Kippen Sie es über die vertikale Achse.



Schritt 8

Wiederholen Sie den Linienvorgang (ziehen Sie die Linie entlang des Pfads, bringen Sie den Kreis oben und fügen Sie einen Schnittpunkt zum Kreis hinzu).



Schritt 9

Kopieren Sie den Kreis, fügen Sie ihn ein und wechseln Sie zu Objekt> Transformieren> Skalieren. Machen Sie es 225% größer.



Schritt 10

Ziehen Sie den obersten Punkt des großen Kreises um 15 Grad direkt auf den kleineren Punkt. Sie sollten zusammenschnappen.



Schritt 11

Kopieren Sie den kleineren Kreis und fügen Sie ihn ein. Ziehen Sie diesen wie den ersten, außer über den unteren Punkt des großen Kreises.



Schritt 12

So sollte Ihre Konstruktion jetzt aussehen. Damit ist der äußere Rand des Buchstabens abgeschlossen. Als nächstes ist der innere Radiusrand.



Schritt 13

Kopieren Sie den kleinen Kreis des Außenradius und fügen Sie ihn ein. Skaliere es auf 50%.



Schritt 14

Fügen Sie mit der Option "Intelligente Hilfslinien" einen Punkt mit dem Zeichenstift-Werkzeug auf dem inneren Radiuskreis um 135 Grad hinzu (die Hilfslinie wird automatisch angezeigt). Grundsätzlich ist dies eine Diagonale von 45 Grad.



Schritt 15

Kopieren Sie den kleinen Kreis und fügen Sie ihn ein (wir nennen diesen neuen mittleren Kreis). Skaliere es bei 130%.



Schritt 16

Erstellen Sie erneut den Durchmesser für den Kreis wie zuvor, jedoch in einem Winkel von -15 Grad.



Schritt 17

Kopieren Sie einen der großen Kreise und fügen Sie ihn ein. Geben Sie auch einen Durchmesser von -15 Grad an.



Schritt 18

Bewegen Sie den großen Kreis so, dass er dem 15-Grad-Winkelpunkt des mittleren Kreises entspricht.



Schritt 19

Kopieren Sie die beiden Kreise (klein und mittel) und fügen Sie sie ein. Drehen Sie sie vertikal um (horizontale Reflexion) und schnappen Sie sie am unteren 15-Grad-Punkt des großen Kreises ein (wenn Sie noch keinen erstellt haben, tun Sie es jetzt).



Schritt 20

Kopieren Sie einen weiteren großen Kreis, fügen Sie ihn ein und rasten Sie ihn an den oberen Punkt des mittleren Kreises. Machen Sie dasselbe für den unteren.



Schritt 21

Erstellen Sie jetzt einen 37-Punkt-Strich, der größer als der Buchstabe ist. Erstellen Sie außerdem einen dünnen Strich, den Sie als Hilfslinie verwenden (schwarz). Richten Sie die Hilfslinie am rechten Punkt des mittleren Kreises aus.



Schritt 22

Gehen Sie zu Objekt> Erweitern, während der große Strich ausgewählt ist.



Schritt 23

Erstellen Sie auf jeder Seite dieses dicken Strichs einige Richtlinien.



Schritt 24

Löschen Sie den dicken Strich und senden Sie die gerade erstellten Hilfslinien auf die Rückseite der Leinwand.



Schritt 25

Wenn sich die Hilfslinien mit den großen äußeren und inneren Kreisen schneiden, fügen Sie Schnittpunkte hinzu.



Schritt 26

Unsere Konstruktion ist jetzt abgeschlossen. Beginnen wir damit, den äußeren Rand zusammenzusetzen. Kopieren Sie nur die äußeren Rahmenelemente in eine neue Ebene, und blenden Sie die vorherige aus.



Schritt 27

So funktioniert das Jeder Kreis ist nur so lange relevant, bis er einen anderen Kreis berührt. Also brauchen wir vom großen äußeren oberen Kreis (der immer noch als weiße Linie als Referenz dient) das winzige obere Bit. Da wir allen Schnittpunkte hinzugefügt haben, müssen wir nur die Extras abschneiden, indem Sie nicht benötigte Punkte mit dem Direktauswahl-Werkzeug (A - weißer Pfeil) löschen. Löschen Sie alle, aber den hervorgehobenen Teil darunter.



Schritt 28

Verlasse den Eckenradius genauso, um den oberen und linken großen Kreis zu verbinden.



Schritt 29

Machen Sie dasselbe für den linken großen Kreis und dann für den unteren.



Schritt 30

Im Moment sollte Ihr Kreis so aussehen. Es macht nichts aus, wenn die Oberseite länger ist. Es ist nicht wirklich - der Buchstabe "E" ist etwas weniger breit als der Buchstabe "A".



Schritt 31

Der Pfad sieht zwar kontinuierlich aus, ist aber in die vielen Stücke aufgeteilt, die wir erstellt haben. Wir müssen jetzt alle Schnittpunkte zusammenfügen. Ziehen Sie mit dem Direktauswahl-Werkzeug (A) über die zwei überlappenden Punkte und verbinden Sie die Pfade miteinander (Befehl + J). Tun Sie dies für alle Split-Enden.



Schritt 32

Ihre äußere Gliederung ist jetzt fertig. Verpassen Sie keine losen Enden.



Schritt 33

Wenn Sie den Vorgang für die innere Kontur wiederholen, sollten Sie dieses Ergebnis erhalten. Denken Sie daran, auch die beiden Pfade miteinander zu verbinden.



Schritt 34

Erinnern Sie sich an die zwei vertikalen Hilfslinien, die wir platziert haben? Schließen Sie die a-Schüssel mit dem Rechteckwerkzeug (M).



Schritt 35

Füllen Sie den Schüsselpfad mit einer durchgehenden Farbe, entfernen Sie die Kontur und gruppieren Sie sie mit dem Rechteck. Und endlich haben wir unseren ersten Brief!



Schritt 36

Duplizieren Sie es und fahren wir mit dem nächsten Buchstaben fort. Erstellen Sie eine 15-Grad-Winkellinie.



Schritt 37

Platzieren Sie den unteren Endpunkt der Linie über der Ecke des Buchstabens.



Schritt 38

Trimmen Sie bei derselben Technik, bei der Endpunkte über sich kreuzende Pfade platziert werden, den Boden der Schüssel ab.



Schritt 39

Verschieben Sie das Rechteck, indem Sie die rechte untere Ecke über dem unteren Endpunkt des Buchstabens positionieren.



Schritt 40

Verkleinern Sie das Rechteck auf einen vertikalen Anteil von 70%. Denken Sie daran, dies nicht zu tun, um die Dicke zu erhalten.



Schritt 41

Ziehen Sie die obere rechte Ecke des Rechtecks, bis es am Schüsselpfad einrastet.



Schritt 42

Schneiden Sie den Überschuss der Schüssel auf der rechten Seite des Rechtecks ​​ab (siehe unten).



Schritt 43

Duplizieren Sie das Rechteck, drehen Sie es in einem Winkel von 90 Grad und rasten Sie es an der Ecke des vorherigen Rechtecks ​​ein.



Schritt 44

Duplizieren Sie das vertikale Rechteck und schnappen Sie es an den mittleren inneren Anker der Schüssel.



Schritt 45

Ziehen Sie die beiden Endpunkte des horizontalen Rechtecks ​​mit dem Direktauswahl-Werkzeug (A), bis es am dritten Rechteck einrastet. Löschen Sie letzteres, um die Lücke zu zeigen.



Schritt 46

Das 'c' ist eine einfache Modifikation gegenüber dem 'e'. Schneiden Sie einfach den horizontalen Teiler ab, während Sie eine Hilfslinie aus dem 'e' verwenden. Wir haben jetzt die drei schwierigsten Buchstaben zu erstellen!



Schritt 47

Wir beginnen jetzt mit der Formulierung und erstellen neue Buchstaben, wo sie benötigt werden. Zunächst benötigen wir ein Platzierungsraster. Erstellen Sie zwei sehr lange horizontale Linien, und schnappen Sie sie an den am weitesten entfernten vertikalen Ankern des 'a' ein.



Schritt 48

Gruppieren Sie die beiden Zeilen (Befehl + G), schneiden Sie sie aus und fügen Sie sie auf einer neuen Ebene ein. Kopieren Sie sie und fügen Sie sie an Ort und Stelle ein (Befehl + F). Skalieren Sie diese neue Gruppe auf der vertikalen Achse auf 94%. Warum der doppelte Leitfaden? Werfen Sie einen Blick auf jeden professionellen Zeichensatz in Ihrer Bibliothek. Sie werden bemerken, dass die Zähler immer weiter als Stiele reichen. Dies liegt daran, dass, wenn sich der Konter und der Stamm auf gleichem Niveau befinden, der Stamm visuell als größer wahrgenommen wird. Um diesen Höhenunterschied auszugleichen, muss der Zählerstand über die x-Höhe hinaus erhöht werden.



Schritt 49

Die roten Linien sind jetzt unsere x-Höhe. Wir brauchen jetzt eine aufsteigende Linie (weiß markiert).



Schritt 50

Erstellen Sie eine vertikale Linie, die von der Aufstiegslinie zur Grundlinie ausgerichtet wird. Verwechseln Sie nicht die Grundlinie mit der Gegenlinie. Denken Sie daran, dass die Stiele (was wir gerade erstellen) nicht mit den Gegenlinien übereinstimmen. Es kann hilfreich sein, die Farbe der Basislinie und die x-Höhe in eine andere Farbe zu ändern.



Schritt 51

Fügen Sie eine weitere Anleitung hinzu, die an der Spitze der a-Schüssel (wie unten gezeigt) einrastet. Fügen Sie dann auf der Schriftartebene eine 20-Grad-Winkellinie hinzu und schnappen Sie den oberen Endpunkt, an dem sich die Hilfslinie mit dem Stamm schneidet.



Schritt 52

Wir brauchen jetzt eine Komponente für den Buchstaben 'l'. Erstellen Sie einen sehr großen Kreis auf derselben Ebene.



Schritt 53

Rasten Sie den linken horizontalen Anker des Kreises am Vorbau ein.



Schritt 54

Fügen Sie den Pfaden Ankerpunkte hinzu, an denen sie sich mit den Hilfslinien schneiden. Eine für die Zählerlinie und eine für die Basislinie. Achten Sie darauf, die Führungsebene zu sperren, andernfalls landen diese Anker auf den Führungen und nicht auf Pfaden.



Schritt 55

Schneiden Sie den Kreis ab, bis der kleine linke untere Bereich übrig bleibt. Verbinde die Pfade, um ein abschließendes "l" zu erhalten.



Schritt 56

Erstellen Sie eine lange vertikale Linie von 40 pt (Linienstärke) und drehen Sie sie in einem Winkel von 35 Grad.



Schritt 57

Duplizieren Sie die Linie und drehen Sie sie horizontal.



Schritt 58

Erweitern Sie es und schneiden Sie den Überschuss erneut ab. Verwenden Sie dabei die Grundlinie und die x-Höhe als Richtlinie. Sobald das x abgeschlossen ist, drehen Sie ein "l" um 90 Grad und schnappen Sie es an der Unterseite der Konterlinie an. Dann duplizieren Sie die Führungen und schnappen Sie sie an der Unterseite des gedrehten 'l' ein. Wir haben im Grunde nur Hilfslinien für eine zweite Zeile erstellt, deren Zeilenabstand mit der Schriftstärke identisch ist. Dies führt zu einem sehr engen Layout, aber mit großen Schriftkörpern ist es unmöglich.

Sie sehen, ich habe keine absteigenden Buchstaben in meinem Vornamen (ex 'g' - Buchstaben, die über die Grundlinie hinausgehen). Bei einem solchen Layout würden sich die Unterlinien mit der zweiten Reihe überschneiden, was offensichtlich ein Problem wäre.



Schritt 59

Duplizieren Sie das 'a' und drehen Sie es horizontal in der unteren Reihe.



Schritt 60

Erweitern Sie den Vorbau bis zur Aufstiegslinie.



Schritt 59

Duplizieren Sie das 'a' und drehen Sie es horizontal in der unteren Reihe.



Schritt 60

Erweitern Sie den Vorbau bis zur Aufstiegslinie.



Schritt 61

Die Änderung, die wir gerade vornehmen, verbessert die Lesbarkeit bei kleinen Größen. So etwas merkt man nach dem Probedruck und kleinen Tests auf dem Bildschirm. Erstellen Sie einen Kreis, der ein ungefähres Ergebnis liefert (siehe unten). Trimmen Sie die Schüssel mit der im ersten Teil des Tutorials beschriebenen Technik.



Schritt 62

Sie können die Änderung unten sehen, die die Lesbarkeit verbessert, insbesondere bei kleinen Größen.



Schritt 63

Unser nächster Buchstabe auf der Liste lautet 't'. Duplizieren Sie das 'e' und schnappen Sie es über einem duplizierten 'l' (siehe unten).



Schritt 64

Schneiden Sie alles ab, was aber auf dem Screenshot darunter zu sehen ist.



Schritt 65

Fügen Sie die Leiste dem 't' hinzu, während Sie die richtigen Ausrichtungen verwenden.



Schritt 66

Fügen Sie eine -10-Grad-Linie hinzu und verwenden Sie sie als Leitfaden zum Ändern der Leiste.



Schritt 67

Die visuelle Einheit einer Schrift zu bewahren, kann bedeuten, Teile eines Buchstabens wiederzuverwenden, um andere zu erstellen (wie wir es mit dem 'a', 'e', ​​'c' gemacht haben), aber es kann zu Extremen kommen. Ein b in ein h zu verwandeln ist kein Weg. Der Winkel muss schärfer sein und der Übergang zum zweiten Stamm um einen engeren Radius. Sie müssen die Technik inzwischen kennen, erstellen Sie also eine Methode, die das untere Bild als Leitfaden verwendet.



Schritt 68

Und zum Schluss ein Brief "i" aus einem verkürzten "l". Fügen Sie den Punkt hinzu, aber machen Sie den Punkt um 105% größer als die Schriftstärke (oder mehr, wenn Sie möchten).



Schritt 69

Unser letzter Schritt mit der Wortmarke betrifft den Buchstabenabstand, auch Kerning genannt. Zu Beginn werden wir unsere Buchstaben mit einem 'l'-Buchstaben als Vorlage metrisch platzieren. Fangen Sie alle Buchstaben an diesem Abstandsblock, um das gleiche Ergebnis zu erhalten.



Schritt 70

Was wir aber wirklich wollen, ist der optische Abstand. Wenn Buchstaben gleich groß sind, entstehen unerwünschte Lücken aufgrund der unterschiedlichen Form jedes Buchstabens. Die Lücken müssen durch Verschieben der Buchstaben nach links oder rechts ausgeglichen werden. Zum Beispiel habe ich im Abschnitt 'tec' das 'e' mehr nach links verschoben, um die Lücke zu korrigieren. Bewegen Sie nicht die Endbuchstaben jedes Wortes (a, x; b, i). Bewegen Sie stattdessen den Inhalt.

Eine grobe Erklärung für Kerning ist dies. Stellen Sie sich vor, Sie würden die Leerzeichen zwischen den einzelnen Buchstaben mit Sand füllen. Jeder Raum sollte dann ungefähr gleich groß sein.


Und hier ist das Wort vor und nach dem Kerning.



Schritt 71

Das Erstellen des Ambigramms ist ziemlich einfach. Kopieren Sie zwei 'B'-Buchstaben und fügen Sie sie auf einer anderen Ebene ein.



Schritt 72

Kippen Sie den linken sowohl vertikal als auch horizontal.



Schritt 73

Richten Sie die beiden wie in der Abbildung unten gezeigt aus.



Schritt 74

Erstellen Sie einen 30-Punkt-Strich und erweitern Sie ihn. Richten Sie ih an beiden Kanten des Vorbaus aus.



Schritt 75

Schnappen Sie sich den Pfadfinder und verwenden Sie die Option Vom Formbereich subtrahieren, um den Ambigramm auszuschneiden.



Schritt 76

Fügen Sie einen 30-Punkte-Kreis hinzu und lassen Sie genügend Platz. Das Herunterskalieren des Symbols zeigt, wie viel Platz benötigt wird.



Fazit

Und hier sind sie, Ambigram und Wortmarke. Ich hoffe, dieses Tutorial hat Ihnen etwas über Typografie beigebracht. Ich freue mich darauf, Ihre eigenen Namen und Persönlichkeiten durch eigene Gesichter zum Ausdruck zu bringen!



One subscription.
Unlimited Downloads.
Get unlimited downloads