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.

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

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.

• 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.