Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Bending Creative Suite To Your Will With Javascript
4271
single,single-post,postid-4271,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Bending Creative Suite To Your Will With Javascript

Bending Creative Suite To Your Will With Javascript

Have you ever had to do a really tedious task in Photoshop, Flash, Illustrator, or After Effects? Maybe you’ve had to remove all your blank layers. Maybe you want to automate the process of making your timeline animations ready for HTML5. Maybe you want a really easy to extract a color palette from your photos. Well, it’s possible that you don’t have to settle for the way things are anymore. You can write your own tools for Creative Suite in Javascript.

For several Creative Suite releases, Adobe has had javascript support built in. For those of you familiar with the DOM in HTML, Adobe provides you with a similar interface for all of their programs and open documents. You can access your computer’s files, loop through them, open them in the Program of your choice, add adjustment layers, rename the layers, open color pickers, and do pretty much anything you’d be able to do by hand… but with Javascript.

bill_cosby_aerobicsNow, I know I’ve lost many of the designers when I mention Javascript. But it’s worth paying attention, because I’m sure you have good ideas and you probably know a person or two that could figure this javascript business out. If you feel like you’re dozing off, just focus on Bill Cosby:

Anyway, enough blabbering let’s make something!

Getting Started

First, we need a place to program all this stuff. Because of the decent debugging tools and integration with Adobe applications, we’re going to install Adobe ExtendScript Toolkit. If you are using Adobe Creative Cloud, you can install the app the same way you install all the other Adobe apps.

extendkit_toolkit

Next we need to figure out what functions and properties we have to play with. Well, adobe has written a decent guide for each Adobe program that supports scripting. You can find them at the end of this post.

If you don’t feel like reading through an entire guide, another nice feature of the ExtendScript toolkit is that you can browse through all the available functions and properties a program (like Photoshop) gives you.

property_browser

 

Trying Something Simple: Copying and Renaming a Photoshop Layer

Once you’re done exploring ExtendScript Toolkit, you might want to try a basic extension. First, let’s pull up the currently open Photoshop document and create a new merged layer, and name it merged.

var doc = app.activeDocument; // Gets the open document.

doc.selection.selectAll(); // Makes a new selection, which selects everything

var multilayer = doc.artLayers.length > 1;

doc.activeLayer.copy(multilayer); // Copies a merged version of the layers in our open document.

var mergedLayer = doc.paste(); // We're going to paste the merged copy, and get a reference to the new layer

mergedLayer.name = "U. Magic!!"; // Rename the layer to something more festive.

Now paste that into the code portion of the window and hit the Play button. Make sure you select Photoshop CC from the dropdown menu in the upper lefthand corner of If all goes according to plan, you should get a new merged layer named “U. Magic!”

Next Steps

We can do some more complicated things with Photoshop, or Flash, or whatever program you’re using. I’ve attached to this post an full script which expands on our last example. It creates a color palette based on the Photoshop document you have selected.

Some other things you might do:

  • Automate that amazing Photoshop effect you made
  • Make a tool to help automate Flash movies to go to tools like Flump
  • Automate cleanup of your files (Photoshop, After Effects, etc).
  • Make generative art
  • The Sky is the limit!

The example files: scripts

Photoshop Scripting Guides: http://www.adobe.com/devnet/photoshop/scripting.html

Flash Scripting Guides: http://help.adobe.com/en_US/flash/cs/extend/index.html

After Effects Scripting Guides: http://www.adobe.com/devnet/aftereffects.html

Illustrator Scripting Guides: http://www.adobe.com/devnet/illustrator/scripting.html