Icons selber erstellen: So geht es

Gerade die Erstellung von Icons ist eine anspruchsvolle Sache. Sie müssen möglichst einfach in der Gestaltung sein und dennoch eine eindeutige und klar verständliche Botschaft vermitteln. Dazu kommt, dass Icons innerhalb eines Sets ein einheitliches Aussehen haben müssen.

Das Icon Design

Raster festlegen für einheitliches Aussehen

Will man mehrere Icons erstellen oder gar ein umfangreiches Icon-Set gestalten, ist es wichtig, sich auf gemeinsame Nenner zu einigen, die alle Icons erfüllen. So sollten alle Icons denselben Grad an Detailgenauigkeit besitzen. Hier hilft es, sich ein Raster anzulegen, welches als Grundlage für alle zu zeichnenden Formen dient. Je komplexer die Gestaltung eines Icons sein soll, desto komplexer darf dann auch das Raster sein, an das sich die Formen auszurichten haben.

Dabei spielt es auch eine Rolle, in welcher Größe die Icons verwendet werden sollen. Die kleinste Icongröße hat üblicherweise eine Kantenlänge von 16 Pixel. Es folgen in der Regel Verdopplungen der Kantenlänge, also 32, 64 und 128 Pixel. Will man komplexe Icons auch in kleinen Größen darstellen, muss man bei den kleineren Versionen möglicherweise Anpassungen vornehmen, um den Grad der Detailgenauigkeit zu reduzieren.

Als Basis für eine komplexe Gestaltung legen wir ein Icon mit 128 Pixel Kantenlänge fest und definieren ein Raster von acht Pixeln mit je vier Unterteilungen. Wir erhalten somit ein Raster mit 16 mal 16 Feldern. Bei einer Darstellung von 16 Pixeln würde jedes Rasterfeld ein Pixel entsprechen.

Farben und Formen definieren

Als nächstes sollte man die Farben für die Icons festlegen. Grundsätzlich kann man natürlich aus dem Vollen schöpfen und sich aller Farben bedienen. In den meisten Fällen ist es jedoch sinnvoll, sich auf eine bis wenige Farben zu beschränken. So fördert man ein einheitliches Aussehen und verhindert, dass den Icons zu viel Aufmerksamkeit widerfährt. Aber je nach Einsatz kann das natürlich auch gewollt sein. In vielen Fällen werden Icons jedoch unterstützend eingesetzt und sollen selbst nicht im Zentrum der Gestaltung stehen.

In Illustrator ist es sinnvoll, Farben als globale Farbfelder anzulegen. Globale Farben haben den Vorteil, dass sich Änderungen dieser Farben in der Palette auch auf die Farben im Dokument auswirken.

Im nächsten Schritt sollte man sich Gedanken zu den Gundformen machen. Setzt man abgerundete Flächen und Kreise ein oder soll die Anmutung der Icons eher kantig sein? Will man ausschließlich Flächen oder Konturen einsetzen oder will man beides miteinander kombinieren? Bei Konturen sollte man die Linienstärke so festlegen, dass gerade komplexe Formen durch zu dicke Linien nicht „matschig“ wirken.

Individualität erzeugen

Für die nötige Prägnanz können ungewöhnliche, thematisch passende Bilder dienen. Individualität kann auch über die Art der Form erreicht werden. So kann ein Gestaltungsgrundsatz sein, Konturen nicht zu schließen. Außerdem können Konturen mit doppelter oder gepunkteter Linie gezeichnet werden. Bei Farben können Verläufe als grundsätzliches Element verwendet werden.

Zusätzlich kann Individualität durch Schatteneffekte oder runde Grundformen erzeugt werden. Bei allen Effekten, Formen und Farben gilt, dass sie einheitlich sein müssen und als einheitliches Element aller Icons zu verstehen sein sollten. Im Beispiel werden Icons mit Flächen und Konturen gezeichnet. Es gibt drei Pastellfarben, die jeweils in einer zusätzlichen helleren Variante vorhanden sind. Ecken und Linien sind leicht abgerundet.

