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.


Monday, January 4, 2010

Expanding Photoshop's Horizons: Plugins, Scripts and Flash



Working in any large scale creative team means big work flow problems at one time or another. Solving these problems often means creating custom tools for key pieces of software such as Maya, 3D Studio Max and yes, Photoshop. Compared to other major DCCs Photoshop is very inflexible which can lead to both frustration and innovation. Maya for example allows you to strip back the entire application if need be and customise almost every facet of it's inner workings. Photoshop does not. However the introduction of CS4 and soon the next iteration CS5 brings some major improvements to customisability of Photoshop bringing it closer to Game and Film production pipelines.

In this and the following posts I will explain the different ways Photoshop can be expanded and customised, giving examples of exposing some development voodoo, some of which may not be exactly what Adobe wants you to hear but it gets the job done. I will be posting links to the latest section articles on this page as I write them.  When giving more specific examples of of writing scripts etc I will be focusing more on development work flow rather than language How Tos.


In this post I will introduce the main concepts of expanding Photoshop CS4 from simple to complex. These articles may be read by people of all skill levels so all I'll assume is a good understanding of Photoshop concepts and UI.


Actions and Automation
Actions and automation are the simplest ways to make tasks easier and faster. An action is a macro recording of a series of events triggered by the user such as opening a file, deleting a layer or applying a filter. Automation is applying an action automatically over multiple images such as a folder of PSDs.

Pros:
  • Very easy for anyone of a team to create and use.
  • Easily imported and exported from Photoshop.
  • Can include functionality from 3rd party plugins.
Cons:
  • No automatic way of distribution to team members.
  • Not every function in Photoshop is captured by the action system.
  • Linear execution, no logic etc.


Scripting has been the main way of expanding Photoshop since the early days. Scripts can be created in Javascript, VBScript and Applescript. I will only cover JavaScript in these articles since it is by far the most popular and the one that I know. Most functionality has native Javascript DOM support and there is also a plugin which allows you to listen to Photoshop's internal workings which can be scripted with a bit of work. Scripts can be hooked into Photoshop events and called when a file is opened for example. Modal tool windows can be created to add UI elements and also communication with Flash panels is implemented.

Pros:
  • Large community support base.
  • Many free scripts are available to download and study.
  • Using the Script Logger output any Photoshop functionality can be scripted.
  • Excellent IDE and debugging tools which integrate well with Photoshop.
  • Works on all platforms (Win x86, Win x64, OSX) without the need to recompile.
Cons:
  • Can be slow to execute.
  • Not all Photoshop functionality has native scripting exposure and resorting to using the Script Logger output can be difficult and cryptic.
  • Can only create modal tool windows.


Flash Panels
Flash Panels are the newest and best way to add floating panels and UI heavy tools. Flash Panels are developed in Flex Builder (Soon to be Flash Builder which is currently in beta) using ActionScript and MXML. Flash Panels come in two flavours: PatchPanel and CSXS Panels which expose different elements of Photoshop to Flash. Anything that can be done in Flash can be done in these panels including Pixel Bender shaders and network support.

Pros:
  • Can create floating tool panels which integrate into the Photoshop UI.
  • Can be used in other packages such as Illustrator.
  • Can control most of Photoshop and hook into Photoshop events.
  • When setup can debug Flash Panels as they execute in Photoshop.
Cons:
  • Need to learn Flex IDE and MXML.
  • Can slow down if large amounts of complex UI are shown.
  • Can be tricky if MXML includes are not setup correctly.
  • Debug setup can be a pain and often crashes.

COM Automation (Windows only)
COM Automation is an older windows technology that has been superseded by parts of .Net, however it still has it's uses.  It defines a standard way of applications to publish an external interface so other applications can hook ino them.  The greate part is with a little Visual Studio magic the COM interfaces can be converted to .Net assemblies and used with C# and other .Net languages.


Pros:
  • Can utilise your existing programming skills in other languages such as C#.
  • Easily integrates inot existing external pipelines and systems.
Cons:
  • Tools are completely external so no UI integration etc.
  • Can be hard to debug.

Pixel Bender Filters
Pixel Bender is Adobes propriety shader language similar to Cg or HLSL. Pixel Bender shaders can be used inside flash or as a filter in Photoshop, After Effects etc. This is a bit of a niche but is still a big part of Photoshop use in some companies / markets and much easier to create than native plugins.

Pros:
  • Shader language is straight forward.
  • Fast execution speed.
  • Utilises graphics hardware.
Cons:
  • Pixel Bender IDE is basic pre-release software and sometime frustrating to use.
  • No debugging options.
  • May be discrepancies between IDE and Photoshop results.



