Icons mit Adobe Illustrator: The Elephant in the Room

Schnell und mehr als ausreichend für einen Entwurf geht es mit dem iPad und OmniGraffle für iOS (siehe hier Icons mit OmniGraffle). Aber professionell und auch bei hohem Durchsatz muss man schon mal zum Profiwerkzeug greifen: Adobe Illustrator.

Allerdings schließen sich beide Werkzeuge nicht unbedingt aus, denn ein Entwurf aus OmniGraffle lässt sich sehr gut in Illustrator weiterverwenden. Das liegt daran, dass sich jede Grafik aus OmniGraffle auch als PDF exportieren lässt.

Vorbereitung

Zubereitung

Da Illustrator keine Probleme damit hat, eine PDF zu öffnen, lassen sich alle weiteren Schritte direkt aus Illustrator erledigen. Zuvor aber muss noch geklärt werden, warum man überhaupt ein Programm wie Illustrator nutzt, statt einfach als PNG zu exportieren.

Von Pixeln und ihren Dichten

Icons sind Pixelbilder, keine Vektoren. Illustrator als Vektorgrafik-Editor ist in der Lage, die Punkte eines Vektors auf den tausendstel Millimeter genau zu positionieren. Bei Pixeln geht das nicht, denn Pixel sind Bildpunkte, also winzige leuchtende Rechtecke auf dem Monitor. Je höher die Monitorauflösung, desto dichter liegen die Pixel nebeneinander. Aber aufgrund der rechteckigen Form der Bildpunkte können keine Objekte korrekt dargestellt werden, die schräg durch mehrere Bildpunkte laufen. Das führt naturgemäß zu einer treppenartigen Darstellung, da nur diejenigen Pixel mit Farbe gefüllt werden, die zu mehr als der Hälfte von der Objektfläche belegt sind. Da dies extrem unschöne Verläufe ergibt, habe sich Computerhersteller das „Anti-Aliasing“ einfallen lassen: Pixel werden in rechteckige Sub-Pixel-Bereiche unterteilt und diese wiederum mit Farbe gefüllt – die Treppenstufen werden verkleinert. Allerdings wirken die Ränder dadurch immer noch etwas „ausgewaschen“ oder „schlierig“, was zu unscharfen Bildern führt.

Dichter und Icons

Mit dem Aufkommen der hochauflösenden Bildschirme ab der Mitte des letzten Jahrzehnts mussten auch die gerasterten Bilder – vor allem Icons – nachziehen, um nicht unscharf oder gar unleserlich zu wirken. ((Verursacht wurde dies vor allem durch die rasante Verbreitung der Smartphones und ihrem kürzeren Abstand vom Auge: von den ursprünglichen 72 Pixel pro Quadratzoll auf alten Monitoren sind wir mittlerweile bei einer Pixeldichte von 460 ppi (und höher) angekommen. Dies stellt natürlich hohe Anforderungen an die Rechenleistung der Grafikchips und damit an den Akku.)) Allerdings haben nicht alle Monitore eine Pixeldichte von 460 ppi, Tablets benötigen aufgrund des größeren Abstands zum Auge nur etwa 260 ppi. ((Je weiter das Bildschirmobjekt vom Auge entfernt ist, desto schlechter können wir die einzelnen Pixel wahrnehmen und desto „glatter“ wirkt das Anti-Aliasing. Um Computerleistung zu schonen und damit die Akku-Lebensdauer zu erhöhen, bewegen sich die Hersteller immer knapp unterhalb der durchschnittlichen Wahrnehmungsgrenze. Die unterschiedlichen Auflösungen sind also den vorhandenen technischen Möglichkeiten und Begrenzungen geschuldet.)) Für Icons bedeutet das, dass sie auch bei unterschiedlichen Pixeldichten gleichmäßig gestochen scharf und erkennbar (vor allem auch unterscheidbar) sein müssen.

