Illustrator-Dateien für das Web und Mobilgeräte wie Smartphones und Tablets exportieren

von Monika Gause

Illustrator-Dateien für das Web und Mobilgeräte wie Smartphones und Tablets exportieren

Wie andere Grafik- oder Bildbearbeitungsprogramme wird auch Illustrator dazu verwendet, Layouts und Grafik für Web-Seiten, Interfaces für Bildschirmmedien oder E-Mail-Newsletter zu gestalten. Das Problem dabei ist jedoch, diese Layouts anschließend in den betreffenden Auszeichnungssprachen (also etwa HTML für das Web) umzusetzen. Zu diesem Zweck konnte man bis vor Kurzem noch den Befehl »Für Web speichern« verwenden.

Inzwischen ist der von dieser Funktion generierte Code nicht mehr nur einfach veraltet, sondern hoffnungslos veraltet. Entsprechend ist es seit Illustrator CS6 auch nicht mehr möglich, HTML-Code damit zu exportieren (es sei denn, man wendet einen kleinen Trick an).

Für Web speichern sollte in modernen Workflows lediglich verwendet werden, um die Grafiken für das Layout zu exportieren – und selbst für diesen Zweck ist es nicht immer geeignet.

CSS-Eigenschaften-Bedienfeld

Mit dem CSS-Eigenschaften-Bedienfeld können Sie die Füll- und Konturfarben, Konturstärken, Effekte sowie etliche andere Attribute von Objekten als CSS-Stile exportieren. Diese Möglichkeit ist vor allem dafür gedacht, die Zusammenarbeit mit Web-Entwicklern zu verbessern.

Sie müssen dann nicht mehr mühsam jede einzelne Eigenschaft aus einer AI-Datei manuell in CSS übertragen. Zwar können auf diesem Weg auch Positionierungen der Objekte in das CSS exportiert werden. Jedoch ist der generierte Code für aktuelle Anforderungen an die Codierung von Webseiten nicht geeignet.

Darüber hinaus können Sie auf diese Art nicht die HTML-Datei erstellen – sie muss separat geschrieben werden. Einen Beitrag zur Anwendung des CSS-Eigenschaften-Bedienfelds finden Sie unter http://creative-aktuell.de/de/item-details-illustrator-aktuell/item/neue-webdesign-workflows-mit-illustrator-cc.html.

Bild: Die Eigenschaften benannter Objekte und als Format gespeicherter Textformatierungen können mit dem CSS-Eigenschaften-Bedienfeld als CSS gespeichert werden.

 

AI2HTML-Skript

Das Skript – entwickelt von der New York Timesdient vor allem dazu, Infografik zu exportieren. Es werden also keine kompletten Web-Seiten gebaut, sondern lediglich Grafikelemente, die jedoch einen erheblichen Anteil an Text enthalten können. Die Grafik mitsamt Text als Bild zu exportieren, wäre nicht sehr benutzerfreundlich oder gar zugänglich. An dieser Stelle kommt das Skript ins Spiel und exportiert Texte als Text, die per CSS an der korrekten Stelle positioniert werden.

Genau zu diesem Zweck ist das Skript sehr gut geeignet. Eine komplette Seite kann man damit natürlich ebenfalls exportieren. Der Code entspricht jedoch nicht den Anforderungen, die an moderne Web-Seiten gestellt werden.

Beim Einstellen der Optionen geht das Skript einen ungewöhnlichen Weg: Es verwendet Textobjekte, die außerhalb der zu exportierenden Zeichenfläche liegen müssen. Die erste Zeile dieser Textblöcke beginnt jeweils mit ai2html- gefolgt von z.B. dem Schlüsselwort settings, das dem Skript signalisiert, dass dieses Textobjekt die Voreinstellungen enthält. Wenn Sie das Skript zum ersten Mal in einer Datei anwenden, generiert es selbst ein solches Textobjekt.

Bild: Illustrator-Datei mit AI2HTML-Settings-Textobjekt nach dem Export einer HTML-Datei

Die Namen von Zeichenflächen, Ebenen oder Objekten werden als Namen für IDs und Klassen des generierten HTML-Codes übernommen. Das Skript und die Dokumentation finden Sie unter http://ai2html.org/ sowie bei Github.

Bild: Ausgabe einer Illustrator-Datei im Browser – die Konvertierung von Sonderzeichen klappt leider nicht.