Um Formen, Farben und Konturen leichter anwenden zu können, bietet es sich an, solche Vorgaben als Grafikstil zu speichern. Somit lassen sich zuvor im Grafikstil festgehaltene Vorgaben auf beliebige Formen anwenden.

Icons als Gruppen anlegen

Anders als das aktuelle Photoshop bietet Illustrator keine Möglichkeit, den Inhalt einer Zeichenfläche zu exportieren. Daher sollte man alle Icons auf einer Zeichenfläche platzieren. In jedem Fall sollte jedes Icon in einer Gruppe zusammengefügt werden. So hat man einen besseren Überblick und verhindert, dass Formen eines Icons versehentlich verschoben werden. Auch das Ein- und Ausblenden von Icons für das spätere Exportieren ist so einfacher.

Icons für verschiedene Größen anpassen

Wie bereits erwähnt, sollten bei Icons, die in sehr unterschiedlichen Größen eingesetzt werden, Anpassungen vorgenommen werden. So sollten komplexe Icons um Details reduziert werden, wenn diese auch sehr klein dargestellt werden sollen. Überflüssige Formen können weggelassen und andere Formen in ihrer Komplexität reduziert werden. Bei Sternen können beispielsweise die Anzahl der Zacken reduziert werden.

Auch die Konturenstärke sollte je nach Größe angepasst werden. So sollten Konturen nie dünner als ein Pixel sein. Wird eine Kontur bei einem 128 Pixel großen Icon in zwei Pixel angelegt, sollte bei der 16 Pixel großen Darstellung die Kontur auf mindestens ein Pixel vergrößert werden.

Export als SVG, PNG und Iconfont

Illustrator und die meisten anderen Zeichenprogramme können ins vektorbasierte SVG- und ins bitmapbasierte PNG-Format exportieren. Während das SVG-Format beliebig skalierbar ist, müssen beim PNG-Format die benötigten Größen individuell angelegt werden. Hier bietet es sich an, das jeweilige Icon als Smartobjekt in Photoshop zu platzieren. Dort können diese in verschiedene Auflösungen exportiert werden.

Hat man einfarbige Icons ohne Effekte wie Verläufe und Schatten, bietet sich auch ein Iconfont an. Dienste wie IcoMoon können SVG-Dateien importieren und daraus individuelle Webfonts generieren. So erhält man Icons in jedem möglichen Format und kann diese im eigenen Webprojekt integrieren.

Warum gibt es Icons?

Wenn wir von Icon reden, dann meinen wir nicht die kleinen handgemalten Holzbildchen mit christlichen Motiven, die es im osteuropäischen Christentum schon vor Jahrhunderten zu Berühmtheit gebracht haben. Wir sprechen vielmehr von kleinen Symbolen, die auf einem Bildschirm Objekte oder Funktionen repräsentieren.

In letzterer Lesbarart debütierten Icons 1981 auf dem Xerox Star 8010. Wenn Sie sich ein bisschen mit dem Xerox der Sechziger und Siebziger auseinandersetzen, werden Sie sich wundern, für welche Innovationen das Unternehmen und sein Palo Alto Research Center sich verantwortlich zeichnen. Nicht zuletzt die Computermaus ist da zu nennen. Im Grunde stammt das komplette Konzept des sogenannten Personal Computers aus dem Hause Xerox.

Die Erfindung der Icons ist Teil der sogenannten Schreibtisch-Metapher (mancherorts auch Office-Metapher genannt), mit der der typische Schreibtisch digital abgebildet werden sollte. Und was ist klar, wenn Sie einen kompletten Schreibtisch auf den damals üblichen maximal 12 Zoll großen Bildschirmen abbilden sollen? Genau. Sie haben nicht viel Platz.

