Automate image rotation in Photoshop using JavaScript

For one project, it was necessary to make many identical images, but each had to be rotated 1 degree relative to the previous one.

The first thing that came to mind: a php script using imagerotate from the GD library. It turns out, frankly, somewhat not what I wanted. It is easier to explain with an example:


')
Thus, when turning, the image we get more than the original. By doing a similar operation in Photoshop (Free Transform), we avoid this problem. Most likely the solution would be found when using GD, but I have long wanted to try to automate some operations in Photoshop.

So, it is necessary to automate the rotation operation and write to the file.

Original picture - compass with arrow:	Arrow in a separate layer and you need to get 360 images of this arrow. Something like that:

For greater versatility, let's complicate the script - we will make it possible not only to record each turn in a separate file, but also to make one wide image. Like that:



I have an old photoshop, CS1, so the script for it. However, under CS2 will go without problems, and under the older version of the work will not make up. Comments in the code, examples at the end.

Code:

//   var Angle=360; //     var Frames=360; //  .         . var saveFile = 1; //      : 0 -   , 1 -   var Negative=""; //      ,    if (app.documents.length > 0) { //     app.preferences.rulerUnits = Units.INCHES; var srcDoc = app.activeDocument; var x2 = srcDoc.width * srcDoc.resolution; var y2 = srcDoc.height * srcDoc.resolution; //   srcDoc.selection.select(Array (Array(0, 0), Array(x2, 0), Array(x2, y2), Array(0, y2)), SelectionType.REPLACE, 0, false); //   srcDoc.selection.copy(); //     ,     . //    ,       app.preferences.rulerUnits = Units.PIXELS; var iFrames = 1; if (saveFile == 1) { iFrames = Frames; } var pasteDoc = app.documents.add(Number(x2*iFrames), Number(y2), srcDoc.resolution, "Rotated Layers", NewDocumentMode.RGB, DocumentFill.TRANSPARENT); //   pasteDoc.selection.select(Array (Array(0, 0), Array(x2, 0), Array(x2, y2), Array(0, y2)), SelectionType.REPLACE, 0, false); //     pasteDoc.paste(); layerRef = pasteDoc.layers[0]; //   -         ,     Angle = Angle / Frames; if (saveFile == 0) { //    SaveToFile('0'); //       CS1,      layerRef.visible = false; } //      for ( var i = 1; i < Frames; i++ ) { var xs = x2 * i; pasteDoc.selection.select(Array (Array(xs, 0), Array(xs+x2, 0), Array(xs+x2, y2), Array(xs, y2)), SelectionType.REPLACE, 0, false); pasteDoc.paste(); layerRef = pasteDoc.layers[0]; layerRef.rotate(Negative + Angle*i); if (saveFile == 0) { SaveToFile(i); layerRef.visible = false; } } } else { alert("   - "); } function SaveToFile(n) { //      .       . var saveFile = new File("C:/test/"+n+".png"); pngSaveOptions = new PNGSaveOptions(); app.activeDocument.saveAs(saveFile, pngSaveOptions, true, Extension.LOWERCASE); } 

How to use:

1. Name the script file, for example, Rotate.js and place it in the Photoshop directory: Photoshop \ Presets \ Scripts \
2. Editing parameters.
3. Open the image that needs to be processed and in the File-> Scripts menu, select the Rotate script.

Demo . The picture is clickable. Click on the arrow - it is spinning. This example uses the method of creating one large image. As it rotates, the picture in the cycle shifts to the desired number of pixels, simulating a smooth rotation of the arrow.

I planned to make one big PNG with a height of 110px and a width of 39600px, but Firefox and Chrome refused to display it (IE8, Opera and Safari could). I had to divide into two parts. Each part turned out to weigh about 620Kb.

An example of real use.