Blog
Bloghead

REVOLVER 9 UX: PIXELGENAUE GESTALTUNG VON ICONS

Mit Illustrator können zwar schnell und einfach Grafiken angelegt werden, für die maximale Darstellungs-Leistung sind allerdings ein paar zusätzliche Handgriffe nötig.

Icons, die nicht sorgfältig angelegt wurden, wirken verwaschen. Hierfür ist das Antialiasing verantwortlich. Dieser Interpolations-Algorithmus verhindert unerwünschte Darstellungs-Effekte, wie z. B. Treppen-Bildung.

Befindet sich eine Linie nicht exakt im Pixel-Raster, wird der benachbarte Pixel aus den Farbwerten der angrenzenden Pixel errechnet. Dieses Phänomen führt vor allem auf Retina-Displays zu unschönen Ergebnissen.

Die Lösung für dieses Problem ist mit einem in Illustrator angelegten Raster sehr simpel. Wir haben für unser Raster einen Vergrößerungs-Faktor von 8px benutzt, um mehr Gestaltungs-Spielraum in Illustrator zu bekommen. Die Strichstärke – soll sie später in der eingebetteten Grafik 1px betragen – muss damit 8px stark sein.

Mit der Funktion „Am Raster ausrichten“ können nun in Illustrator die benötigten Grafiken angelegt werden. Wir haben peinlich genau darauf geachtet, dass die Pfade innerhalb der vordefinierten Rasterlinien platziert wurden.

Die so erstellten Grafiken sind im End-Format scharf und wirken auch auf Retina-Displays wie sie sollen. Als SVG-Datei exportiert sind sie kinderleicht in den Quellcode der Homepage oder Web-Applikation eingebettet.

Erstellt 18, Mär 2014 in Revolver 9 von bjoern.weiler

...