Tutorial: Eigene Extensionen/Erweiterungen für Photoshop CC

shreblov · 5 Januar 2016

Bis CS6 konnte man sich über den Adobe Configurator interaktiv eigene Bedienpanel erstellen. Die sind sehr praktisch, z. B. um verschiedene Schritte eines Workflows zusammenzufassen und mit einem Mausklick auszuführen.
Ab CC 2015 funktioniert der Configurator (und damit erstellte Panels) nicht mehr, da die verwendete Technologie – Flash – langsam unsicher ihrem Ende entgegengeht.

Ab CC heißen die Panels Extensions bzw. Erweiterungen, die verwendeten Technologien sind HTML5 und Javascript und das wirkt eher abschreckend.
#2 und #3 enthalten zwei einfache Erweiterungen, die als Vorlage für eigene Erweiterungen genutzt werden können (Download hier).
Um die Beispiele möglichst einfach zu halten, habe ich mich bei HTML5 beschränkt und z. B. Cascading Style Sheets nicht verwendet. Ausgefeilte Beispiele für den gegenüber den alten Panels deutlich erhöhten Funktionsumfang kann man sich z. B. hier anschauen.

Noch ein paar generelle Anmerkungen:

Zunächst habe ich die Erstellung von Erweiterungen über den von Adobe vorgeschlagenen Weg mit dem Adobe Extension Builder Plugin und Eclipse versucht (Anleitung dafür z. B. hier). Das habe ich nach diversen Versuchen abgebrochen. Die letzte Version des Extension Builder Plugin ist von 2014, und da passen einige Einstellungen nicht mehr zu CC 2015 (s.u. in #2). Mit den richtigen Einstellungen meldet Eclipse Fehler und mit den falschen Einstellungen ist die Erweiterung in Photoshop nicht verfügbar. Ein Adobe Mitarbeiter hat eine Alternative entwickelt (Brackets), das habe ich nicht ausprobiert.
Ohne Eclipse und das Plugin geht es auch, es ist dann etwas mehr manuelle Arbeit notwendig. Vieles geht aber über Copy & Paste und einen vernünftigen Text Editor. Ich nutze Notepad++, den gibt es auch als portable Version.

Beim Start durchsucht Photoshop zwei Verzeichnisse nach Erweiterungen, und zwar (Windows)
Benutzername\AppData\Roaming\Adobe\CEP\extensions
und
C:\Programme (x86)\Common Files\Adobe\CEP\extensions

Bei der Entwicklung einer Erweiterung nutze ich das Benutzername-Verzeichnis, fertige landen dann im Programme (x86)-Verzeichnis und stehen so allen Nutzern des Rechners zur Verfügung. (Das Verzeichnis im Benutzername-Verzeichnis musste ich nach der Installation von CC selber anlegen.)

Vor der Weitergabe von Erweiterungen müssen diese signiert werden (Anleitung und Programm hier), dabei entsteht eine ZXP-Datei. Unsignierte Erweiterungen führt Photoshop nicht aus. Da das Signieren während der Entwicklung sehr unpraktisch ist, sollte in der Registry (Windows) unter HKEY_CURRENT_USER/Software/Adobe ein neues Schlüsselfeld CSXS.6 mit dem Zeichenfeld Player_Debug_Mode mit dem Wert 1 angelegt werden.

Wenn alles funktioniert, sind nach dem Start von Photoshop die Erweiterungen über Fenster>Erweiterungen aufrufbar.

Und noch ein paar Links:
Adobe SDK Dokumentation: https://github.com/Adobe-CEP/CEP-Resources/tree/master/CEP_6.x
Kochbuch: https://github.com/Adobe-CEP/CEP-Resources/wiki/CEP-6-HTML-Extension-Cookbook-for-CC-2015
Blog von Davide Barranca (er schreibt ein Buch dazu): http://www.davidebarranca.com/
Photoshop Script Ressourcen: http://www.adobe.com/devnet/photoshop/scripting.html

shreblov · 5 Januar 2016

Erstes Beispiel: Aufruf einer Aktion
Vorgehensweise: meine Beispiele herunterladen, entpacken und in das Verzeichnis Benutzername\AppData\Roaming\Adobe\CEP\extensions kopieren. Beim Aufruf von Photoshop sollten dann die beiden Erweiterungen unter Fenster>Erweiterungen angezeigt werden. Wenn der Registry Eintrag (s. o.) vergessen wurde, gibt es eine Fehlermeldung.

Erklärungen zur Erweiterung StartAktion:

Das Unterverzeichnis von StartAktion enthält die index.html

Code:

<!doctype html>
<html>
  <body>
    <button id="btn_StdAktion">Quadrantfarben</button>
  </body>
  <script src="lib/CSInterface.js"></script>
  <script src="script/main.jsx"></script>
</html>

Hier wird die HTML Seite definiert mit einem Button (btn_StdAktion), dem Text auf dem Button (Quadrantfarben). Weiterhin gibt es den Link zu zwei Scripts (CSInterface und main), s. u.

Das Unterverzeichnis CSXS enthält das manifest.xml (Erklärungen im Anhang 1). Falls ältere Erweiterungen nicht mit CC 2015 funktionieren, liegt das an falschen Versionsnummern. Einfach die im Anhang 1 rot markierten Bereiche im manifest.xml der älteren Erweiterung überprüfen und entsprechend abändern.

Das Unterverzeichnis host enthält die photoshop.jsx. Hier liegt der Javascript-Code für die Befehle, die in Photoshop ausgeführt werden sollen. In diesem Fall der Aufruf einer Standardaktion (Quadrantfarben):

Code:

function start_StdAktion () {
  	 doAction('Quadrantfarben', 'Standardaktionen');       
}

(Das Aktionsset muss in der Aktionspalette geladen sein, sonst gibt es eine Fehlermeldung.)
Auch für andere CC Anwendungen sind Erweiterungen möglich, z. B. InDesign, für Lightroom leider nicht.

Das Unterverzeichnis lib enthält die Datei CSInterface.js (Download hier). Diese Datei wird übernommen und bleibt wie sie ist, sie stellt Standard-Funktionen zur Kommunikation zwischen Erweiterung und Photoshop zur Verfügung.

Das Unterverzeichnis script enthält die Datei main.jsx:

Code:

var csInterface = new CSInterface();
var button_StdAktion = window.document.getElementById("btn_StdAktion");
button_StdAktion.onclick = function() {
  // Funktion in photoshop.jsx aufrufen
  csInterface.evalScript("start_StdAktion()");
};

Der Code in dieser Datei definiert, welche Funktion in host\photoshop.jsx beim Klick auf einen Button der index.html ausgeführt wird. In diesem Beispiel löst btn_StdAktion die Funktion start_StdAktion aus.

shreblov · 5 Januar 2016

Zweites Beispiel: Aufruf von Werkzeugen
Diese Erweiterung enthält den Bearbeitungsablauf Ausrichten und Freistellen, also Linealwerkzeug, Bearbeiten>“Bild drehen“ und Freistellwerkzeug.

Wenn man eine erste Erweiterung hat (und eine bestehende nicht erweitern möchte), ist die Vorgehensweise so:
1. Kopieren des Verzeichnisses der ersten Erweiterung (z. B. StartAktion)
2. Umbenennen des neuen Verzeichnisses (z. B. in AusrFrei).
3. In der Datei index.html die Buttons anlegen.

Code:

<!doctype html>
<html>
  <body>
        <button id="btn_Lineal"><img src="img/ruler.png" /></button><br/><br/>
	<button id="btn_Ausrichten">Ausrichten</button><br/><br/>
	<button id="btn_Freistellen"><img src="img/crop.png" /></button>
  </body>
  <script src="lib/CSInterface.js"></script>
  <script src="script/main.jsx"></script>
</html>

Bei diesem Beispiel haben die Buttons für Lineal und Freistellwerkzeug keinen Text, sondern die aus Photoshop bekannte Icons. Dazu muss noch ein Unterverzeichnis (z. B. AusrFrei\img) angelegt werden, in dem die beiden Icons abgelegt werden.

4. In der Datei host\photoshop.jsx die benötigten Funktionen anlegen.

Code:

function Lineal () {
  	var desc9 = new ActionDescriptor();
    var ref7 = new ActionReference();
    ref7.putClass( app.stringIDToTypeID('rulerTool') );
    desc9.putReference( app.charIDToTypeID('null'), ref7 );
    executeAction( app.charIDToTypeID('slct'), desc9, DialogModes.NO );       
}

function Ausrichten () {
	// =======================================================
	var idRtte = charIDToTypeID( "Rtte" );
		var desc3 = new ActionDescriptor();
		var idnull = charIDToTypeID( "null" );
			var ref1 = new ActionReference();
			var idDcmn = charIDToTypeID( "Dcmn" );
			var idOrdn = charIDToTypeID( "Ordn" );
			var idFrst = charIDToTypeID( "Frst" );
			ref1.putEnumerated( idDcmn, idOrdn, idFrst );
		desc3.putReference( idnull, ref1 );
		var idAngl = charIDToTypeID( "Angl" );
		var idAng = charIDToTypeID( "#Ang" );
		desc3.putUnitDouble( idAngl, idAng, 0.000000 );
	executeAction( idRtte, desc3, DialogModes.ALL );
}

function Freistellen () {
	var desc9 = new ActionDescriptor();
    var ref7 = new ActionReference();
    ref7.putClass( app.stringIDToTypeID('cropTool') );
    desc9.putReference( app.charIDToTypeID('null'), ref7 );
    executeAction( app.charIDToTypeID('slct'), desc9, DialogModes.NO );       
}

Den Javascript-Code habe ich über den ScriptListener generiert, da diese Befehle nicht direkt scriptbar sind (oder ich es nicht besser weiß).

5. In der Datei CSXS\manifest.xml an drei Stellen (siehe Anhang 2) „StartAktion“ durch z. B. „AusrFrei“ ersetzen sowie den Anzeigetext ändern.

6. In der Datei script\main.jsx für jeden Button den Aufruf der Funktionen in host\photoshop.jsx anlegen.

Code:

var csInterface = new CSInterface();
var button_Lineal = window.document.getElementById("btn_Lineal");
button_Lineal.onclick = function() {
  // Funktion in photoshop.jsx aufrufen
  csInterface.evalScript("Lineal()");
};

var csInterface = new CSInterface();
var button_Ausrichten = window.document.getElementById("btn_Ausrichten");
button_Ausrichten.onclick = function() {
  // Funktion in photoshop.jsx aufrufen
  csInterface.evalScript("Ausrichten()");
};

var csInterface = new CSInterface();
var button_Freistellen = window.document.getElementById("btn_Freistellen");
button_Freistellen.onclick = function() {
  // Funktion in photoshop.jsx aufrufen
  csInterface.evalScript("Freistellen()");
};

Der zeitaufwändigste Schritt ist die photoshop.jsx, der Rest ist Fleißarbeit und schnell gemacht.

ASretouch · 5 Januar 2016

Sehr interessant

Ich habe mir aus dem Customtool, welches nur Scripte aufrufen kann, ein eigenes Pannel erstellt.
Um damit auch Aktionen aufrufen zu können braucht es nur einen kurzen Umweg über ein jsx-script:

PHP:

app.doAction("Aktionsname","Aktionsordner.atn")

Die dazugehörigen Icons habe ich kurz erstellt und mit gleichem Namen im Scripteordner als png abgespeichert: Aktionsname.png

shreblov · 5 Januar 2016

Customtool kenne ich nicht, hast Du mal eine Anleitung zur Hand?

ASretouch · 5 Januar 2016

Mir scheint das ist das selbe wie das von dir verlinkte Photoshop Scripts Panel.
pspowertools... Anleitung...

shreblov · 5 Januar 2016

Danke, aber das kostet Geld, mein Weg nur Zeit.

ASretouch · 5 Januar 2016

Umgerechnet 15 € - das war es mir wert, zumal ich im scripten nur ne winzige Leuchte bin.
Ich verstehe grob was du da gemacht hast, mehr aber auch nicht.

Ich finde es auf jeden fall klasse was du da erstellt hast und das du es hier zeigst

shreblov · 10 Januar 2016

Gern geschehen, Thema scheint dann aber doch von nur sehr eingeschränktem Interesse. Egal, noch ein kleiner Nachschlag, Aufhübschen der Buttons mit CSS (Cascading Style Sheet). CSS sind Formatvorlagen, die einzelnen Elementen zugeordnet werden und so ein einheitliches Aussehen sicherstellen.
Die Buttons sollen nicht weiß mit schwarzer Schrift sein, sondern umgekehrt. Das Schwarz soll die Standardhintergrundfarbe der Erweiterung bekommen. Außerdem sollen die Buttons mittig zentriert sein.
Zunächst die index.html öffnen (hier wieder die vom ersten Beispiel StartAktion) und die rot markierten Teile hinzufügen:

Code:

<!doctype html>
[COLOR="Red"]<head>
   <link rel="stylesheet" type="text/css" href="./CSS/eigene-css.css">
</head>[/COLOR]
<html>
  <body>
       <button [COLOR="Red"]class=”button”[/COLOR] id="btn">Test</button>
  </body>
</html>

Mit dem link-Tag wird die CSS Datei eingebunden und im button-Tag wird der Schaltfläche die Klasse „button“ zugeordnet.

Im Verzeichnis StartAktion ein Unterverzeichnis CSS anlegen (also StartAktion\CSS) und in diesem Verzeichnis die Datei eigene-css.css anlegen (also StartAktion\CSS\eigene-css.css). Folgenden Text einfügen, der die Eigenschaften und Werte der Klasse „button“ beschreibt:

Code:

  .button {
  font-family: Arial;         /* Schriftart */
  color: #ffffff;             /* Schriftfarbe */
  font-size: 12px;            /* Schriftgroesse */
  background: #535353;        /* Hintergrundfarbe */
  padding: 8px 20px 8px 20px; /* Abstand des Textes vom Rand */
  border: solid #acb6ba 0px;  /* Rahmenfarbe und Groesse */
  text-decoration: none;      /* ?? */
  display: block;             /* wird fuer Zentrieren benoetigt */
  margin: 0px auto;           /* horizontal zentrieren */
}
.button:hover {
  background: #acb6ba;
  color: #535353;
  text-decoration: none;
}

button:hover beschreibt die Eigenschaften, wenn der Mauszeiger auf den Button zeigt (hier wechseln Hintergrund- und Textfarbe). Es gibt noch viel mehr Eigenschaften für Buttons, z. B. Schatten, graduelle Füllung, Abrunden usw. usf. Im Internet sind bergeweise Button Generatoren verfügbar, die eine CSS Beschreibung erzeugen.

Salve · 25 Juli 2017

Vielen Dank für deine Anleitung shreblov.
Ich arbeitete bisher mit CS5 und konnte meine Panele sehr einfach mit dem Configurator erstellen, was nun in CC2017 nicht mehr geht. Ich habe mehrere Scripte zur Speicherung von Dateien in unterschiedlichen Ordnern und in verschiedenen Auflösungen erstellt, Dateibezechnungen mit verschiedenen Anhängen usw. Leider komme ich jetzt mit der Signierung der Erweiterungen nicht klar, kannst du das bitte erwas ausführlicher beschreiben.
Vielen Dank Salve.

shreblov · 25 Juli 2017

Da muss ich mich jetzt erstmal wieder hineindenken. Nach dem Schreiben des Tutorials bzw. nachdem meine Extension fertig war, habe ich mich damit gar nicht mehr beschäftigt.
Erste Fragen: Läuft die Extension unsigniert also mit dem Player_Debug_Mode = 1 in der Registry wie oben beschrieben? Vielleicht heißt der Schalter inzwischen CSXS.7, ich kann erst heute Abend nachsehen. Und welche Fehlermeldung bekommst Du?

shreblov · 25 Juli 2017

Für die aktuelle CC Version braucht es tatsächlich in der Registry unter HKEY_Current_User>Software>Adobe ein CSXS.7 mit PlayerDebugMode 1, die Unterstriche sehe ich in der Registry nicht mehr.

Ansonsten gibt es hier eine ältere Anleitung zum Signieren und Packen (Schritte 1 und 2) und hier das aktuelle ZXPSignCMD.

Tutorial: Eigene Extensionen/Erweiterungen für Photoshop CC

shreblov

shreblov

Anhänge

shreblov

Anhänge

ASretouch

Gesperrt

Anhänge

shreblov

ASretouch

Gesperrt

shreblov

ASretouch

Gesperrt

shreblov

Salve

shreblov

shreblov