So erstellen Sie benutzerdefinierte Schriftarten: 7 Schritte und 3 Fallstudien

Seien wir ehrlich; Es gibt Schriften, die wir Designer gerne hassen. Eigentlich ist das Wort „Hass“ vielleicht nicht stark genug. Geißel? Fluch? Pest? Kot? Ich habe gehört, dass jeder die leblosen Buchstaben, Zahlen und Symbole beleidigt, die wir verwenden, um Ideen zu kommunizieren, und ich verstehe es vollkommen. Ich habe so schlimme Verbrechen gesehen (und begangen), dass selbst das ausgefallenste Bürobulletin in Verlegenheit geraten wäre.

Aber was wäre, wenn ich Ihnen sagen würde, dass die am meisten verachteten Schriften unserer Generation tatsächlich der beste Freund eines Markendesigners sein könnten? Was wäre, wenn ich Ihnen zeige, wie man glanzlose Buchstabenformen in üppige Logos verwandelt, die Kunden lieben (und für die sie gutes Geld bezahlen)? Wären Sie bereit, Ihre Sichtweise auf Schrift radikal zu ändern und sich einem unendlich wachsenden Universum kreativer Möglichkeiten zu öffnen? Sind Sie bereit, Ihre eigene Schriftart zu erstellen?

Wenn ja, lesen Sie weiter, denn ich werde gleich einen einfachen Prozess vorstellen, mit dem Sie jede Schriftart sofort zum Besseren umwandeln können, um eine Schriftart zu erstellen. Und um zu zeigen, wie effektiv der Prozess ist, demonstriere ich jeden Schritt anhand von drei Schriftarten, die von Designern überall leidenschaftlich verachtet werden.

Zuerst Jokerman , eine verrückte Sammlung clownähnlicher Charaktere, die normalerweise auf Geburtstagsbannern und „skurrilen“ Visitenkarten zu finden sind.

Als nächstes haben wir Papyrus , sorgfältig von den Wänden des Grabes von König Tut kopiert und die bevorzugte Auswahl an Café-Menüs, ernsthafte Künstler und James Cameron.

Endlich ein cooler und unerschütterlich lässiger typografischer Outlaw, der keiner Einführung bedarf – die eine, die einzige, Comic Sans .

Aus dieser unwahrscheinlichen Gruppierung werde ich dir beibringen, Schätze zu sehen, wo andere „Müll“ rufen! und erstellen Sie benutzerdefinierte Logotypen auf höchstem Niveau.

Ein einfacher und zuverlässiger Prozess

Lassen Sie uns auf eine Reise von einer abscheulichen Schrift zu einem atemberaubenden Logo gehen und lernen, wie man eine Schriftart erstellt. Wir beginnen mit etwas Schlechtem, enden mit etwas Gutem und folgen jedes Mal denselben sieben Schritten. Was sind die sieben Schritte? Ich werde die Details gleich besprechen, aber zuerst ein paar Anmerkungen zu den Werkzeugen, die Sie für diese Art von Arbeit benötigen.

Empfohlene Einrichtung

Visuelle Designer haben Zugriff auf eine Vielzahl neuer und erschwinglicher Design-Tools. Touchscreen-Geräte und fortschrittliche Eingabestifte wie der Apple Pencil machen das Erfassen von Ideen und den Übergang zu einem digitalen Workflow einfacher denn je. Experimentieren Sie frei und halten Sie an dem fest, was für Sie funktioniert. Allerdings bevorzuge ich einen bewährten Ansatz mit bewährten Tools von Adobe und Wacom:

• Photoshop – Wird verwendet, um Schriftarten zu manipulieren und mehrschichtige Verfeinerungsskizzen zu erstellen.
• Illustrator – Wird verwendet, um endgültige Verfeinerungsskizzen zu vektorisieren und schnell Stilelemente wie Farben, Verläufe, Texturen, Muster usw. hinzuzufügen.
• Wacom Tablet – Wird zum digitalen Zeichnen in Photoshop verwendet.

Jokerman – Von krass bis edel

Jokerman ist der Jim Carrey unter den Schriften: niemals subtil, laut aus jedem Blickwinkel, aber dennoch seltsam ansprechend für die Massen. Es ist lächerlich und übertrieben und genau die Art von Schriftart, für die dieses Tutorial gemacht wurde. Verrückte Schriftarten wie Jokerman sind vollgepackt mit kuriosen Designelementen, aber es fehlt ihnen die Zurückhaltung, die für ein geschmackvolles Logo erforderlich ist. Als Designer müssen wir ein gutes Urteilsvermögen walten lassen, und das bedeutet oft, zugunsten einer klareren Kommunikation auf Details zu verzichten.

Es ist ein einfacher siebenstufiger Prozess, der uns von einer unerwünschten Schriftart zu einem hochwertigen Logotyp führt. Es ist ein einfaches Zeichnen erforderlich, aber wenn Sie Ihren Namen schreiben und ein Bild nachzeichnen können, verfügen Sie über alle Fähigkeiten, die Sie benötigen, um zu lernen, wie Sie Ihre eigene Schriftart erstellen. Lass uns anfangen.

1. Schriftart überprüfen

Wählen Sie in Photoshop eine Schriftart (in diesem Fall Jokerman), geben Sie den Firmennamen ein, den Sie für Ihr Logo benötigen, und untersuchen Sie schnell jeden Buchstaben, um ein Gefühl für Designmöglichkeiten wie Skalierung, Proportionen, Buchstabenstärke usw. zu bekommen.

2. Ideen entwickeln

Erstellen Sie mit Ihrem Wacom-Tablet eine lockere Skizze Ihres Logos. Hier muss man nicht genau sein. Skizzieren Sie einfach schnell und einfach etwas, das als Skelett für Ihr Design dient.

3. Schriftart verzerren

Skalieren, dehnen, neigen und quetschen Sie jeden Buchstaben mit der von Ihnen ausgewählten Schriftart über der Oberseite Ihrer Ideenskizze. Bei diesem Schritt müssen Sie die Dinge nicht perfekt machen. Sie werden es später verfeinern, also machen Sie einfach weiter.

4. Korrekturskizze

Machen Sie jetzt eine schnelle Skizze über Ihren verzerrten Buchstaben. Hier fangen Sie an, die Mängel der ursprünglichen Schrift zu verbessern und Ihre eigenen Designdetails hinzuzufügen.

5. Verfeinerungsskizze

Dies ist die letzte Phase des Skizzierens und Verfeinerns in Photoshop. Bereinigen Sie alles, was nicht funktioniert, und füllen Sie Ihre Buchstaben aus, damit Sie eine bessere Vorstellung von der Form und dem Verhältnis von Leerzeichen zwischen Buchstaben bekommen.

6. Vektorspur

Legen Sie Ihre Verfeinerungsskizze in Illustrator ab, brechen Sie das Stiftwerkzeug aus und klicken Sie sich vorsichtig zu schönen Bézierkurven.

7. Letzter Schliff

Wenn Sie mit der Vektorverfolgung fertig sind, fügen Sie visuelle Wirkung mit durchdachten Details wie Farben, Schatten, Glanzlichtern, Umrissen usw. hinzu.

Papyrus – Eine subtile Transformation

Geständnis: Ich mag Papyrus, und es ist mir egal, wer es weiß. Im Ernst, nicht alle Schriften, die wir Designer gerne schlagen, sind tatsächlich so schlecht. Überbeansprucht? Vielleicht. Kitschig? Okay, ja. Aber nur weil eine Schrift jemandem das Gefühl gibt, dass ihr Amateur-Designdokument Würde hat, heißt das nicht, dass sie schlecht ist. Und so denke ich über Papyrus. Es ist wie mit dem Oberhemd, das ich bei Old Navy gekauft habe: Es passt gut und macht mich für besondere Anlässe präsentabel.

