Symbol-Fonts erstellen E-Book

J. Kriebeler

• Herausgeber: Books on Demand
• Kategorie: Wissenschaft und neue Technologien
• Serie: FONT-DESIGN
• Sprache: Deutsch

Seitenzahl: 143

Veröffentlichungsjahr: 2020

Beschreibung

FONT-DESIGN, Band 1: Symbol-Fonts zeigt Ihnen in kompakter Weise mit vollständigen Schritt-für-Schritt-Anleitungen in 8 Projekten, wie Sie mit Adobe Illustrator CC 2015.3 - 2020 und der Erweiterung Fontself Maker 3 in macOS oder Windows 10 leicht eigene Symbol-Fonts erstellen können. Alles komplett in Farbe. > Sie werden das Grundsätzliche der Font-Entwicklung mit der Erstellung eines Zeichensatzes aus Symbolen erfahren. > Sie werden einen einfarbigen zu einem farbigen Font machen. > Umgekehrt werden Sie zwei Wege kennenlernen, wie Sie einen farbigen Font auf eine Farbe reduzieren können. > Sie werden einen einfarbigen Font auf Basis von Rasterpunkten erstellen > ... und diesen als farbigen Font zur Bildpersonalisierung nutzen. > Damit werden Sie viele Vorgehensweisen im Illustrator kennenlernen. > Inkl. freePDF-Buch, Projekt-Dateien und Videoclips.

Leseprobe

Inhalt

Inhaltsverzeichnis

Über dieses Über dieses E-Book / Impressum

Illustriertes Inhaltsverzeichnis

Über den Buchaufbau

Auftrag 01:

Eine Alternative zu Mini-Bildern im Text finden

Projekt 01:

Wie Sie aus Symbolen einen eigenen Font erstellen

Auftrag 02:

Einen einfarbigen Font mit Farbe ergänzen

Projekt 02:

Wie Sie durch ein grünes Element einen farbigen Font erstellen

Auftrag 03:

Buchstaben durch Signalflaggen darstellen

Projekt 03:

Wie Sie das Flaggenalphabet als farbigen Font erstellen

Auftrag 04:

Symbole in einen schon erstellten Font einfügen

Projekt 04:

Wie Sie die Ziffernflaggen dem Signalflaggen-Font hinzufügen

Auftrag 05:

Einen farbigen Font nachträglich entfärben

Projekt 05:

Wie Sie das Flaggenalphabet einfarbig machen

Auftrag 06:

Farben mit einer Tingierung unterscheidbar machen

Projekt 06:

Wie Sie einen farbigen Font mit Mustern einfarbig machen

Auftrag 07:

Einen Font wie von einem Nadeldrucker entwickeln

Projekt 07:

Wie Sie einen Matrix-Font erstellen und schnell verändern können

Auftrag 08:

Unterschiedliche Dokumente mit einer Namensliste erzeugen

Projekt 08:

Wie Sie einen Matrix-Font für Bildpersonalisierung nutzen

Anhang A1:

Fontself Maker 3 installieren oder updaten unter macOS

Anhang A2:

Fontself Maker 3 installieren oder updaten unter Windows

Anhang B1:

Einen Zeichensatz installieren unter macOS

Anhang B2:

Einen Zeichensatz installieren unter Windows 10

Anhang C:

Fehler 40 – Typische Probleme und deren Lösungen rund um Fontself

Anhang D1:

Legende der Schreibweisen und Symbole

Anhang D2:

Nachwort oder ein Blick hinter die Kulissen

Glossar

Stichwortverzeichnis (Index)

Vorschau

Über dieses E-Book

Wichtige Hinweise zu dieser E-Book-Ausgabe

> Dieses E-Book wurde von Hand für E-Book-Reader, die das Dateiformat epub verstehen, und für Kindle-E-Book-Reader optimiert, um auf dem jeweiligen System das bestmögliche Ergebnis zu erhalten.

> Dieses E-Book ist komplett in Farbe. Auf einem E-Book-Reader mit nur 16 Graustufen werden die Texte und Grafiken nicht wie vom Autor beabsichtigt wiedergegeben. Für die beste Darstellung lesen Sie dieses E-Buch auf einem hellen (weißen oder sepia) Hintergrund, damit alle Textfarben (blau und grün) für Sie sichtbar sind.

