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

Data Driven Images mit Photoshop und Excel-Import

Designer müssen häufig eine große Anzahl an Dateien erstellen die sich zwar inhaltlich unterscheiden, vom verwendeten Raster oder der Gestaltung jedoch weitestgehend gleich bleiben sollen.
Als Beispiel sei hier eine Einladungskarte genannt, die über individuelle Namen und Anschriften verfügt. Alle Dateien einzeln in Photoshop zu erstellen ist ein zeitaufwändiger und langweiliger Arbeitsprozess den wir natürlich vermeiden wollen. Mit Microsoft Excel sowie der Möglichkeit in Photoshop Variablen zu verwenden lässt sich ein automatisierter Prozess starten der alle unliebsamen Aufgaben für uns erledigt.
Wie das im Handumdrehen funktioniert zeige ich Euch in diesem Screencast mit anschließender Checkliste zur Nachbereitung. Viel Spass mit Data Driven Images und einer weitestgehend unbekannten Funktion in Photoshop!

Screencast: Excel Import in Photoshop

In diesem Screencast werde ich Euch zeigen wie ich eine Reihe von Grafiken mit einem Excel-Datensatz erstelle. Als einigermaßen praxisnahes Beispiel habe ich mir folgendes ausgedacht: Ich möchte eine Auswahl von Websites aus meinem Portfolio präsentieren um diese später für Bewerbungen oder ähnliches weiterverwenden zu können. Es ändern sich jeweils der Name der Seite, der Screenshot, die Domain und eine individuelle Beschreibung der Seite – die Grundgestaltung bleibt hingegen immer gleich.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Checkliste für den Excel-Import in Photoshop

