Design

Komplett mit Sprites und CSS: Individualisierte Iconsets mit Iconbench

11. Dezember 2012
von

Auch wenn Webfont-Icons derzeit groß im Kommen sind, soll das Angebot von Iconbench hier nicht vorenthalten werden. Die dort angebotenen Iconsets basieren zwar alle auf Pixelgrafiken. Allerdings hat der Dienst einige interessante Features, mit denen sich jeder seine Icons nicht nur zusammenstellen, sondern auch deren Aussehen anpassen kann.

Mehrere Iconsets zur Auswahl

Webfont-Icons haben klar ihre Vorteile. Wenn Icons aber mit Effekten wie Verläufen, Outlines und Innenschatten versehen werden sollen, muss man sie wieder klassisch erstellen und einbinden.

Iconbench bietet mehrere Iconsets an (fünf frei verfügbare und ein Pro-Set, das im Rahmen der Beta für angemeldete Benutzer derzeit noch kostenfrei ist), aus denen man sich eine beliebige Auswahl individuell zusammenstellt. Die Sets haben jeweils zwischen 41 und 172 Icons, die sich in Stil und Ausrichtung unterscheiden. Die Auswahl für das eigene Iconset kann bis zu 20 Icons beinhalten. Eine Kombination von Icons aus unterschiedlichen Sets ist möglich.

Gestalterische Anpassung der Iconsets

Das Besondere an Iconbench ist nicht nur die Auswahl der Icons, sondern die Möglichkeit, ein Iconset mit verschiedenen Effekten zu versehen und gestalterisch dem Layout, in dem sie genutzt werden sollen, anzupassen. Neben Größe (zwischen 10 und 40 Pixel Höhe), Transparenz und Farbe sind weitere Effekte möglich.

Icons können nach Belieben mit Schlagschatten, Innenschatten, Verlauf und einer Outline versehen werden. Für jeden Effekt gibt es unterschiedliche Einstellungsmöglichkeiten, die bequem per Schieberegler verändert werden. Auch eine Kombination der Effekte ist möglich.

So entsteht schnell ein individuelles Aussehen, das sich in Photoshop in der Geschwindigkeit kaum realisieren lässt.

Download mit Sprite-CSS

Sind die Icons ausgewählt und gestaltet, wird das komplette individuelle Iconset als Download angeboten. Auf Wunsch werden die Icons auch als Sprite inklusive der passenden Sprite-CSS-Datei bereitgestellt.

Fazit: Iconbench ist ein schöner Dienst, um schnell einige „Effekt-Icons“ zusammenzustellen. Laut Website lassen sich in Kürze noch weitere „Special Effects“ auf die Icons anwenden.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!