Web Fonts: Mehrfarbige Icons erstellen

Das PAGE eDossier »Mehrfarbige Webfont Icons erstellen» zeigt Ihnen, wie man mehrfarbige Webfont Icons realisiert.



RCLP_Mehrfarbige_Webfont_Icons_Artikel

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.

PAGE_Download_Button_Vorlage

Das PAGE eDossier »Mehrfarbige Webfont Icons erstellen« gibt es im PAGE Shop. Jetzt downloaden!

Mehrfarbige_Webfont_Icons
© Rubicon-Icon von Markus Kempken, Berlin



Kommentieren

Einfach mit dem PAGE Account anmelden oder Formular ausfüllen

Name *

Email *

*Pflichtfeld

Ihr Kommentar *

 
 

Das könnte Sie auch interessieren