> Alle Abbildungen im E-Book können per (Doppel-)Klick vergrößert werden. Die Bezeichnungen in den Abbildungen, die mit (A), (B) und so weiter benannt sind, entsprechen denen der Taschenbuch-Ausgabe. Daher kann es sein, das in einer neuen Abbildungen die Bezeichnung wieder mit (A) beginnt.

> ! Bitte lesen Sie dieses E-Book in der vom Autor enthaltenen ›Original‹-Schrift (im Kindle wird diese Schrift mit ›Publisher Font‹ oder ›Verleger-Schriftart‹ bezeichnet), damit alle Sonderzeichen korrekt dargestellt werden können. Es wurde versucht, durch geschickte Programmierung die Sonderzeichen auch in anderen Schriften korrekt darzustellen. Es könnte jedoch sein, dass auf älteren System diese Programmierung vom E-Book-Reader überschrieben wird oder dort die ›Original‹-Schrift gar nicht zur Verfügung stehen. Die Schriftgröße können Sie wie gewohnt frei wählen.

> Als Alternative können Sie dieses E-Book als interaktive PDF-Datei aus dem exklusiven Leserbereich herunterladen und am Computer (macOS oder Windows) mit Acrobat Reader lesen. Diese PDF-Datei entspricht der Taschenbuch-Ausgabe.

Allgemeine Hinweise

> Die im Buch erwähnten Soft- und Hardwarebezeichnungen Dritter sind als eingetragene Marken geschützt. Die Schreibweisen folgen meist den Vorgaben der Rechtsinhaber.

> Die Erstellung der Texte und Abbildungen erfolgte mit Sorgfalt. Trotzdem können Fehler nicht ganz ausgeschlossen werden. Verbesserungsvorschläge oder Hinweise auf Probleme sind willkommen. Bitte senden Sie diese per E-Mail direkt an den Autor: ∞ [email protected].

> Aktuelle Informationen zum Buch finden Sie auf der Website ∞ www.cg4u.de/fd1.

Impressum

Bibliografische Information der Deutschen Nationalbibliothek:

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbiblio­grafie; detaillierte bibliografische Daten sind im Internet über http://dnb.dnb.de abrufbar.

Reihe: computergrafik-know-how • FONT-DESIGN, Band 1

Titel: Symbol-Fonts erstellen

Untertitel: mit Adobe Illustrator CC und Fontself Maker

Autor: J. Kriebeler

Copyright: © 2020 für Text und Gestaltung beim Autor

Stand: 08. August 2020, Version 1.1 der E-Book-Ausgabe

Herstellung und Verlag: BoD – Books on Demand, Norderstedt.

ISBN: 978-3-7519-7898-9

Dieses Buch ist auch als Taschenbuch unter der ISBN 978-3-7519-7892-7 erschienen.

Herzlich willkommen bei ›Font-Design, Band 1: Symbol-Fonts erstellen‹

In diesem kompakten und damit umweltfreundlichen Buch finden Sie 8 Projekte, die vom ersten bis zum letzten Schritt erklärt werden. Der Umfang entspricht einem herkömmlichen Fachbuch mit ca. die 280 Seiten. Mehr zur Erstellung dieses Buches finden Sie im Nachwort im Anhang d2.

Annahmen des Autors über seine Leserschaft

> Sie sind neugierig und lernen gerne Neues,

> Sie haben Spaß an Grafik und Gestaltung,

> Sie können Ihren Computer mit dem Betriebssystem macOS oder Windows passabel bedienen,

> Sie haben Grundkenntnisse im Vektorgrafik­programm Adobe Illustrator CC.

Dann sind Sie hier genau richtig!

Was müssen Sie mitbringen?

> Sie benötigen Adobe Illustrator CC 2015.3 bis CC 2020 (Version 20.1 bis 24.x) und die Erweiterung Fontself Maker 3.5, die Zeichensätze als OpenType Font (.otf) erstellt. Beides läuft unter macOS 10.14 und 10.15 (im weiteren macOS genannt) oder Windows 10.

Was werden Sie lernen?

> Sie werden den grundsätzlichen Weg der Font-Entwicklung durch das Erstellen eines Zeichensatzes aus Symbolen kennenlernen.

> Sie werden erfahren, wie Sie einen einfarbigen in einem farbigen Font verwandeln.

> Umkehrt werden Sie zwei Wege kennenlernen, wie Sie einen farbigen Font auf eine Farbe reduzieren können.

> Sie werden einen Font, der durch Rasterpunkte dargestellt wird, erstellen und …

> in einem farbigen Font umgewandelt zur Bildpersonalisierung in Illustrator nutzen.

