Das Designerhandbuch für Pixel Hinting
Pixel-perfekte Symbole und Typografie zeichnen sich in der Menge online aus. Offensichtlich wollen wir alle nach solch einer verfeinerten Arbeit streben, aber manchmal, selbst nach dem Versuch, enden wir immer noch mit etwas weniger ... weniger. Pixel Hinting ist eine der Fähigkeiten, die eine automatische Funktion nutzt und ihre Ergebnisse verbessert. Trotz der ultrahohen Auflösung von heutigen Displays - wie Apples Retina-Displays - müssen wir immer noch glatte Kurven "vortäuschen", damit wir nicht mit einem verpixelten Durcheinander enden.
Viele Designer und Entwickler bewegen sich jetzt mehr in Richtung SVG und vektorbasierte Ansätze; mit der Unterstützung nur von Tag zu Tag besser. Aber dennoch haben vektorbasierte Lösungen noch einen langen Weg vor sich, bevor sie reif genug für die Produktion sind. SVG eignet sich hervorragend zum Anzeigen von Vektorformen, aber nicht so sehr zum Ändern der Größe dieser Formen. So wie alles andere da draußen gibt es Zeit und Ort für jede Lösung.
Was sind Vektoren?
Vektoren werden im Wesentlichen Ergebnisse der mathematischen Darstellung einer Form wiedergegeben. Wenn Sie etwas auf Ihrem Bildschirm sehen, liegt das daran, dass Ihr Computer diese Objekte gerendert und an die Pixel Ihrer Anzeige gebunden hat. Auf diese Weise hat Ihr Computer auch Entscheidungen darüber getroffen, was als ganze Pixel angezeigt werden soll und was nicht. Zum Beispiel hat der Großbuchstabe "D" sowohl eine perfekt gerade Linie als auch eine gekrümmte Linie.
Wie Sie sehen können, ohne Anti-Aliasing ist die gekrümmte Linie auf dem "D" ziemlich verpixelt. Um das auszugleichen, werden Vektorformen normalerweise gerastert, um ein robusteres Erscheinungsbild zu erhalten. Anstatt nur Pixel anzuzeigen, die vollständig in den Vektorumriss fallen, werden Pixel allmählich ausgeblendet. Dies bringt Ihr Gehirn dazu, eine glattere Linie auf gekrümmten Formen zu sehen, die nicht perfekt in das Pixelraster einrasten.
Oben können Sie sehen, wie das gerenderte "D" mit sogenannten Halbpixeln versehen wird, um die gezackte Pixelierung zu entfernen. Diese Funktion bringt jedoch auch ein Problem mit sich: Computer sind schlecht darin herauszufinden, was visuell ansprechend ist. Wenn Sie also diese Halbpixel hinzufügen, werden die abgerundeten Ecken fantastisch aussehen, und die obere / untere innere Linie wird unscharf. Das automatische Anti-Aliasing, das auftritt, wenn eine Vektorform gerendert wird, führt dazu, dass die meisten Teile von Formen und Typografie gut aussehen, aber andere in einer noch schlechteren Qualität belassen als ursprünglich.
Hallo, Pixelhinweis.
Nun, da Sie einen kurzen Überblick über Vektorformen und ihre Funktionsweise haben, wollen wir uns der realen Arbeit zuwenden. Beim Pixelhinweis werden die Ankerpunkte des Vektors auf ästhetisch ansprechende Weise auf Pixelrändern verschoben. Diese geraden Linien werden perfekter, während die Halbpixel immer noch den Kurven folgen. In den meisten Fällen wird Pixel-Hinting auf Typografie und Formen für Raster-Bilder (Logos, Icons, Branding, etc.) verwendet. Jetzt, am wichtigsten, um Ihren Vektor richtig zu justieren, muss er in der Größe und in der Form sein, die Sie es wünschen. Sobald Sie Pixel Pixel auf Ihre Arbeit hingewiesen haben, könnte das Rotieren oder Ändern der Größe die gesamte Arbeit wegwerfen und wahrscheinlich auch wieder zunichte machen, indem Sie sie automatisch wieder antialiasieren. Bevor wir beginnen, stellen Sie sicher, dass die folgenden Einstellungen angepasst sind (ich verwende Photoshop für diese Aufgabe):
- Schalte dein Pixelraster ein (View> Show> Grid, stelle sicher, dass Extras über dem Show-Menü aktiviert ist)
- Stellen Sie sicher, dass Ihr Raster alle 10 Pixel eine Rasterlinie mit 10 Unterteilungen aufweist. Oder etwas Ähnliches, so dass zwischen jedem Pixel eine Linie liegt.
- Deaktivieren Sie das Fangen (Ansicht> Häkchen deaktivieren). Wir wollen keine Ankerpunkte mit 1px-Schritten fangen, wir wollen Punkte innerhalb von Pixeln verschieben.
Pixelhinweis-Typografie
Der Vorgang, Formen gegen Typografie zu machen, ist etwas anders, also werde ich Sie durch beide führen. Idealerweise möchten Sie bei der Typografie Ihren Typ vor oder während des Hinting-Vorgangs kernieren. Unabhängig davon sollte Pixelhinweis eines der letzten Dinge sein, die Sie tun.
Wählen Sie zuerst die Typografie aus, die Sie als Pixel anzeigen möchten, und erstellen Sie eine Kopie der Ebene, und wandeln Sie diese Ebene in eine Form um.
Sie können sehen, dass der Text sowohl auf der horizontalen als auch auf der vertikalen Achse unpassend vom Raster fällt. Um dies zu beheben, werden die Ankerpunkte jedes Buchstaben sanft verschoben, bis sie sich dem ausgerichteten Pixelraster besser angleichen. Das Ziel besteht darin, die Formlinien nahe, wenn nicht direkt auf die Gitterlinien zu bringen. Vergrößern, um Ankerpunkte genauer zu verschieben. Vergrößern Sie dabei häufig, um sicherzustellen, dass Ihre Anpassungen in Ordnung sind.
Sie möchten sich nicht genau an das Raster anpassen, da dies die Vorteile von Anti-Aliasing an erster Stelle beseitigt. Versuchen Sie stattdessen, die Dinge einfach konsistent zu halten - lassen Sie nur Halbpixel auf einer Seite jeder Achse zu. Zum Beispiel erlaube ich immer halbe Pixel rechts und oben von Buchstaben, während ich die linken und unteren Kanten bündig zum Gitter zwinge.
Wie Sie sehen können, wurde das "Einsteigen" grob angepasst, während die "Berührung" unverändert bleibt. Genau wie Kerning ist Pixelhinweis viel mehr ein Handwerk als eine Wissenschaft. Es ist ein gutes Auge darauf zu schauen und zu erkennen, ob die Arbeit nach der Anpassung besser oder schlechter aussieht. Lassen Sie sich nicht entmutigen, wenn Sie typografische Pixel finden, die grobe Andeutungen machen und weiterarbeiten. Wenn das Ergebnis immer noch unterdurchschnittlich ist, können Sie die Ebene immer löschen und erneut aus dem Original kopieren. Es braucht etwas Zeit, um vor allem Typografie gut aussehen zu lassen, mach einfach weiter und früher oder später wird sich deine harte Arbeit auszahlen.
Pixel, die Vektorformen andeuten
Im Allgemeinen sind Pixelhinweisformen für Symbole oder Logos reserviert. Auch hier möchten Sie sicherstellen, dass Ihre Form die gewünschte Größe und Drehung hat, bevor Sie beginnen, da Sie später Ihre ganze Arbeit wegschmeißen können. Das Anpassen von Formen ist viel einfacher und erfordert weniger Aufmerksamkeit für intrinsische Details. Das heißt, komplexere Formen brauchen länger und sind schwieriger anzupassen, daher ist es am besten, mit etwas Einfachem zu beginnen.
Oben können Sie sehen, dass unser Pfeil und Kreis nur etwas abseits von uns liegt. Die durch Anti-Aliasing erzeugten Halbpixel bewirken, dass die gesamte Form dadurch unscharf wird. Lasst uns also alles anschieben, um ein bisschen besser ins Raster zu kommen.
Da gehen wir! Indem wir die Ankerpunkte an das Gitter anpassen, erhalten wir ein viel schärferes Symbol. Es ist wichtig zu erwähnen, dass, da es sich bei diesem Symbol um einen Kreis handelt, alle Anpassungen der Breite auch auf die Höhe angepasst werden müssen. Vergessen Sie auch nicht, dass das Innere der Form gut und gleichmäßig aussieht. Wenn Sie sich das vorherige Bild ansehen, werden Sie feststellen, dass die Innenseiten des Kreises nicht mit Anti-Aliasing identisch sind.
Abschließend
Mit der obigen Arbeit entsteht ein Bild, das schärfer und professioneller wirkt. Natürlich können Sie diese Techniken auf viel wichtigere Dinge als eine Schaltfläche anwenden.
Während das automatische Anti-Aliasing von Ihrem Computer akzeptabel aussieht, könnte es besser sein. Wenn es um Ihr Logo oder wichtige Symbole / Typografie in Rasterform geht, ist Pixelhinweis mehr als nur eine Nischenfertigkeit. Bis zu dem Tag, an dem wir alle Displays mit hoher Pixeldichte verwenden, ist es wichtig.