Adobe Photoshop CC

Mit Adobe Generator Grafiken für Websites erstellen

Lernen Sie, wie Sie automatisch separate, perfekt freigestellte, optimierte und transparente Grafiken aus PSD-Dateien mit mehreren Ebenen erstellen können. (Artikel: 30 Min.)

Mit Adobe Generator Grafiken für Websites erstellen

30 Min.

Dank eines neuen Workflows für Web-Designer lassen sich Bilder automatisch in Assets für Websites umwandeln.

Mit Adobe Photoshop CC können Sie ganz einfach Bild-Assets auf Basis Ihres Website-Entwurfs generieren. Darüber hinaus haben Sie die Möglichkeit, ein komplettes Adobe Edge Reflow CC-Projekt inklusive Assets, HTML und CSS auszugeben. Damit wird die Erstellung eines Responsive Layouts deutlich leichter. In diesem Tutorial erstellen Sie zunächst in Photoshop CC Ihre Assets. Danach generieren Sie ein Edge Reflow CC-Projekt als Grundlage für ein Responsive Weblayout.

Was brauche ich?

Dateien herunterladen Beispieldateien zum Üben für das Generator-Projekt (ZIP, 63 MB)

Dateien herunterladen Beispieldateien zum Üben für das Edge Reflow-Projekt (ZIP, 62 MB)

Ebenen umbenennen

Bei aktivierter Adobe Generator-Technologie kann Photoshop automatisch separate, perfekt freigestellte, optimierte und transparente Grafiken aus PSD-Dateien mit mehreren Ebenen erstellen. Mithilfe dieser integrierten Funktionalität können Sie wie gewohnt an Ihrem Entwurf weiterarbeiten, während Adobe Generator im Hintergrund die notwendigen Verarbeitungsprozesse übernimmt. Fügen Sie einfach „.jpg“ zum Ebenennamen hinzu, und Generator speichert die Ebene als JPEG-Datei (siehe Abbildung 1). Wenn Sie die Ebene bearbeiten – etwa die Farbe –, wird die Änderung umgehend auf die gespeicherte JPEG-Datei angewendet. 

Abbildung 1: Ändern Sie einfach den Namen einer Ebene in einer PSD-Datei, und Generator exportiert den Inhalt der Ebene als Asset.

Da Generator ein quelloffenes JavaScript-Plug-in ist, können Sie dieses Feature an Ihre individuellen Anforderungen anpassen.

Assets automatisch generieren

Damit Sie sich mit Generator vertraut machen können, habe ich eine Photoshop-Datei mit Ebenen erstellt (design_comp.psd), die einen typischen Webdesign-Entwurf darstellt (siehe Abbildung 2). Der Entwurf enthält Fotos, formatierten Text, Smart-Objekte und Schnittmasken. Laden Sie die Beispieldateien herunter (über den Link „Dateien herunterladen“). Falls Sie nicht die neueste Version von Adobe Photoshop CC installiert haben, laden Sie die Testversion herunter.

  1. Starten Sie Photoshop CC, und öffnen Sie die Datei „design_comp.psd“. Wählen Sie „Datei“ > „Generieren“ > „Bild-Assets“, um das Plug-in zu aktivieren. Die Option „Bild-Assets“ weist ein Häkchen auf, wenn sie aktiviert ist.

  2. Suchen Sie im Ebenen-Bedienfeld („Fenster“ > „Ebenen“) nach der Ebene „Barrels“. Doppelklicken Sie auf diese Ebene, benennen Sie sie in „Barrels.jpg“ um, und drücken Sie die Eingabetaste.

Das war schon alles. Sie haben gerade Generator verwendet.

Zur Überprüfung öffnen Sie den Ordner, in dem Sie die Datei „design_comp.psd“ gespeichert haben. Sie werden sehen, dass Photoshop im selben Verzeichnis einen neuen Ordner namens „design_comp-assets“ angelegt hat. In diesem neuen Ordner befindet sich die neue Datei „Barrels.jpg“.

