Итак платформа UXP в строю, учимся с ней работать.
Ссылка на документацию —UXP for Adobe Photoshop documentation
Платформа еще сырая, некоторые ссылки внутри разделов документации ведут на пустые срамницы, они еще в разработке, но основа уже есть.
Качаем программу для создания и управления плагинами Adobe UXP Developer Tool, устанавливаем и запускаем.
Для работы потребуется Photoshop верией не ниже 22.00.00, запускаем его.
В программе Adobe UXP Developer Tool нажимаем кнопку Create Plugin:
Заполняем поля, для первого примера из шаблонов выбираем ps-starter — простой плагин основанный на JavaScript без дополнительных библиотек.
Далее нажимаем кнопку Select Folder — выбираем папку, где будет располагаться наш плагин.
Плагин установлен:
В программе UXP Developer Tool появится запись об установленном плагине, заходим в меню и выбираем load:
После этого в Photoshop откроется панель тестового плагина:
в этом плагине при нажатии на кнопу на панель выводится список слоев в документе. Можно изучать содержимое папки с плагином:
основные файлы manifest.json — описание плагина, основная информация, размеры панели плагина, аналогично манифесту из CEP, но синтаксис уже другой. Index.html — как обычно это интерфейс плагина на html. Index.js — JavaScript код плагина:
Как можно заметить, что из единого JavaScript плагин может обращаться как к элементам HTML, так, и к API Photoshop и это очень здорово!
Рассмотрим создание плагина с библиотекой React. Создание плагина отличается выбором шаблона — вместо ps-starter выбираем ps-react-starter. При попытке загрузить в программе UXP Developer Tool — получаем ошибку:
Открываем папку созданного проект в VS Code и действуем по инструкции:
Открываем терминал из меню VS Code — Терминал — Создать терминал.
Выполняем команды из инструкции:
npm install -g yarn
результат должен выглядеть примерно так:
yarn install
если при выполнении команды появится ошибка:
запускаем PowerShell с правами администратора из строки поиска (Win 10):
в PowerShell запускаем команду:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
подтверждаем a + Enter:
В терминале VS Code повторяем команду:
yarn install
успешная установка:
Запускаем команду:
yarn build
успешное выполнение:
Теперь в программе UXP Developer Tool загружаем наш плагин:
В Photoshop откроются 2 панели тестовых плагинов:
Можно изучать структуру файлов и содержимое плагина.