Data Driven Images mit Photoshop und Excel
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
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.
Checklist
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.
- Photoshop-Datei erstellen
Achtet darauf die Ebenen eindeutig zu benennen. Das erleichtert Euch anschließend die Zuordnung der Variablen. - 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. - 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. - 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. - 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. - 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. - 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.
Deine Meinung ist wichtig!
Kanntet Ihr die hier beschriebene Möglichkeit Excel-Datensätze in Photoshop zu laden und werdet Ihr sie in Euren aktiven Workflow mit aufnehmen? Funktioniert etwas nicht so wie beschrieben oder geht es auch einfacher? Dann her mit Euren Tipps und Anregungen!
Besonders wichtig finde ich ob Ihr Screencasts dieser Art generell sehen wollt. Ich werde natürlich versuchen in Zukunft die Screencasts professioneller (vor allem in Bezug auf die Tonqualität/Sprache) zu gestalten.
Themenverwandte Artikel:
Folgende Beiträge könnten dich ebenfalls interessieren.
Welcome to Kulturbanause, the private blog & portfolio of
22. Januar 2010, 21:43 Uhr
Vielen Dank für den Screencast. Ich werde es weiter geben.
vg,
john
22. Januar 2010, 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!
22. Januar 2010, 23:55 Uhr
das wusste ich noch nicht, habe aber über das gleiche thema schon eine lösung per indesign und xml gesehen ;-)
22. Januar 2010, 23:59 Uhr
@mrvn: Das klingt auch sehr interessant. Wenn du nen empfehlenswerten Link dazu parat hast, dann immer her damit. InDesign rockt! :)
23. Januar 2010, 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
23. Januar 2010, 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!
26. Januar 2010, 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?
26. Januar 2010, 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.
2. Februar 2010, 10:15 Uhr
[...] in einem Rutsch in Photoshop zu erstellen. Das Ganze findet ihr auf Kulturbanause.de hier KLICK [...]