Photoshop Automation using JavaScript #2 — Working with Layers

This is the second part in the Photoshop Automation series. In the previous post we went through the basics of scripting and document CRUD using Javascript. In this post we will dive deeper and learn about working with layers and how to export a document to the desired format.

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

Working with Layers

As with documents, we can create, read, update, delete layers and layer sets (or Groups as they are called in UI) programmatically.

Let’s get the current document and create a new layer “Background” and fill it with red color.

In order to use the Fill tool we will first select the entire layer and then fill it with a color.

// Get the current document
var document = app.activeDocument;
// Create color object of color red
var fillColor = new SolidColor();
fillColor.rgb.red = 222;
fillColor.rgb.green = 0;
fillColor.rgb.blue = 0;
// Add a new layer called Background
var layer = document.artLayers.add();
layer.name = "Background";
// Select the entire layer
document.selection.selectAll()
// Fill the selection with color
document.selection.fill(fillColor);
// Deselect
document.selection.deselect();

Working with Layer Sets

Layer set or Groups are collections of layers. To this document, we will add a “TEXT” layer set which will house all our text layers.

var layerSets = document.layerSets.add();
layerSets.name = "TEXT";

To this “TEXT” layer group lets add a new text layer.

// Create a new text layer inside our layour group called layerSets
var newLayer = layerSets.artLayers.add();
newLayer.kind = LayerKind.TEXT;newLayer.name = "MoveName"
// Set font size, font style and position
newLayer.textItem.size = 50;
newLayer.textItem.font = "Verdana";
newLayer.textItem.position = [350, 400];
newLayer.textItem.contents = "AVENGERS";

Performing Actions on Layers

Update: In order to update properties — opacity, bending mode etc. — or content of the layer first we will get the layer by its name and then perform modifications.

Let’s change the background color of our “Background” to green and the blending mode of our “MovieName” layer to SOFTLIGHT. In order to do the select operation on the “Background” layer, we will first have to set it as the documents active layer and then perform the select operation.

As the “MovieName” layer is inside a layer group, we will first have to fetch the layer group by name and then fetch the layer from it.

var fillColor = new SolidColor();
fillColor.rgb.red = 0;
fillColor.rgb.green = 183;
fillColor.rgb.blue = 159;
// Set the background layer as the active layer
document.activeLayer = document.artLayers.getByName ('Background');
document.selection.selectAll();
document.selection.fill(fillColor);
document.selection.deselect(); 
// Changing the blend mode of the text layer to softlight
var textLayer = document.layerSets.getByName ('TEXT').layers.getByName('MovieName');
textLayer.blendMode = BlendMode.SOFTLIGHT;

Deleting Layers: We can remove a layer from the document by calling the remove() method. Following code, deletes the “Background” layer and “TEXT” layer set.

// Get the layer by name and call remove
document.artLayers.getByName ('Background').remove();
// Get the layer set by name and call removedocument.layerSets.getByName ('TEXT').remove();

However, if we just want to delete all layers within a layer set but not the layer set (Group), then we need to first get all the layers within that layer set and use removeAll() to delete all the layers within that layer set.

// Get all layers in a layerset and call removeAll()document.layerSets.getByName ('TEXT').layers.removeAll()

Exporting Documents

After working on a Photoshop document the final step is often to export it as a JPEG or a PNG. In this section, we will export our current photoshop document as a JPEG file. Similar to saving a document, we will use document.saveAs(file)method. This method also accepts a second optional argument which specifies the file type in which the file needs to be stored in along with additional configuration parameters.

Following code saves the current file as a JPEG file.

// Get the active document
var document = app.activeDocument;
// export file options
var jpegConfig = new JPEGSaveOptions();
jpegConfig.quality = 10;
// File path to export
var filename = 'avengers.jpg';
var file = File(filename);
document.saveAs (file, jpegConfig);

However, if you were to execute this code, you will notice the Photoshop’s file save as dialog pops up and pauses the execution of the script.

This is alright if we are exporting a single image but in case we were exporting multiple images, we will have to type in the name of the file and click on save button manually. As we know beforehand what the file name is and where we are going to save our file we can omit this popup by disabling dialog popups.

This can be done by setting app.displayDialogsto DialogModes.NO. Add the following line to the top of the script.

app.displayDialogs = DialogModes.NO;

Now when you run the script the pop up will not show and file will be saved at the specified location.

In the next and last post of this series we will put all that we have learned so far into action by automating creation on 12 Avengers name cards.