Как создать плагин в фотошопе
Я люблю Photoshop. Программа прошла через много ступеней эволюции, с каждой версией радует меня всё больше и это моя основная рабочая программа, запущенная на компьютере 99% времени. Единственное, что чуток печалит — это отсутствие гибкости в интерфейсе. Всё-таки большинство современных программ для редактирования и создания графики предлагают пользователю модульный интерфейс — любые кнопочки и слайдеры можно вытащить в любую часть экрана. Zbrush и Modo являются хорошим примером такой модульности.
Как оказалось, Adobe Labs уже полтора года предлагает любителям оптимизаций своё решение для модульного изменения интерфейса и, к своему стыду, я узнал о нём совсем недавно. Так что я заранее прошу прощения, если я напишу об очевидной штуке, которую многие уже давно используют, но я действительно пропустил её и она меня впечатлила.
А в качестве дополнения, я расскажу о… цветовом круге для Adobe Photoshop (да, при этой фразе все иллюстраторы/художники/текстурщики должны уронить челюсть), так как именно благодаря ему я и узнал об Adobe Configurator.
Adobe Configurator — это AIR-утилита для создания кастомных панелей для Photoshop CS4. Фотошоп пока единственная программа в линейке, поддерживаемая Конфигуратором, но Adobe Labs обещают потом подкрутить и остальной Creative Suit. К слову, создавать extensions можно было и раньше, но для этого требовался какой-никакой уровень программирования на Flex (Flex или нет я утверждать не берусь, потому что слова ява, флекс и эйр меня страшно пугают и я никогда не влезал в это мракобесие, пожалуйста поправьте, если я не прав).
В эти папели можно помещать любые инструменты, пункты меню, ява-скрипты, ссылки на макросы, картинки, текст, даже .swf и видео. Панели делаются простым Drag&Drop.
При запуске утилита нам всё объясняет крупным кеглем)
Да-да, всё именно так: пять действий и панель готова.
И нажав New panel можно приступить к созданию панели. Задав для неё имя и размер можно начать перетаскивать необходимые инструменты из 4-х меню слева:
Tools с инструментами
Commands с коммандами меню
Action со скриптами
и Widgets cо всякой дополнительной медия-ерундой. Так же можно использовать поиск по всем инструментам и пунктам меню.
Все кнопки и виджеты свободно масштабируются.
Например, я захотел сделать себе панель для нескольких функций, которыми я часто пользуюсь, но они находятся довольно глубоко в меню:
После нажатия Export программа автоматически выбирает директорию с панелями Photoshop и сохраняет туда необходимые файлы.
Теперь запускаю Ps, в меню Window > Extensions появилась моя NeatPanel.
Она обладает такими же свойствами, как и все другие панели Photoshop, то есть может свернуться в маленький прямоугольник
Функции панели — уменьшение/увеличение выделения и зеркальное отражение по вертикали и горизонтали слоя/выделения и всего документа. Панель можно было бы уменьшить ещё раза в полтора за счёт надписей (я же делаю её для себя и знаю, какая кнопка для чего) и она благополучно может висеть в углу экрана, не занимая полезное место.
Ещё пример использования. Вот так ещё несколько дней назад выглядела моя Toolbar с презетами кистей:
никакой сортировки в этом тулбаре нет.
Сейчас это несколько панелей с разными предназначениями, вызываемые по F-кнопкам. Я знаю, что на F1 у меня основные кисти, на F2 — текстуры и на F3 — блендеры.
и так далее. Я конечно же не буду утверждать, что это удобно для всех, но мне потраченные 20 минут на создание этих панелей позволяют не рыться среди десятка наименований кистей, а работать с ними упорядочено, плюс в такую панель можно добавить дополнительную информацию или даже пример работы кисти, функции или фильтра путём вставки в панель виджета с картинкой (как тот красный квадратик рядом с моей любимой кисточкой).
А теперь про цветовой круг. С выбором цвета в Photoshop туговато: если не вводить точные значения, а выбирать цвет на глаз, то надо выбирать или из ограниченной в размере и точности панели Swatches или вызывать Color Picker.
Для Swatches умельцы даже делали наборы цветов, превращающие панель в подобие цветового круга и Hue-пикера
и недавно я наткнулся на две кастомные панели для ФШ, призваные помочь любителям лихо менять цвет. Я так полагаю обе они сделаны на Flex.
Первая — Painters Wheel от Len White.
Очень простая на вид, кроме аляповатого круга на панели больше нет никакой информации, работает только в CS4, не масштабируется.
И вторая — Magic Picker от Anastasiy Safari.
Куда больше настрек, работает как под CS4, так и под CS3, возможность вывода цвета в RGB/HSB слайдерах, возможность вывода в hue/sat/vol-пикерах, а так же видеть точные цветовые значения в том же окне, возможность выбора foreground/background-цветов, а так же залинковать их вместе, чтобы значения обоих цветов менялись релятивно. Плюс она свободно масштабируется. Я остановил свой выбор именно на ней, несмотря на цену в $7 против бесплатной Painters Wheel — деньги очень небольшие, функционал того стоит, плюс её разработчик оказался приятен в общении (и кстати он русскоговорящий) и открыт для внесения новых возможностей.
Надеюсь кто-нибудь узнает что-нибудь новое и полезное из всего этого)
И в конце несколько ссылок.
Working With Photoshop Scripts, Learn How to Script Adobe Photoshop, Manipulate an Image with Scripting — введение в яваскрипты для Photoshop;
Trevor Morris Scripts — библиотека яваскриптов.
Это отношения к панелям не имеет, однако на этих сайтах есть примеры и простых скриптов, которые можно приспособить под свои нужды. Например, я наконец сменил набор макросов, которые использовал для отображения/скрытия нескольких слоёв и каналов, на их яваскрипт-аналог, уменьшив количество используемых макросов с шести до двух :)
И в этом правда интересно копаться!
Встраиваемые модули (plug-in modules, далее плагины) популярного графического редактора Adobe Photoshop являются отдельными программными библиотеками, расширяющими стандартную функциональность редактора. Добавление новых и модификация имеющихся плагинов не требует внесения изменений в сам редактор, что позволяет гибко наращивать его функциональность. В данной статье кратко рассказывается о архитектуре фильтрационных плагинов и порядке их взаимодействия с редактором. Целью статьи является не заменить документацию [1, 2], прилагаемую к Adobe Photoshop SDK (комплекту программных средств, документации и исходных кодов, позволяющий создавать собственные плагины), а дополнить ее кратким ознакомительным текстом, для облегчения знакомства с архитектурой фильтрационных плагинов.
Программа, загружающая плагины и вызывающая (использующая) реализованные в них фукнциональности назвается plug-in host (в терминологии Photoshop SDK). Строго говоря, plug-in host'ом может быть не только Adobe Photoshop, его плагины могут использовать и некоторые другие программы, поддерживающие функциональность plug-in host'а. Например Adobe After Effects, Adobe Premiere, Adobe Illustrator, Adobe PageMaker и Adobe PhotoDeluxe, а также некторые другие графические редакторы к Adobe отношения не имеющие. Для краткости далее в статье plug-in host будет называться редактором.
В Adobe Photoshop существую несколько типов плагинов: Automation, Color Picker, Import, Export, Extension, Filter, Format, Parser и Selection. Все эти типы подробно описаны в соотвествующих разделах Adobe Photoshop API Guide, прилагаемом к SDK. Мы рассмотрим тип Filter (фильтрационные плагины), модули этого типа чаще других создаются сторонними по отношению к Adobe разрботчиками. Целью фильтрационных плагинов является обработка и изменение выбранного участка изображения. Все фильтрационные плагины доступны через меню Filter редактора.
2 Общая архитектура plug-in модулей
Плагин Adobe Photoshop в операционной системе Windows представляет собой динамически подсоединяемую библиотеку (dll), с определенным расширением (для фильтрационных плагинов это .8bf), со специальным образом заданными ресурсами и определенной функцией - точкой входа. В ресурсах dll плагина прописывается множество важной информации - начиная от сигнатур, по которым Photoshop "принимает плагин за своего" и заканчивая указанием поддерживаемых плагином режимов изображения (image modes). Подробнее о ресурсах плагина подробнее рассказано в разделе 7.
Прототип функции - точки входа в плагин задается следующим образом:
Фактически, это единственная функция, посредством которой редактор "общается" с плагинами. Общение в обратную сторону осуществляется с помощью так называемых функций обратного вызова (callback-функций) - об этом подробнее в разделе . Параметры функции ENTRYPOINT имеют следующую семантику:
3 Функции обратного вызова (callback-функции)
С помощью callback-функций плагин может "общаться" с редактором и получать доступ к некоторым его специальным возможностям. Callback-функций существует весьма значительное количество, все они подробно описаны в документации, прилагаемой к SDK. Мы опишем здесь несколько наиболее часто используемых callback-функций.
AdvanceStateProc() - вызывается для передачи управления редактору между этапами работы плагина. Она сигнализирует, что часть работы уже сделана и говорит редактору о том, что нужно сделать следующий шаг во взаимодействии с плагином (например, обновить или перечитать поля управляющей струкуры). AdvanceState используется, если плагин выполняет обработку изображения не целиком, а поэтапно, в несколько шагов. Такое может произойти в случае обработки большого изображения в условиях ограниченного объема доступной памяти, недостаточной для обработки изображения целиком. Подробнее об использовании AdvanceState в секции 5.2
DisplayPixelsProc() - служит для вывода на экран (в окно) фрагмента изображения. Она самостоятельно производит перевод из внутреннего представления изображения в редакторе (включая перевод в нужное цветовое пространство) в режим, совместимый с режимом дисплеем (производя dithering, если это необходимо). Используется, например, для организации собственного окна preview в диалоге плагина.
TestAbortProc() - эта функция должна вызываться несколько раз в секунду во время фильтрации изображения, если фильтрация занимает значительное время. Это нужно для того чтобы у пользователя была возможность прервать работу плагина и редактор не "подвисал". Если TestAbortProc() возвращает "true", фильтрация должны быть прервана. Как побочный эффект, эта функция меняет курсор редактора на песочные часы и периодически их переворачивает.
UpdateProgressProc() - эту функцию можно использовать во время выполнения фильтрации для того, чтобы обновлять индикатор прогресса обработки, отображаемый редактором.
4 Работа с памятью
Нужно особо отметить, что в pluginParam->maxSpace указывается не объем памяти, которую плагин может выделять для своих нужд, а максимальный объем всей физической оперативной памяти, которую может использовать плагин при обработке: maxSpace = (input area size + output area size + mask area size + bufferSpace).
Если плагин использует собственные данные, которые хочет сохранить между вызовами функции ENTRYPOINT (например набор глобальных переменных), то он должен присвоить дескриптор (handle) блока памяти, в котором они хранятся, полю pluginData. Редактор будет сохранять значение этого поля между последовательными вызовами плагина. Не нужно хранить задаваемые пользователем настройки фильтра внутри блока, хранящегося в pluginData. Для этого существует специальное поле parameters структуры pluginParam, которому нужно присвоить дескриптор (handle) структуры, хранящей параметры плагина.
5 Порядок взаимодействия редактора и фильтрационного плагина
Взаимодействие фильтрационного плагина с редактором состоит в последовательном вызове функции ENTRYPOINT с различными значениями параметрами selector, в ответ на которые от плагина ожидаются определенные действия.
В редакторе существует два способа вызова фильтрационных плагинов - либо через пункт меню, соответствующий данному плагину в одной из категорий меню Filter, либо через пункт меню "Last Filter" (повтор последней операции). В случае инициирования не через LastFilter, вызов filterSelectorParameters является первым вызовом функции ENTRYPOINT. Цель этого вызова - создать и инициализировать структуру, хранящую параметры работы плагина, задававаемые пользователь. Дескриптор этой структуры нужно сохранить в специальном поле pluginParam->parameters. При вызове filterSelectorParameters редактор устанавливает это поле равным NULL. Параметры, устанавливаемые на этом этапе не должны зависеть от размера, режима изображения или размера обрабатываемой области.
Этот вызов является первым в случае, если фильтр инициируется из пункта меню "Last Filter" (в таком случае параметры обработки запоминаются во время предыдущего использования плагина). Во время этого вызова плагин может скорректировать действия алгоритма Photoshop по распределению памяти. Поле pluginParam->maxSpace указывает на максимальное количество байт физической оперативной памяти, которое редактор может предоставить плагину. Плагин может уменьшить это количество для увеличения эффективности работы редактора. Подробнее по поводу работы с памятью сказано в секции 4.
На этом этапе в структуре pluginParam уже определены поля imageSize, planes и filterRect, которые можно использовать для расчета необзодимого объема памяти для проведения обработки. В случае, если плагин собирается выделять память свыше 32 килобайт, следует установить поле bufferSpace равным объему требуемой памяти, для того, чтобы редактор попробовал освободить необходимое плагину количество физической оперативной памяти. Другой вариант - установить bufferSpace в 0 и для выделения памяти использовать callback-процедуры предоставляемые редактором (из Buffer Callback suite илм Handle Callback suite).
Во время этого вызова выводится диалог плагина (если он предусмотрен) для модификации параметров фильтрации, задаваемых пользователем. Диалог нужно выводить только в том случае, если первым обращением к функции ENTRYPOINT был filterSelectorParameters, а не filterSelectorPrepare. Модифицированные пользователем параметры нужно сохранить в поле parameters структуры pluginParam.
Следующим шагом ялвяестcя собственно обработка изображения. Перед началом фильтрации нужно обязательно проверить значения параметров обработки (хранящихся в pluginParam->parameters), для того чтобы избежать ошибочного завершения программы в случае некорректных значений параметров. Обработка изображения происходит следующим образом: плагин запрашивает определенные фрагменты входного и выходного изображения для обработки, устанавливая определенные поля в структуре pluginParam: inRect, outRect, maskRect, inLoPlane, inHiPlane, outLoPlane, outHiPlane и передавая управление редактору (см. далее). После этого фрагменты изображения для осуществления фильтрации становятся доступны через поля pluginParam - inData, outData, maskData.
Организация взаимодействия через AdvanceState
Как уже было сказано, для того чтобы не нарушать работу алгоритма распределения памяти Photoshop желательно обрабатывать большие изображения по частям. В случае, если редактор поддерживает механизм AdvanceState, то осуществить пофрагментную обработку всего изображения можно внутри одного вызова filterSelectorStart. Для обработки очередного фрагмента, необходимо установить поля inRect, outRect и maskRect равными границам обрабатываемого фрагмента. Затем вызвать advanceState callback-процедуру, для того чтобы запросить у редактора эти фрагменты для обработки. Если advanceState возвратила код успешного завершения - произвести фильтрацию фрагмента, в противном случае - прервать обработку и выйти. В цикле обработки фрагментов нужно время от времени вызывать abortProc callback-процедуру для проверки не нужно ли прервать процедуру фильтрации. После того как всё изображение обработано, следует установить inRect=outRect=maskRect=(0, 0, 0, 0), сигнализируя редактору, что обработка закончена.
Организация взаимодействия без AdvanceState
Механизм AdvanceState начал поддерживаться начиная с версии 3.0 редактора. Поэтому существует другой (более старый и менее удобный) вариант организации обработки изображения по частям. Он заключается в том, что редактор повторно (сколько потербуется раз) вызывает функцию ENTRYPOINT с параметром selector=filterSelectorContinue, указвающим на режим обработки изображения. В таком случае плагин должен обрабатывать лишь часть изображения за один вызов и выходить из функции обработки ожидая следующего вызова. Если механизм AdvanceState не поддерживается редактором или плагином, то обработку изображения следует расположить в обработке вызова ENTRYPOINT filterSelectorContinue. В filterSelectorStart следует инициализировать фильтр и установить inRect, outRect и maskRect равным границы первого обрабатываемого фрагмента, после чего выйти из плагина.
Внутри обработки вызова filterSelectorContinue нужно обработать текущий фрагмент изображения, и установить inRect, outRect и maskRect равным границы следующего запрашиваемого для обработки фрагмента. Процедура ENTRYPOINT с параметром selector равным filterSelectorContinue будет вызываться редактором до тех пор, пока хотя бы один из прямоугольников inRect, outRect и maskRect не пуст, поэтому после обработки всего изображения их следует установить в (0, 0, 0, 0).
Этот вызов позволяет совершить очистку и освобождение выделенных плагином ресурсов. Он вызывается в том и только том случае, если вызов filterSelectorStart плагина возвращает редактору код успешного завершения. Если редактор обнаруживает нажатие клавиши escape между вызовами filterSelectorContinue он вызывает filterSelectorFinish (вместо следующего filterSelectorContinue), до завершения операции фильтрации. Обработка такой ситуации должна быть предусмотрена плагином.
6 Важные поля структуры, передающийся через
pluginParam
Нет смысла дублировать таблицу, приведенную в главе документации к Photoshop SDK, в которой подробно описаны все поля структуры FilterRecord, передающейся фильтрационным плагинам через pluginParam. Остановимся лишь на наиболее интересных и не вполне очевидных, чтобы не пропустить их среди длинного списка.
- parameters - если у плагина есть параметры функионирования, которые может задавать пользователь, то при вызове filterSelectorParameters он должен выделить блок памяти для их хранения и дескриптор этого блока записать в это поле. Изначально parameters = NULL.
- maxSpace, bufferSpace - поля, используемые для достижения договоренности между плагином и редактором по вопросам используемой плагином оперативной памяти (см. секцию 4).
- inRect, outRect, inLoPlane, inHiPlane, outLoPlane, outHiPlane - поля через которые плагин запрашивает для обработки конкретные фрагменты (и цветовые плоскости) входного и выходного изображения. Можно запрашивать области, выходящие за границы изображения, если это требуется. Массивы данных входного и выходного изобаржения доступны плагину через указатели inData и outData. Поля inRowBytes и outRowBytes задают длину одной строки изображения в байтах.
При обработка не всего изображения, а только выбранной пользователем области (selection) плагину предоставляется информация о границах области, которую ему нужно обработать. В поле filterRect хранится ограничивающий прямоугольник области, которую нужно обработать. В случае, если выбрана непрямоугольная область, устанавливается флаг haveMask. Обычно, редактор работает в режиме, когда он самостоятельно отбрасывает все изменения, произведенные плагином вне области обработки (в таком случае, флаг autoMask устанавливается в TRUE). Выставлением флага определенного флага в ресурсах плагина или в явном виде выставляя autoMask = FALSE плагин может самостоятельно определять какие пиксели изображения попадают в область обработки. Для этого ему передается изображение - маска, доступ к которому осуществляется также как и к входному и выходному изображениям через поля maskRect, maskData, maskRowBytes.
Свойства изображения - количество каналов, цветовая модель, битовая глубина каналов задаются через поля planes, imageMode и depth.
Часто, при фильтрации пикселей вблизи границ изображения требуется проводить проверку на то, чтобы не затронуть пиксели вне изображения и организовывать особую обработку таких случаев. Для того, чтобы избежать усложнения собсвенного кода, можно запрашивать у редактора прямоугольники для обработки, выходящие за границы изображения. В случае, если редактор выставил флаг supportsPadding можно заказать заполнение "фальшивых" пикселей за границами изображения конкретными значениями через поля inputPadding, outputPadding, maskPadding. Или (через эти же поля) можно выставить особый режим работы с пикселями вне изображения: plugInWantsEdgeReplication - репликация границ изображения, plugInDoesNotWantPadding - заполнение случайными значениями, plugInWantsErrorOnBoundsException - генерацию программного исключения с аварийным завершением плагина в случае запроса прямоугольника, выходящего за границы изображения.
7 Оформление ресурсов плагина
В ресурсах плагина прописывается множество важной информации - начиная от сигнатур, по которым Photoshop "принимает плагин за своего" и заканчивая указанием поддерживаемых плагином режимов изображения (image modes). Ресурсы плагинов задаются в формате Macintosh и переводятся в формат Windows с помощью утилиты CNVTPIPL.EXE, входящей в комплект Photoshop SDK. Существуют два типа ресурсов плагинов Adobe Photoshop - 'PiMI' (произносится "пимми") и 'PiPL' (произносится "пипл") ресурсы. Ресурсы 'PiMI' поддерживались в ранних версиях Adobe Photoshop (< 3.0), затем были заменены на 'PiPL' ресурсы (начиная с весрии 3.0). Поддержка 'PiMI' в поздних версиях редактора осуществлена для сохранения совместимости со старыми плагинами. Рекомендуется включать в плагин ресурсы обоих типов для возможности работы плагина как с ранними так и с поздними версиями редактора.
Ресурс 'PiMI' имеет фиксированную структуру, хорошо описанную в документации в SDK. Информация содержащаяся в ресурсе, в том числе включает в себя версию и подверсию плагина и флаги, показывающие поддерживаемые плагином режимы изображения (image modes).
Ресурс 'PiPL' имеет более сложную, расширяемую структуру. Он организован в виде списка свойств плагина. Общими для всех типов плагинов является несколько свойств, включая: PIKindProperty, задающее тип плагина; PIVersionProperty, задающее версию плагина, SupportedModes, задающее какие плагин поддерживает режимы изображения (image modes); EnableInfo, задающее при каких условия пункт меню вызывающий плагин доступен пользователю (способ задания этого свойства подробно описан в документе Cross-Application Plug-in Development Resource Guide); PICategoryProperty - для фильтрационных плагинов задающее категорию меню, куда поместить вызов плагина; PINameProperty - текст пункта меню, вызывающего данный плагин; PIWin32X86CodeDesc - имя процедуры-точки входа в dll плагина.
Для фильтрационных плагинов задается свойство PIFilterCaseInfoProperty, регулирующее случаи обработки многослойных (multi-layer) изображений. Это свойство задает поддерживаемые плагином режимы многослойности. В Photoshop >= 3.0 слои состоят из цветовой информации и информации о прозрачности каждого пикселя. Прозрачные пиксели имеют неопределенный цвет. В PIFilterCaseInfoProperty для семи вариантов режима изображения (наличие/отсутствие многослойности, наличие/отсутствие выбранной пользователем области обработки, разрешение/запрещение редактирования плагином карты прозрачности слоя) задаются флаги, показывающие поддерживает ли плагин такой режим и требуется ли какя-либо предобработка данных изображения перед обработкой их плагином. Подробнее о PIFilterCaseInfoProperty см. документацию к Photoshop SDK [2] и примеры поставляемых вместе с SDK.
8 Заключение
В данном тексте были приведены некоторые данные информационного характера, помогающие (как хочется надеятся) понять структуру и порядок взаимодействия плагинов Photoshop и редактора. В следующем номере журнала мы приведем код-пример, который можно использовать в качестве отправной точки для написания собственного плагина.
Список литературы
[1] Andrew Coven, David J. Wise, Seetharaman Narayanan, Paul D. Ferguson, Thomas Ruark, Tina Wu, Äpplication Programming Interface Guide", Adobe System Incorporated, 1999. [2] Brian Andrews, Andrew Coven, Thoms Ruark, Bruce Bullis, "Cross-Application Plug-in Development Resource Guide", Adobe System Incorporated, 1999.
В новой платформе UXP понятие плагин объединяет как скрипты, так и панели.
Плагин может состоять из:
- 0 или более панелей;
- 0 или более диалогов, которые являются простыми модальными окнами;
- 0 или более команд, которые являются простыми скриптами;
Теперь скрипт в терминологии платформы называется командой и входит в состав плагина.
Плагин - команда.
Создадим плагин - команду (простой скрипт).
Создаем папку плагина, добавляем в нее файлы manifest.json, index.js, папку icons с иконками. Архив с примером.
Плагин пример нужно разархивировать и загрузить его через программу Adobe UXP Developer Tool нажав кнопку Add Existing Plugin. загружать нужно файл manifest.json из папки плагина-примера.
Файл manifest.json
Редактируем нужные нам строки:
id - плагина должен быть уникальным
name - Имя команды которое будет отображаться на панели плагинов:
main - имя js скрипта который будет выполняться
app - имя хоста PS - Photoshop
minVersion - 22.0.0 - минимальная версия на которой работают UXP плагины.
Следующий важный раздел entrypoints - массив объектов плагина. В этом разделе размещаются все объекты плагина: команды — command, , панели — panel.
type - тип плагина, в данном случае это команды - command
id - уникальный номер объекта для внутреннего использования
label - имя команды отображаемой через меню:
Раздел Icons - определяет иконку на панели плагинов, иконки загружаются в 2 размерах 48х48 и 24х24
path - путь к файлу иконок
scale - масштабы иконок 1 и 2
обратите внимание на имена файлов иконок:
после имени описанном в "path" пишется @1 и @2 масштаб указанный в "scale".
theme - перечисляет в каких цветовых схемах будет показана эта иконка, по умолчанию во всех "all".
species - указывает где будут доступны иконки:
- pluginList - только на панели плагинов
- generic - везде
Файл index.js
Файл index.js это наш скрипт который будет выполняться при нажатии на строку в меню или на кнопку в панели плагинов.
Плагин с несколькими командами.
Изменим имя плагина
"name": "Commands - scripts"
В раздел entrypoints добавим запись о команде:
Посмотрим как теперь выглядит наш плагин в меню и на панели:
Файл index.js
В разделе entrypoints.setup описываются команды указанные в manifest.json и сопоставляемые им функции.
Следуя новой логике платформы UXP, простые скрипты помещаются на панель плагинов, группируются в отдельные кнопки, что облегчает работу со скриптами для пользователя.
Плагин пример нужно разархивировать и загрузить его через программу Adobe UXP Developer Tool нажав кнопку Add Existing Plugin. загружать нужно файл manifest.json из папки плагина-примера.
Файл manifest.json
Описание общего раздела:
id - плагина должен быть уникальным
name - Имя команды которое будет отображаться на панели плагинов:
main - имя html файла описывающий вид панели
app - имя хоста PS - Photoshop
minVersion - 22.0.0 - минимальная версия на которой работают UXP плагины.
тип плагина определяется как панель, определяются размеры панели - минимальный, максимальный размер, размер панели в доке, размер отдельно открытой панели:
Название панели на заголовке панели и в меню плагинов:
Вид плагина-панели на панели плагинов, в меню, доке, отдельной панели.
Описание иконок в разделе entrypoints, определяет вид иконок панели в свернутом состоянии, в доке:
Описание иконок в общем разделе описывает иконки на панели плагинов, аналогично описанию Создание UXP плагинов для Photoshop 4. Плагин-команда.
Файл index.html
В разделе head описывается файл с JS скриптом - index.js
В остальном стандартные тэги описывающие элементы панели.
Файл index.js
Как можно заметить в этом файле описаны 3 исполняемые функции (аналогичны функциям в JSX файле), и тут же описана взаимосвязь между событиями HTML и выполняемыми функциями:
Сравнивая UXP плагин с CEP панелью, нужно заметить более простую связь между пользовательским интерфейсом HTML и объектной моделью документа, больше нет необходимости передавать данные между движком JS и JSX в CEP панелях.
В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственное расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.
С июня 2013-го года Adobe добавила поддержку HTML5 для расширений, тем самым упростив их создание.
Сразу замечу, что сам я дизайнер и к программированию имею очень посредственное отношение, так что прошу прощения за возможные ошибки в терминологии.
Инструменты
Для работы нам понадобятся любимый текстовый редактор и базовые знания HTML, CSS и JavaScript.
Да-да, теперь никаких Adobe Configurator и Flash.
Автоматизировать создание базового набора нужных файлов помогут Eclipse и Brackets/Edge Code CC.
Из чего состоит
Создадим простейшее расширение для Photoshop.
Минимальный набор файлов и их структура такие:
где manifest.xml — файл с описанием всех его параметров,
а index.html — само расширение.
Manifest.xml содержить примерно следуюшее
а в index.html, всё что душе угодно. Например:
Вот и всё.
Наше первое расширение готово.
Запуск
Для запуска неподписанных приложений нужно включить PlayerDebugMode.
Для этого нужно добавить ключ PlayerDebugMod со значением String равным 1
Далее папку с созданным расширением нужно положить сюда
Запустить Фотошоп и выбрать в меню Window > Extensions > наше расширение
Все дальнейшие изменения можно вносить прямо в папке CEPServiceManager4\extensions.
О том как вносить изменения без перезапуска Фотошопа ниже
Debugging
Для того, чтобы включить этот режим нужно создать в корневой папке расширения файл .debug,
содержание которого примерно следующее
где Extension — ID нашего расширения,
а Port=«8088» — порт для подключения.
выберем наш index.html.
И вот они Developer Tools
Проверено в Safari и Chrome
Инструменты упрощающие жизнь
Adobe Edge Code CC/Brackets
- все нужные файлы в нужном месте для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign на выбор
- библиотеки jQuery и CSInterface
- шаблон для иконки
- свою библиотеку оформления всех элементов интерфейса в стиле Adobe
- скрипт автоматического перекрашивания панели в цвет интерфейса приложения
- кнопочку «Refresh»
- .debug со всеми прописанными данными
После установки расширения в Edge Code CC выбираем File > New Creative Cloud Extension
Вносим нужные правки в index.html
Сохраняем. Запускаем фотошоп и открываем то, что получилось.
Обратите внимание на маленькую кнопочку «Rf» в правом верхнем углу — она позволяет перезагружать расширение без перезагрузки фотошопа.
Кстати, все скрипты работающие непосредственно с функциональностью фотошопа хранятся в папке jsx папки расширения.
Eclipse
Для этого редактора скачиваем это дополнениеAdobe Extension Builder 3 и устанавливаем его.
- шаблоны для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign
- библиотеки jQuery и CSInterface
- свою библиотеку оформления всех элементов интерфейса в стиле Adobe
- скрипт автоматического перекрашивания расширения в цвет интерфейса приложения
Суть примерно такая же как и в первом случае.
Только вот очень неудобно, что для просмотра внесённых изменений нужно каждый раз перезапускать фотшоп.
Также нет иконки и .debug-файла.
Да и сам Eclipse тяжелее на подъём.
Сборка в ZXP
Последний этап — собрать результат в ZXP-файл и подписать его.
За неимением под рукой Windows, расскажу как это делается в OS X.
Для этого скачиваем CC Extensions Signing Toolkit
Открываем терминал и получаем сертификат командой
пример
Полсле того, как сертификат получен пакуем наше расширение в ZXP с использованием этого сертификата.
На этом всё.
Надеюсь, статья поможет многим сделать первый шаг в сторону разработки своих улучшений всеми известных программ.
Полезные ссылки
HTML Panel Tips by Davide Barranca — несколько полезных статей на тему
Introduction To Photoshop Scripting By Kamil Khadeyev — с чего начать свой первый скрипт для Фотошопа.
USING The Adobe Eextension SDK — подробная инструкция от Adobe
Adobe Photoshop Scripting — документация по написанию скриптов от Adobe
A Short Guide to HTML5 Extensibility — примерно тоже, что я описал в первой части своей статьи
Introducing HTML5 Extensions — пара вводных видео для работы с Eclipse
Adobe Extension Builder 3 — расширение для Eclipse и паковщик в ZXP-файлы
Creative Cloud Extension Builder for Brackets — расширение для Adobe Edge Code CC/Brackets
Читайте также: