Icons mit Adobe Illustrator: The Elephant in the Room

Schnell und mehr als aus­rei­chend für einen Ent­wurf geht es mit dem iPad und Omni­Graff­le für iOS (sie­he hier Icons mit Omni­Graff­le). Aber pro­fes­sio­nell und auch bei hohem Durch­satz muss man schon mal zum Pro­fi­werk­zeug grei­fen: Ado­be Illus­tra­tor.

Aller­dings schlie­ßen sich bei­de Werk­zeu­ge nicht unbe­dingt aus, denn ein Ent­wurf aus Omni­Graff­le lässt sich sehr gut in Illus­tra­tor wei­ter­ver­wen­den. Das liegt dar­an, dass sich jede Gra­fik aus Omni­Graff­le auch als PDF expor­tie­ren lässt.

Vor­be­rei­tung

Zube­rei­tung

Da Illus­tra­tor kei­ne Pro­ble­me damit hat, eine PDF zu öff­nen, las­sen sich alle wei­te­ren Schrit­te direkt aus Illus­tra­tor erle­di­gen. Zuvor aber muss noch geklärt wer­den, war­um man über­haupt ein Pro­gramm wie Illus­tra­tor nutzt, statt ein­fach als PNG zu expor­tie­ren.

Von Pixeln und ihren Dich­ten

Icons sind Pixel­bil­der, kei­ne Vek­to­ren. Illus­tra­tor als Vek­tor­gra­fik-Edi­tor ist in der Lage, die Punk­te eines Vek­tors auf den tau­sends­tel Mil­li­me­ter genau zu posi­tio­nie­ren. Bei Pixeln geht das nicht, denn Pixel sind Bild­punk­te, also win­zi­ge leuch­ten­de Recht­ecke auf dem Moni­tor. Je höher die Moni­tor­auf­lö­sung, des­to dich­ter lie­gen die Pixel neben­ein­an­der. Aber auf­grund der recht­ecki­gen Form der Bild­punk­te kön­nen kei­ne Objek­te kor­rekt dar­ge­stellt wer­den, die schräg durch meh­re­re Bild­punk­te lau­fen. Das führt natur­ge­mäß zu einer trep­pen­ar­ti­gen Dar­stel­lung, da nur die­je­ni­gen Pixel mit Far­be gefüllt wer­den, die zu mehr als der Hälf­te von der Objekt­flä­che belegt sind. Da dies extrem unschö­ne Ver­läu­fe ergibt, habe sich Com­pu­ter­her­stel­ler das „Anti-Ali­a­sing“ ein­fal­len las­sen: Pixel wer­den in recht­ecki­ge Sub-Pixel-Berei­che unter­teilt und die­se wie­der­um mit Far­be gefüllt – die Trep­pen­stu­fen wer­den ver­klei­nert. Aller­dings wir­ken die Rän­der dadurch immer noch etwas „aus­ge­wa­schen“ oder „schlie­rig“, was zu unschar­fen Bil­dern führt.

Dich­ter und Icons

Mit dem Auf­kom­men der hoch­auf­lö­sen­den Bild­schir­me ab der Mit­te des letz­ten Jahr­zehnts muss­ten auch die geras­ter­ten Bil­der – vor allem Icons – nach­zie­hen, um nicht unscharf oder gar unle­ser­lich zu wir­ken.¹ Aller­dings haben nicht alle Moni­to­re eine Pixel­dich­te von 460 ppi, Tablets benö­ti­gen auf­grund des grö­ße­ren Abstands zum Auge nur etwa 260 ppi.² Für Icons bedeu­tet das, dass sie auch bei unter­schied­li­chen Pixel­dich­ten gleich­mä­ßig gesto­chen scharf und erkenn­bar (vor allem auch unter­scheid­bar) sein müs­sen.