Um Euch die Arbeit mit Data Driven Images, Photoshop und Excel in Zukunft zu erleichtern habe ich noch eine Checkliste erstellt die in Schnellform beschreibt in welcher Reihenfolge Ihr welche Punkte beachten solltet. Sollten dennoch Fragen auftauchen, so ist wie immer in den Kommentaren Platz dafür.

  1. Photoshop-Datei erstellen
    Achtet darauf die Ebenen eindeutig zu benennen. Das erleichtert Euch anschließend die Zuordnung der Variablen.
  2. Variablen Definieren
    „Bild → Variablen → Definieren…“
    Wählt zunächst „Define“ aus und vergebt anschließend für alle Ebenen die über einen Datensatz geändert werden sollen eine Variable. Beachtet hier schon, dass die Variablen der ersten Zeile Eurer Excel-Tabelle entsprechen müssen damit die Zuordnung funktioniert. Den Namen passt Ihr entsprechend an und wählt aus welcher Variablen-Typ verwendet werden soll.
  3. Excel-Tabelle erstellen
    In der ersten Zeile stehen die Namen der verschiedenen Variablen. Natürlich jeweils eine in jeder Zelle. Darunter füllt Ihre Eure Tabelle mit den gewünschten Daten. Achtet darauf, dass keine Felder leer bleiben.
  4. CSV-Datei exportieren und bearbeiten
    Speichert die Tabelle als *.csv-Datei ab und öffnet sie anschließend mit einem Texteditor. Da Excel die verschiedenen Werte mit Semikolons trennt, Photoshop aber nur Kommata oder Tabulatoren als Trennzeichen erkennt müssen wir mit „Suchen und ersetzen“ die Semikolons in Tabulatoren umwandeln.
  5. Datensatz importieren
    „Datei → Importieren → Variablen-Datensätze“.
    Wählt die abgespeicherte *.csv-Datei aus und wählt als Encoding-Option „Automatisch“. Achtet darauf, dass die Checkbox „Erste Tabellenzeile als Datensatznamen verwenden“ aktiviert ist.
  6. Datensatz testen
    Wählt nun „Bild → Variablen → Datensätze“ um Eure importierten Datensätze zu testen. Über die Vorschaufunktion könnt Ihr der Reihe nach die Verschiedenen Datensätze kontrollieren.
  7. Datensatz exportieren
    Um einzelne Dateien zu generieren wählt Ihr nun „Datei → Exportieren → Datensatz als Dateien…“. Im folgenden Dialog gebt Ihr nur noch einen Dateinamen und den Speicherort an. Leider erstellt Photoshop nur *.psd-Dateien. Um eine Liste anderen Formats zu erstellen müsste anschließen eine Stapelverarbeitung das Dateiformat umwandeln.

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 – 17 Kommentare

  1. Miladin
    schrieb am 10.12.2014 um 21:04 Uhr:

    …oh, ganz stark, Jonas!
    Danke…
    #geteilt

    Antworten
  2. Ron aus Velbert
    schrieb am 24.02.2014 um 22:23 Uhr:

    seit welcher version gibt es denn diese variablen? ich habe 8.0 und dort geht es nciht :/

    Antworten
  3. Linda
    schrieb am 23.04.2013 um 12:30 Uhr:

    Hallo!
    Super Tipp, danke, hat einwandfrei geklappt!;) Hab auch noch ne nützliche seite für excel entdeckt (zwar nicht in zusammenhang mit ps aber fand ich auch recht hilfreich). Vielleicht kann ja hier noch jemand was damit anfangen!
    Lg Linda

    Antworten
  4. Torsten
    schrieb am 09.04.2012 um 17:23 Uhr:

    Danke für diesen Tipp. Dass Photoshop so etwas kann, war mir durch einen Zeitschriftenartikel bekannt, den ich mal irgendwann irgendwo gelesen hatte. Aber nun benötigte ich tatsächlich diese Technik und dein Artikel half mir bei der Umsetzung. Vor über 100 individualisierten Einladungen zur Hochzeit habe ich jetzt keine Angst mehr :)

    Antworten
  5. Photoshop-Etiquette für Webdesigner (+ Tipps) | kulturbanause blog
    schrieb am 13.09.2011 um 08:26 Uhr:

    […] Data Driven Images mit Photoshop und Excel […]

    Antworten
  6. Nic
    schrieb am 26.08.2011 um 22:49 Uhr:

    Huhu,

    danke für dein Tut, welches mich schonmal sehr weiterbrachte in der Arbeit mit Photshop an meinem Projekt.

    Nun ist das Problem das ich an meinem Spielprojekt (Kartenspiel welche sich später einem Verlag anbieten möchte) dieses nicht umgesetzt bekomme. Da die Daten die erforderlich sind in einer Excel Datei sind in der auch andere Daten sind, welche nicht relevant sind für die Kartenoberfläche (z.B. Kartenstärkeberechnung), habe ich ein weiteres Excel- Dok gemacht in welchem ich die notwendigen Daten AUS der ersten Excel- Datei mit Verweisen importiere. Einige Felder bleiben dabei frei, welche ich provisorisch erstmal aufgefüllt habe, da ja keine leeren Zellen bleiben sollen soweit ich weiss.

    Ich habe 44 Variablen und 302 Datensätze, welche alle Phtoshop-Ebenen (Texte und Bilder) abdecken. True und False Werte sind verteilt.

    Dann sagt er mir aber beim Importieren der Datensätze, einen Fehler in Datensatz 9. Ich habe in dieser Zeile alle Zellen überprüft, aber keines ist leer.

    Gibt es noch andere Reglements, welche beim einlesen in PS Probleme machen?

    Danke,

    Nic

    Antworten
  7. Photoshop + Excel = Data Driven Images | LichtSetup.de
    schrieb am 14.07.2010 um 16:55 Uhr:

    […] in einem Rutsch in Photoshop zu erstellen. Wie’s geht, findet ihr auf Kulturbanause.de KLICK […]

    Antworten
  8. Malte Blättermann
    schrieb am 15.03.2010 um 15:15 Uhr:

    Hallo,

    Toller Screencast! Ich hab schon immer mal wieder an eine solche Funktion gedacht. Aber es kommt nur selten vor das ich se brauchen könnte. Deshalb hab ich nie wirklich danach gesucht…

    Seit welcher PS Version ist das möglich?

    Gruß Malte

    Antworten
    • Jonas
      schrieb am 15.03.2010 um 15:16 Uhr:

      @Malte: Genau weiss ich es nicht. Aber CS2 kann es auf jeden Fall schon.

      Antworten
  9. Chris
    schrieb am 26.01.2010 um 06:51 Uhr:

    Hi Jonas

    Ich kannte die Möglichkeit nicht und finde sie überaus interessant.

    Was mich aber noch mehr interessieren würde wäre folgendes:
    Wenn man eine Homepage im Photoshop designt, und ja ich weiss eigentlich sollte man den Workflow mit Fireworks weiterziehen, wie erstellt man dann ein Dokument am besten, wenn es mehrere Seiten gibt?
    Einige bei uns im Geschäft arbeiten einfach im selben Dokument mit verschiednen Ordnern. Aber bei unterschiedlichen Seitenlängen wir das auch sehr mühsam. Andere erstellen Layer Comps, was aber auch wieder aufs gleiche rauskommt.

    Ich persönlich erstelle mir von wiederholenden Elementen Smart Objects, welche ich auslagere, um sie nach Änderungen wieder einzubinden. Aber hier kann man schlechter ein gehighlightetes Menü visualisieren.
    Gibt es hier für Photoshop einen guten Workflow?

    Antworten
    • Jonas
      schrieb am 26.01.2010 um 09:15 Uhr:

      @Chris: Deine Vorgehensweise mit Smart-Objects zu arbeiten halte ich schon für sehr komfortabel. Ansonsten arbeite ich selbst ab und zu mit Ebenenkompositionen, meistens erstelle ich jedoch nur einzelne Elemente in Photoshop und gestalte dann nach und nach weitere Objekte hinzu während ich die Seite code. Bei meinem Portfolio beispielsweise habe ich nur den Header erstellt, dann die Seite gecodet, dann den Footer gemalt und ganz am Ende die Grafiken nochmal überarbeitet.
      Aber um das Thema dieses Posts nicht zu vernachlässigen: Ich würde eine Aktion in Photoshop erstellen und dann über eine Stapelverarbeitung aus der Brige heraus alle generierten PSDs als PNG umwandeln. Oder eben in ein beliebiges anderes Dateiformat.

      Antworten
  10. Michael Kozak
    schrieb am 23.01.2010 um 09:07 Uhr:

    Schön gemachtes Turorial, Jonas!
    Kleiner Tipp: Excel bietet in seinem „Speichern unter…“ Auswahlmenü die Option „Text (Tabstop-getrennt) (*.txt)“. Dadurch spart man sich den Arbeitsschritt „Suchen und ersetzen der Semikolons“.
    Grüße aus Wien, Mike

    Antworten
    • Jonas
      schrieb am 23.01.2010 um 10:20 Uhr:

      @Michael Kozak: Vielen Dank! Ich habe halb Excel nach einer Option abgesucht Tabellen durch Tabs zu trennen. Leider bin ich nicht darauf gekommen im Speichern-Dialog zu schauen ;) Das erleichtert die Sache in der Tat deutlich!
      Vielen Dank für den Tipp!

      Antworten
  11. mrvn
    schrieb am 22.01.2010 um 23:55 Uhr:

    das wusste ich noch nicht, habe aber über das gleiche thema schon eine lösung per indesign und xml gesehen ;-)

    Antworten
    • Jonas
      schrieb am 22.01.2010 um 23:59 Uhr:

      @mrvn: Das klingt auch sehr interessant. Wenn du nen empfehlenswerten Link dazu parat hast, dann immer her damit. InDesign rockt! :)

      Antworten
  12. René Maas
    schrieb am 22.01.2010 um 21:53 Uhr:

    Hi Jonas,

    ich kannte diese wirklich einfach Art der Datensatzverwaltung in PS noch nicht.

    Vielen Dank! Das wird meinen Arbeitsalltag erheblich erleichtern.

    P.S. Her mit den Screencasts!

    Antworten
  13. John
    schrieb am 22.01.2010 um 21:43 Uhr:

    Vielen Dank für den Screencast. Ich werde es weiter geben.

    vg,
    john

    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 →