INFO: Im Artikel »Layered Font« habe ich diese besondere Art von Zeichensätzen mit mehreren übereinander legbaren Schriftschnitten kurz erklärt. In den folgenden Mini-Tutorials geht es nun darum, wie man einen Layered Font in Adobe Illustrator und Fontself Maker erstellt. Voraussetzung für die Mini-Tutorials zu Layered Font mit Fontself ist es, dass Sie mit Illustrator und Fontself bereits vertraut sind.
Wenn Sie die Grundlagen zuerst erlernen wollen, dann empfehle ich Ihnen mein Buch oder E-Book »Font-Design, Band 1: Symbol-Fonts erstellen«. Dort werden von Null auf …, in 8 vollständigen Projekten und Schritt für Schritt die Erstellung von Zeichensätzen erklärt.
Breiten sind der Schlüssel zum Layered Font
Damit ein Text, den Sie in verschiedenen Schriftschnitten schreiben, exakt deckungsgleich ist, müssen die Buchstaben folgerichtig die gleichen Breiten haben. Dies bezieht allerdings den Weißraum (Abstand) rechts und links des Zeichens ausdrücklich mit ein. Ist dies nicht der Fall, dann entstehen ungewollte »Blitzer«. Damit sind kleine Lücken gemeint, die zwischen den Zeichen der verschiedenen Schnitte sichtbar werden. Haben Sie alle Breiten in den Schriftschnitten korrekt eingestellt, dann bekommen Sie ein perfektes Ergebnis.
TIPP: Den Zeichensatz »Uvajed Dotted« können Sie kostenlos auf meiner Seite »Free Fonts« herunterladen. Er besteht aus drei Schriftschnitten, die als Layered Font benutzt werden können. Die Anwendung wird indes auf der Seite »Layered Font« beschrieben.
Mit der Basis beginnen
Der normale Schriftstil, heißt in der Regel »Default«, »Normal« oder »Regular«. Mit ihm schreiben Sie am häufigsten. Er ist daher die Basis für die Erstellung eines Layered Fonts. Als Schmuck für diesen Zeichensatz kann es Innenkonturen, Außenkonturen und Schlagschatten geben.
TIPP: Innenkonturen haben schmalere Zeichen als der Basis-Schnitt. Hier müssen Sie die Breiten der Innenkonturen anpassen. Meist liegen die Innenkonturen symmetrisch auf einem Zeichen des Basis-Schnitts.
TIPP: Außenkonturen haben breitere Zeichen als der Basis-Schnitt. Sie müssen folgerichtig die Breiten des Basis-Schnitts anpassen. Außenkonturen umgeben meist die Zeichen des Basis-Schnitts symmetrisch wie eine zweite Haut.
TIPP: Schlagschatten liegen unsymmetrisch unter den Zeichen des Basis-Schnitts. Daher müssen Sie die Breiten des Basis-Schnitts und des Stiles für den Schlagschatten anpassen.
TIPP: Vergessen Sie nicht das Leerzeichen » « mit anzupassen, denn sonst werden Blitzer sichtbar, die immer größer werden.
TIPP: Wenn Sie mehrere Schriftstile für einen Layered Font erstellen wollen, dann müssen die Breiten insgesamt übereinstimmen.
Mini-Tutorials zu Layered Font mit Fontself
Layered Font mit Außenkonturen erstellen
SCHRITTE: In diesem Tutorial lernen Sie:
- Erstens wie Sie den Basis-Font erstellen (hier mit drei Buchstaben).
- Zweitens wie Sie aus den Buchstaben eine Außenkontur erzeugen.
- Drittens wie Sie die beiden Schnitte anpassen, damit sie exakt aufeinanderpassen.
Erstens: Den Basis-Font erstellen
In diesem Beispiel benutze ich drei Buchstaben des Fonts »DejaVu Sans bold«, um die Vorgehensweise zu zeigen.
Aus DejaVu Sans den Basis-Font erstellen
ø Um ein neues Dokument in Illustrator anzulegen, rufen Sie das Menü »Datei > Neu…« auf. Wählen Sie A4 (297 x 210 mm) in der Ausrichtung »quer«.
A Schreiben Sie die Buchstaben »A«, »B« und »C« in DejaVu Sans bold mit der Schriftgröße 100 pt in die Mitte der Arbeitsflächen.
B Um die Buchstaben in Pfadobjekte umzuwandeln, rufen Sie das Menü »Schrift > In Pfade umwandeln« auf.
Obacht In Adobe Illustrator werden beim Umwandeln einer Schrift in Pfadobjekte automatisch eine Gruppe angelegt und die Namen »vergessen« . Besonders das Letztere ist sehr ärgerlich, da Sie dann jeden Buchstaben von Hand neu in der Palette »Ebene« neu benennen müssen. Was für drei Buchstaben schnell geht, kann bei 200 oder mehr Zeichen ein großer Zeitfresser und bei nachlassender Konzentration auch fehleranfällig sein. Adobe kann oder will aktuell dazu keine Lösung anbieten, ob es technisch machbar wäre.
TIPP: Eine Alternative zum Menübefehl Schrift > In Pfade umwandeln (Font > Outline) als Javascript, das alle Buchstaben im Fenster »Ebenen« den richtigen Namen zuweist, finden Sie auf der Seite »Javascripts für Adobe Illustrator«.
C Rufen Sie das Menü »Objekte > Gruppierung aufheben« auf.
D In der Palette »Ebenen« geben Sie den Buchstaben die entsprechenden Namen »A«, »B« und »C«.
Den Basis-Font mit Fontself erstellen und speichern
TIPP: Eine Besonderheit in FontSelf Maker, dem Zeichensatzerstellungs-Plug-in in Adobe Illustrator ist es, dass man als ersten Schritt eine Art Eichung vornehmen muss, damit die Buchstaben des neuen Fonts die gleiche Größe haben. Dies wird mit einem Dummy gemacht. Das ist ein schwarzes Quadrat, dass exakt 70 % der Schriftgröße beträgt. In diesem Beispiel hier: 0,7 * 100 pt = 70 pt. Warum, wieso und weshalb habe ich in meinen Buch/E-Book »Font-Design, Band 1: Symbol-Fonts erstellen« im Kapitel/Projekt 01 auf Seite 6 beschrieben, siehe auch im Glossar »units per em«.
E Zeichen Sie ein schwarzes Quadrat mit Kantenlänge »70 pt«. Dies ist der Dummy, der dafür sorgt, dass der neue Font die Größe 100 pt bekommt.
F Setzen Sie das Quadrat und die Buchstaben auf eine Hilfslinie mit Namen »baseline«.
G Ziehen Sie das Quadrat und Hilfslinie »baseline« in die Palette »Fontself Maker«.
H Danach ziehen Sie die Buchstaben und Hilfslinie »baseline« ebenfalls in die Palette »Fontself Maker«.
I Speichern Sie den neuen Font, in dem Sie auf »Save« klicken und ihn »A-Basis« nennen.
Zweitens: Erstellen eines Fonts nur mit einer Außenkontur
Da es in Adobe Illustrator viel einfacher ist, eine bestehende Form zu erweitern (aufzublasen), beginnen wir mit der Außenkontur.
Den Outline-Schnitt aus dem vorherigen Schnitt erstellen
J Kopieren Sie die Hilfslinie »baseline« und die Buchstaben unter die anderen.
K Wählen Sie die kopierten Buchstaben aus und gehen Sie ins Menü »Objekt > Pfad > Pfad verschieben…«
L Im kleinen Fenster stellen Sie den Versatz auf »3 px«, was dann die Linienstärke der Umrandung ist. Und klicken Sie auf »OK«.
Nach dem letzten Schritt haben Sie (drei) neue schwarze Buchstaben, die 3 px breiter sind, als die kopierten. Nun müssen Sie, um den Umriss (Outline) alleine zu erhalten, die Alten von den Neuen mit Hilfe des Pathfinders als boole’sche Operation abziehen.
M Wählen das alte »A« und das eben erstelle neue »A« gemeinsam aus. Klicken Sie in der Palette »Pathfinder« (Menü: Fenster > Pathfinder) auf das Symbol zum »Abziehen«. Dies wiederholen Sie gleichfalls für die anderen Buchstaben.
N Geben Sie in der Palette »Ebenen«, den drei neuen Buchstaben wieder die Namen »A«, »B« und »C«.
Den Outline-Schnitt als neuen Stil erstellen
Nun müssen Sie aus den neuen Outline-Buchstaben einen weiteren Font erstellen, aber diesmal als neuen Stil des schon erstellten Fonts.
O Klicken Sie in Fontself Maker auf »New«.
P Im ersten Fenster klicken Sie dann auf »New Style«.
R Und wähle als Style Name »Other…« aus und nennen diesen Stil »Outline«.
S Ziehen Sie die Hilfslinie »baseline« und die Buchstaben ins Fenster von »Fontself«. Den Dummy brauchen Sie hier nicht, weil es nur ein neuer Stil, kein neuer Font ist, den Sie eben angelegt haben.
T Zum Speichern klicken Sie auf die Schaltfläche »Safe«. Fontself schlägt Ihnen dann den Namen vor, der auf »-Outline« endet. Bestätigen Sie dies einfach.
Drittens: Die beiden Schriftschnitte passgenau machen
Würden Sie jetzt die beiden Schriftschnitte versuchen übereinanderzulegen, dann würden Sie sehen, dass es zu Abweichungen (Blitzern) zwischen den beiden Schnitten kommt.
Das liegt daran, dass die Breiten der Buchstaben nicht zusammen passen. Dies gilt es nun im dritten Teil anzupassen.
ACHTUNG: Sie müssen immer von dem Schriftschnitt ausgehen, der am breitesten ist, und diese als Grundlage für die andere Schnitte verwenden. Hier ist es der Schnitt »Outline«, der breiter ist als der Schnitt »Regular«.
U Gehen Sie ins Fenster von »Fontself« und klicken Sie auf die Schaltfläche »Open«, um den Schnitt »Regular« zu laden.
V Mit dem Klick auf »Advanced« kommen Sie in einen Bereich, um diesen Schnitt allgemein zu verändern.
W Um die Masse des Schnittes »Outline« zu importieren, klicken Sie auf die Schaltfläche »Import«.
X Im neuen Fenster aktivieren Sie die Option „Match the Advances width…«.
Y Klicken Sie auf »Import« und wählen den Font »A-Basis-Outline«.
Z Die Breiten der Buchstaben wurden angepasst. Mit der Schaltfläche »Home« kommen Sie zur gewohnten Oberfläche von »Fontself« zurück.
ø Klicken Sie nun auf »Save« und überschreiben den Font »A-Basis«.
Wenn Sie nun das Experiment mit den übereinandergelegten Schnitten wiederholen, dann passen die beiden exakt übereinander.
Ein Schriftschnitt als Innenkontur
In dem Tutorial »Pfadobjekt und Flächenobjekt umwandeln« haben Sie gesehen, wie Sie ein Flächenobjekt manuell auf Pfadobjekt reduzieren können. Diese Technik können Sie beim Erstellen einer Innenkontur benutzen und damit einen dritten Schnitt für Ihren Font erstellen.
TIPP: Die Innenkontur eines Buchstabens hat eine geringere Breite als die eines normalen Buchstabens (Regular) oder gar eines mit Außenkontur (Outline), daher müssen Sie die Breite der Buchstaben mit Innenkontur wie oben in drittens beschrieben an den breitesten Schriftschnitt anpassen.
Ein Schriftschnitt als Schlagschatten
Der Wunsch nach einem Schriftschnitt als Schlagschatten bringt zwei Probleme mit sich. Erstens der Schlagschatten heller 100 % Schwarz. Zweitens bringt der Schlagschatten durch sein versetztes Auftreten die Vergrößerung der Breite nur auf einer Seite mit.
TIPP: Die Farbe und/oder Helligkeit des Schlagschattens ist bei der Erstellung des Schriftschnittes unwichtig. Erstellen Sie diesen mit einem reinen 100 % Schwarz. Der Anwender kann später im Schreibprogramm oder Layoutprogramm Farbe und/oder Helligkeit anpassen. Weisen Sie den Anwender am besten der Anleitung hin, die Sie Ihrem Font beifügen.
Anlegen der Schriftschnitt »Shadow«
A Als Grundlage für den neuen Schriftschnitt kopieren Sie die Baseline und die Buchstaben.
B Wählen Sie die Buchstaben aus und rufen Sie das Menü Fenster > Aussehen auf. In der Palette klicken Sie unten auf »fx«.
C Wählen Sie aus dem Pop-up-Menü »Stilisierungsfilter > Schlagschatten« aus.
Harte Schatten unterscheiden sich von weichen Schatten durch harte Kanten und das Fehlen von Transparenzen, damit sind sie für (schwarze) monochrome Schriften geeignet.
D Um einen harten Schatten zu erstellen, wählen Sie folgende Parameter aus: Modus »Normal«, Deckkraft »100 %«, x-Versatz und y-Versatz »7 px«, Weichzeichnen »0 px« und als Farbe »rot«.
E Die Einstellungen bestätigen Sie mit »OK«.
F Um die Schlagschatten in Pfadobjekte umzuwandeln, rufen Sie das Menü »Objekt > Transparenz reduzieren«.
G Wählen Sie für den Pixel-Vektor-Abgleich »100«.
H Bestätigen Sie die Einstellungen mit »OK«.
I Löschen Sie aus der neuen Gruppe die schwarzen Buchstaben, damit die Formen der Schlagschatten übrigbleiben.
J Ändern Sie die Farbe für die übrig gebliebenen Schatten in Schwarz. Benennen Sie die Buchstaben wieder in »A«, »B« und so weiter um. Legen Sie wie oben (Punkt O) einen neuen Stil mit dem Namen »Shadow« an. Dann ziehen Sie die Baseline und die Buchstaben in das Fenster »Fontself«.
Anpassen der Schriftschnitt »Shadow«
Die Schlagschatten sind gegenüber dem regulären Schnitt verschoben. Sie groß diese Verschiebung in Fontself ausgefallen ist, können Sie wie folgt nachschauen.
K Machen Sie im Fenster »Fontself« einen Doppelklick auf den Buchstaben »A«.
L Der Buchstabe »A« ist um »70« Einheiten (Units per em) nach unten verschoben. Oben hatten Sie den Schatten des Fonts mit der Größe 100 pt um 7 px nach unten und rechts verschoben.
M Um auf die normale Ansicht zurück zukommen, klicken Sie die Pfeile linke oben.
N Klicken Sie auf die Schaltfläche »Advanced« und erhöhen Sie den Abstand »Left« für jeden Buchstaben um »70«.
O Außerdem erhöhen Sie die Breite des Leerzeichens auch um »70« Einheiten.
ø Gehen Sie mit »Home« zurück in die Standardansicht und speichern Sie den Schriftschnitt mit dem vorgeschlagenen Namen ab.
Anpassen der Schriftschnitt »Regular« und testen
ø Öffnen Sie den Schriftschnitt »A-Basis.otf« und ändern Sie den Abstand aller Buchstaben auf der rechten Seite auch um 70 Einheiten. Vergessen Sie nicht die Breite des Leerzeichens ebenfalls um 70 Einheiten zu erhöhen. Speichern Sie die diesen Schriftschnitt.
Wenn Sie die Schriftschnitte »Regular« und »Shadow« übereinlegend, dann sollte diese exakt ohne Blitzer übereinander passen.
ENDE