> Damit werden Sie viele Vorgehensweisen im Illustrator kennenlernen.

Illustriertes Inhaltsverzeichnis

Auftrag 01: Eine Alternative zu Mini-Bildern im Text finden

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

Auftrag 02: Einen einfarbigen Font mit Farbe ergänzen

Projekt 02: Wie Sie durch ein grünes Element einen farbigen Font erstellen

Auftrag 03: Buchstaben durch Signalflaggen dar­stellen

Projekt 03: Wie Sie das Flaggenalphabet als farbigen Font erstellen

Auftrag 04: Symbole in einen schon erstellten Font einfügen

Projekt 04: Wie Sie die Ziffernflaggen dem Signalflaggen-Font hinzufügen

Auftrag 05: Einen farbigen Font nachträglich entfärben

Projekt 05: Wie Sie das Flaggenalphabet ein­farbig machen

Auftrag 06: Farben mit einer Tingierung unterscheidbar machen

Projekt 06: Wie Sie einen farbigen Font mit Mustern einfarbig machen

Auftrag 07: Einen Font wie von einem Nadeldrucker entwicklen

Projekt 07: Wie Sie einen Matrix-Font erstellen und schnell verändern können

Auftrag 08: Unterschiedliche Dokumente mit einer Namensliste erzeugen

Projekt 08: Wie Sie einen Matrix-Font für Bildpersonalisierung nutzen

Übersicht der Serviceseiten

Anhang A: Fontself installieren oder updaten …

a unter macOS

w unter Windows 10

Anhang B: Einen Zeichensatz installieren ...

a unter macOS

w unter Windows 10

Anhang C:

Typische Probleme und deren Lösungen rund um Fontself

Anhang D:

Legende der Schreibweisen und Symbole

Nachwort (Kolophon)

Anhang G:

Glossar (Erklärung von Fachbegriffen)

Anhang S:

Stichwortverzeichnis (Index)

Im exklusiven Leserbereich auf ∞ www.cg4u.de/fd1 finden Sie die interaktive PDF-Datei, die Projektdateien und Videoclips.

Auftrag 01: Eine Alternative zu Mini-Bildern im Text finden

ƒ  Montagmorgen in einem Grafikbüro. Ein Kunde möchte eine Informationsbroschüre über die Sehenswürdigkeiten seiner Region. Um den Text knapp zu halten, will er, dass im Text Worte wie Camping, Hotel, Information und vieles andere durch Symbole dargestellt werden, die sich auf einer Karte leicht wiederfinden lassen.

Über die •Schriftgrößen und -farben ist sich der Kunde noch nicht sicher. Der alte Chef des Grafikbüros sagt wie immer, dass alles kein Problem sei.

Gabi, die gerade erst als Junior-Grafikerin in die Firma kam, überlegt, wie sie das Versprechen des Chefs in effizienter Weise lösen kann:

Info: ⁄ Die Symbole ›airport‹, ›bicycle‹, ›camp_site‹, ›eye‹, ›hotel_alt‹, ›information‹, ›parking‹, ›restaurant‹, ›train‹ und ›viewtower‹ stammen aus einer Webquelle und liegen als •Vektorgrafiken vor. Daher sind sie leicht veränderbar, ohne das die Qualität leidet.

Wenn ich jedoch im •Layoutprogramm die Symbole als kleine Bilder in den Text einfüge, bedeuten Änderungen wie in der Schriftgröße viel Aufwand, da ich die Bildchen durch Angepasste ersetzt müsste. Es muss doch dazu eine Alternative geben.

Als sie in einer Kaffeepause den erfahrenen Kollegen Klaus trifft, schildert sie ihr Problem.

»Das du über das Problem nachdenkst, bevor du eine Lösung erarbeitest, ist ein guter Ansatz. Konfuzius bezeichnet das Nachdenken als edelsten Weg, um klug zu handeln«, sagt Klaus zur Freude von Gabi.

Er will sie auf den richtigen Weg bringen und fragt: »Was machst du, wenn Schriftgröße oder -farbe verändert werden müssen?«

»Ich passe die •Absatzformate oder •Zeichenformate an und schaue, ob der Text noch in die Textrahmen passt«, antwortet sie.

