Thursday, January 7, 2010

ExtendScript (JavaScript) in Photoshop Part 1: Work Flow Setup


Photoshop's primary method for creating new tools is through ExtendScript. ExtendScripts can be implemented in three different languages: JavaScript, VBScript and AppleScript. JavaScript is by far the most popular and the only cross platform option. This article will explain all the elements needed to start developing scripts for Photoshop as well as some more advanced topics such as loading external libraries. I will also be concentrating for now on the Windows platform when discussing external libraries and file paths and assuming Photoshop CS4 or above.

What can you do with scripts in Photoshop:
  • Write tools without UI that can be executed from the File >> Script menu or from actions.
  • Write tools with modal UI that can be executed from the File >> Script menu or from actions.
  • Assign scripts to execute when events are triggered within Photoshop.
  • Access the local file system.
  • Load external libraries for extra functionality.
  • Access XMP data.
  • Control almost all parts of Photoshop.

What can't you do with scripts in Photoshop:
  • Scripts cannot create non modal windows, ie tool palettes.
  • Modify the standard Photoshop menus or tool panels.
  • Give Photoshop the ability to handle new image file types.
  • Create Filters.

I don't like the word “can't” so I will be listing ways to achieve the above points with other technologies later.



Setting Up Your Work Flow

First thing you need to do is make sure you have the following apps and documentation installed and handy:

  1. Adobe ID. If you haven't already go create yourself an Adobe ID, will make life easier and you will need it to post on the Adobe support forums. If you are into privacy or in a hurry you can use BugMeNot to login.
  2. Photoshop CS4 or above.
  3. ExtendScript Toolkit. This is the IDE you will be working in.  
  4. BareTail. This is a real-time log viewer with basic keyword highlighting. 
  5. Photoshop CS4 Scripting Guide. General Scripting info. Is installed with Photoshop or get it HERE.
  6. Photoshop CS4 JavaScript Reference. JavaScript specific info plus Photoshop DOM reference. Is installed with Photoshop or get it HERE.
  7. Javascript Tools Guide CS4. I don't know why Adobe hides this doc away. It contains information about XML, XMP, file system access and accessing external libraries from JavaScript.

Here are some locations of interest and places to get help:

Official Adobe Photoshop Scripting Forum – The best resource for information and help.
PS Scripts – Go straight to the forum. Another great resource with plenty of code snippets hidden away in posts.
Scripting Photoshop from C# - For those of you adventurous enough to try some COM action.
Dr WooHoo! – A great resource for anything on the cutting edge of Adobe development with plenty of tutorials, especially if you are doing anything Flash related.  Make sure you check out his blog.
W3 School JavaScript Tutorials – A good resource for learning the JavaScript language.

Locally you want to check out these folders (assuming standard install):
Scripts Folder
x86 Systems:
C:\Program Files (x86)\Adobe\Adobe Photoshop CS4\Scripting
x64 Systems:
C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Scripting

Here you will find some of the above mentioned PDFs in the documentation folder and also sample scripts.

Presets Scripts
x86 Systems:
C:\Program Files (x86)\Adobe\Adobe Photoshop CS4\Presets\Scripts
x64 Systems:
C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Presets\Scripts

Here you will find the scripts available in the File >> Scripts menu, also the scripts available by default to assign to events.


Script Listener
The Script Listener is a plugin which logs all actions and events running through Photoshop to a text file on your desktop. Why do we need this? Well not all Photoshop commands are natively scriptable through the JavaScript DOM. That means there aren't specific commands for all actions in Photoshop. However 99% of Photoshop's actions are logged by the Script Logger which can be copied and pasted into a script. This is also useful when scripting the functionality of 3rd party plugins.


To install the Script Listener close Photoshop and copy this file:
x86 Systems:
C:\Program Files (x86)\Adobe\Adobe Photoshop CS4\Scripts\Utilities\ScriptListener.8li
x64 Systems:
C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Scripts\Utilities\ScriptListener.8li


to here:
x86 Systems:
C:\Program Files (x86)\Adobe\Adobe Photoshop CS4\Plug-ins\
x64 Systems:
C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Plug-ins\

If you want you can make a ScriptListener Folder in the Plug-ins folder and put it there.

To check it is working correctly open Photoshop and create a new image. Go to your desktop and you should find a file called ScriptingListenerJS.log which is a standard text file.
BareTail is a real-time log viewer which means it automatically displays any new log entries. It also has some simple keyword highlighting to make it easier to view the log. You can download a BareTail prefs file here to get you started. Once BareTail is installed choose Preferences >> Load From File....
The only thing BareTail doesn't do is clear the log. If you want you can create a batch file on your desktop which does this and add a shortcut to it:

ClearPhotoshopLogs.bat



And now you are ready to start scripting any solution in Photoshop. Stay tuned for part 2 of this adventure when we explore some scripting concepts that are not covered in most tutorials.


2 comments:

  1. Hey Geordie,

    I got a specific question, because part2 seems to be delayed by a couple of years at least. I'm looking to create an automation extension for photoshop. I'm thinking about using ExtendScript but I also need a UI element (a button of sub menu or something of that sort). You mention that that are ways to overcome the non-UI nature of photoshop scripts, are you referring to FlashPanel? If not could you please mention what you are talking about?

    Thanks!
    Maxim.

    btw, this post is really helpful. I would love it if you found a time to write some more.

    ReplyDelete
  2. p.p.s you have a huge bug in the layout of the comments - I had to do dom manipulation on the iframe to set height : 1024px in order to be able to input the human verification code so that I could submit the previous comment. I would appreciate an answer here, or if you can't comment at maxim.codingbynumberz@vekslers.org or at @MaximVeksler on twitter.

    Thanks and hope you are reading this. :)

    ReplyDelete