Javascript in Photoshop

Photoshop-Skripting-Beispielbild

Als ich kürzlich eine ganze Reihe Ausweise mit Namen ausfüllen musste, habe ich mir angeschaut, wie man Photoshop CS3 automatisieren kann. Ich war erstaunt herauszufinden, das PS mit Javascript gesteuert werden kann, neben den zusammenklickbaren Makros, VBScript und AppleScript.

Hello-Word-Beispieldateien

Da der komplette Code etwas länger ist, habe ich eine Beispiel-PSD und alle Skripte auf Github online gestellt. Dort unter Downloads findet sich eine zip-Datei mit allem Nötigen, um das hier beschriebene Hello-World-Skript auszuführen.

Dokumentation

Das Photoshop-Scripting ist sehr ausführlich dokumentiert. Zunächst gibt es im Ordner C:\Programme\Adobe\Adobe Utilities\ExtendScript Toolkit 2\SDK zwei Dokumente: Einmal Adobe Intro to Scripting.pdf, welches man lesen sollte, wenn man „noch nie programmiert hat“ oder nicht so genau weiß, was Anwendungen skripten allgemein ist.

Außerdem JavaScript Tools Guide CS3.pdf. Hier findet sich zunächst ein Überblick über das IDE von Adobe (ich habe aber alles direkt in kwrite geschrieben) und dann folgen die Dokumentationen zu den Libraries für Dateisystem, UI, HTTP, Sockets, und vieles weitere. In dem Dokument wird regelmäßig auf Beispieldateien aus dem Brige SDK hingewiesen, dieses findet sich hier.

Die Photoshop-Spezifischen APIs stehen in der Photoshop Javascript Referenz. Photoshop stellt ein DOM zur Verfügung.

Erstellen der Photoshop-Datei

Zuerst kann man eine ganz normale Photoshop-Datei erstellen. Gute Ebenen-Organisation erleichtert später das Skripten. Wenn möglich, packt man alle Ebenen, die bearbeitet werden sollen, zusammen in eine Gruppe (Ordner). Dann findet man sie im Skript leichter wieder. Wenn man, wie ich, mehrere Ausweise o.ä. auf eine DIN-A4-Seite zusammenstellt, kann man jeden Ausweis gleich und in einer eigenen Gruppe anlegen, auch das macht das Skripten einfacher.

Skripte ausführen

Um ein fertiges Skript auszuführen klickt man im Photoshop-Menü Datei > Skripten > Durchsuchen und wählt die .jsx Datei. Das Skript läuft sofort los, eventuell erscheinen Fehlermeldungen als Dialogbox.

Exkurs: Eingabe-Daten verarbeiten

Man könnte zwar rein technisch gesehen mit Javascript die Daten von einem FTP-Server laden, dann irgendwie verarbeiten und letztendlich daraus die Bilder generieren. Ich habe mich jedoch darauf beschränkt, die Daten von einer Tabelle auf einer Webseite zu kopieren (sie sind dann Tabulator-Getrennt in der Zwischenablage) und sie mit awk in ein entsprechendes JSON-Format zu bringen:

awk 'BEGIN{RS="\r\n";FS="\t+"} {print "{planet:\"" $1 "\",comment:\"" $2 "\"},"}' planeten.raw.txt > planeten.json.txt

Da ich auf Windows arbeite (awk läuft auf Linux, die Dateien liegen in einem Samba-Share), musste ich awk sagen, dass die Zeilen auch noch einen Wagenrücklauf beinhalten. Die entstandenen JSON-Daten habe ich dann in das Skript hart kodiert:

var data=[
  {name:"world"},
  {name:"venus"},
  {name:"mars"},
  {name:"pluto",
   comment:"You're not a real planet though. But still, welcome. "}
];

Photoshop-Ebenen bearbeiten und speichern

Hauptsächlich soll das Skript Photoshop-Textebenen mit neuen Texten versehen. Hierzu gibt es in der Dokumentation auch Beispiele. Im Wesentlichen iteriert man durch die Daten, findet in layerSets den Ebenen-Ordner mit den Texten, und bearbeitet dann die Eigenschaft textItem.contents der verschiedenen artLayers (Ebenen). Der Code sieht dann so aus:

for (var dataI = 0; dataI

Speichern und Exportieren

Die generierten .psd- und .jpg-Dateien

Ich bearbeite immer das activeDocument und speichere das neue Bild dann als Kopie. Hier überschreibt Photoshop bereits generierte Dateien ohne nachzufragen. Die Speicher-Optionen können als XxxSaveOptions-Objekte mitgegeben werden.

// Erstellen der Optionen fuer JPEG-Export:
var jpgOpts = new JPEGSaveOptions();
jpgOpts.embedColorProfile=true;
jpgOpts.quality=12; // hoechste Q

// Dokument speichern:
activeDocument.saveAs(filename,jpgOpts,true/*=als Kopie*/);

Den neuen Pfad generiere ich aus dem Dateinamen das aktuellen Dokuments und einer fortlaufenden Nummer. Dazu benutze ich eine Reihe nützlicher Funktionen. Damit ich diese nicht in jeder Skript-Datei einfügen muss, benutze ich die include-Funktion von Adobes ExtendedScript:

#include util.jsxinc

Der vollständige Code der util.jsxinc findet sich im Github-Repository.

Benutzeroberfläche

Das laufende Skript mit Fortschrittsbalken

Bisher wird einfach nur eine Sanduhr angezeigt während das Skript läuft, also erstelle ich ein Fenster mit einem Fortschrittsbalken. Man kann auch komplexere UIs zur Eingabe von Parametern usw. erstellen, aber dies lohnt sich vermutlich selten. Ein Fortschrittsbalken mit Cancel-Funktion ist jedoch nicht so schwer zu erstellen. Im Wesentlichen benötigt man dies:

var dlg = new Window('window', _(names));
dlg.progressbar = dlg.add('progressbar');
dlg.progressbar.preferredSize = [400,20];
dlg.show();

// Zur Haelfte fertig:
dlg.progressbar.value = 50;

Hilfslinen-Skript

Hilfslinien-Skript

Ein weiteres Skript kann Hilfslinien erstellen. Am Besten kopiert man es in den Ordner Adobe Photoshop CS3\Vorgaben\Skripten, damit es immer im Skript-Menü auftaucht. Ich finde es immer extrem nervig, für Druckränder und Mittellinien die ganzen Hilfslinien zu erstellen. Genauso nervig ist es, für jedes Druckformat eine Vorlage zu basteln. Lieber generiere ich die Hilfslinien mit diesem kurzen Skript.

ExtendScript hat auch noch weitere Features, wie Reflection und Operator Overloading, welches dann bei den UnitValues Rechnen mit Einheiten ermöglicht. In ExtendScript geht das:

alert( (UnitValue(3,"mm") + UnitValue(7,"pt")*0.9).as("cm") );

Da es für die Hilfslinienerstellung keine Funktionen gibt, habe ich die Methode createGuide(offs,orientation) mit dem ScriptListener erstellt. Man kopiert Adobe Photoshop CS3\Skript Handbuch\Hilfsprogramme\ScriptListener.8li nach Adobe Photoshop CS3\Zusatzmodule\Automatisieren und startet PS neu. Dieses Plugin erstellt auf dem Desktop ein ScriptingListenerJS.log, in dem die u.A. die aufgenommenen Aktionen als Javascript-Code gespeichert werden. Diesen Code muss man dann noch parametrisieren und erhält so für alles, was man in Photoshop anklicken kann, den entsprechenden Code.

Auch die Ressourcen-Deskriptoren habe ich im Skript verwendet. Mit ihnen kann man aus einem String direkt einen ganzen UI-Baum erstellen.

Zusammenfassung

Ressourcen zum Text:

Das Skripten von Photoshop ist schon nach kurzem Einarbeiten für den Javascript-Kenner wohl wesentlich einfacher als das zusammenklicken von Aktionen und Stapelverarbeitungen. Wer sich intensiver mit der Dokumentation befasst kann darüber hinaus sehr flexibel mit Daten aus verschiedenen Quellen automatisiert Dokumente erstellen.