»Genau! Du veränderst nur die Parameter und ersetzt nicht den Text durch einen Neuen. Ein Text besteht aus Zeichen. Symbole wie ›Airport‹ sind auch nur Zeichen. Daher wäre es sinnvoll, wenn du aus den Symbolen einen eigenen Font erstellst.«, schlägt er vor und erklärt weiter, »der Begriff ›Font‹ wurde aus dem Englischen übernommen. Der Ursprung liegt im Lateinischen ›fundere‹ und bedeutet soviel wie ›gießen (von Druckertypen)‹. Heute wird es als Synonym für ›Zeichensatz‹ verwendet.«

»Wenn die Symbole Teil eines Fonts sind, dann verhalten sie sich wie die Buchstaben ›A‹, ›B‹, ›C‹, ›E‹ etc. und können über Formatvorlage blitzschnell geändert werden«, freut sich die junge Grafikerin. »Kannst du mir zeigen, wie man aus den Symbolen einen eigenen Font erstellt?«

 

‚ Auftrag 01: So erstellen Sie einen eigenen Font:

01. Download der Symbole ›MapKeyIcons‹

02. Symbole im Illustrator platzieren

03. Symbole auf reines Schwarz umstellen

04. Vorbereitungen für die richtige Größe

05. Der Trick mit dem 70 %-Quadrat

06. Symbole in den Zeichensatz schieben

07. Den Zeichensatz für Illustrator installieren

08. Den Zeichensatz im Illustrator testen

09. Zeichensatz und Dokument speichern

x x

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

‚  Mit den Symbolen aus MapKeyIcons werden Sie mit Adobe Illustrator CC und der Erweiterung Fontself Maker for Illustrator CC Ihren ersten Zeichensatz erstellen. Alternativ können Sie auch eigene Symbole verwenden, die nur aus schwarzen•Flächen und •Konturen bestehen.

Wenn Sie Fontself noch nicht installiert haben, dann finden Sie eine Anleitung im Anhang A.

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

01. Download der Symbole ›MapKeyIcons‹

A Rufen Sie in Ihrem Webbrowser die Adresse ∞ http://mapkeyicons.com auf.

B Klicken Sie in der Internetseite auf die •SchaltflächeLatest Release.

C Am unteren Ende der neuen Seite finden Sie den Eintrag Assets.

D Zum Downloaden der Grafiken klicken Sie auf mapkeyicons-svg.zip.

E Öffnen Sie im Betriebssystem den Ordner Download und …

F verschieben Sie den Ordner svg auf den Schreibtisch Ihres Computers.

In dem Ordner svg liegen 172 Symbole, die Sie nach der •public domain license frei bearbeiten und benutzen können.

Das weitere Vorgehen wird mit einem Symbol beschrieben. Sie können es auch mit mehreren durchführen; mehr dazu in Schritt 03-M.

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

02. Symbole im Illustrator platzieren

ø Starten Sie das Programm Adobe Illus­trator CC und wählen als Neues Dokument aus dem Bereich Druck das Format A4 aus.

G Rufen Sie das Menü Ablage > Platzieren… auf und wählen Sie die Grafik camp-site.svg aus dem Ordner svg.

TIPP: ˝ Speichern Sie Arbeitsschritte im Illustrator mit dem Menübefehl Datei > Kopie speichern… immer wieder ab, so haben Sie, wenn was nicht klappt, die Möglichkeit zurückzugehen.

† Symbole für einen einfarbigen Zeichensatz dürfen nur •Schwarz enthalten. Was •Weiß erscheint, sind Löcher, die über einem farbigen Hintergrund sichtbar werden. Einfarbige Buchstaben können beim Schreiben gefärbt werden.

Info: ⁄ Objekte im Illustrator können eine …

1 Flächenfarbe und/oder eine …

2 Kontur haben.

3 Ohne bedeutet das Fehlen von Farbe.

Das geladene Symbol camp-site besteht aus zwei Teilen. Der hellgraue Hintergrund muss gelöscht werden und das Dunkelgrau durch ein reines Schwarz ersetzt werden.

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

03. Symbole auf reines Schwarz umstellen

H Rufen Sie das Menü Fenster > Ebenen auf.

I Klappen Sie die <Gruppe>  auf.

J Löschen Sie das helle Element <Pfad> .

K Aktivieren Sie das dunkelgraue Element <Zusammengesetzter Pfad>  und …

L ändern Sie die Füllfarbe in reines Schwarz.

TIPP: ˝ So gehen Sie für mehrere Objekte vor:

M Mit dem Pipetten-Werkzeug klicken Sie die hellgraue Farbe eines Objekts an.

ø Rufen Sie das Menü Auswahl > Gleich > Flächenfarbe auf.