Für den Grafiker besteht die Herausforderung darin, nicht nur Icons zu entwerfen, die in allen Größen (von 18×18 Pixel bis 512×512 Pixel – manchmal sogar 1024×1024 Pixel – unterscheidbar und erkennbar sind, sondern diese auch so anzulegen, dass möglichst wenige Pixel mit Anti-Aliasing „geglättet“ werden müssen. Rechteckige Formen sind in dieser Hinsicht natürlich ideal, wenn sie entlang der Pixelkanten ausgerichtet werden.

Eine sehr gute Hilfe für den Einstieg in das Icon-Design bietet Google mit seinen Vorlagen und oft auch direkt gebrauchsfertigen Icons aus dem Material-Design. (Allerdings hat Google bei der Darstellung der Icons etwas nachgeholfen, denn die dargestellen Icons ignorieren das oben beschriebene Anti-Aliasing.)

1. Illustrator starten und ein neues Dokument anlegen mit einer Arbeitsfläche von 24×24 Pixel. ((Wichtig für die Proportionierung ist das Duodezimalsystem, also Vielfache von 12, da dies die meisten Teiler besitzt. Man könnte auch 48×48 px verwenden, dies kann daber dazu führen, das die Icons überladen und damit in kleineren Darstellungsgrößen von 18×18 px nicht mehr erkennbar sind.))
2. Die Arbeitsfläche auf ein vernünftiges Maß vergrößern ([STRG]-[1] bzw. [CMD]-[1]).
3. Im Arbeitsflächenmodus ([SHIFT]-[O]) der Arbeitsfläche den Namen geben, den das Icon später haben soll.
4. In den Einstellungen das Pixelraster auf 10 px einstellen und 10 Unterteilungen wählen. Damit wird eine Art „Millimeterpapier“ eingestellt, bei dem jedes Pixel ein „Kästchen“ erhält.
5. In der Ansicht das Pixelraster einblenden.
6. „Am Pixel ausrichten“ aktivieren. Diese Einstellung beugt dem Anti-Aliasing vor.
7. Icons entwerfen. Dazu gibt es Schulungen, Kurse im Internet (beispielsweise das oben genannte Material-Design von Google), Bücher, etc. Dies kann hier nicht behandelt werden.
8. In die Pixelvoransicht umschalten und staunen: die wunderbaren Linien haben sich in kleine Kästchen mit unterschiedlichen Schattierungen verwandelt. Das liegt allerdings an der Vergrößerung der Arbeitsfläche in Illustrator.
9. Falls Schriftfonts (z.B. Buchstaben oder Ziffern oder Satzzeichen) verwendet wurden, diese Objekte duplizieren, die Originale ausblenden und die Duplikate in Umrisslinien umwandeln.
10. Die Bildobjekte ggf. am Bildraster ausrichten. (Vor allem Schriften sollten hier sorgfältig nachgearbeitet werden.)
11. Speichern als Illustrator-Datei.

Anrichten

Gute Zutaten, ein gutes Rezept und eine sorgfältige Zubereitung: Da kann eigentlich nichts mehr schiefgehen, oder?

1. „Für Bildschirme exportieren“ wählen. An dieser Stelle hat sich bei Illustrator sehr viel getan, denn der Export für unterschiedliche Pixeldichten oder Bildschirmauflösungen lässt sich in einem Durchgang erledigen.
2. Bei mehreren Arbeitsflächen diejenigen wählen, die exportiert werden sollen. Hier kommt die sorgfältige Benennung der Arbeitsflächen zum Tragen.
3. Den Zielordner wählen und „Unterordner anlegen“ („Create Sub-folders“) aktivieren. Für jede Icon-Größe legt Illustrator einen eigenen Ordner unterhalb des Zielordners an. Darüber freuen sich besonders die Entwickler, die die Icons verarbeiten sollen.
4. Dateigrößen hinzufügen. Hier zahlt sich die Größe der Arbeitsfläche von 24×24 px aus, denn sie lässt sich prima skalieren. (Im Beispiel oben werden die Icons in den folgenden Zielgrößen als PNG ausgegeben: 12×12, 18×18, 24×24 und 48×48.) Bei Icons, die für eine App verwendet werden – also nicht für Funktionen innerhalb der App -, werden andere Größen notwendig.
5. Exportieren und gut. Illustrator rechnet die Vektoren der Orignalgrafik passend auf die Zielgrößen um.

Wars das?

Ja, das wars. Man muss nur darauf achten, dass die fertigen Icons nicht mehr nachträglich skaliert oder umgefärbt werden. Bei Änderungen müssen immer die Originale angepasst werden. Zum Glück sind die Exporteinstellungen in Illustrator gespeichert, so dass die erneute Ausgabe sehr zügig vonstatten geht.

Viel Spaß!