kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Live-Dateiexport (Bild-Assets) mit dem Photoshop CC Generator

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Automatischer Dateiexport mit dem Generator in Photoshop CC
Automatischer Dateiexport mit dem Generator in Photoshop CC

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.

Bild-Assets in Photoshop CC aktivieren
Bild-Assets in Photoshop CC aktivieren

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

27 Kommentare

  1. Frank

    Verfasst am 9. September 2013 um 9:29 Uhr.

    Das klingt sehr interessant…vielleicht sollte man doch mal in CC reinschnuppern :-)

    vg
    Frank

    • Jonas Hellwig

      Verfasst am 9. September 2013 um 9:51 Uhr.

      Definitiv. Ich persönlich bereue die Creative Cloud überhaupt nicht. Als Webdesigner hat man wohl auch den größten Mehrwert.

  2. Dave Radau

    Verfasst am 9. September 2013 um 10:03 Uhr.

    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

    • Jonas Hellwig

      Verfasst am 9. September 2013 um 10:13 Uhr.

      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.

      • Dave Radau

        Verfasst am 9. September 2013 um 10:54 Uhr.

        Super, danke für die Info!

  3. Michael

    Verfasst am 9. September 2013 um 18:10 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 10. September 2013 um 5:46 Uhr.

      Ist korrigiert. Danke!

      • ensel

        Verfasst am 10. September 2013 um 10:44 Uhr.

        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.

  4. Jürgen

    Verfasst am 24. September 2013 um 21:34 Uhr.

    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

  5. måart

    Verfasst am 7. November 2013 um 11:39 Uhr.

    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.

  6. Alexander

    Verfasst am 19. November 2013 um 13:35 Uhr.

    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?

    • Jonas Hellwig

      Verfasst am 19. November 2013 um 13:44 Uhr.

      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.

      • Alexander

        Verfasst am 19. November 2013 um 15:54 Uhr.

        Ich kann das bei Photoshop-Shapes nachvollziehen aber nicht bei als Smartobjekt eingebundenen Fotos oder Illustrator Vektor-Smartobjects. Wo ist der Fehler?

  7. Kurt

    Verfasst am 29. Januar 2014 um 15:43 Uhr.

    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!

    • Jonas Hellwig

      Verfasst am 29. Januar 2014 um 15:48 Uhr.

      Soweit ich weiß besteht diese Option bisher (leider) noch nicht.

  8. Stilknecht

    Verfasst am 3. Februar 2014 um 12:15 Uhr.

    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?

  9. Christopher Dosin

    Verfasst am 21. Mai 2014 um 9:12 Uhr.

    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

    • Jonas Hellwig

      Verfasst am 21. Mai 2014 um 9:36 Uhr.

      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.

  10. Nathalie

    Verfasst am 17. Dezember 2014 um 10:30 Uhr.

    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

    • Jonas Hellwig

      Verfasst am 20. Dezember 2014 um 21:23 Uhr.

      Hallo Nathalie, ich fürchte im Moment wirst du um einen manuellen Export oder um Duplikate der Hintergrund-Ebene nicht herumkommen.

      • Nathalie

        Verfasst am 22. Dezember 2014 um 9:10 Uhr.

        Hi Jonas,

        ok, trotzdem vielen Dank und frohe Weihnachten :-))

  11. Katrin Dillmann (hr)

    Verfasst am 11. Juni 2015 um 12:03 Uhr.

    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

    • Jonas Hellwig

      Verfasst am 11. Juni 2015 um 12:56 Uhr.

      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.

      • Katrin Dillmann (hr)

        Verfasst am 11. Juni 2015 um 15:02 Uhr.

        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

  12. Timo

    Verfasst am 1. Oktober 2015 um 14:10 Uhr.

    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.

    • Timo

      Verfasst am 26. Oktober 2015 um 14:32 Uhr.

      Nachtrag: Das ist so, soo geil! Gerade auch um schnell SVGs zu speichern. Diese Feature spart enorm viel Zeit!

      • Timo

        Verfasst am 11. März 2016 um 12:27 Uhr.

        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/

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.