【CEP教程-8】Action Manager从好奇到劝退 - 中篇

【CEP教程-8】Action Manager从好奇到劝退 - 中篇

上篇文章我们介绍了Action Manager的入门知识,讲如何通过ScriptListener插件来让Ps输出AM代码为我所用。同时介绍了AM的独特的代码结构,都是源于底层C的转换逻辑,使得对大多数开发者而言,异常晦涩难懂。上篇文章相当于是基础知识的介绍,离真正实际应用还差的很多,基本上你只能通过拷贝Ps输出的代码,自己简单改吧改吧凑合着用,如果Ps没有输出,就无能为力了。

这篇文章,以及下一篇,我们开始介绍AM实战部分,深入了解AM的运作机制,通过一些前人的积累和经验,让我们自己也可以顺藤摸瓜的开始自己写AM代码,实现想要的功能。

对于我们日常想要的操作,无非就是希望从宿主获取一些信息(GET操作),设置宿主的一些状态(SET操作),针对这两个操作,我们分为两篇文章分别介绍,中篇介绍如何从Ps中获取信息,下篇介绍如何设置这些信息。这么安排是有考虑的,一方面相比SET而言,GET其实要相对简单一些(虽然SET有ScriptListener辅助,但离开它确实举步维艰),另外一方面SET部分会用到GET讲的数据结构。

让我们马上开始吧~

阅读更多
【CEP教程-8】Action Manager从好奇到劝退 - 上篇

【CEP教程-8】Action Manager从好奇到劝退 - 上篇

前言

上篇文章我们介绍了JSX的脚本核心 - DOM编程,它是Ps对外提供的一套API,提供了可以通过JS Api来调用宿主核心功能的接口,通过它我们可以完成需要的一些工作,而这也是官方文档提供给我们的有限的可用接口。但是你实际使用过程中就会发现,DOM提供的api太少太少了,大体也就能覆盖你日常需要的40%,剩下的很多需求,都无法通过DOM API来完成。

photoshop dom tree

比如当选中的多图层的时候,你想拿到当前选中的多个图层,通过

1
app.activeDocument.activeLayer

只能拿到其中的一个,无法拿到所有选中的图层。再比如你想通过代码来选中移动工具,或者你想获取到图层的图层叠加效果等等,这些你在DOM API中都找不到相关的信息。于是,通常你就会在网上进行搜索,查找别人是怎么做的,搜着搜着,你可能就会在一些论坛上看到别人贴出来的这样的一坨代码

阅读更多
【CEP教程-7】JSX脚本指南 - DOM篇

【CEP教程-7】JSX脚本指南 - DOM篇

前面的文章我们讲过,JSX(ExtendScript)是宿主解析的脚本语言,通过它,我们可以直接操作Ps,这也是插件开发的核心,接下来几篇教程,我们会详细介绍这部分内容。既然这个语言也是Javascript,那它和web开发的那些JS是一样的么,有什么区别没有?

ExtendScript语言

下面是Adobe官方给出的一段针对这个语言的介绍

”[…] an extended form of JavaScript used by several Adobe applications, including Photoshop, Illustrator, and InDesign. ExtendScript implements the JavaScript language according to the ECMA-262 specification. [It] supports the 3rd Edition of the ECMA-262 Standard, including its notational and lexical conventions, types, objects, expressions, and statements. ExtendScript also implements the E4X ECMA-357 specification, which defines access to data in XML format.”

从里面我们就可以看到,JSX采用的ES3标准,是一套非常非常非常旧的语言集合,我们目前基于chrome的web开发,一般都用到了ES6的标准,那是差的不是一两个时代,你不能在JSX里头使用各种新的语言特性,比如let, const, 箭头函数 等等,这些在里面都跑不起来,你只能一路var到底,同时有一些你平常习惯了的函数可能也没有,比如

1
Array.indexOf() // JSX的Array对象里头并没有indexOf函数

针对这种场景,你可以自己做一些Array的扩展,或者就是乖乖的用for去遍历。

不过虽然如此,借助整个web繁荣的生态,我们依然可以用最新的语言集合来编码,然后通过编译工具生成目标语言,比如我自己日常开发,就喜欢用Typescript来开发,然后通过webpack/ts编译、混淆、打包然后在进行发布,这个部分对web开发的前端同学应该都很熟悉,我就不展开介绍了。教程后面的篇章,会讲插件的打包,混淆,发布相关,会在介绍这块内容。

阅读更多
【CEP教程-6】面板与宿主之间的交互

【CEP教程-6】面板与宿主之间的交互

前面的文章我们讲到了插件面板是运行在CEF这个浏览器运行时下,而需要操作Photoshop的时候,要用到运行在宿主环境下的ExtendScript(以下简称JSX),那这两个独立的运行时之间是如何进行交互通信,且有哪些通信方式的呢,这篇文章我们来扒一扒。

面板调用宿主(JS -> JSX)

当我们在面板上点击一个按钮,然后让Photshop执行一个行为,这个时候,就需要JS调用JSX来完成,这个操作通过CSInterface提供的方法来完成,该对象提供了一个叫evalScript的方法,让我们可以在JS环境下执行一段JSX的代码,这里记得是执行一段代码,它好比原生JS的eval方法,将一串字符串代码执行,如下代码执行,就会在PS上出现一个alert弹窗:

1
2
var cs = new CSInterface();
cs.evalScript(`alert("Hi there")`);

