Scripting Tutorials for Beginners
Copy link to clipboard
Copied
Hey Guys,
I am starting to learn Javascript to code some tools for both Illustrator and After Effects (I primarly work in AE).
There appears to be a wealth of information and tutorials for scripting in After Effects but very little for Illustrator.
Does anyone know of any good sites dedicated to learning scripting for Illustrator?
I have googled and searched Youtube but there isn't too much out there.
I do have the Scripting PDFs from Adobe but ideally I am looking for some Illustrator specific tutorials.
Thanks for your time.
Liam
Explore related tutorials & articles
Copy link to clipboard
Copied
I don't think there are any web sites dedicated to illustrator scripting. I remember seeing a intro tutorial video on youtube but I couldn't find it.
All you need is the official references and this forum, if you have questions just post them here and we'll do our best to help you get started.
if you're into books, there are 2 of them. They're super old but so is the Scripting DOM, they're still relevant.
https://www.amazon.com/Adobe-Illustrator-Scripting-Visual-AppleScript/dp/0321112512
Copy link to clipboard
Copied
Hey Carlos, there is ai.aenhancers, which is online Read-The-Docs format for Illustrator's DOM with a bunch of examples. I prefer this to PDFs and books because it's so easily searchable
Copy link to clipboard
Copied
Hello, I made an online code editor with typescript support for all Adobe apps (shows the app DOM as you type):
Also has a curated list of resources per app in the drawer, though there's a lot more for AE than AI:
My personal favorite for both AE and AI scripting is aeenhancers, here's the Illustrator version with a lot of examples per method/property.
Copy link to clipboard
Copied
ah I totally forgot about your editor, it's wonderful. But I was thinking more of a Tutorial type of resource were users with no programing skills could learn how to start with Illustrtor scripting.
Copy link to clipboard
Copied
True! The editor is completely lacking there, though it'd make finding possibilities a lot easier rather than digging through documentation. The aenhancers site does have a few beginner-friendly sections and examples, though to be honest I had a hard time learning scripting until I just spent a few months in general web dev and Javascript. Once you get the basics of Javascript all together (where there's no shortage of beginner friendly material) it isn't hard to jump into Adobe scripting, but it's understandable if curious artists aren't willing to make that big of a leap.
I've kept this in mind and would like to start doing beginner friendly tutorials eventually
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Hi Liam,
Here's the typescript setup that I use along with my tsconfig file. I generally write all my code in a "host.ts" file, then have my setup compile to host.jsx on every save. For this to work, you'll need to run "npm install types-for-adobe", and then press Control + Shift + B to run "tsc: watch - [path to tsconfig]" in VSCode. I also have a dedicated sandbox for Typescript here, though the repo is old and I think pravdomil's original repo is deprecated (which is why I use @Ten-A's fork). If you have trouble setting it up feel free to post here.
I took a codecademy class for HTML/CSS, then went on to their Javascript class but fell out of it because it was overwhelming and, in retrospect, really poorly designed since they try teaching you JQuery and React just a lesson or two after you learn what a function is. I don't remember the exact path after this beyond trying scripts out here in the forum, asking a lot of questions, taking a couple cheap Udemy classes, and Silly-V turning me onto Vue, the Javascript framework, which is fantastic and very beginner friendly -- it really abstracted a lot of the tedium from Javascript away and let me produce things quicker which let me practice more often, and then I became comfortable enough to branch into pure vanilla DOM manipulation and ES6+ methods like arrow functions.
I understand the value of books but feel that my learning style isn't always compatible with the heavy literary one -- sometimes it feels like the burden to entry is very high and the abstraction needed to understand all the between-the-lines implications of taking text from the page to it working on screen isn't straightforward, so I've always opted for browser-based code editor resources, like codecademy, the Odin Project, and Scrimba, and take a bunch of Udemy classes for anything that interests me (like Vue).
If it helps I have a panel version of that code editor which lets you write, run, save and open scripts while still inside Illustrator. The ZXP to install is located in the ./archive folder. It's based on Monaco so it shares the same foundation as VSCode itself does, though it was a quick project and there are graphical errors with the console drawer that I never addressed (plus syntax highlighting -- I couldn't get it to work alongside typescript definitions, so I chose typescript over syntax highlighting).
Copy link to clipboard
Copied
Hello again Liam, I made a quick CLI generator to set up Typescript if you're interested:
It does all the heavy lifting for you, and is very quick when the types are already installed at some point in the parent:
To install:
npm install -g scriptopia
Then to use, any of the following:
// With CLI prompts:
scriptopia
// With shorthands, no prompt:
scriptopia ai test.jsx
scriptopia ilst helloworld.ts
scriptopia illustrator myScript.js

