Der automatische Asset-Generator

Sven Fischer Wird eine Website konzipiert, steht traditionell am Ende der Planungsphase meist ein so genanntes Mockup oder Wireframe. Dieses wird dann gestalterisch oft mithilfe von Photoshop umgesetzt, sodass ein visueller Entwurf vorliegt, den der Kunde absegnen kann. Erst danach erfolgt in einem klassischen Web-Workflow die Programmierung, also die Umsetzung des Entwurfs in HTML, CSS und JavaScript.

Der moderne Workflow hinge­gen folgt anderen Prämissen, die Anforderungen haben sich durch die mobile Internetnutzung massiv verändert. So betrachten Besucher heutzutage eine Webseite mithilfe einer Vielzahl unterschiedlicher Displays. Das erfordert flexible Designs, das Stichwort lautet Responsive Layout, ein Webdesign, das sich an verschiedenste Displaygrössen anpassen kann.

Das erfordert in der Vorbereitung allerdings auch eine sehr viel grössere Menge an Bilddaten (Assets), da diese meist in verschiedenen Grössen vorliegen müssen, um auch auf hochauflösenden Displays in guter Qualität darstellbar zu sein. Der Aufwand in der Bereitstellung dieser Assets steigt dementsprechend deutlich an.

Da im klassischen Workflow flexible Designs kaum abbildbar sind, erfolgt heute der Prozess von Gestaltung und Entwicklung oft parallel, was hohe Anforderungen an die Flexibilität stellt, da häufige Korrekturen und Änderungen an der Tagesordnung sind. Der Aufwand hinsichtlich der Bereitstellung und ständigen Aktualisierung der Assets würde in diesem Fall exponentiell steigen.

Generieren von Assets

An diesem Punkt kommt nun Adobe Photoshop mit seinem Generator zum Einsatz. Diese Technologie steht in Photoshop CC seit der Version 14.1 zur Verfügung. Es handelt sich dabei um ein JavaScript-Modul, dessen Aufgabe es ist, in einem Webdesign automatisch die für die Programmierung erforderlichen Assets zu erstellen und aktuell zu halten.

Das Layout der Webseite wird in Photoshop entwickelt und einzelne Elemente wie Buttons, Menüs, Bilder und grafische Objekte, die in der HTML-Webseite verwendet werden sollen, werden im Hintergrund automatisch erzeugt und bei Änderungen aktualisiert.

Der Generator muss dazu jedoch erst angeworfen werden. Das erfolgt in zwei Schritten. Zunächst muss man in den Voreinstellungen unter Zusatzmodule den Generator aktivieren. Im nächsten Schritt setzt man im Menü Datei > Generieren das Häkchen bei Bild-Assets. Ab jetzt arbeitet der Generator im Hintergrund. Dieser zweite Schritt ist im Übrigen dateiabhängig, muss also für jede Bilddatei individuell aktiviert werden.

Musste man früher mühselig einzelne Ebenen kopieren, separat abspeichern oder auch slicen (in Einzelteile aufteilen), genügt es nun, hinter den Namen einer Ebene die Dateiendung des gewünschten Ausgabeformats zu schreiben.

Anhand einer Adobe-Beispiel-datei möchte ich dies verdeutlichen. Im Layoutentwurf, einer PSD-Datei mit einer Vielzahl von Ebenen, gibt es beispielsweise eine Ebene namens «barrels». Füge ich nun nach Doppelklick auf den Ebenennamen ein «.jpg» an diesen an, erstellt Photoshop automatisch im gleichen Ordner, in dem die PSD-Datei liegt, einen Unterordner «Bildname-assets» und in diesem ­wiederum liegt nun die Datei «barrels.jpg». Bequemer und einfacher geht es nicht.

In diesem Workflow macht es natürlich Sinn, den Ebenen, anstelle der Standardbezeichnungen Ebene 1, Ebene 2 usw., sinnvolle Namen zu geben, da diese die Basis für die Dateinamen der Assets sind. Die möglichen Dateiformate für den Assets-Export beschränken sich auf die Standardformate für Webanwendungen, also JPG, GIF und PNG.

Variationen

Über Namenszusätze kann man den Export der Assets verfeinern. Soll beispielsweise die Ebene «barrels.jpg» nur in 75% der aktuellen Grösse exportiert werden, setzt man vor den Namen «75%», also «75% barrels.jpg». Man kann auch eine Zahl für die gewünschte Breite in Pixeln hinzufügen. Wichtig: Leerzeichen nach Zahl oder Prozentzeichen nicht vergessen.

Vergrösserungen sind problemlos möglich, wenn es sich bei der fraglichen Ebene um eine Form- oder Text­ebene handelt. In diesem Fall haben wir es ja mit auflösungsunabhängigen Vektorinformationen zu tun, die eine Vergrösserung problemlos ermöglichen. Doch auch Vergrösserungen von Pixelebenen lassen sich inzwischen generieren, da die Algorithmen zur Interpolation in Photoshop qualitativ erheblich verbessert wurden. Werden Assets in mehreren Auflösungen benötigt, ist auch dies mithilfe von Generator automatisierbar. Eine Ebenenbezeichnung wie etwa «200% bild_01-retina.png, bild_01.png» er­zeugt aus einer Ebene zwei Assets, eines in Originalgrösse und eines in doppelter Grösse für hochauflösende Displays. Ein wichtiges Detail ist dabei das trennende Komma.

Die Qualitätsstufen bei JPG-Dateien werden über Zahlen gesteuert, die direkt an die Dateiendung angefügt werden. So erzeugt beispielsweise der Ebenenname «barrels.jpg6» eine JPG-Datei in 60% der Originalqualität. Zulässig sind Zahlenwerte von 1 bis 10.

