Tips | Photoshop Scripting and Shortcuts

As a game developer, I often work in Adobe Photoshop (or directly with game artists who are). As such, I find it is regularly helpful to create scripts that will perform a variety of the otherwise mundane tasks that may take hours to complete by hand.

For this, Photoshop offers a variety of scripting languages (AppleScript, VBScript, JavaScript). For the sake of simplicity and general prevalence of the language documentation, I choose to work in JavaScript.

An Example

For a simple example, suppose an artist is building a large scene (say 5120 x 2048) for use in-game. For in-engine game performance, perhaps we want to automatically slice the large image into 40 individual 512^2 chunks, saving both high and low-res versions as PNG files. The meat of such JS code might look something like this:

for (var i = 0; i < imageQuadWidth; i++) 
  for (var j = 0; j < imageQuadHeight; j++) 
{
    var bounds = [i*512, j*512, (i*512) + 512, (j*512) + 512]; 
    flipped_j = (imageQuadHeight)- j - 1;			
    
    docRef.crop(bounds);   
    
    //Save full resolution version
    var saveFile = new File(baseFileNameFull + i + "_" + flipped_j +".png"); 		
    docRef.exportDocument(saveFile, ExportType.SAVEFORWEB, opts);
    docRef.saveAs(saveFile, bigOptions, true, Extension.LOWERCASE);

    //SAVE small resolution version
    docRef.resizeImage(64,64);
    var saveFile64 = new File(baseFileName64 + i + "_" + flipped_j + "_64.png");   
    docRef.exportDocument(saveFile64, ExportType.SAVEFORWEB, opts);
    
    //Reset history (undo resize and crop)
    docRef.activeHistoryState = myHistoryState;
}

Executing the Script

I would create such a script in my favorite text editor (UltraEdit, Notepad++, etc) and then save the script as a ".jsx" file.

In order to execute in Photoshop, I can simply select File -> Scripts -> Browse from the Photoshop menu and browse to my file.

Access from the Menu

Unfortunately, this process (3 menu clicks and a folder browse) can itself become tedious (especially for a task you want to do regularly) and there is no easy way to create your own menu items within Photoshop.

However, if we place the script in the appropriate directory (for me it is C:\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Scripts) and then restart Photoshop, the script will be automatically added to the menu under File -> Scripts -> MyScriptName

That's okay, but we can do better.

Keyboard Shortcuts and Menus

Select Edit -> Menus in Photoshop (or Alt+Shift+Ctrl+M) to access the Photoshop Menu editor. While we cannot easily create a new menu, we can highlight our script to make it easier to find.

To do this, on the "Menus" tab, ensure "Menu For" is set to "Application Menus". Then simply expand "File" and find your script listed and modify the highlighted color.

Note: that this folder is likely protected by Administrator access restrictions, so you'll want to ensure you're using your text editor in "Run As Administrator" mode. If not, you can save in a user folder and manually copy the script using Windows Explorer. In this case, the OS will prompt you with a "You'll need to provide administrator permission..." dialogue box in order to add/modify items within the Photoshop installation folder.

Again, this is better (easier to find in the list), but still not great; it requires 3 clicks to execute.

Add a keyboard shortcut by flipping to the "Keyboard Shortcuts" tab, finding your script, and adding a shortcut.

Now, your script can be placed at your (or better yet... your artist's) fingertips.

It might not seem like much, but even on a small indie game project... a few seconds of a repetitive task can add up to hours or even days.

For more topics on 2D graphics programming, be sure to check out my book, 2D Graphics Programming for Games available now both online and through your favorite independent bookseller.

Also, somewhat related, here is a great little write-up about optimizing Photoshop performance: http://realmacsoftware.com/blog/optimize-photoshop-performance