Entsprechend waren Icons von Beginn an als kleine Piktogramme konzipiert, die möglichst unmissverständlich kommunizieren, welches Objekt oder welche Funktion sich hinter ihnen verbirgt. Diese Kommunikationsaufgabe in all ihrer Schwierigkeit haben wir auch heute noch zu bewältigen. Vorteilhaft ist indes, dass wir mittlerweile Icons als Vektorgrafiken erstellen und nicht auf Pixel-Icons festgelegt sind. Damit gelingt uns eine weitaus komplexere Darstellung dessen, was wir kommunizieren möchten.

Dennoch haben sich die meisten Fragestellungen, die es beim Icon-Design zu beantworten gilt, nicht wesentlich verändert. Die folgenden Tipps sollen Ihnen helfen, wenn Sie Piktogramme erstellen wollen oder müssen.

Tipp #1: Icons müssen eindeutig und leicht erfassbar sein

Fangen wir mit dem wichtigsten Tipp an. Ein Icon ist nur dann gut, wenn der potenzielle Verwender sofort erkennen kann, was es symbolisieren soll. Ist das Icon zu künstlerisch oder abstrakt, wird das nicht gelingen. Der Nutzen ist dahin.

Daher ist es wichtig, nicht innovativ sein zu wollen; schon gar nicht disruptiv. Das beste Symbol ist eines, das der Nutzer kennt und bereits mit dem Objekt oder der Funktion assoziiert, die es auch abbilden soll.

Diese Überlegung führt uns zum Skeuomorphismus, den wir mit dem Flat-Design-Trend hinter uns gelassen glaubten. Google brachte mit dem Material-Design-Ansatz indes beide Welten zusammen, so dass ein Icon im Material Design immer noch flat, aber eben auch realitätsnah aussehen kann.

Wollen Sie mit den Reminiszenzen an vergangene Zeiten nicht leben, hassen gar den Skeuomorphismus, dann rate ich Ihnen, Ihren Standpunkt zu überdenken. Hilft das nichts, können Sie sich immer noch assoziativer Kniffe bedienen und Ihre Icons an bekannter Funktionssprache orientieren. Ein Beispiel kann etwa das liegende Dreieck als etablierte Metapher für „Play” sein.

Zukunftsorientiertes Icon-Design sollte zudem Metaphern vermeiden, die zwar etabliert waren, es aber in absehbarer Zukunft mit großer Wahrscheinlichkeit nicht mehr sein werden. Ich hoffe, Sie kommen ohnehin nicht mehr auf die Idee, eine 3,5” Floppydisk als Icon einzusetzen. Solche Kandidaten gibt es einige, etwa das CD-Symbol.

Tipp #2: Zeichnen Sie nicht drauf los, sondern recherchieren Sie gründlich

Wenn Sie Icons für einen Kunden oder einen bestimmten Verwendungszweck zeichnen wollen, dann nehmen Sie sich Zeit für eine gründliche Recherche. Welche Bildsprache hat sich in dem angepeilten Bereich bislang schon etabliert? Welche Funktionsmetaphern bieten sich an?

Hier sollten Sie ganz selbstverständlich auch bei den freien und kommerziellen Anbietern von Icon-Sets vorbeischauen. Wir müssen das Rad nicht völlig neu erfinden. Sollten Sie beim Stöbern die perfekte Lösung finden, dann nehmen Sie sie. Sie müssen nicht zwanghaft selbst erstellen, was es so schon gibt.

Wenn Sie für einen Kunden gestalten, könnte es sinnvoll sein, einen Teil seiner Marke oder seines Logos in das Design einzubeziehen. Verwendet Ihr Kunde etwa einen Stern im Logo, könnten Sie diesen Stern auch im Icon-Design berücksichtigen. Schauen Sie genau hin, was sich im konkreten Fall anbietet. Damit bringen Sie vollkommen unproblematisch eine persönliche Note in die Gestaltung und schützen Ihre Symbole vor dem Vorwurf der Beliebigkeit.

