{Carrer web log}

Blog about web design & development

Draw Shapes in Photoshop with JavaScript

Monday, October 24, 2011 { 4 Comments }

I was working on the Photoshop Wireframing Kit update and I wanted to optimize the drawing of some photoshop vector shapes. Few designers know that JavaScript, VBS and AppleScript can be used to optimize the Photoshop workflow. The cool thing about JavaScript in Photoshop is that will run on both PC and MAC.

I was googling and searching for solution for my scripting problem when I stumbled upon this forum post (look for Mike Hale answer) http://www.ps-scripts.com/bb/viewtopic.php?f=14&t=1802&start=15 . I did some small changes in the code - making it function that will accept multiple parameters (coordinates). All the credits for this code goes to Mike Hale he is the author of the code.

What this script does?

Basically what this script does is draws pixel precise shapes in Photoshop with the help of JavaScript.

You need to put Photoshop coordinates in clockwise order and Photoshop will draw the shape.

Example of Square:

// [X,Y], [X,Y] coordinates in clockwise order

DrawShape([100, 100], [100, 200], [200, 200], [200, 100]); // Square

DrawShape([512, 128], [600, 256], [684, 320], [600, 386], [686, 514], [512, 450],[340,512],[428,386],[340,320],[428,256]); // Star

Result in Photoshop:

You can also set the background color inside the script.

The script:

Gist on GitHub

Direct Download

For installing this script you need to download DrawShape.js script copy the script inside Photoshop > Presets > Scripts - Folder

For running this script you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

Change the coordinates inside DrawShape(); to personalize the script.

I only did some tests in Photoshop CS5 but should probably run in some previous versions.

Any comments?

4 Responses to “Draw Shapes in Photoshop with JavaScript”

  1. // Anonymous Tenml // 11/18/2011

    i'm going to start learning this.
    thank for this tutorial.  

  2. // Anonymous Anonymous // 8/01/2013

    This awesome!

    Is there any way to do rounded rectangles with this script?  

  3. // Blogger Unknown // 9/11/2016

    You need to set:

    To another coordinates then anchor points.
    E.g. lineArray[i].rightDirection = [lineArray[i].anchor[0]-10,lineArray[i].anchor[1]-10];  

  4. // Blogger Unknown // 9/03/2017

    Does anyone know if you can change the code so that the XY coordinates are read from the txt file? I have a file with two columns. The first is the ID, and the second coordinate in the form of e.g. [0,26.82], [14.44,38.23], [10.74,42.89], [20.77,50.83], [45.78,19.33], [21.32,0]  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License