Allerdings hat mein Hemd keine absichtlich ausgefransten Kanten. Mal sehen, ob wir die schönen Teile von Papyrus' Buchstabenformen beibehalten und gleichzeitig das Gesamtbild etwas zeitgemäßer gestalten können.

1. Schriftart überprüfen

Auch hier beginnen wir in Photoshop. Wählen Sie Ihre Schriftart (Papyrus) und geben Sie den Namen des Logotyps ein. Sehen Sie sich jeden Buchstaben an und machen Sie sich Notizen zu möglichen Designdetails.

2. Ideen entwickeln

Holen Sie Ihr Wacom-Tablet heraus und skizzieren Sie schnell einige Kompositionsideen. Überdenken Sie diesen Schritt nicht. Es ist, als würde man seinen Namen in ein Notizbuch kritzeln.

3. Schriftart verzerren

Genau wie bei Jokerman können Sie jeden Buchstaben über der von Ihnen erstellten Ideenskizze skalieren, dehnen, neigen und quetschen. Es wird chaotisch, aber keine Sorge!

4. Korrekturskizze

Von allen Schritten mag sich dies als der entmutigendste anfühlen, aber betonen Sie es nicht.

Sie bauen nicht von Grund auf neu. Sie verwenden die Struktur der ursprünglichen Schriftart, während Sie Ihre eigenen Verbesserungen hinzufügen, während Sie fortfahren.

Diese Skizze kann super schrecklich und hässlich sein. Das Schöne an Ebenen in Photoshop ist die Möglichkeit, mehrere Durchgänge zu machen, von denen jeder Ihren wahren Designabsichten näher kommt.

5. Verfeinerungsskizze

Dies ist unser letzter Schritt in Photoshop. Seien Sie ehrlich zu sich selbst, wenn es um Teile Ihres Designs geht, die nicht funktionieren. Es hilft auch, Ihre Buchstaben zu kolorieren, damit Sie sehen können, wie sie nebeneinander aussehen, und Unregelmäßigkeiten in der Form aufdecken.

6. Vektorspur

Platzieren Sie die Verfeinerungsskizze in Illustrator und beginnen Sie Ihre Vektorspur mit dem Stiftwerkzeug.

7. Letzter Schliff

Wenn Ihre Vektorspur fertig ist, erwecken Sie Ihr Logo zum Leben, indem Sie Details wie Farben, Schatten, Hervorhebungen und Umrisse hinzufügen.

Comic Sans – wie das Bügeln eines zerknitterten Hemdes

Ich weigere mich, Comic Sans lächerlich zu machen. Sicher, es taucht zu unpassenden Zeiten auf und sieht ein wenig zerzaust aus, als wäre es gerade aus einem Nickerchen aufgewacht. Aber sie erfüllte eine Designvorgabe und ist vielleicht die bekannteste Schrift der Welt.

Aus rein ästhetischer Sicht gibt es an Comic Sans nicht viel zu mögen. Es ist pummelig, altmodisch und die kleinen Knicke und Knöpfe in den Buchstaben sind ziemlich ablenkend. Dennoch hat sie einige interessante Macken, die gut für ein Logo funktionieren könnten, und ihre allgemeine Wahrnehmung als die schlechteste Schrift aller Zeiten macht sie zur perfekten Herausforderung für unsere Verfeinerungstechnik in sieben Schritten.

Dieses Mal werde ich mich weniger auf die Mechanik konzentrieren und Ihnen bei jedem Schritt etwas mehr Einblick in meinen kreativen Denkprozess geben.

1. Schriftart überprüfen

Betrachten Sie sich für diesen Schritt als Elternteil eines unbeholfenen heranwachsenden Jungen. Es ist nicht zu leugnen, dass er ein schlaksig aussehender Trottel ist, aber Sie können über all das hinwegsehen, bis zu einem Tag, an dem er ein strammer, gut abgerundeter junger Mann sein wird.

2. Ideen entwickeln

