Icons in Illustrator erstellen: So geht es

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Es mangelt sicher nicht an guten und auch kostenlosen Iconsets, die man für eigene Zwecke anpassen und einsetzen kann. Aber manchmal muss oder soll es dann doch mal etwas Eigenes und Individuelles sein. Gerade die Entwicklung 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.

iconsillustrator_teaser_DE

Zunächst einmal sollte man für die Gestaltung eine Anwendung wählen, welche möglichst flexibel ist. In Illustrator oder anderen Zeichenprogrammen gestaltete Icons sind vektorbasiert und können beliebig skaliert werden.

Raster festlegen für einheitliches Aussehen

Will man mehrere Icons gestalten oder gar ein umfangreiches Set, 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.

iconsillustrator_raster
Raster anlegen über die Voreinstellungen

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.

iconsillustrator_arbeitsflaeche
Fertiges Raster: 8 Pixel mit je vier Unterteilungen

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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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.

iconsillustrator_globalefarbe
Globale Farben anlegen

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.

iconsillustrator_iconkontur
Fertige Kontur eines Icons

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.

iconsillustrator_iconfertig
Fertiges Icon mit Flächen- und Konturfarbe sowie leicht abgerundeten Ecken

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.

iconsillustrator_grafikstile
Grafikstile festlegen und 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.

iconsillustrator_icons
Zwei fertige Icons eines Sets

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.

iconsillustrator_alle
Fertige Icons in unterschiedlichen Größen

Denis Potschien

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.