eDossier »Mehrfarbige Webfont Icons erstellen«

Mehrfarbige Icons mit Webfonts

Mit Webfonts umgesetzte Icons stechen Grafiken in vielerlei Hinsicht aus, doch bei der Farbgebung hapert es. Wie man dennoch mehrfarbige Schrift-Icons realisiert, hat Annika Brinkmann, Mobile Screen Designer und Trainer, herausgefunden.

Schriften haben ganz fantastische Vorteile gegenüber Bildern: Sie skalieren beliebig und sehen trotz kleiner Dateigröße selbst auf Retina-Displays ohne Mehraufwand gestochen scharf aus. Schon zu Zeiten des Bleisatzes setzte man Icons als Schriftzeichen um – mit Webfonts ist dies seit geraumer Zeit auch im Webdesign möglich.

Bisher gab es dabei nur ein Problem: Die Icons waren immer einfarbig. Damit ist dank CSS3, HTML, SVG-Export und Co. nun Schluss! Mit Techniken wie @font-face, Generated Content, Gradienten und Schatten stehen heute Gestaltungsmöglichkeiten zur Verfügung, die sich im Browser lange Zeit ausschließlich mit statischen Bitmap-Bildern realisieren ließen.

In unserem Tutorial zeigt Ihnen Annika Brinkmann Schritt für Schritt, wie Sie Webfonts mit zwei oder drei Farben kolorieren, um auf dieser Grundlage komplexe mehrfarbige Icons zu gestalten. Auf Mobile-Knowledge.de sehen Sie die Beispiele im Praxiseinsatz.

——————————————————————
Das PAGE eDossier 21.2014 enthält einen Beitrag aus WEAVE 02.2014 (EVT März 2013) im Originallayout. 6 Seiten