Lässt sich kein Markenbestandteil finden, kann es ein gemeinsames Thema tun. Bei einem Kunden aus der ölverarbeitenden Industrie könnte etwa der stets hinzugefügte Öltropfen als Thema für eine konsistente Darstellung passend sein. An dieser Stelle wird es bisweilen erforderlich sein, um die Ecke zu denken.

In diesem Zusammenhang ist auch das Betrachten kultureller Besonderheiten von Bedeutung. Manche Symbole, die wir metaphorisch für gelungen erachten, können woanders auf der Welt ganz andere Wirkung entfalten. Ein Beispiel dafür ist die Eule, Markenbestandteil des Social-Media-Helferleins Hootsuite. In westlichen Kulturen wird die Eule mit Weisheit, in östlichen mit Dummheit assoziiert. Hmm.

Von Beginn muss Ihnen klar sein, dass Sie selbst bei einer nur kleinen Icon-Familie kaum in der Lage sein werden, stets nur die beste Assoziation piktografisch umzusetzen. Es wird eine Gemengelage dabei herauskommen. Das eine Icon ist der kognitive Knüller, das andere erfordert etwas Nachdenken. Im Zweifel gestalten Sie zugunsten der übergreifenden Konsistenz der Icon-Familie insgesamt.

Tipp #3: Weniger ist mehr – überladen Sie Ihre Icons nicht

Wir befinden uns nicht in einem Wettbewerb um die komplexeste Darstellung auf dem kleinsten Raum. Wichtig ist die Verständlichkeit, nicht die möglichst detaillierte Darstellung des Symbols an sich. Letztlich ist Ihr Icon nur ein Mittel zum Zweck. Wenn Sie diesen Zweck mit der Kombinationen zweier einfacher Formen erreichen können, dann ist das kein Nachteil, sondern ein Vorteil.

Lassen Sie mich an dieser Stelle nochmal Einstein zitieren, der empfahl, die Dinge so einfach wie möglich zu machen, aber nicht einfacher. Die bereits erwähnten zwei Formen, aus denen Ihr Icon bestehen könnte, sind vollkommen in Ordnung, wenn Ihr Icon damit eindeutig erkennbar wird. Leider wird es vielfach eher so sein, dass ein derart simples Icon verschiedene Interpretationen zulässt. Erweitern Sie Ihr Design dann solange, bis Sie eine eindeutige Interpretation des Symbols sichergestellt haben.

Bei der Gelegenheit sollten Sie es sich zur Angewohnheit machen, Icons selbst dann in möglichst kleinen Größen verwendbar zu halten, wenn Sie sie für den aktuellen Kundenauftrag ausnahmsweise ausschließlich in 512 x 512 Pixeln brauchen. Was Sie allerdings tun können, ist, die Komplexität der Icon-Darstellung in Maßen der Größe anzupassen. So könnte Ihr 512er Exemplar detailreicher sein als Ihr 64er Symbol. Dabei sollten Sie allerdings nicht übertreiben, denn wichtig ist, dass erkennbar bleibt, dass beide Exemplare zur gleichen Symbolfamilie gehören.

Tipp #4: Entscheiden Sie sich für einen Stil und bleiben Sie dabei

Wenn Sie Ihre Icons eher skizzenhaft zeichnen wollen, dann bleiben Sie über das gesamte Set dabei.

Wenn Sie sich für ein, zwei oder drei Farben entscheiden, dann verwenden Sie sie konsistent und immer in der gleichen Weise. Wenn Sie Perspektive oder Lichteinfall und Schattenwurf ins Spiel bringen, dann verwenden Sie immer die gleiche Perspektive und lassen das Licht stets von der gleichen Seite kommen und auf die gleiche Seite den Schatten werfen.

Das ist doch logisch, mögen Sie jetzt denken. Aber ich habe gerade eben in einem neuen Projekt die Situation vorgefunden, dass ein Icon auf einer Übersicht von sechs Icons ganz anders aussah als die anderen.