Video 1 zeigt die einzelnen Schritte meines Generator-Workflows.

Video 1: In diesem Video sehen Sie verschiedene Möglichkeiten, wie Sie mit dem Asset-Generator von Photoshop CC Bilder in unterschiedlichen Größen und Auflösungen für die Verwendung in anderen Projekten ausgeben können.

Sinnvolle Ebenennamen vergeben

Wie Sie sehen, ist Generator ganz einfach zu implementieren. Ich habe jedoch einige Tipps, wie Sie das absolute Optimum aus diesem Tool ziehen. Probieren Sie diese Techniken einfach mit der bereitgestellten PSD-Datei aus.

  • Beschreibende Namen: Verwenden Sie anstelle von „Ebene 1“ und „Ebene 2“ Namen, die mehr über den Inhalt aussagen.
  • Andere Formate als JPEG: Die Ausgabe einer JPEG-Datei ist nur eine Option von vielen. Der Umbenennungs- und automatische Speicherprozess funktioniert auch mit den Erweiterungen „.gif“ oder „.png“.
  • Verkleinern: Wenn das Asset kleiner als die Originalebene sein soll, fügen Sie eine Zahl, ein Prozentzeichen und ein Leerzeichen vor den vorhandenen Namen hinzu. Wenn Sie beispielsweise die o. g. Ebene in „50% barrels.jpg“ umbenennen, wird ein JPEG-Bild generiert, das um 50 % kleiner ist als das ursprüngliche Bild.
  • Vergrößern: Das automatische Generieren von Assets, die größer als die Originalebene sind, ohne dass Qualitätsverluste entstehen, ist etwas komplizierter. Bei dieser ersten Generator-Version ist das nur mit Photoshop-Form- und -Textebenen möglich.
  • Komprimieren: Zur Generierung von komprimierten JPEG-Dateien fügen Sie eine Zahl von 1 bis 10 (ohne Leerzeichen) nach der „.jpg“-Erweiterung hinzu. Der Ebenenname „photo.jpg8“ zum Beispiel generiert eine komprimierte JPEG-Datei mit dem Namen „photo.jpg“ und einer Qualität von 80 % des Originals.
  • Transparenz: Geben Sie das PNG-Format im Ebenennamen an, um eine halbtransparente Web-Grafik zu erstellen. Falls die Grafik auf einer Ebene transparente Bereiche enthält, wird das daraus resultierende Bild ebenfalls transparent. Wenn Sie nur „.png“ hinzufügen, wählt Generator ein Format aus. Je nach Art der Grafik auf der Ebene erhalten Sie ein Asset im Format „PNG-32“, „PNG-24“ oder „PNG-8“. Wenn Sie ein ganz bestimmtes Format benötigen, fügen Sie „.png32“, „.png24“ oder „.png8“ zum Ebenennamen hinzu. Bei kleinen, einfachen Bildern, die keine Fotos sind, werden mit dem PNG-8-Format deutlich kleinere Dateien mit nur geringem Qualitätsverlust ausgegeben, die sogar halbtransparente Pixel enthalten können (was mit dem Befehl „Für Web speichern“ nicht möglich ist).
  • Transparenz simulieren: GIF-Dateien unterstützen 1-Bit-Transparenz. Die Grafik enthält eine Hintergrundfarbe, die halbtransparente Pixel simuliert. Falls die Grafik auf der Ebene transparente Bereiche hat, wird bei der Umbenennung mit „.gif“ automatisch eine transparente GIF-Datei generiert. Bei dieser ersten Generator-Version legt die Funktion für alle transparenten GIF-Dateien die Hintergrundfarbe Weiß fest.
  • Gruppieren: Um Assets aus mehreren Ebenen zu generieren, müssen Sie eine Ebenengruppe erstellen und diese Ebenengruppe umbenennen. Photoshop stellt dann alle Ebenen in einer Web-Grafik zusammen.
  • Ebenen generieren: Sie können auch aus allen Ebenen einer Schnittmaske ein Asset generieren, indem Sie die Zielebene umbenennen.
  • Bereinigen: Um ein Asset aus dem automatisch generierten Ordner zu entfernen, löschen Sie einfach die Erweiterung „.jpg“, „.png“ oder „.gif“ aus dem entsprechenden Ebenennamen.

