Starting Photoshop HTML5 Extension development

The guide Adobe forgot to do!

You’ve had a great idea for a Photoshop extension and you can write Javascript so a quick Google around and you’d expect to find a simple starting guide. No such luck! Documentation is dreadfully fragmented across blog posts, forum threads and visiting Adobe’s Photoshop devnet pages following the obvious choice Learn more about developing for Photoshop takes you to a very uninspiring 404. There appears to be no consolidated overview of how to get started with extensions in general and HTML5 extensions in particular.

[Update — much thanks to Hallgrimur Bjornsson who has provided links to several great resources on the subject: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/cs-extension-builder/pdfs/CC_Extension_SDK.pdf, http://www.adobe.com/devnet/creativesuite/articles/a-short-guide-to-HTML5-extensions.html and http://www.davidebarranca.com/category/code/html-panels/]

After trawling the web and a few failed attempts I eventually found that you can now write HTML5 extensions for Photoshop relatively simply.

In response to my frustration at finding information I’ve written this post. In this post I briefly cover what you need to download to get started with HTML5 extension development in Photoshop. Later on we’ll look at debugging and how to execute your Javascript to manipulate the Photoshop document.The post is meant as a beginners guide only but is also attempting to fill in some of the gaps left in the introductory videos posted by Adobe.

I haven’t written anything on releasing your extension as I’m not there yet myself but I’ll be sure to post once I know more.

You can find my code examples on Github: https://github.com/hallodom/photoshop-extension-example

A good introduction

I found this video that was worth watching by Adobe Evangelist Michaël Chaize. He presents a very simple Javascript based panel extension for exporting the current document as a PNG or JPEG and shows you how to build a panel UI via Adobe Configurator 4. Take a little time to watch this video to get an idea of how to interact with the Photoshop document and to see the kinds of things that are possible with Javascript.

Michaël’s tutorial helps you understand some of the process and how easy it is to get started with Javascript based extensions but doesn’t cover HTML5 extensions themselves.