Warum hatte der Designer diesen Bruch begangen? Weil er dieses Icon für diesen Anwendungsfall eben für besonders geeignet hielt. Und er war fest davon überzeugt, dass es besser sei, dieses, aus seiner Sicht optimale, Icon selbst dann einzusetzen, wenn es zu den übrigen Symbolen nicht passte.

Ich war auf der Seite des Kunden, hatte also die Macht, seinen Entwurf abzulehnen und konnte schließlich gemeinsam mit ihm ein Icon erstellen, das besser mit den anderen harmonierte, in gewisser Weise aber tatsächlich einen Kompromiss darstellte.

Tipp #5: Arbeiten Sie auf das Pixel genau und verzichten auf Text

Gut, dieser Tipp besteht eigentlich aus zwei voneinander unabhängigen Empfehlungen. Aber beide gehören meiner Meinung nach in einen Anfänger-Ratgeber.

Text findet sich recht oft in schlechten Iconsets. Warum ist das so? Ganz einfach. Da wollte sich jemand sparen, eine gute Metapher zu finden. Sie kennen das vielleicht, wenn Sie in geselliger Runde Pictionary spielen. Eigentlich soll der zu erratende Begriff nur mit zeichnerischen Mitteln visualisiert werden. Die Versuchung des Zeichnenden, mangels guter Ideen, schlicht Text zu verwenden, ist stets mit Händen zu greifen. Fakt aber ist, dass Ihr Icon schlicht nicht gut ist, wenn Sie es nicht schaffen, auf den Einsatz von Text zu verzichten.

Icons werden immer, nicht manchmal oder meistens, nein immer auf einem pixel-genauen Grid erstellt. Dabei ist das Grid für jedes Icon des geplanten Satzes identisch dimensioniert. Das muss aber nicht bedeuten, dass Sie nun alle Icons krampfhaft auf dieses Grid hin zeichnen. Vielmehr dürfen Ihre Symbole durchaus mal im Hoch-, mal im Querformat oder sogar diagonal angeordnet, einige zudem rund sein.

Dennoch bleibt das Grid quadratisch. Der Fixpunkt der Gestaltung ist die optische Mitte Ihres Piktogramms. Die optische Mitte muss nicht mit der grafisch und mathematisch bestimmbaren Mitte des Objekts übereinstimmen. Es geht hier um das optische Empfinden.

Um für verschiedene Formen gewappnet zu sein, lassen Sie im äußeren Bereich des Grid generell einige Pixel frei. Kein Icon wird bis an die äußersten Grenzen gezeichnet, selbst dann nicht, wenn es ein quadratisches Piktogramm ist und von daher bis an die äußeren Grenzen gezeichnet werden könnte.

Linien und Formen umfassen immer ganze Pixel. Das vermeidet Unschärfen, die ansonsten leicht entstehen, wenn das Icon skaliert wird.

Fazit

Recherche, Planung und Vorbereitung sind wichtig. Das reine Zeichnen des Piktogramms ist dann lediglich der letzte Akt der Ausführung. Mehr wie das Anzünden eines Lagerfeuers für das zuvor stundenlang Holz gesammelt und aufgeschichtet wurde. Also, auf in den Wald!

Quellen zum Weiterlesen:

• 5 Killer Icon Design Tips | Creative Bloq
• 10 Styles That Have Changed the Face of Icon Design | TutsPlus
• Simplifying Icon Design | Claudia Driemeyer
• Die Erfinder der Schreibtisch-Metapher | Xerox
• How to Design a Top-Quality Icon | Creative Bloq
• 6 Easy Steps to Better Icon Design | Smashing Magazine
• Wenn Sie alles über Icon-Design lernen wollen, dann holen Sie sich das Icon Handbook.

Dieser Beitrag wurde zuerst im Juli 2020 veröffentlicht und zuletzt am 03. Januar 2023 aktualisiert.