Edge Reflow-Dokumente generieren

Ein großer Teil der Vorbereitung einer Website für die Entwicklung ist mit der Generierung von optimierten Assets erledigt, doch ist anschließend noch viel zu tun. Da ich viel Zeit für das Entwerfen von Designs und Layouts in Photoshop aufgewendet habe, möchte ich die erforderlichen Schritte zum Erstellen von Responsive Assets und die ersten Schritte des eigentlichen Webdesigns beschleunigen.

Auch hier kommt wieder Adobe Generator zum Einsatz: Die Technologie kann Photoshop-Layouts in Edge Reflow CC-Projekte übersetzen. Neben der Erstellung von bildbasierten Assets konvertiert Generator Textebenen in HTML, gruppiert Objekte und Bereiche zu DIV-Elementen, erstellt den erforderlichen CSS-Code und verpackt alles in ein editierbares Edge Reflow-Projekt.

Edge Reflow CC ist ein vollständig visuelles Tool für Responsive Webdesign. In der Mitte der Edge Reflow-Oberfläche befindet sich ein Griff, mit dem Sie das Dokumentfenster verkleinern/vergrößern und ein Layout für verschiedene Bildschirmgrößen anpassen können.

Hinweis: Damit das „Generate Reflow Project“-Plug-in in Photoshop CC verfügbar ist, müssen Sie das letzte Update von Photoshop CC aus der Creative Cloud abrufen und die neueste Version von Edge Reflow CC installieren. Eventuell müssen Sie nach der Edge Reflow CC-Installation Photoshop CC schließen und erneut öffnen, damit die Menüoption „Datei“ > „Generieren“ > „Reflow Project“ in Photoshop angezeigt wird.

Photoshop-Entwürfe in Edge Reflow bearbeiten

Nachdem Sie ein Edge Reflow-Projekt aus Photoshop generiert haben, können Sie mit den Assets die Layouts für die verschiedenen Bildschirmgrößen (bzw. Media Queries) entwerfen, die für Ihr Projekt erforderlich sind (siehe Abbildung 3). Achten Sie darauf, dass Sie die Edge Reflow-Assets so strukturieren, dass die restlichen Design-Schritte für Ihre Responsive Website möglichst reibungslos ablaufen. 

Abbildung 3: Wenn Sie den Photoshop-Entwurf in Edge Reflow korrekt strukturieren, lässt sich das Responsive Layout für jede Media Query leichter gestalten.

Responsive Layouts mit generierten Assets erstellen

Damit Sie sich mit der Erstellung von Responsive Layouts aus generierten Photoshop-Assets vertraut machen können, habe ich eine Photoshop-Datei mit Ebenen namens „responsive_comp.psd“ erstellt, die Ihnen den Einstieg in das Edge Reflow-Projekt erleichtert (Abbildung 4). Um die Schritte in diesem Tutorial nachvollziehen zu können, laden Sie die Beispieldateien herunter (über den Link „Dateien herunterladen“).

Abbildung 4: Erstellen Sie mithilfe der PSD-Beispieldatei ein Responsive Webdesign aus Photoshop-Assets.
  1. Starten Sie Photoshop CC, und öffnen Sie die Datei „responsive_comp.psd“. Wählen Sie „Datei“ > „Generieren“ > „Generate Reflow Project“. Damit werden das Edge Reflow-Projekt und die Assets im selben Ordner generiert, in dem Sie die PSD-Datei gespeichert haben.
  2. Starten Sie Edge Reflow CC, und öffnen Sie die Datei „responsive_comp.rflw“.
  3. Verwenden Edge Reflow CC, um Ihre Assets zu strukturieren und die Layouts für die verschiedenen Media Queries für Ihre Website zu definieren.

In Video 2 wird die Verwendung von generierten Photoshop-Assets in Edge Reflow CC demonstriert. Das Video zeigt die Erstellung eines Weblayouts, das sich automatisch an Bildschirmgrößen von 320 Pixel bis mehr als 1.000 Pixel anpasst.

Responsive Webdesigns optimieren

Nach der Erstellung eines Edge Reflow-Projekts aus Photoshop CC sind sicher noch einige Objekte enthalten, die Sie vor Fertigstellung des Responsive Designs bearbeiten möchten. Probieren Sie diese Techniken einfach mit der bereitgestellten PSD-Datei aus.

  • Größe: Generieren Sie die erforderlichen Bildgrößen für die unterschiedlichen Media Queries des Responsive Layouts. Legen Sie fest, welche Elemente eine feste Größe und welche eine relative Größe zum jeweiligen Container haben sollen.
  • Schriften: Ersetzen Sie fehlende Schriften mit Edge Web Fonts; der Dienst ist mit Edge Reflow CC integriert.
  • Häufige Previews: Überprüfen Sie im Bedienfeld „Elements“ die Gesamtstruktur Ihres Responsive Webdesigns. Zeigen Sie mithilfe des Griffs zur Änderung der Fenstergröße Voransichten der verschiedenen Media Queries an, und überlegen Sie, welche grundlegenden Einstellungen zur Strukturierung Ihrer Assets in den verschiedenen Layouts nötig sind.
  • Optimierung: Korrigieren Sie die Positionierung jedes Elements für die verschiedenen Media Queries.
  • Farben: Ermitteln Sie in Photoshop CC die HEX-Werte für die Farben in Ihrem Design.
  • Mobile Endgeräte: Setzen Sie Breakpoints zur Definition der Layout-Größen für verschiedene Ausgabegeräte.

Nächste Schritte

Wenn Sie mehr über Adobe Generator erfahren möchten, lesen Sie die Einführung von Photoshop-Produkt-Manager Stephen Nielson. Hier finden Sie viele hilfreiche Tipps.

Wenn Sie mit JavaScript vertraut sind und das Generator-Plug-in für Ihren Workflow anpassen möchten, gibt es ebenfalls zahlreiche Informationsquellen. Den Quell-Code von Adobe Generator finden Sie auf GitHub. Das Tutorial Script your first Adobe Generator plug-in for Photoshop von Tom Krcha und das Video Introduction to Photoshop Generator von Lee Brimelow enthalten wichtige Hinweise zur Anpassung des Plug-ins.

Einige Anwender verwenden bereits benutzerdefinierte Plug-ins, wie z. B. in Writing Generator plug-ins: Making Photoshop yours von Tim Riot beschrieben.

Im Video What is Edge Reflow CC? erhalten Sie einen allgemeinen Überblick über Adobe Edge Reflow und erfahren, wie Web-Profis mit dem Programm Responsive Webdesigns erstellen.

Und im Artikel Single page comps? des Edge Reflow-Teams lernen Sie, wie Sie mit Edge Reflow CC Entwürfe mit mehreren Seiten erstellen.

 

Ihre Meinung ist gefragt.

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.

chris-converse_83x83

Chris Converse

Chris Converse ist Designer und Entwickler bei Codify Design Studio. Seine Kenntnisse in den Bereichen Design und Entwicklung machen ihn zum Experten für Cross-Media-Projekte. Converse tritt außerdem häufig als Referent auf der Adobe MAX und der How Design-Konferenz auf und schreibt für lynda.com, Udemy.com und AdobeKnowHow.com.