Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Die Bild-Assets (Image-Assets) in Photoshop CC im Überblick

Die Bild-Assets basieren auf einer neuen Technologie namens Adobe Generator, die ab 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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 28 Kommentare

  1. Timo
    schrieb am 01.10.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.

    Antworten
    • Timo
      schrieb am 26.10.2015 um 14:32 Uhr:

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

      Antworten
      • Timo
        schrieb am 11.03.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/

  2. Katrin Dillmann (hr)
    schrieb am 11.06.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

    Antworten
    • Jonas Hellwig
      schrieb am 11.06.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.

      Antworten
      • Katrin Dillmann (hr)
        schrieb am 11.06.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

  3. Nathalie
    schrieb am 17.12.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

    Antworten
    • Jonas Hellwig
      schrieb am 20.12.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.

      Antworten
      • Nathalie
        schrieb am 22.12.2014 um 09:10 Uhr:

        Hi Jonas,

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

  4. Christopher Dosin
    schrieb am 21.05.2014 um 09: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

    Antworten
    • Jonas Hellwig
      schrieb am 21.05.2014 um 09: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.

      Antworten
  5. Stilknecht
    schrieb am 03.02.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?

    Antworten
    • Benito
      schrieb am 28.04.2019 um 18:30 Uhr:

      Das würde mich auch interessieren! Ansonsten ist wär es ziemlich nutzlos!

      Antworten
  6. Kurt
    schrieb am 29.01.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!

    Antworten
    • Jonas Hellwig
      schrieb am 29.01.2014 um 15:48 Uhr:

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

      Antworten
  7. Alexander
    schrieb am 19.11.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?

    Antworten
    • Jonas Hellwig
      schrieb am 19.11.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.

      Antworten
      • Alexander
        schrieb am 19.11.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?

  8. måart
    schrieb am 07.11.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.

    Antworten
  9. Jürgen
    schrieb am 24.09.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

    Antworten
  10. Michael
    schrieb am 09.09.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.

    Antworten
    • Jonas Hellwig
      schrieb am 10.09.2013 um 05:46 Uhr:

      Ist korrigiert. Danke!

      Antworten
      • ensel
        schrieb am 10.09.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.

  11. Dave Radau
    schrieb am 09.09.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

    Antworten
    • Jonas Hellwig
      schrieb am 09.09.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.

      Antworten
      • Dave Radau
        schrieb am 09.09.2013 um 10:54 Uhr:

        Super, danke für die Info!

  12. Frank
    schrieb am 09.09.2013 um 09:29 Uhr:

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

    vg
    Frank

    Antworten
    • Jonas Hellwig
      schrieb am 09.09.2013 um 09:51 Uhr:

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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →