Adobe Photoshop CC Extension – Panel (HTML/JavaScript)

Video overview of a Photoshop extension I built to help with some common workflows for our photo studio folks at work. Built entirely in HTML/JavaScript using any code editor of your choice (e.g. not using eclipse and that adobe provided tooling)

Use the resource below to get started. Some key callouts I learned in development:

  • add a debug refresh button to reload your extension’s content when updating html/js file
  • when making changes to the .jsx file, disable/enable the extension to see changes reflected
  • use defaults write com.adobe.CSXS.8 PlayerDebugMode 1 to side load an unsigned extension (make sure you restart/log out/or kill process for changes to take effect)
  • put your extension dir in /Users/$user/Library/Application Support/Adobe/CEP/extensions/ – if this path doesn’t exist you can create it
  • watch out for ruler units – ensure your logic considers the user’s ruler units before doing arithmetic. Some sample code I’ve seen and have used suggest doing:
    1. origRulerUnitPrefs = app.preferences.rulerUnits; //save original
    2. app.preferences.rulerUnits = Units.PIXELS; //set
    3. //do logic
    4. app.preferences.rulerUnits = origRulerUnitPrefs; //restore original

Resources:

https://github.com/Adobe-CEP/Getting-Started-guides/tree/master/Client-side%20Debugging

https://www.adobe.com/content/dam/acom/en/devnet/photoshop/scripting/photoshop-cc-scripting-guide.pdf