Ideenfindung ist die Zeit, um Ihre risikofreudige künstlerische Seite freizusetzen. Sie können sich später rücksichtslos selbst bearbeiten, aber gehen Sie vorerst ein Risiko ein.

Als ich Comic Sans rezensierte, bemerkte ich eine Art lebhafte Verspieltheit, die ich versuchte, in meine Ideenskizzen zu integrieren.

3. Schriftart verzerren

Vielleicht sind Sie wie ich … etwas besessen davon, Ebenen zu organisieren und zerstörungsfreie Bearbeitungstechniken in Photoshop zu verwenden. Sei nicht so für diesen Schritt!

Geben Sie Ihr Wort ein, rastern Sie die Schriftart und verzerren Sie diese Buchstaben.

4. Korrekturskizze

Wie ich schon sagte, die kleinen Unregelmäßigkeiten von Comic Sans machen verrückt, also habe ich mich bei diesem Schritt darauf konzentriert, Linien zu begradigen und Kurven zu glätten.

5. Verfeinerungsskizze

Die längste Zeit bin ich direkt vom Schritt „ Korrekturskizze“ in Photoshop zu „Vektorspur“ in Illustrator gegangen. Aber als ich meine Vektorbuchstaben zum ersten Mal ausgefüllt sah, sahen sie immer etwas komisch aus.

Dieser Verfeinerungsschritt ist eine großartige Möglichkeit, um sicherzustellen, dass Ihre Buchstaben einen guten Abstand haben. Schließlich sind die zwischen den Buchstaben gebildeten Formen genauso wichtig wie die Buchstaben selbst.

6. Vektorspur

Es kann leicht sein, Ihr Gehirn auszuschalten, wenn Sie das Stiftwerkzeug verwenden. Sie beginnen mit dem Zeigen, Klicken und Ziehen von Griffen und hören auf, nach Möglichkeiten zu suchen, Ihr Design zu verbessern.

Tu das nicht! Wenn Sie von Hand skizzieren, treffen Sie ständig Entscheidungen und Korrekturen in Sekundenbruchteilen. Sie sollten das Stiftwerkzeug auf ähnliche Weise verwenden.

7. Letzter Schliff

Ich war mit dem Ergebnis der Vektorspur zufrieden, also entschied ich mich für einen einfachen Blockschatten und ein paar Akzentlinien im Inneren.

Im Idealfall können Ihre Buchstabenformen ohne jegliche Verzierung für sich alleine stehen. Der letzte Schliff soll Ihr Design hervorheben, aber Sie sollten sich davor hüten, zu viele Spezialeffekte hinzuzufügen.

Die Chance unerwünschter Dinge

Wir Designer tun gut daran, an den Trends, Werkzeugen und Denkweisen in unserem Beruf festzuhalten. Wir lernen und wachsen als Gemeinschaft, und wenn ein großer Teil unseres Feldes etwas schlecht sieht, sollten wir versuchen zu verstehen, warum.

Wir sollten jedoch auch dem Drang widerstehen, Designpraktiken rundheraus abzulehnen, insbesondere nach Lust und Laune der Volksmeinung. Wenn wir auf etwas stoßen, das als schlecht angesehen wird, wie die Verwendung von Jokerman, ist es gut zu erfahren, warum andere Designer so denken, aber es ist kurzsichtig, eine potenziell wertvolle Ressource auf den Müllhaufen zu werfen.

Behalten Sie stattdessen so viel wie möglich in Ihrem Gedächtnis. Machen Sie sich mentale Notizen, machen Sie Beobachtungen, kategorisieren Sie Dinge, die Sie mögen und nicht mögen, und speichern Sie eine vielfältige Auswahl an Meinungen anderer Designer.

Man weiß nie, eines Tages könnten Sie das Undenkbare tun und riskieren, sich über die Design-Community lustig zu machen, indem Sie Comic Sans als Grundlage für das schöne neue Logo Ihres Kunden verwenden.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft