Das PAGE eDossier »Mehrfarbige Webfont Icons erstellen» zeigt Ihnen, wie man mehrfarbige Webfont Icons realisiert.
Mit Webfonts umgesetzte Icons stechen Grafiken in vielerlei Hinsicht aus, doch bei der Farbgebung hapert es. Wie man mit einigen Tricks und Kniffen mehrfarbige Webfont Icons realisiert, zeigt Ihnen Mobile Screen Designerin Annika Brinkmann in unserem PAGE eDossier »Mehrfarbige Webfont Icons erstellen«.
In unserem PAGE eDossier »Mehrfarbige Webfont Icons erstellen« zeigt Ihnen Mobile Screen Desigerin Annika Brinkmann wie sie in nur 8 Schritten zu mehrfarbigen Webfont Icons gelangen, die Sie zu dem noch beliebig skalieren können.
Schriften skalieren beliebig und sehen trotz kleiner Dateigröße selbst auf Retina-Displays ohne Mehraufwand gestochen scharf aus. Dadurch haben sie Vorteile gegenüber Bildern. Auch zu Zeiten des Bleisatzes setzte man Icons als Schriftzeichen um – mit Webfonts ist das nun auch im Webdesign möglich.
Mehrfarbige Webfont Icons
Bisher gab es dabei nur ein Problem: Die Icons waren immer einfarbig. Mit CSS3, HTML, SVG-Export und Co. bieten sich nun andere Möglichkeiten. Lange Zeit ließen sich im Browser ausschließlich statische Bitmap-Bilder realisieren. Dank @font-face, Generated Content, Gradienten und Schatten stehen heute andere Techniken zur Verfügung.
Icons, deren Einzelteile auf verschiedenen Formen in Webfonts liegen, erschließen neue Möglichkeiten im Webdesign. Die größten Vorteile sind die geringe Datengröße, die Skalierbarkeit und die Darstellungsschärfe auf hochauflösenden Displays.
Die letzten beiden Vorteile bieten auch Skalierbare Vektorgrafiken. Ihnen gegenüber punkten Icon-Webfonts jedoch durch die bequeme Manipulierbarkeit mit Stylesheets: Für Größe, Darstellung und visuelle Effekte genügen simple CSS-Angaben. Das Einsparpotenzial bei der Dateigröße ist enorm – in unserem Beispiel betrug der Umfang der von allen aktuellen Browsern unterstützten .woff-Datei gerade mal ein Dreißigstel der SVG-Vorlagen.
Tutorial in 8 Schritten
In diesem Tutorial können Sie Schritt für Schritt nachvollziehen, wie Sie Webfonts mit zwei oder drei Farben kolorieren, um auf dieser Grundlage komplexe mehrfarbige Icons zu gestalten.
