8 Steps to Your First Photoshop UXP Plugin
The “Adobe UXP: Things you Need to Know!” YouTube playlist.
Editor’s Note: “We’re happy to welcome Davide Barranca, a Photoshop retoucher and developer based in Italy, back to the Adobe Tech blog. Davide is the author of the Professional Photoshop Scripting book and the Adobe Photoshop HTML Panels Development course. He writes about Photoshop and Adobe extensibility on his blog.”
— Erin Finnegan, Community Engineer, Creative Cloud.
The UXP announcement
During the MAX 2020 conference Adobe officially unveiled UXP plugins (Unified eXtensibility Platform) availability for third-party developers in Photoshop 2021. It was great news, and the first stage of a transition process that in the long run aims to replace the old extensibility technology (CEP — Common Extensibility Platform) with the new UXP (Unified eXtensibility Platform).
Before anyone gets nervous: CEP isn’t going anywhere in the short-term. It’s been recently updated to v10, and will coexist alongside with UXP “for a long time” (quote from Adobe). On one hand, the extended CEP/UXP overlap period allows Adobe to better integrate the new tech with their Creative Cloud applications; on the other hand, it gives developers time to get accustomed to UXP and eventually port their products.
Sharing a learning journey
When the shiny new thing was CEP, around early 2014, I documented my own learning process with a series of blog posts titled HTML Panels Tips, mostly as a reminder to my older self — I tend to forget stuff at an annoyingly fast pace. Over time the collection grew considerably and—I’m told—it’s been of great help to other developers as well. Eventually my blog posts became the starting point of the larger Photoshop HTML Panels Development course.
With UXP I find myself in a similar situation now: I have to learn it from scratch, and I want to share my findings as I go. Truth to be told, I’m lucky enough to have been part of the limited group of developers involved with Adobe during the prerelease stages of the UXP launch, so I’ve had plenty of time to ask questions, note answers, and get lost down a number of rabbit holes.
The UXP playlist
I started recording a series of videos on UXP that are part of a freely available YouTube playlist titled Adobe UXP: Things you Need to Know! that I’m happy to present you here.
The videos are time-coded with named sections, around twenty minutes long each, for a total of ~3 hours of free UXP training so far. The agenda for each episode is to pick a couple of subjects and discuss them, mostly with the help of sample code that I write from scratch so that you can follow along — because learning by doing is the best. The level varies from beginner to intermediate depending on the topic, but I get into advanced subjects as well (when needed and especially if it’s fun).
They are available directly from YouTube (English spoken with curated English subtitles), and on my blog, where I’ve been asked to publish the transcripts as well to help those who need to translate them (or for anyone who wants to do a text-based search).
There are eight of videos at the moment, but the list is growing and the project is alive. Think about them as your “eight steps to your first Photoshop UXP plugin”.
#1: Rundown of the UXP Announcement at Adobe MAX 2020
This is the longest video of the series: I cover all the highlights of the MAX 2020 announcement. Start here if you’re not sure why UXP is going to be a big deal. (Editor’s Note: It’s also a great place to start if you have prior development experience with Creative Cloud.)
#2: Documentation
In the second video, I guide you through the new Adobe.io portal for developers and point out the relevant sections in the Doc pages — we are all going to spend a lot of time there!
#3: UXP Developer Tool
In this video, we’re going to use the UXP Developer Tool to load, reload, watch, debug, package and scaffold new UXP plugins from templates.
#4: Panels vs. Commands and the manifest.json
This time I cover the difference between Panels vs. Command-based UXP plugins, and how the manifest.json—the main entry-point—is structured.
#5: Sync vs. Async code in the UXP Photoshop DOM
In this episode I discuss the very important topic of Synchronous vs. Asynchronous code in the Photoshop Scripting DOM, and how UXP differs compared to ExtendScript in that regard.
#6: BatchPlay (part 1): the ActionManager roots
Here, I approach BatchPlay, the super-powerful Photoshop-only Scripting technique that can overcome the DOM’s limits. BatchPlay is so important (and kinda unfriendly) that it is the subject of a three part mini-series.
#7: BatchPlay (part 2): the Alchemist listener
In this second part of the mini-series, I explore BatchPlay with the help of the Alchemist plugin as a UXP Script Listener.
#8: BatchPlay (part 3): the Alchemist inspector
In the third and final part of the BatchPlay mini-series, I use the Alchemist plugin as a UXP Script Inspector.
An ongoing project
I produced the first eight videos in a burst of enthusiasm right after the MAX announcement, in the spur of the moment, and and at a very fast pace. I plan to keep going, so if you have specific requests please let me know on Twitter or in my YouTube channel. The playlist is freely available, yet your support with a donation is most welcome — because it’s been 2020 for everyone on planet Earth, my friends...
Thanks for your time!
For more stories like this, subscribe to our Creative Cloud Developer Newsletter.
