1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
|
<html>
<head>
<!-- Created with AOLpress/2.0 -->
<!-- AP: Created on: 6-Dec-2000 -->
<!-- AP: Last modified: 19-Nov-2005 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Schritt für Schritt zum eigenen Schriftsatz...</title>
<link rel="icon" href="../../_static/fftype16.png">
<link rel="stylesheet" type="text/css" href="FontForge.css">
</head>
<body>
<div id="in">
<h1 align="center">
Tutorial<br>
<a href="../../tutorial/editexample.html"><img src="../../_images/English.gif" height="26" width="39"></a>
<a href="../ja/editexample.html"><img src="../../_images/Nisshoki-Japan.png" height="26" width="39"></a>
</h1>
<p>
<!--Dieses Tutorial liegt auch in einer <a href="../fontforge-tutorial.pdf">PDF-Version</a>
vor.--> Wenn Sie schrittweise nach dem Tutorial lernen möchten, sollte dieses
<a href="https://fontforge.org/downloads/tutorial.tgz">Archiv</a> alle benötigten Dateien
enthalten.<br>
Der Schwerpunkt liegt in diesem Tutorial nicht auf Ästhetik, sondern
in erster Linie auf dem Prinzip des Erstellungsvorgangs.
</p>
<ul>
<li>
<a href="editexample.html#FontCreate">Kreieren eines neuen Schriftsatzes</a>
</li><li>
<a href="editexample.html#CharCreate">Erzeugung eines Bildzeichens (Umrissverfolgung)</a>
</li><li>
<a href="editexample2.html#Navigating">Navigation zu weiteren Bildzeichen</a>
</li><li>
<a href="editexample2.html#Creating-o">Auf zum nächsten Bildzeichen (konsistente
Richtungen)</a>
</li><li>
<a href="editexample3.html#consistent-stems">Konsistente Serifen und Stammbreiten</a>
</li><li>
<a href="editexample4.html#accents">Erzeugung akzentuierter Bildzeichen</a>
</li><li>
<a href="editexample4.html#ligature">Erzeugung einer Ligatur</a>
</li><li>
<a href="editexample5.html#metrics">Untersuchung von Metriken</a>
<ul>
<li>
<a href="editexample5.html#baseline">Setzen der Gundlinie zur Grundlinienteilung eines Schriftsatzes</a>
</li></ul>
</li><li>
<a href="editexample5.html#Kerning">Unterschneidung</a>
</li><li>
<a href="editexample6.html#Variants">Bildzeichenvarianten</a>
</li><li>
<a href="editexample6.html#Marks">Ankermarkierungen</a>
</li><li>
<a href="editexample6-5.html#Conditional">Bedingte Eigenschaften</a>
</li><li>
<a href="editexample7.html#checking">Überprüfen des Schriftsatzes</a>
</li><li>
<a href="editexample7.html#Bitmaps">Bitmaps</a>
</li><li>
<a href="editexample7.html#generating">Erzeugung</a>
</li><li>
<a href="editexample7.html#Families">Schriftsatzfamilien</a>
</li><li>
<a href="editexample7.html#summary">Fazit</a>
</li><li>
<a href="scriptnotes.html#Special">Bemerkungen zu verschiedenen Skripten</a>
</li></ul>
<blockquote id="lit">
<b><small>NOBLEMAN:</small></b><small> </small>Now this is what I call
workmanship. There is nothing on earth more exquisite than a bonny book,
with well-placed columns of rich black writing in beautiful borders, and
illuminated pictures cunningly inset. But nowadays, instead of looking at
books, people read them. A book might as well be one of those orders for
bacon and bran that you are scribbling.
<p align="right">
-- Die heilige Johanna, 4. Szene<br>
George Bernard Shaw, 1924
</p></blockquote>
<h2>
<a name="FontCreate">Kreierung eines neuen Schriftsatzes</a>
</h2>
<p>
Eine Schriftart wird mit dem <code>Neu</code>-Befehl aus dem
<code>Datei</code>-
Menü erzeugt (alternativ kann beim Start der Kommandozeilenparameter
<kbd>-new</kbd> verwendet werden).
</p>
<p>
<img src="../../_images/newfont.png" height="189" width="419">
</p>
<p>
Mit Hilfe des Befehls
<code><a href="../../ui/dialogs/fontinfo.html">Zeichensatzinformation</a></code>
aus dem <code>Element</code>-Menü kann ein Name an die Schriftart vergeben
werden.
Derselbe Befehl dient auch zur Vergabe eines Copyright-Hinweises und der
Änderung von Anstieg und Abstieg (Die Summe dieser beiden bestimmt die
Größe des "Em"-Blocks der Schriftart, welche für Postscript-Schriften
per Konvention 1000 beträgt bzw. eine Quadratzahl [oft 2048 oder 4096]
bei TrueType- und 15000 bei Ikarus-Schriftarten).
<small>
(wenn beabsichtigt wird, eine TrueType-Schrift zu erstellen, kann
ausserdem optional die "Quadratischer Spline" Checkbox selektiert werden,
um das native TrueType-Format zu verwenden. Allerdings ist die
Bearbeitung in diesem Modus ein wenig schwieriger)
</small>
</p>
<p>
<img src="../../_images/fontinfo.png" height="494" HEIGHT="552">
</p>
<p>
Mit Hilfe des Befehls <code>Codierung->Neu Codieren</code> ist es möglich
vorzugeben, welche Zeichen im Schriftsatz enthalten sein sollen.
FontForge erzeugt Schriftsätze im allgemeinen in ISO-8859-1,
welches die (meisten der) in Westeuropa verwendeten Zeichen enthält
(lateinische Buchstaben, einige Buchstaben mit Azenten, Ziffern
und Symbole).
</p>
<h2>
<a name="CharCreate">Erzeugung eines Bildzeichens</a>
</h2>
<p>
Nach dem ein neuer Schriftsatz erzeugt wurde, kann mit der Bearbeitung
der Bildzeichen begonnen werden. Nach einem Doppelklick auf den
Eintrag "C" in der oberen Schriftsatzansicht sollte sich ein
leeres Umrissfenster für das Bildzeichen öffnen:
</p>
<p>
<img src="../../_images/C1.png" height="283" width="272">
</p>
<p>
Das Umrissfenster enthält zwei Werkzeugpaletten, die an dessen linken
Rand plaziert sind. Die obere Palette enthält Bearbeitungswerkzeuge
während die untere die Kontrolle über die Sichtbarkeit und
Editierbarkeit der einzelnen Layer ermöglicht.
</p>
<p>
Der Vordergrund-Layer enthält den Umriss des Bildzeichens, der
Hintergrund-Layer kann Bilder oder Linienzeichnungen enhalten, die
als Zeichenhilfe oder Vorlage dienen können. Der Guide-Layer enthält
Hilfslinien,
die für den gesamten Schriftsatz gelten (z.B. die x-Höhe). Zu Beginn
sind alle Layer leer.
</p>
<p>
Dieses Fenster enthält ausserdem das interne Koordinatensystem des
Zeichens, dessen X- und Y-Achsen in hellgrau dargestellt werden.
Die schwarze Linie am rechten Rand des Fensters zeigt die Schrittweite
des Zeichens an. FontForge weist einem neuen Zeichen eine Schrittweite von
einem "em" (in Postscript sind dies üblicherweise 1000 Einheiten) zu.
</p>
<p>
Mit dem Befehl <code>Datei->Importieren</code> wird ein Bild des
zu erzeugenden Zeichens in den Hintergrundlayer gelesen. Es wird
automatisch so skaliert,
daß es der Höhe des "em"-Blocks entspricht.
</p>
<p>
<img src="../../_images/C2.png" height="283" width="272">
</p>
<p>
Der Hintergrund-Layer wird nun über die Layer-Palette als editierbar
markiert. Um die Größe des Bildes anzupassen, wird der Mauszeiger
an einer Kante des Bildes positioniert, und bei gedrückt gehaltener
Umschalttaste mit der linken Maustaste auf die gewünschten Maße
gezogen. Für dessen Positionierung
wird der Mauszeiger im dunklen Bereich des Bildes plaziert und
mit gedrückter linker Maustaste and die gewünschte Stelle bewegt.
</p>
<p>
<img src="../../_images/C3.png" height="283" width="272">
</p>
<p>
Wenn das
<a href="http://sourceforge.net/projects/autotrace/">autotrace</a>
Werkzeug installiert ist, kannn mit Hilfe des Befehls
<code>Element->AutoTrace</code> automatisch ein Umriss aus
dem importierten Bild erzeugt werden. Ansonsten müssen die Punkte
vom Benutzer selbst hinzugefügt werden. Dazu wird der Vordergrund-Layer
als aktiv selektiert und aus der Werkzeugpalette der Kurvenpunkt
(das ist der gefüllte Kreis) Punkt ausgewählt.
Dann wird der Mauszeiger am Rand des
Bildes positioniert und per Mausklick ein Punkt hinzugefügt.
Am einfachsten ist es, Punkte an Stellen hinzuzufügen, an denen die
Kurve horizontal oder vertikal verläuft, an Ecken oder Stellen
an denen sich die Biegung ändert (dies tritt in Kurven wie z.B. "S"
auf, in denen sich die Kurve von links offen nach rechts offen
ändert). Wenn diese Regeln befolgt werden, arbeitet das "Hinting" besser.
</p>
<p>
<img src="../../_images/C4.png" height="283" width="272">
</p>
<p>
Es ist empfehlenswert, eine Kurve in Richtung des Uhrzeigersinns
einzugeben. So wird in diesem Beispiel der nächste Punkt an der
Oberseite des Bildes im flachen Teil hinzugefügt. Da die Form
an dieser Stelle gerade ist, sollte hier ein <b>Tangentenpunkt</b>
anstelle eines Kurvenpunktes verwendet werden (in der Werkzeugpalette
in Form eines kleinen Dreiecks dargestellt). Ein Tangentenpunkt
ermöglicht einen guten Übergang von einer Kurve in eine gerade Linie
weil die Kurve den Punkt auf der einen Seite mit der selben Steigung
verlässt, mit der die Linie auf der anderen Seite eingetreten ist.
</p>
<p>
<img src="../../_images/C5.png" height="283" width="272">
</p>
<p>
Im Augenblick gleicht die "Kurve" dem Bild noch in keinster Weise
diese wird im Laufe des Tutorials angepasst. Es ist zu beachten,
daß dem Tangentenpunkt ein zusätzlicher Kontrollpunkt zugeordnet wurde
(das kleine blaue x). Der nächste Punkt wird an die Stelle gesetzt, an
der die Vorlage abrupt die Richtung ändert. Hier eignen sich weder
Kurven- noch Tangentenpunkte, stattdessen wird ein <b>Eckpunkt</b>
verwendet (das kleine Quadrat in der Werkzeugpalette).
</p>
<p>
<img src="../../_images/C6.png" height="283" width="272">
</p>
<p>
Wie zu sehen ist, ist der Kurvenverlauf der Vorlage schon etwas
ähnlicher. Es werden nun noch mehr Punkte hinzugefügt bis der
Pfad geschlossen werden kann.
</p>
<p>
<img src="../../_images/C7.png" height="283" width="272">
</p>
<p>
Der Pfad wird geschlossen, indem ein neuer Punkt über dem Startpunkt
der Kurve hinzugefügt wird.
</p>
<p>
<img src="../../_images/C8.png" height="283" width="272">
</p>
<p>
Nun sollte die Kurve so verändert werden, daß sie der Form der Vorlage
genauer entspricht. Hierzu müssen die Kontrollpunkte angepasst werden
(die blauen "x"). Um alle Kontrollpunkte sichtbar zu machen, sollte
bei aktiviertem Selektionswerzeug ein Doppelklick auf die Kurve gemacht
werden. Die Kontrollpunkte werden dann solange verschoben, bis die
Kurve dem Aussehen der Vorlage entspricht.
</p>
<p>
<img src="../../_images/C9.png" height="279" width="266">
</p>
<p>
Zum Schluß wird die Zeichenbreite gesetzt. Hierzu wird bei ausgewähltem
Selektionswerkzeug der Mauszeiger auf die Breitenlinie auf der rechten
Seite der Ansicht gesetzt und diese bei gedrückter Maustaste
an eine passende Stelle verschoben.
</p>
<p>
<img src="../../_images/C10.png" height="279" width="266">
</p>
<p>
Die Erstellung des Zeichens ist nun beendet.
</p>
<p>
Mathematisch Interessierte sollten ein Augenmerk auf die Koordinaten
in der linken oberen Ecke des Fensters werfen. Im allgemeinen können
Zeichen auch ohne deren Berücksichtigung erstellt werden, hier aber als
ergänzende Information:
</p>
<ul>
<li>
Jedes Zeichen hat sein eigenes Koordinatensystem.
</li>
<li>
Der vertikale Ursprung ist die Grundlinie des Zeichensatzes (die meisten
lateinischen Buchstaben liegen auf dieser Linie).
</li>
<li>
Der horizontale Ursprung ist die Stelle, bei der die Darstellung des
Zeichens beginnt. Im gezeigten Beispiel wird zunächst ein Leerraum
dargestellt, was relativ üblich ist. Dieser Leerraum (der Abstand
vom Ursprung bis zur linken Kante des Zeichens) wird
"linke Führungsschiene" genannt.
</li>
<li>
Die Einheiten des Koordinatensystems werden durch die "em"-Größe des
Schriftsatzes bestimmt. Dies ist die Summe aus dem Anstieg und dem
Abstieg des Schriftsatzes. Im Beispiel beträgt der Anstieg 800 und
der Abstieg 200, die Aufstiegslinie (die Linie unmittelbar über dem
"C") liegt 800 Einheiten über der Grundlinie, während die Abstiegslinie
200 Einheiten darunter liegt.
</li>
<li>
Hieraus folgt, daß eine Position von [282, 408] (wie oben dargestellt)
bedeutet daß der Cursor sich 282 Einheiten rechts vom horizontalen
Ursprung und 408 Einheiten über der Grundlinie (oder auch in der Mitte
zwischen Grundlinie und Anstieg) befindet.
</li></ul>
<p align="center">
-- <a href="../../index.html">Vorherige Seite</a> -- <a href="../../index.html">Inhalt</a> --
<a href="editexample2.html">Nächste Seite</a> --
</p></div>
</body></html>
|
