Viele Designer kennen es: "Grafiken für die Entwicklung exportieren". Gerade für Android können da bis zu sechs verschiedene Auflösungen für ein Icon anfallen. Aber auch für iOS sind es mittlerweile drei Auflösungen, in denen man die Grafiken bereitstellen muss. Das Problem: Es ist eine mühselige Arbeit, die schnell viel Zeit beanspruchen kann.

Grafiken mit Hilfe bestehender Dienste exportieren

Über Scripte oder Webseiten gibt es bereits die Möglickeit, Grafiken in verschiedenen Auflösung herausrechnen zu lassen. Einen webbasierten Dienst bietet beispielweise der Generic Icon Generator. Man lädt eine SVG-Grafik hoch und kann sich ein ZIP-Archiv herunterladen, das die Grafiken in den verschiedenen Auflösungen enthält. Wir haben den Icon Generator getestet. Allerdings sind wir mit dem Ergebnis nicht ganz zufrieden. Bei den verschiedenen Endgrafiken treten unschöne Interpolationsfehler an den Rändern auf. Das zeigt sich vor allem bei Geräten mit hochauflösenden Displays. Dort kann es den Effekt haben, dass zum Beispiel Icons unscharf aussehen, obwohl sie in der richtigen Auflösung vorhanden sind. Ein weitere negativer Punkt ist das Fehlen einer Auflösung (xxxhdpi).

Beispielgrafik mit Interplationsfehler an den Rändern 

Für Photoshop gibt es ebenfalls verschiedene Wege, Grafiken zu exportieren. Entweder man arbeitet mit Slices oder seit Photoshop CC hat man auch die Möglichkeit, diese über die "Elemente extrahieren"-Funktion automatisch herauszurechnen. Das ist prima, wenn man Icons und Grafiken direkt in Photoshop erstellt. Allerdings ist unser Tool der Wahl Adobe Illustrator und deshalb stellte sich uns die Frage: Wie können wir effektiver Grafiken aus Illustrator exportieren?

Jetzt kommt Magic ins Spiel: AI-Assets für Illustrator

Als Benny bei Katharine bei einem interdisziplinären Projekt zusammen saßen, kamen sie zum Schluss "Das muss doch einfacher geh'n". Bis dato hatten wir den Workaround Illustrator - Photoshop - Illustrator .... Generell ein umständlicher Workflow. Und wie gesagt, brauchen wir eine Lösung, die ein qualitativ hochwertiges Ergebnis liefert.

Beispielgrafik ohne Interpolationsfehler

 

Benny tauschte sich daraufhin mit Roli aus und implementierte kurzer Hand ein Skript für Illustrator. Es gab ein paar Praxistests bei uns im User-Experience-Design-Team mit anschließender Feedbackschleife. Die Zitate von Katharine und Roman sprechen Bände:

Das Illustrator Skript ist wirklich der HAMMER, da es einem die lästige Arbeit abnimmt, Grafiken in allen Auflösungen manuell abzuspeichern: Einfach Speicherort auswählen, Dateinamen eingeben und schon purzeln die Grafiken in den gewünschten Formaten raus. (Katharine)

 Manchmal können ein paar Zeilen Code viel Arbeit ersparen! (Roman)

Deshalb wollen wir es euch nicht vorenthalten. Auf GitHub https://github.com/inserteffect/ai-assets steht es zum Download bereit, inklusive Bedienungsanleitung.

 

Viel Spaß damit!

Nina

Freigegeben in Blog