JavaScript Extensions
JavaScript extensions can be very powerful. I have only had experience creating DLLs for windows but am sure its is just as easy to create OSX extensions. JavaScript extensions are coded in C++ so almost anything is possible including using other DLLs and even managed code. For a test example I created a DLL which was compiled with CLR (enabling the .Net framework) which then loaded an assembly DLL created in C# which spawned a windows form which was correctly parented to the main Photoshop window using Win32 API calls. A recent development on the Adobe Labs Patch Panel forum suggest that native wrappers for JavaScript extensions DLL might be written in Flex and used with Flash panels but I have not confirmed this.

Pros:
  • Can expose almost any functionality to JavaScript such as calls to .Net.
  • MIGHT be able to be integrated into Flash panels natively.
  • Existing DLLs can be used to access databases etc.
Cons:
  • Need at least C language knowledge.
  • Not many examples from Adobe and almost no information online.


Plugins
Plugins are the ultimate in extending Photoshop. They are written in C++ and can be used to reach into the depths of Photoshop's API. There are several major types of plugins including File I/O, Filters, Layer types etc. Since they are the most tightly integrated extension they do things on a lower level and execute quickly.

Pros: 
  • Fast Execution. 
  • Low level API access allowing integral parts of Photoshop to be expanded such as adding new file types etc.
Cons:
  • Knowledge of advanced C++ techniques needed.
  • Some examples come with the SDK but little documentation on “How To”.


Where to Start
ExtendScripts (using JavaScript) seems to be the best place to start assuming you have a good understanding of Photoshop's UI and work flow. Most general features of the JavaScript language will work so if you have any prior knowledge of C, C#, ActionScript etc you will pick it up quickly. The IDE is mature and makes debugging your scripts while they are executing within Photoshop very easy. Once you have some scripting experience under your belt it will be much easier to create Flash Panels, JavaScript extensions and plugins since most Photoshop programming terms run common through all areas.


Links

This page will serve as a repository for all the information I have run aground on during some rough seas.  Some of then turned out to be rather nice islands with coconuts and those little umbrellas in your drink...

Photoshop Development and Related Links
  • Photoshop CS4 SDK - Photoshop Software Development Kit.  Worth a look if you are getting into some more advanced scripting or obvously plugin development.
  • Bridge CS4 SDK - This has some examples of creating JavaScript extensions for use with your scripts and panels.



3DS Max Maxscript and Plugins


Maya, Qt and Python


.Net and C# 
  • Reflector - Awesome tool for exploring  .Net assemblies and decompiling code.

Tools 
Network and Web Tools
  • HTTrack - This is a web site copier and offline browser.  Highly configurable to hoover down anything it can from a web site.  Useful for archiving sites and pulling down image catalogues.
  • HTTP Recorder, TCP Spy and TCP Viewer - All from the same company, they are great for snooping and reverse engineering the TCP protocols between any client/server connection on a machine.

Windows Tools
  • Windows Modifier - A small util that is not very user friendly but is great for testing out Win32 API ideas if you need to hack and slash your way through a problem.  Can send messages to windows as well as reparent controls and windows.  Unfortunately there is no x64 version.
  • Winspector Spy - Another great tool for looking at the internal structure of windows.  Great if you need to get the HWND of a control for message testing etc.  Also invaluable for snooping windows messages to work out exactly what sneaky business is happinging under the sheets.  The main site seems to have gone but I managed to find the above link.
  • DebugView - Lists any debug output any open applications are outputting.  Can be very handy for diagnosing some applications or looking at debug output if you don't have a debugger installed. 
  • XMLPad - Awesome XML viewer / editor.  Can display XML data inall osrts of ways including tables.
  • Process Monitor - Lets you spy on what resources each process is accessing on your system including files and registry entries.  A lot of spam at the start but once you get your filters right is invaluable for seeing what DLLs a process is accessing and when.
  •  Process Explorer - Neat replacement for Task Manager and has a lot of extra info about processes.
 Work Flow Tools
  • UltraVNC - One of if not the best VNC implementation.  Has many plugins and now worries on multiple monitors.
  • Input Director - Most of us have multiple machines on our desk now days and this is the way to control them from a central keyboard and mouse.  Even supports multiple monitors on both the server and client. 
  • Synergy - Like Input Director only cross platform and less features but still good.
  • Dirkeys - Dirkeys is an awesome program that lets you assign short cut keys to any folder visible by explorer.  These short cuts can be used anywhere you can browse for files like windows explorer or file save dialogs.  Unfortneatly it only works in Windows XP.