Eigene Photoshop Plugins mit Adobe UXP erstellen

[shreblov]

Vor 6 Jahren habe ich ein kleines Tutorial gepostet, wie man eigene Erweiterungen mit CEP für Photoshop entwickelt. CEP hat damals das Configurator Panel abgelöst. 2020 hat Adobe mit UXP den Nachfolger für CEP eingeführt, eine aktuell unbekannte Zeit werden CEP/UXP parallel unterstützt. UXP ist (mindestens) im Photo-Abo enthalten. Hier ist der Einstieg in die Adobe Adobe UXP Dokumentation.

Mit Erweiterungen kann man z. B. tief im Menü vergrabene Befehle einfach zugänglich machen, eine Abfolge von Arbeitsschritten zusammenfassen oder externe Geräte ansteuern (z. B. Loupedeck). Über den Adobe Marketplace kann man sich weitere Einsatzzwecke für Plugins anschauen.

Eins noch vorweg: wer nicht programmieren kann (JavaScript, HTML, CSS), wird sich nicht mit CEP beschäftig haben und braucht das auch mit UXP nicht zu tun.

Mein neues Panel zeigt Anhang #1: oben eine Leiste mit Undo, Redo, Öffnen, Speichern unter und Aufruf der Stapelverarbeitung. Die Schaltflächen darunter sind selbsterklärend. Da ich die meisten Bearbeitungschritte in Lr mache, benutze ich Ps nur für das abschließende Feintuning.

Das Panel ist als Zip-Datei angefügt und kann gerne für eigene Zwecke verwendet werden. Nach dem Herunterladen die Endung .pdf entfernen, Zip-Dateien kann ich hier nicht einstellen. Es müsste so funktionsfähig sein bis auf die vier Aufrufe der Nik-Tools. Der Aufruf erfolgt über ein Aktionsset "Nik", und wenn das nicht vorhanden ist, gibt es eine Fehlermeldung. (Wie man das für eigene Zwecke anpassen kann, ist weiter unten beschrieben.)

