====== Type-Hinting =====

Im Onlinefragebogen benötigt man mitunter Grafiken, die kleinen oder sehr kleinen Text enthalten. Dieser wirkt schnell verwaschen und unleserlich -- meistens eine Folge unsachgemäßer Skalierung oder einer Unachtsamkeit beim Export der Vektorgrafik.

Grundsätzlich gilt: Die besten Ergebnisse erzielt man, wenn der Text direkt als Text in der Webseite eingebunden wird. Mittels CSS-Positionierung kann man Bildelemente und Text frei platzieren.

Das zweitbeste Ergebnis erzielt man, wenn der Text (als Vektorobjekt) direkt in die richtige Auflösung exportiert wird. Dies erreicht man in einer Bildbearbeitung (z.B. GIMP) durch Einschalten des //Hinting// beim Text - bei einer Grafikbearbeitung wie Illustrator ist es mitunter ein wenig komplizierter.

===== Hinting in Illustrator CS 4 =====

Zwar bietet Illustrator eine Funktion //Für Web und Geräte speichern//. Das Ergebnis ist zwar nicht schlecht, aber bei weitem nicht perfekt.

^Für Web speichern^Nach Optimierung^
|{{:de:general:exp.hinting.quick.png?nolink|Export für Web}}|{{:de:general:exp.hinting.fine.png?nolink|Export nach der Optimierung}}|

Um in Illustrator kleine Schriftarten sauber in eine Pixelgrafik zu überführen, sind einige zusätzliche Bearbeitungsschnitte notwendig:

  * Unter //Bearbeiten// -> //Voreinstellungen// -> //Einheiten ...// als Einheit für //Allgemein// und //Text// jeweils "Pixel" auswählen.
  * Das Bild bzw. die Bildelemente auf die gewünschte Größe (in Pixeln) skalieren.
  * //Ansicht// -> //Pixelvorschau// aktivieren.
  * //Ansicht// -> //An Pixel ausrichten// deaktivieren.
  * //Ansicht// -> //An Punkt ausrichten// deaktivieren.

Nun erhält man einen ersten Eindruck davon, wie das Bild später als Pixelgrafik aussehen wird. Für die weitere Optimierung zoomt man weit in den Text hinein (z.B. Zoomstufe 400%).

Zunächst sollte man hier ein Auge auf die Schärfe horizontaler Linien haben - etwa die Querstriche im großen und kleinen **E**. Hier sollte Illustrator schon sein möglichstes tun -- aber manchmal reicht das nicht. Unter Umständen muss man die Schriftgröße ein wenig vergrößern oder verkleinern, damit die parallelen Horizontalen alle scharf auf das Pixelraster abgebildet werden können.

  * Im Menü unter //Bearbeiten// -> //Voreinstellungen// -> //Allgemein// -> //Schritte per Tastatur// stellt man einen kleinen Wert ein, etwa "0,1 px"

Mit den Pfeiltasten kann man den Text nun ein wenig nach links und rechts verrücken -- dabei bemerkt man, dass die Buchstaben mal besser in das Pixelraster passen und mal schlechter. Falls ein vertikaler Strich immer gestochen scharf ist und ein anderer immer unscharf, kann man evtl. noch ein wenig mit der Laufweite des Texts arbeiten.

  * Stimmt das Gesamtbild, markiert man alle Objekte und wählt über das Menü //Objekt// -> //In Pixelbild umwandeln//. Als //Auflösung// wählt man "Bildschirm", als //Hintergrund// wählt man "weiß".

Nach der Bestätigung mit //OK// sieht man keinen Unterschied, da man ja schon in der Pixel-Vorschau ist. Wechselt man testweise in die normale Ansicht, sieht man, dass der Text gerastert wurde.

  * Zu guter Letzt speichert man das Bild mit //Datei// -> //Exportieren// als Grafik, etwa im Format PNG ab.