这个函数提供了一个通往JSX世界的入口,但是光执行一段字符串代码显然在实际开发中是不够用的,因为我们的JSX代码通常都会很多很多,不可能全部都塞成一段字符串,于是我们一般将工程里的所有JSX文件都预先加载进来,然后暴露出函数,再通过evalScript函数去执行函数调用的过程。比如我在JSX文件里头有一个函数,该函数获取当前图层的名称:

1
2
3
4
5
6
// main.jsx
// 获取当前选中图层的名称
function getActiveLayerName() {
var doc = app.activeDocument;
return doc.activeLayer.name;
}
阅读更多
【CEP教程-5】插件面板的样式

【CEP教程-5】插件面板的样式

在开发一款基于Photoshop的面板插件时候,我们会关注到Ps这个软件提供了4中主题

photshop themes

这就要求我们在面板开发的时候,需要对这四种不同的主题进行适配,否则你浅颜色的面板界面在用户黑色主题下就会显得格外别扭。

阅读更多
【随笔】如何修改文字工具的默认字体
【CEP教程-4】开发工具选择和调试

【CEP教程-4】开发工具选择和调试

开发工具的选择

上篇文章我们介绍了Adobe CEP插件的基本构成,它包含了由浏览器渲染和交互的面板部分,和实际操作PS完成任务的ExtensionScript部分。

这两块的主要编程语言都是Javascript,所需要用到的技术都是web开发相关的技术栈,所以在选择开发工具上,也会偏向于web前端开发领域。理论上,因为是做页面和JS脚本开发,并不限制你用什么开发工具,只要一个顺手的文本编辑器,能够写Html/css/javascript就可以了。 不过处于开发效率,体验上,以及调试的方便性,我们有一些推荐选项。

1. Visual Studio Code

首选,没有之一!

它是目前市面上前端开发最流行的开发工具,免费,易用,还具有丰富的扩展插件供你选择,提升日常开发效率。 这里重点强调介绍的是Adobe官方基于VSCode也提供了一款开发调试插件,它能够直接和PS通信,支持调试你的JSX脚本。

ExtendScript Debugger

阅读更多
【CEP教程-3】 CEP插件面板结构介绍

【CEP教程-3】 CEP插件面板结构介绍

前沿

原计划这篇文章要写开发工具和调试环境的,但是后来发现如果不先介绍CEP面板的基本结构的话,会对调试环境的配置的理解有障碍,于是本篇文章介绍一下CEP插件的基本分层结构和文件目录结构。

分层结构

CEP分层结构

CEP的全称是Common Extensibility Platform,是Adobe在CC2014版本一起推出的扩展开发平台,在CC2014及以前,相对应的面板插件开发,是基于Flash开发平台,后来随着web的发展以及flash的逐渐没落,adobe随记放弃了使用flash来开发插件,拥抱web开发模式,CEP的插件开发,即全部采用的web开发技术。

阅读更多
【CEP教程-2】 开发环境搭建

【CEP教程-2】 开发环境搭建

前言

在开始插件开发之前,我们需要对Photoshop做一些设置,让它能够支持我们开发自己的插件。

1. 插件安装位置

从最终效果看,一个PS的插件,其实就是一个放置在PS的某个路径下的一个文件夹,里头包含了必备需要的文件。在不同的系统下,对应的位置不同,如下:

Mac

1
2
3
4
#系统路径
/Library/Application Support/Adobe/CEP/extensions
#用户路径
/Users/{用户名}/Library/Application Support/Adobe/CEP/extensions

Windows

1
2
3
4
#系统路径
C:\Program Files\Common Files\Adobe\CEP\extensions
#用户路径
C:\Users\{用户名}\AppData\Roaming\Adobe\CEP\extensions

系统路径,和用户路径的区别在于,当你把插件安装在系统路径之后,这个电脑上所有的登录用户都能使用,安装在用户路径下,只有此用户登录能够看到并使用。还有一个区别是安装到系统路径,需要管理员权限,在mac上尤其需要注意,没有权限可能会导致安装不成功

阅读更多
【CEP教程-1】 photoshop 插件类型

【CEP教程-1】 photoshop 插件类型

前言

这篇文章是在2015年写的,发布在CSDN的博客上,当时就有想法说要把PS插件开发这一系列的内容沉淀并分享出来,结果就写了一个开篇,就GG了。

今天上去一看,发现浏览量和收藏都还可以,底下还有评论希望继续更新的,有点惭愧……

现在把这篇文章转过来,同时做一些内容的更新,作为新的开始,新的开篇,嗯,这次要坚持下来,立个Flag。

背景介绍

Adobe提供了诸多功能强大的图形编辑软件,其中像PS, AI之类的更是广大UI设计师必备工具。然而在功能强大的同时,面对不同的使用场景所需要的特殊需求,主体功能便无法满足了。为此,adobe为各个软件提供了插件机制,为广大设计爱好者提供平台来丰富adobe产品的功能。

目前该平台软件的插件开发已经形成了相应的市场规模,有诸多专门做该平台插件的公司诞生,也有许许多多的优秀插件产品出来,满足用户对不同的设计需要,大大提升工作效率。

作为一个开发者,也开发过该平台的插件产品,期间踩过许许多多的坑,发现这个领域主要还是国外开发者居多,国内对应的资料和开发人员都比较少,中文的相关资料也都非常碎片化,不成系统。

本博客将专门投入adobe平台的插件开发研究,力求系统的将对应的知识点沉淀下来,供大家参考。

阅读更多