Die Installation von UXP erfolgt über die Creative Cloud App. Nach dem Start von Photoshop kann das UXP Developer Tool gestartet werden (Anhang #2). Die einzelnen Bereiche:

1. Die mit UXP verbundenen Applikationen. Ist das Feld leer, ist Photoshop nicht gestartet.
2. Schaltflächen zum Anlegen und Hinzufügen von Plugins.
3. Die Befehle zum Laden, Überwachen, Debuggen und zur Package-Erstellung (andere habe ich bisher nicht benötigt).

Ein sehr gutes Video-Tutorial gibt es von Davide Barranca (Things you need to know). Das Adobe Developer Forum ist eine Anlaufstelle für Fragen und Antworten.

Vor dem Erstellen eines Plugins muss ggf. in Ps der Schalter "Entwicklungsmodus aktivieren" gesetzt sein (Bearbeiten>Voreinstellugen>Zusatzmodule). Das Erstellen eines Plugins erfolgt über das UXP Developer Tool und den "Create Plugin" Button (Anhang #2).
Anhang #3 zeigt den Dialog zum Erstellen. Wenn man Plugins nur für sich selber erstellt, benötigt man keine Developer ID kann im Feld Plugin ID irgendetwas eintragen (muss nur eindeutig über alle Plugins sein). Für Photoshop v23 muss man im Feld "Host Application Version" auch 23.0 eintragen. Vorgeschlagen wird 22, damit gibt es aber einen Fehler (api1 deprecated). Als Template wählt man ps-starter aus. Mit dem Button "Select Folder" öffnet sich der Explorer und man kann einen Ordner auswählen oder mit einem rechten Mausklick noch einen neuen Ordner erstellen und den dann auswählen. Dann erscheint die Meldung "Plugin created successfully".

Anhang #4 zeigt den Inhalt des neu angelegten Verzeichnis:

• manifest.json ist die zentrale Datei eines Plugins. Hier wird u. a. die Größe des Panels definiert, aber auch die zugehörigen .js und .html Dateien festgelegt.
• In der index.html wird das User Interface defniniert, z. B. Buttons, Texte, Slider usw.
• Die index.js enthält den JavaScript-Code für die Ausführung der Funktionen.
• Im Verzeichnis icons können die Icons abgelegt werden.

Mit dem Load Button (Anhang #2) wird das Plugin geladen. Hat man ein Bild geöffnet, werden die Ebenen des Bildes aufgelistet.

 

[shreblov]

AW: Eigene Plugins mit Adobe UXP erstellen

Jetzt kann das mit dem ps-starter Template erstellte Plugin modifiziert werden.

In der manifest.json habe ich Höhe/Breite für minimumSize, preferredDockedSize und preferredFloatingSize angepasst, z. B.:

"minimumSize": {
        "width": 350,
        "height": 330

Die Werte habe ich durch Probieren herausgefunden. Weiter unten in der manifest.json habe den Text für "label" auf "Meins" geändert. Das ist der Text, der im Anhang #1 oben auf dem Tab angezeigt wird. Den Rest in der manifest.json habe ich so belassen.

Mehr Änderungen sind in der index.html notwendig. Zunächst habe ich alles zwischen <style> und </style> sowie <body> und </body> gelöscht. Für die Elemente des User Interfaces wird Spectrum verwendet, für das Layout HTML/CSS. Der Style für Elemente in einer Reihe ist

.spButton {
		border-radius: 1px;
		position: relative;
		display: inline-block;
		font-size: 12px;
		font-family: 'Segoe UI', Arial, Helvetica;
		height: 30px;
		width: auto;	
		vertical-align: middle;
		text-align: center;
	}

und dann ein div-Block mit zwei Buttons:

document.getElementById("flatten").addEventListener("click", flatten);
document.getElementById("eightbit").addEventListener("click", eightbit);

"id=flatten" ist der Name des Buttons, der in der index.js weiter definiert wird. Dort wird für jedes User Interface Element (z. B. ein Button) die Aktion hinterlegt, die (im Fall Button) bei einem Mausklick ausgeführt werden soll:

document.getElementById("flatten").addEventListener("click", flatten);

"getElementById("crop_tool")" ist die Referenz zum Button in der index.html. "addEventListener("click", flatten)" führt dazu, dass bei einem Klick auf den Button die Funktion "flatten" aufgerufen wird.

Für das Ausführen von Photoshop-Befehlen über die index.js gibt es verschiedene Möglichkeiten: Photoshop API, batchPlay und über die Photoshop interne Nummer für einen Befehl.

 

[shreblov]

AW: Eigene Plugins mit Adobe UXP erstellen

Photoshop API ist die beste Möglichkeit aus der index.js Photoshop zu steuern, nur leider ist das Photoshop API für UXP längst nicht so umfangreich wie das für Photoshop (PDF).

Der Javascript-Code für die Funktion "Auf Hintergrundebene reduzieren":

async function flatten() {
    const app = window.require("photoshop").app;
	const core = require("photoshop").core;
    
    await core.executeAsModal(() => {
        app.activeDocument.flatten();
    })	
};

"Auf Hintergrundebene reduzieren" verändert das Dokument, deshalb muss sichergestellt werden, dass Photoshop bis nach Abarbeiten des Befehls wartet. Dies wird durch die Schlüsselworte async, await und executeAsModal sichergestellt.

Ein anderes Beispiel ist der Aufruf einer beliebigen Aktion. Das Code-Beispiel von Adobe habe so ergänzt, dass jedes Aktionsset gewählt werden kann:

async function do_action(Actionset, Action) {

	const app = window.require("photoshop").app;
	const core = require("photoshop").core;
    
    const allActionSets = app.actionTree;
    let actionsets = new Map();

    allActionSets.forEach((actionset) => { actionsets.set(actionset.name, actionset)});
    const myActionSet = actionsets.get(Actionset);
  
    if (myActionSet) {
        let actions = new Map(); 
        myActionSet.actions.forEach((action) => { actions.set(action.name, action)});
        const myAction = actions.get(Action);
        if (myAction) { 
            await core.executeAsModal(() => {myAction.play();
        })}
	    else
		    showAlert("Aktion " + Action + " nicht gefunden.");
	}
	else
		showAlert("Aktionsset " + Actionset + " nicht gefunden.");	
};

(Die showAlert-Funktion ist in der beigefügten zip-Datei zu finden.)

Der Aufruf wird wieder auf einen Button gelegt, und der Button übergibt den Namen des Aktionssets und der Aktion an die Funktion:

document.getElementById("nik_define").addEventListener("click", function () {do_action("Nik", "Dfine")});

 

[shreblov]

AW: Eigene Plugins mit Adobe UXP erstellen

Teil 4: batchPlay und commandID
JavaScript-Code für batchPlay geht sehr komfortabel mit dem Alchemist Plugin für Photoshop. Im Github gibt es oben rechts den Button "Code" und darunter der Download als Zip-Datei. Nach Entpacken wird das Plugin im UXP Developer Tool geladen (die benötigte manifest.json liegt im dist-Verzeichnis). Die Nutzung von Alchemist ist in dem oben verlinkten Video-Tutorial von Davide Barrance in "Things to know #7/8 erklärt" ausführlich erklärt. In Kürze (Anhang #5):

• 1. Listener aktivieren
• 2. Type und Category auf "Listener" setzen, in Filter "Exclude" auswählen (und nichts in der Liste ändern).

Dann in Ps die gewünschte Funktion ausführen (in diesem Fall Bild>Modus>8 bit).

• 3. zeigt die aufgezeichneten Funktionen aus, in diesem Fall nur "convertMode".
• 4. Auf den Menüeintrag "Code" klicken.
• 5. zeigt den gesamten batchPlay-Code.
• 6. ist der Code-Abschnitt, der sich bei Funktionen unterscheidet.

Diese drei Zeilen Code werden in Funktion eingefügt, und zwar nach "const command = {" und vor "_options: {":

async function eightbit() {
   
    const { batchPlay } = require("photoshop").action;
    const { executeAsModal } = require("photoshop").core;

    const command = {
        _obj: "convertMode",
        depth: 8,
        merge: false,
        _options: {
           dialogOptions: "dontDisplay"
        }
    }
 
    executeAsModal(() => {
        batchPlay([command], {});
    },  { 
            commandName: "eightbit"
        }
	);
};

Die dritte Möglichkeit, Ps über Funktionen in der index.js zu steuern, ist über eine PS-interne eindeutige commandID. Die commanID bekommt man wieder über das Alchemist-Plugin.

• 1. Filter auf None setzen

Dann in Ps die gewünschte Funktion ausführen (in diesem Fall Bearbeiten>Rückgängig).

• 2. Zeigt diesmal zwei Events, invokeCommand (das ist der Aufruf von Rückgängig) und historyStateChanged (das ist die ausgeführte Aktion)
• 3. Mit einem Klick auf invokeCommand sieht man unter Code die commandID, hier 101.

Die Funktion für die Ausführung über die commandID:

async function exec_commandid(CommandID) {
	
    var result = require('photoshop').core.performMenuCommand({
        commandID: CommandID, 
        kcanDispatchWhileModal:true,
        _isCommand:false
    });
}

Die commandID wird über den Button an die Funktion übergeben:

document.getElementById("undo").addEventListener("click", function () {exec_commandid(101)});

(101 für Undo, 132 für Redo, 32 für Speichern unter, 1180 für den Aufruf der Stapelverarbeitung usw.)

 

[shreblov]

AW: Eigene Plugins mit Adobe UXP erstellen

Aus dem fertig entwickelte Plugin wird über das Packaging im UXP Developer Tool eine .ccx-Datei erstellt. Mit einem Doppelklick auf die .ccx-Datei installiert sie sich (bei Windows) im Verzeichnis c:\Users\[username]\AppData\Roaming\Adobe\UXP\Plugins\External" und wird beim nächsten Start von Photoshop automatisch geladen.

Die .ccx-Datei kann auch einfach weitergegeben werden. Das Signieren wie bei CEP entfällt.