Photoshop Automation using JavaScript Series

A comprehensive guide to automate just about anything in Adobe Photoshop

That’s right Photoshopers, be prepared to be mind-blown as in this post we will control Adobe Photoshop using plain old Javascript.

Prerequisites

1. Basic knowledge of Photoshop.
2. Basic knowledge of Javascript.

Intro

Since it’s inception, Photoshop has provided us with tools to automate repetitive tasks, enabling us to spend more time on the creative process. One such tool is called Actions, where the software records and saves the actions performed by us in chronological order which can then be replayed when required. As easy to use it is, there are a few drawbacks such as certain Photoshop elements are not easily accessible to actions and more importantly, conditional actions cannot be performed.

In this post, I will start from scratch i.e. setting up the coding environment and end by using a script to create 12 cards for the Marvel’s Orignal Avengers.

Final Project

1. The Setup
2. First Script: “Hello Photoshop!”
3. Working with Documents
4. Working with Layers
5. Exporting Documents
6. Working with Data
7. Putting it all together: The Avengers
8. References

You can use any text editor of your choice. For this post, I will be using ExtendScript Toolkit CC and Photoshop CC 2019.

Setup

In order to write scripts for Photoshop or for any other Adobe product, I would recommend using ExtendScript Toolkit which comes bundled with Adobe CC. ExtendScript gives code completion and integration with Adobe applications. There are two ways for downloading ExtendScript Toolkit, you can either download it from here or if you have a Creative Cloud subscription:

1. Go to your Creative Cloud desktop app.
2. Goto Settings > Preferences.
3. Make sure Show Older Apps checkbox is checked
4. Goto Apps and you will find ExtendScript Toolkit Listed.
5. Hit Install.

First Script: “Hello Photoshop!”

Open up your editor and let’s start coding. In this script, we will create a new document (50cm by 50cm) and add a new text layer with the text “Hello Photoshop”. Don’t worry about the details we will talk about them in detail in a bit.

// Create a new document 
// 50cm X 50cm at 72 dpi
// Title: helloPhotoshopvar 
document = app.documents.add(50, 50, 72, "helloPhotoshop");
// Add a new layer
var layer = document.artLayers.add()
layer.kind = LayerKind.TEXT;
layer.textItem.contents = "Hello Photoshop!";
layer.textItem.size = 50;

If you are using ExtendScript Toolkit as your editor you can select Photoshop and click on the Play button on the top toolbar.

You can also drag a script file onto Photoshop and it will execute it.

Working with Documents

Photoshop can read .psd files and also various other image formats. Using scripts we can create, read, update, delete and save any such supported file. Let’s dive into the details of what the above code does.

Create: In the above script, app is a reference to the current application (Abode Photoshop), documents is an Array that holds currently opened documents within the application. We can create a new document by calling add and passing the size, dpi, and name of the new document.

Open: In a similar way, we can open an existing file into Photoshop using app.open().

const file = File("helloWorld.psd");
var document = app.open(file);

If there are multiple documents open, you can get the currently active document by using app.activeDocument;

Save: In order to save a document, first, create a File() object passing in the file path. Then save the file by calling document.saveAs(file). This will create a .psd file at the specified path. In order save our helloPhotoshop as photoshop document, add these lines to our helloPhotoshop.js script.

var document = app.documents.add(50, 50, 72, "helloPhotoshop");
// Add a new layer
var layer = document.artLayers.add()
layer.kind = LayerKind.TEXT;
layer.textItem.contents = "Hello Photoshop!";
layer.textItem.size = 50;
// Saving the file
const file = File("helloPhotoshop.psd");
document.saveAs(file);

Update: To update a document, first, open the previously created file. We will change the text of the text layer from “Hello Photoshop!” to “Hello Photoshop CC!”. In order to get the layer, we will use

document.artLayers.getByName(<LayerName>) method.

Since we are dealing with a text layer, the layer’s name is the same as the text. Update text layers contents and then save the file.

// OPEN the previously created file.
const file = File("helloPhotoshop.psd");
var document = app.open(file);
// Get the 'Hello Photoshop!' text layer
var layer = document.artLayers.getByName ('Hello Photoshop!');
// Change its contents
layer.textItem.contents = "Hello Photoshop CC!";
// SAVE the document
document.save();

Now that we have the basics out of the way, lets dive in deeper and start working with layers and layer sets in the next post of this series.