Für den Gra­fi­ker besteht die Her­aus­for­de­rung dar­in, nicht nur Icons zu ent­wer­fen, die in allen Grö­ßen (von 18x18 Pixel bis 512x512 Pixel – manch­mal sogar 1024x1024 Pixel – unter­scheid­bar und erkenn­bar sind, son­dern die­se auch so anzu­le­gen, dass mög­lichst weni­ge Pixel mit Anti-Ali­a­sing „geglät­tet“ wer­den müs­sen. Recht­ecki­ge For­men sind in die­ser Hin­sicht natür­lich ide­al, wenn sie ent­lang der Pixel­kan­ten aus­ge­rich­tet wer­den.

Eine sehr gute Hil­fe für den Ein­stieg in das Icon-Design bie­tet Goog­le mit sei­nen Vor­la­gen und oft auch direkt gebrauchs­fer­ti­gen Icons aus dem Mate­ri­al-Design. (Aller­dings hat Goog­le bei der Dar­stel­lung der Icons etwas nach­ge­hol­fen, denn die dar­ge­stel­len Icons igno­rie­ren das oben beschrie­be­ne Anti-Ali­a­sing.)

1. Illus­tra­tor star­ten und ein neu­es Doku­ment anle­gen mit einer Arbeits­flä­che von 24x24 Pixel.³
2. Die Arbeits­flä­che auf ein ver­nünf­ti­ges Maß ver­grö­ßern ([STRG]-[1] bzw. [CMD]-[1]).
3. Im Arbeits­flä­chen­mo­dus ([SHIFT]-[O]) der Arbeits­flä­che den Namen geben, den das Icon spä­ter haben soll.
4. In den Ein­stel­lun­gen das Pixel­ras­ter auf 10 px ein­stel­len und 10 Unter­tei­lun­gen wäh­len. Damit wird eine Art „Mil­li­me­ter­pa­pier“ ein­ge­stellt, bei dem jedes Pixel ein „Käst­chen“ erhält.
5. In der Ansicht das Pixel­ras­ter ein­blen­den.
6. „Am Pixel aus­rich­ten“ akti­vie­ren. Die­se Ein­stel­lung beugt dem Anti-Ali­a­sing vor.
7. Icons ent­wer­fen. Dazu gibt es Schu­lun­gen, Kur­se im Inter­net (bei­spiels­wei­se das oben genann­te Mate­ri­al-Design von Goog­le), Bücher, etc. Dies kann hier nicht behan­delt wer­den.
8. In die Pixel­vor­an­sicht umschal­ten und stau­nen: die wun­der­ba­ren Lini­en haben sich in klei­ne Käst­chen mit unter­schied­li­chen Schat­tie­run­gen ver­wan­delt. Das liegt aller­dings an der Ver­grö­ße­rung der Arbeits­flä­che in Illus­tra­tor.
9. Falls Schrift­fonts (z.B. Buch­sta­ben oder Zif­fern oder Satz­zei­chen) ver­wen­det wur­den, die­se Objek­te dupli­zie­ren, die Ori­gi­na­le aus­blen­den und die Dupli­ka­te in Umriss­li­ni­en umwan­deln.
10. Die Bild­ob­jek­te ggf. am Bild­ras­ter aus­rich­ten. (Vor allem Schrif­ten soll­ten hier sorg­fäl­tig nach­ge­ar­bei­tet wer­den.)
11. Spei­chern als Illus­tra­tor-Datei.

Anrich­ten

Gute Zuta­ten, ein gutes Rezept und eine sorg­fäl­ti­ge Zube­rei­tung: Da kann eigent­lich nichts mehr schief­ge­hen, oder?

1. „Für Bild­schir­me expor­tie­ren“ wäh­len. An die­ser Stel­le hat sich bei Illus­tra­tor sehr viel getan, denn der Export für unter­schied­li­che Pixel­dich­ten oder Bild­schirm­auf­lö­sun­gen lässt sich in einem Durch­gang erle­di­gen.
2. Bei meh­re­ren Arbeits­flä­chen die­je­ni­gen wäh­len, die expor­tiert wer­den sol­len. Hier kommt die sorg­fäl­ti­ge Benen­nung der Arbeits­flä­chen zum Tra­gen.
3. Den Ziel­ord­ner wäh­len und „Unter­ord­ner anle­gen“ („Crea­te Sub-fol­ders“) akti­vie­ren. Für jede Icon-Grö­ße legt Illus­tra­tor einen eige­nen Ord­ner unter­halb des Ziel­ord­ners an. Dar­über freu­en sich beson­ders die Ent­wick­ler, die die Icons ver­ar­bei­ten sol­len.
4. Datei­grö­ßen hin­zu­fü­gen. Hier zahlt sich die Grö­ße der Arbeits­flä­che von 24x24 px aus, denn sie lässt sich pri­ma ska­lie­ren. (Im Bei­spiel oben wer­den die Icons in den fol­gen­den Ziel­grö­ßen als PNG aus­ge­ge­ben: 12x12, 18x18, 24x24 und 48x48.) Bei Icons, die für eine App ver­wen­det wer­den – also nicht für Funk­tio­nen inner­halb der App -, wer­den ande­re Grö­ßen not­wen­dig.
5. Expor­tie­ren und gut. Illus­tra­tor rech­net die Vek­to­ren der Ori­gnal­gra­fik pas­send auf die Ziel­grö­ßen um.

Wars das?

Ja, das wars. Man muss nur dar­auf ach­ten, dass die fer­ti­gen Icons nicht mehr nach­träg­lich ska­liert oder umge­färbt wer­den. Bei Ände­run­gen müs­sen immer die Ori­gi­na­le ange­passt wer­den. Zum Glück sind die Export­ein­stel­lun­gen in Illus­tra­tor gespei­chert, so dass die erneu­te Aus­ga­be sehr zügig von­stat­ten geht.

Viel Spaß!

---

1. Ver­ur­sacht wur­de dies vor allem durch die rasan­te Ver­brei­tung der Smart­phones und ihrem kür­ze­ren Abstand vom Auge: von den ursprüng­li­chen 72 Pixel pro Qua­drat­zoll auf alten Moni­to­ren sind wir mitt­ler­wei­le bei einer Pixel­dich­te von 460 ppi (und höher) ange­kom­men. Dies stellt natür­lich hohe Anfor­de­run­gen an die Rechen­leis­tung der Gra­fik­chips und damit an den Akku. ↩

2. Je wei­ter das Bild­schirm­ob­jekt vom Auge ent­fernt ist, des­to schlech­ter kön­nen wir die ein­zel­nen Pixel wahr­neh­men und des­to „glat­ter“ wirkt das Anti-Ali­a­sing. Um Com­pu­ter­leis­tung zu scho­nen und damit die Akku-Lebens­dau­er zu erhö­hen, bewe­gen sich die Her­stel­ler immer knapp unter­halb der durch­schnitt­li­chen Wahr­neh­mungs­gren­ze. Die unter­schied­li­chen Auf­lö­sun­gen sind also den vor­han­de­nen tech­ni­schen Mög­lich­kei­ten und Begren­zun­gen geschul­det. ↩

3. Wich­tig für die Pro­por­tio­nie­rung ist das Duo­de­zi­mal­sys­tem, also Viel­fa­che von 12, da dies die meis­ten Tei­ler besitzt. Man könn­te auch 48x48 px ver­wen­den, dies kann daber dazu füh­ren, das die Icons über­la­den und damit in klei­ne­ren Dar­stel­lungs­grö­ßen von 18x18 px nicht mehr erkenn­bar sind. ↩