С чего начать своё расширение для Photoshop, Illustrator и др. на HTML506.05.2014 21:34

В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственно расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.

С июня 2013-го года Adobe добавила поддержку HTML5 для расширений, тем самым упростив их создание.

Сразу замечу, что сам я дизайнер и к программированию имею очень посредственное отношение, так что прошу прощения за возможные ошибки в терминологии.

Инструменты Для работы нам понадобятся любимый текстовый редактор и базовые знания HTML, CSS и JavaScript.Да-да, теперь никаких Adobe Configurator и Flash.Автоматизировать создание базового набора нужных файлов помогут Eclipse и Brackets/Edge Code CC.

Из чего состоит Создадим простейшее расширение для Photoshop.Минимальный набор файлов и их структура такие:

ExtensionName/ CSXS/ manifest.xml index.html где manifest.xml — файл с описанием всех его параметров, а index.html — само расширение.Manifest.xml содержить примерно следуюшее

./index.html Panel

ExtensionName 400 400 Подробное описание всех параметрова в index.html, всё что душе угодно. Например:

Hello Habrahabr! Вот и всё.Наше первое расширение готово.Запуск Для запуска папку с созданным расширением нужно положить сюда OS X: ~/Library/Application Support/Adobe/CEPServiceManager4/extensions/ Windows: %APPDATA%\Adobe\CEPServiceManager4\extensions Запустить Фотошоп и выбрать в меню Window > Extensions > наше расширение

Все дальнейшие изменения можно вносить прямо в папке CEPServiceManager4\extensions.О том как вносить изменения без перезапуска Фотошопа ниже

Debugging Для того, чтобы включить этот режим нужно создать в корневой папке расширения файл .debug, ExtensionName/ .debug CSXS/ manifest.xml index.html содержание которого примерно следующее где Extension Id=«com.extensionname» — ID нашего расширения, а Port=»8088» — порт для подключения.

В браузере откроем ссылку http://localhost:8088,

выберем наш index.html.И вот они Developer Tools

Проверено в Safari и Chrome

Инструменты упрощающие жизнь Adobe Edge Code CC/Brackets David Deraedt сделал замечательное расширение для этих редакторов Creative Cloud Extension Builder for 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Открываем терминал и получаем сертификат командой

ZXPSignCmd -selfSignedCert пример ZXPSignCmd -selfSignedCert RU RU Saint-Petersburg «My Company» «Igor Volkov» myPassword myCertificate.p12 Полсле того, как сертификат получен пакуем наше расширение в ZXP с использованием этого сертификата. ZXPSignCmd -sign пример ./ZXPSignCmd -sign HelloHabrahabr/ HelloHabrahabr.zxp myCertificate.p12 myPassword На этом всё.Надеюсь, статья поможет многим сделать первый шаг в сторону разработки своих улучшений всеми известных программ.

Полезные ссылки HTML Panel Tips by Davide Barranca — несколько полезных статей на темуIntroduction To Photoshop Scripting By Kamil Khadeyev — с чего начать свой первый скрипт для Фотошопа.USING The Adobe Eextension SDK — подробная инструкция от AdobeAdobe Photoshop Scripting — документация по написанию скриптов от AdobeA Short Guide to HTML5 Extensibility — примерно тоже, что я описал в первой части своей статьиIntroducing HTML5 Extensions — пара вводных видео для работы с EclipseAdobe Extension Builder 3 — расширение для Eclipse и паковщик в ZXP-файлыCreative Cloud Extension Builder for Brackets — расширение для Adobe Edge Code CC/Brackets

© Habrahabr.ru