N Mit dem Menübefehl Bearbeiten > Löschen werden alle aktiven grauen Objekte gelöscht.

ø Wählen Sie alle Objekte aus und ersetzen Sie die Flächenfarbe durch das Schwarz.

Die Symbole sollen in der Höhe zum •Fließtext passen. Um das zu erreichen, braucht es •Hilfslinien, die in der •Typografie als ›Schriftlinien‹ bezeichnet werden.

Info: ⁄ Schriftlinien helfen beim Erstellen von Zeichen (•Glyphen). Buchstaben stehen auf der Grundlinie, die in FontselfBaseline 1  genannt wird. Die obere Linie (Ascender 2 ) begrenzt die Oberlängen und die untere Linie (Descender 3 ) die Unterlängen.

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

04. Vorbereitungen für die richtige Größe

A Schreiben Sie mit dem Textwerkzeug in der Schriftgröße 60 pt die Buchstaben Äg und rufen Sie das Menü Schrift > In Pfade um­wandeln auf.

B Rufen Sie das Menü Ansicht > Lineale > Lineale einblenden auf.

C Ziehen Sie von oben aus dem •Lineal eine Hilfslinie, an die obere Kante von ›Ä‹, und benennen Sie diese Ascender.

D Die zweite Hilfslinie soll die untere Kante von ›Ä‹ berühren und Baseline heißen.

E Die dritte Hilfslinie soll die untere Kante von ›g‹ berühren und Descender heißen.

Info: ⁄ In Fontself hat ein Symbol die Höhe von 1000 UPM (•units per em). Das erste Objekt, das in Fontself gezogen wird, bekommt automatisch als Referenzobjekt die Höhe von 700 UPM, was der Höhe eines großen Buchstabens entspricht.

4 Die entsprechende Linie heißt capHeight.

Für die richtige Größe starten Sie mit einem Objekt, das 70 % der Schriftgröße hat.

† Die •Eingabefelder im Adobe Illustrator können rechnen:

So lassen sich 70 % eines Wertes durch die Eingabe von 0,7 * und der Taste [Return] oder [Tabulator] berechnen.

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

05. Der Trick mit dem 70 %-Quadrat

F Zeichnen Sie ein schwarzes Quadrat.

G Rufen Sie das Menü Fenster > Transferieren auf und aktivieren Sie die Option Proportionen … erhalten.

H Ändern Sie die Kantenlänge auf 0,7*60 pt.

ø Kopieren Sie mit der Tastenkombination [cmd][C] den Wert der Höhe des Quadrats, hier 14,817 mm.

I Wählen Sie das Symbol camp-site aus.

J Setzen Sie mit [cmd][V] die kopierte Höhe, hier 14,817 mm, als neuen Wert ein.

Nun hat das Symbol die gleiche Höhe wie das Quadrat und der Buchstabe ›A‹ ohne die Pünktchen des ›Ä‹. Es gäbe zwar mehr Raum nach oben und unten für das Symbol, doch so ist die Darstellung im Fließtext ruhiger.

ø Rufen Sie das Menü Fenster > Erweiterungen > Fontself Maker auf.

K Wählen Sie die drei Hilfslinien sowie das Quadrat aus und ziehen Sie diese auf das Fenster Fontself. Dort lassen Sie dies im Bereich Any character fallen.

Projekt 01: Wie Sie aus Symbolen einen eigenen Font erstellen

06. Symbole in den Zeichensatz schieben

L Wiederholen Sie Schritt 05-K mit Hilfslinien und dem Symbol camp-site.

M Tragen Sie unter dem Symbol camp-site den Buchstaben ›C ‹ ein, um später das Symbol über die Taste [C] aufzurufen.

TIPP: ˝ Für die übrigen Symbole wiederholen Sie die Schritte 03-M bis -N, 05-I bis -K und 06-L bis -M.

(Die Schritte 04 und 05-F bis -G waren nur am Anfang zur Größenberechnung notwendig.)

Info: ⁄ Der Zeichensatz braucht einen Namen, der mit einem Großbuchstaben (A – Z) beginnen muss, danach können Buchstaben oder Zahlen folgen. Die meisten der Sonderzeichen werden nicht akzeptiert.

TIPP: ˝ Zum Testen ist es hilfreich, einen kurzen Namen zu verwenden wie A Test. Dieser wird, da mit ›A ‹ beginnend, in der Liste der verfügbaren Zeichensätze weit oben erscheinen.

å Der Schritt 07-D