PSD-Export und Extraktion über die Creative Cloud

Für PSD-Dateien (Photoshop-Dateien) gibt es weitere Möglichkeiten der automatischen Extraktion – eine davon sogar in der Creative Cloud.

1. Um diese Möglichkeit zu nutzen, exportieren Sie Ihre AI-Datei als PSD mit maximaler Bearbeitbarkeit.

2. Diese Datei laden Sie in Ihren Creative-Cloud-Ordner, damit sie mit Ihrem Creative-Cloud-Konto synchronisiert wird.

3. Loggen Sie sich dann in http://creative.adobe.com ein, gehen Sie in den Ordner mit Ihren Dateien und rufen Sie die PSD-Datei auf. Sie gelangen direkt in das Export-Modul.

Dieser Weg funktioniert nur dann gut, wenn die Grafik sinnvoll auf einzelne Ebenen aufgeteilt ist, d.h. etwa, dass Elemente, die zu einem einzelnen Button gehören, auf einer eigenen Ebene liegen.

Bild: Eine PSD-Datei im Extract-Modul der Creative Cloud

Braucht man eine eigene CC-Mitgliedschaft?

Sie können die PSD-Datei in Ihrem Creative-Cloud-Konto freigeben, damit ein Web-Entwickler, der selbst kein CC-Abonnement abgeschlossen hat, dieses Modul benutzen kann. Gehen Sie dazu im Extrahieren-Bereich rechts oben auf Freigeben und wählen Sie Link senden aus.

Das Plug-in »AI-→Canvas«

Für den Export in das HTML5-Canvas-Element können Sie das Plug-in »Ai-→Canvas« verwenden. Es ist kostenlos und beruht auf einer sehr spezifischen Benennung der Ebenen. Das kostenlose Plug-in sowie die Dokumentation finden Sie unter http://blog.mikeswanson.com/ai2canvas. Es gibt Versionen für Illustrator CS3 bis CC(2014). In »Illustrator Service« Ausgabe 13 haben wir dieses Plug-in detaillierter besprochen.

Ebenen-Export

Für den Export einzelner Ebenen gibt es diverse Skripte und Plug-ins. Anders als für die Funktion Für Web speichern benötigen Sie keine Slices, das Aufteilen der Grafiken auf Ebenen reicht aus. Teilweise müssen Sie wie bei der Verwendung des Plug-ins Ai-→Canvas auch hier die Ebenen mit spezifischen Namen versehen, um die Funktionen zu steuern.

Das Plug-in »Layer Exporter« ist auch in der Lage, eine zugehörige HTML-Datei zu schreiben. Für diese HTML-Datei gilt wie für alle anderen HTML-Exporte aus Illustrator, dass ihr Nutzen als Web-Seite begrenzt ist.

Den Download und die Dokumentation finden Sie unter: http://www.dehats.com/illustrator-layer-exporter/ für das Plug-in sowie z.B. http://www.tbyrne.org/export-illustrator-layers-to-svg-files für eines der Export-Skripte.

Bild: Das Bedienfeld des Plug-ins Layer Exporter finden Sie nach der Installation unter Fenster → Erweiterungen → Layer Exporter.

Das Plug-in »SVG-NOW«

Für den Export in das Dateiformat SVG können Sie in Illustrator Speichern unter verwenden. Wenn Sie die Datei weiter optimieren möchten, indem Meta-Informationen, ubsichtbare oder redundante Elemente gelöscht werden, probieren Sie das Plug-in SVG-NOW aus: https://github.com/davidderaedt/SVG-NOW. Das SVG-NOW-Bedienfeld stellt etliche Optionen zur Verfügung.

Sie können sich die Auswirkungen aller Optionen live an einem Beispiel ansehen: https://jakearchibald.github.io/svgomg/.

Bild: Optionen von SVG-NOW

 

HTML über »Für Web speichern« exportieren

Wenn Sie unbedingt das von Illustrator generierte HTML exportieren möchten, dann klicken Sie im Für Web speichern-Dialog auf den Button Vorschau. Es öffnet sich darauf die Datei in einem Browserfenster. Mit den Funktionen Ihres Browsers zeigen Sie den Quelltext an und kopieren oder speichern ihn.

Zurück

Jetzt Creative aktuell gratis testen!