Im Gegensatz zu JPG-Dateien können PNG-Dateien transparente Bereiche enthalten. Die Datentiefe der PNG-Dateien wird beim Generator-­Export durch den Zusatz «png8», «png24» oder «png32» gesteuert. Realistisch gesehen bleibt hier nur die Option «png8», da PNG-Dateien mit 24 oder gar 32 Bit für Webanwendungen viel zu gross sind und zu lange Ladezeiten mit sich bringen würden. Verwendet man keinen Zusatz, also nur «png», entscheidet der Generator selbst. Enthält die Ebene dann transparente Bereiche wird er in den meisten Fällen PNG-24 bevorzugen. Daher macht es Sinn, grundsätzlich ein «.png8» an den Ebenennamen anzuhängen, um zu grosse Datenmengen zu vermeiden.

Auch GIF-Dateien unterstützen transparente Bildbereiche, allerdings nur mit einer Datentiefe von 8 Bit, also maximal 256 Farben. Dabei wird ein Farbfeld als transparent festgelegt. Enthält eine Ebene, die als GIF exportiert werden soll, transparente Bereiche, erzeugt Generator automatisch ein transparentes GIF.

Eine elegante Möglichkeit, neue Assets zu generieren, ohne die Struktur einer PSD-Datei durcheinander zu bringen, besteht darin, mehrere Ebenen zu einer Gruppe zusammenzufassen. Wird nun die Gruppe nach Generator-Regeln benannt (z.B. «Gruppe.png8»), erzeugt Generator ein PNG, welches die Zusammenfassung aller Ebenen der Gruppe darstellt.

Generator erzeugt die Assets im Übrigen aus allen Ebenen, egal ob es sich um Pixel-, Text- Form- oder auch Smartfilter-Ebenen handelt. Um ein Asset wieder aus dem automatisch generierten Ordner «Bildname-assets» zu löschen, genügt es, den Namenszusatz der Ebene zu entfernen.

Verbindung mit Edge Reflow

Seit kurzem hat der Generator eine weitere Funktion erhalten, die es ermöglicht, ein PSD-Layout an Adobe Edge Reflow CC weiterzugeben. Edge Reflow ist ein Programm zur Erstellung responsiver Webseiten. Es arbeitet rein visuell, der Code wird automatisch erzeugt.

Will man responsive Weblayouts entwickeln, sind viele Tests notwendig, die auch mit häufigen Änderungen verbunden sind. Die Tests hinsichtlich Funktionalität und responsivem Verhalten erfolgen meist anhand von Proto­typen, die sich in der Kombination Photoshop–Generator–Edge Reflow nun relativ schnell erstellen lassen.

Hat man in Photoshop den ­Generator in den Voreinstellungen aktiviert, kann der Anwender im Menü Datei>Generieren nicht nur Bild-­Assets erstellen lassen, sondern auch ein Edge-Reflow-Projekt. Dies erstellt einen Ordner am Speicherort der Photoshop-Datei, in dem Photoshop das Weblayout als Edge-Reflow-Datei speichert. Dabei werden Textebenen in HTML konvertiert, Objekte und Bereiche zu DIV-Containern gruppiert und der erforderliche CSS-Code erstellt.

Die Reflow-Projektdatei kann man anschliessend in Edge Reflow importieren und dort die Einstellungen hinsichtlich des responsiven Verhaltens vornehmen. Alle nötigen Assets hat Photoshop anhand der Ebenen­bezeichnungen ebenfalls abgespeichert. Die PSD-Datei muss dazu parallel zur Arbeit in Edge Reflow auch in Photoshop geöffnet sein.

Mittels so genannter Breakpoints werden Displaybreiten bestimmt, was den sonst üblichen Media Queries entspricht. Für jeden Breakpoint kann man dann das Layout per Drag & Drop festlegen. Durch Verschieben der Fensterbreite lässt sich das Ganze relativ einfach testen.

Das ist für einfache Layouts sicherlich ein nützlicher Weg, erfordert aber immer noch einige Handarbeit in Edge Reflow. Bei komplexeren Layouts stösst man allerdings schnell an die Grenzen. Das Handling in Reflow ist zwar grundsätzlich intuitiv, aber typische Arbeitsschritte, wie etwa das Anklicken und Verschieben von Elementen, sind manchmal etwas umständlich.

Ein gut funktionierendes responsives Layout kommt nur dann heraus, wenn das Photoshop-Layout gut durchdacht ist, was natürlich auch einige Erfahrung voraussetzt. Um die Einstellungen und Menüs in Edge Reflow zu verstehen und gezielt einsetzen zu können, sind zudem grundlegende Kenntnisse in CSS3 nötig.

Erweiterungen

Photoshop Generator basiert auf dem Node.js-Framework, einer beliebten Plattform zur Entwicklung von Netzwerkapplikationen. Node.js baut auf der JavaScript Runtime von Googles Chrome-Browser auf.

Dadurch lassen sich mithilfe von JavaScript Erweiterungen zu Generator entwickeln. Der Source-Code zu Generator und bereits vorhandenen Panels steht auf Github zum freien Download zur Verfügung (bit.ly/ps-github).

Fazit

Heutige Web-Workflows verlaufen nicht mehr linear. Meist wird parallel an Design und Code gearbeitet. Zudem sind die Anforderungen an Flexibilität und Aktualität der Bild-Assets enorm gestiegen. In diesem Prozess stellt Photoshop Generator eine grosse Arbeitserleichterung dar, da sich die Generierung von Assets ohne grossen Aufwand automatisieren und aktuell halten lässt. Für Webdesigner ist er somit eine unverzichtbare Hilfe. Die Kombination mit Edge Reflow ist zwar reizvoll, aber nur von Anwendern mit CSS3-Kenntnissen wirklich für reale Projekte nutzbar.