Live-Dateiexport (Bild-Assets) mit dem Photoshop CC Generator
Von Jonas In diesem Beitrag erfahrt ihr, wie der Echtzeit-Bildexport von Photoshop CC funktioniert und welche Vorteile er für Web Designer bietet.
Als Webdesigner hat man u. a. die Aufgabe die verschiedenen Elemente innerhalb eines Photoshop-Dokuments auszuwählen und im passenden Dateiformat zu exportieren. In jüngerer Vergangenheit wurde dieser Job zunehmend lästig, da der Workflow nicht mehr linear verläuft und neue Herausforderungen wie Retina-Optimierung & Co. den Aufwand erhöht haben. Mit den Bild-Assets in Photoshop CC (14.1) hat Adobe daher eine enorm hilfreiche Funktion für Web Designer integriert.
Inhalte
Die Bild-Assets (Image-Assets) in Photoshop CC im Überblick
Die Bild-Assets basieren auf einer neuen Technologie namens Adobe Generator, die mit Photoshop CC 14.1 eingeführt wurde. Wenn die Bild-Assets aktiviert sind, erzeugt Photoshop automatisch einen Ordner am Speicherplatz der Photoshop-Datei, bzw. auf dem Desktop wenn das Dokument ungespeichert ist.
In diesen Ordner exportiert Photoshop dann automatisch den Inhalt bestimmter Ebenen und aktualisiert die Bild-Dateien, sobald innerhalb der Bildbearbeitung eine Änderung stattgefunden hat. Damit der Echtzeit-Export funktioniert, müssen die Ebenen allerdings einer festgelegten Namensgebung folgen.
Bild-Dateien in Echtzeit generieren lassen
Um Bild-Assets zu verwenden, aktiviert zunächst die entsprechende Photoshop-Funktion unter „Datei → generieren → Bild-Assets“. Die Funktion ist bei neuen Dokumenten ausgeschaltet.
Wenn ihr den Generator vollständig deaktivieren möchtet, schaltet unter „Photoshop → Voreinstellungen → Zusatzmodule → Generator“ die Checkbox aus.
Beliebige Dateinamen, .jpg-. png- und .gif-Export aller Qualitätsstufen sowie Retina-Optimierung
Damit Photoshop arbeiten kann, müsst ihr nun die Ebenen vernünftig benennen. Sobald das Programm mindestens eine Ebene anhand einer Reihe von vorgegebenen Schlüsselbezeichnungen erkennt, erstellt Photoshop einen neuen Ordner und legt die Ebenen als exportiere Datei darin ab. Ändert ihr den Inhalt der Ebene wird diese Datei aktualisiert.
Standard-Export mit Dateinamen und Dateiendung
Die einfachste Variante beinhaltet lediglich den gewünschten Dateinamen, sowie die Dateiendung. Wenn ihr mehrere Ebenen in einem Ordner zusammengefasst habt, könnt ihr auch dem Ordner einen entsprechenden Namen geben. Photoshop exportiert dann alle enthaltenen Ebenen in eine Datei.
beispieldatei.jpg- Erzeugt eine JPG-Datei mit dem Namen „beispieldatei“ und 80% Qualität.
beispieldatei.png- Erzeugt eine PNG32-Datei mit dem Namen „beispieldatei“
beispieldatei.gif- Erzeugt eine GIF-Datei mit dem Namen „beispieldatei“
Unterschiedliche Qualitätsstufen
Um die Qualität der Datei noch detaillierter einzustellen, verwendet Ebenen-Namen mit folgendem Aufbau:
beispieldatei.jpg4- Erzeugt eine JPG-Datei mit 40% Qualität. Mögliche Werte (1-10)
beispieldatei.jpg7%- Erzeugt eine JPG-Datei mit 7% Qualität. Mögliche Werte (1-100%)
beispieldatei.png8- Erzeugt eine PNG8-Datei. Mögliche Werte (.png8, .png24, .png32)
Skalierung beeinflussen – Retina-Export
Um die Skalierung der Datei zu verändert, stellt dem Dateinamen eine Angabe in Prozent oder Pixeln voraus.
200% beispieldatei@2x.png- Erzeugt eine PNG24-Datei mit 200% Größe
150x150 beispieldatei.jpg65%- Erzeugt eine JPG-Datei mit 65% Qualität und einer Abmessung von 150px x 150px. Das Motiv wird dabei ggf. verzerrt
Mehrere Dateien gleichzeitig generieren
Ihr könnt sogar mehrere Dateien parallel exportieren lassen. Trennt dazu die Bezeichnungen im Dateinamen einfach per Komma.
beispieldatei.png24, 200% beispieldatei@2x.png24- Erzeugt eine PNG24-Datei mit 100% Größe sowie eine PNG24-Datei mit 200% Größe und dem Suffix @2x
Ordnerstrukturen generieren
Die bisherigen Beispiele speichern alle Dateien in einem Ordner ab. Indem ihr den Ordnernamen gefolgt von einem Slash (/) dem Dateinamen voranstellt, könnt ihr auch Ordnerstrukturen erzeugen lassen.
1x/beispieldatei.jpg, 200% 2x/beispieldatei@2x.jpg- Erzeugt eine Ordner namens 1x mit einer enthaltenen JPG-Datei von 100% Größe, sowie einen zweiten Ordner namens 2x mit einer JPG-Grafik von 200% Größe und dem Suffix @2x
Schutzflächen einplanen
Der Generator exportiert nur die Pixel einer Ebene. Transparente Flächen um ein Objekt herum werden nur dann berücksichtigt, wenn eine Maske verwendet wird.
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Sehr geiles Feature! Habe ich noch gar nicht von gewusst. Wird beim nächsten Projekt mal ausgiebig getestet. Das kann man auch gut missbrauchen um Screens einzelner Seiten rauszuspeichern.
Nachtrag: Das ist so, soo geil! Gerade auch um schnell SVGs zu speichern. Diese Feature spart enorm viel Zeit!
Nachtrag 2: Da mir diese Funktion viel Zeit erspart, habe ich dazu auch einen kleinen Blogpost geschrieben, bezogen auf meinen Anwendungsfall (Bannerframes Export) und deinen Beitrag natürlich auch verlinkt. :-)
http://timostrauss.de/photoshop-bildexport-automatisieren/
Hi Jonas,
danke für den tollen Tipp auf der Webinale. Gibt es auch die komplette Größe der angelegten psd zu generieren? Hintergrund: 40 unterschiedliche Logos, die aber auf einer definierten Fläche stehen müssen. Dankbar für einen Tipp grüßt Katrin
Hallo Katrin, ich denke mit Masken kommst du zum Ziel. Pack alles in einen Ordner, vergib dem Ordner den gewünschten Namen und lege dann eine Maske auf den Ordner um festzulegen welche Fläche exportiert werden soll.
Hallo Jonas, das funxt leider nicht, schneidet auch exakt aus. Mit SKRIPTEN > EBENEN IN DATEIEN EXPORTIEREN, dann png auswählen, und das Häkchen weg bei *Ebenen zuschneiden* geht es aber. Grüßt Katrin
Hi Jonas,
ich habe ein „kleines Problem“: Ich habe 12 freigestellte Grafiken und eine Hintergrundebene (Hintergrundfarbe). Jede der Ebenen soll mit der Hintergrundebene exportiert werden. Wie kann ich das mit der neuen Funktion bewerkstelligen, ohne die Hintergrundebene 12 mal in meinem Dokument (in Ordnern mit dem jew. Bild) kopieren zu müssen?
Danke schon mal vorab.
Viele Grüße,
Nathalie
Hallo Nathalie, ich fürchte im Moment wirst du um einen manuellen Export oder um Duplikate der Hintergrund-Ebene nicht herumkommen.
Hi Jonas,
ok, trotzdem vielen Dank und frohe Weihnachten :-))
Schöner Beitrag,
allerdings exportiert bei mir Photoshop z.B keine Datei wenn ich als Format .svg anhänge, oder *@2x.png24
Hier funktioniert es nur wenn ich die 24 weg lassen, also @2x.png
PNG32 ist die Standard-Ausgabe von Photoshop. Daher musst du nur *.png schreiben um diese Dateiformat zu erhalten. *.png24 funktioniert bei mir problemlos und erzeugt PNG24-Dateien. SVG-Grafiken kann der Generator erst nach einem Update. Siehe hier.
Hammer Funktion! So macht Photoshoppen noch mehr Spaß!
Weißt du wie das mit den Farben läuft? Meine exportierten Assets haben kein Farbprofil. Kann ich da zB sRGB irgendwie aktivieren?
Das würde mich auch interessieren! Ansonsten ist wär es ziemlich nutzlos!
Ich nutze diese coole Feature auch gerade zum ersten Mal (!) Gibt es eine Möglichkeit, dem Generator zu sagen, an welchem Ort die Assets gespeichert werden? Das wäre in Verbindung mit automatischen Icon-Sprites via Compass dann die totale Abeitserleichterung!
Soweit ich weiß besteht diese Option bisher (leider) noch nicht.
Hallo Jonas,
kann es sein, dass der Befehl 200% beispieldatei@2x.png24 das Ergebnis lediglich aufbläst und aufpixelt auch wenn ein Vektor-Smartobjekt in der Ebene liegt? Damit ist doch diese Funktion quasi unbrauchbar oder habe ich da was nicht kapiert?
Nein, wenn die Ebene entweder als Vektor/Pfad vorhanden ist, oder es sich um ein Smartobjekt mit ausreichender Qualität handelt, wird die Datei auch bei 200% Größe scharf abgebildet.
Ich kann das bei Photoshop-Shapes nachvollziehen aber nicht bei als Smartobjekt eingebundenen Fotos oder Illustrator Vektor-Smartobjects. Wo ist der Fehler?
Besser find ich dieses kostenlose Plugin.
http://www.cutandslice.me
Hier kann ich mittels Shape-Layer den Bereich der ausgegeben werden soll definieren. Das ist vor allem nützlich, wenn die Zustände eines Buttons unterschiedlich groß sind.
Generator kann das, soweit ich weiß, noch nicht. Das Plugin läuft auch unter CS6.
Für alle, die (noch) nicht Photoshop CC benutzen, bietet diese „Nachrüstung“ fast den gleichen Komfort:
http://macrabbit.com/slicy/
Kann sogar automatisch Vektorgrafiken auf HighRes und umgekehrt skalieren.
Gruß
Jürgen
Das
beispieldatei.jpg40
Erzeugt eine JPG-Datei mit 40% Qualität. Mögliche Werte (1-10)
ist irreführend und gibt einen Fehler.
Richtig muss es heissen.
beispieldatei.jpg4
oder?
Auf jden Fall ein super Feature und im Grunde genommen überfällig.
Danke für Deine Einführung.
Ist korrigiert. Danke!
Noch nützlicher wäre die neue Funktion, wenn auch Ebenenkompositionen die Generierung anstoßen könnten.
Mit der aktuellen Variante können nämlich zum Beispiel verschiedene vor dem gleichen Hintergund stehende Motive nicht gemeinsam mit dem Hintergrund ausgegeben werden.
Ebenso schön wäre es, wenn ein Bereich definiert werden könnte, der Ausgabebereich definiert. Aktuell werden die generierten Grafiken immer auf die sichtbaren Pixel zugeschnitten: Ein transparenter Rand ist nicht möglich.
Dennoch ein nützliches neues Feature – mit eingeschränktem Nutzwert.
Hey Jonas,
das klingt insgesamt ziemlich interessant! Mich würde interessieren, ob die Routine auch den Inhalt eines ganzen Ordners rausspeichern kann oder ob man aus Grafiken, die aus gestackten Ebenen aufgebaut sind immer ein Smartobject machen muss, um sie hier automatisiert produzieren zu können.
Cheers,
David
Das kann ich dir sagen :) Du kannst auch einen Ordner wie im Beitrag erklärt benennen. In diesem Fall kombiniert Photoshop alle enthaltenen Ebenen. Ich habe den Artikel im diese Info ergänzt.
Super, danke für die Info!
Das klingt sehr interessant…vielleicht sollte man doch mal in CC reinschnuppern :-)
vg
Frank
Definitiv. Ich persönlich bereue die Creative Cloud überhaupt nicht. Als Webdesigner hat man wohl auch den größten Mehrwert.