【CEP教程-15】前端框架在插件面板中的应用

这篇教程给大家介绍前端的流行框架,如何应用到Photoshop插件面板中,提升我们面板界面开发效率。这篇教程会采用视频的方式来给大家讲解,考虑到时长的关系,视频分上下两篇,上篇介绍使用前端框架开发插件面板,下篇介绍JSX脚本的工程化,共两个视频。

这是我第一次录制视频教程,还没有什么经验,也没有太多精力和时间做剪辑,和各种社区站点的UP主完全不能比,大家将就着看哈,有建议可以在评论区提~~

阅读更多
【CEP教程-14】数据存储相关

【CEP教程-14】数据存储相关

在我们日常插件开发过程中,经常会需要存储一些数据,比如用户当前操作的状态、用户登录的账号信息,或者我们对PSD文档做的一些修改等等,这些都需要我们将一些动态数据,写入到当前用户设备上,这篇文章就来介绍一下CEP插件体系给我们提供了哪些可以进行数据存储的类型和使用方式。

阅读更多
【CEP教程-13】nodejs在插件开发中的应用

【CEP教程-13】nodejs在插件开发中的应用

前面的文章我们学习到,CEP的插件面板,是基于浏览器的web开发生态,我们通过Html/css/js来编写面板的结构、样式和交互,通过调用ExtendScript来操控宿主Ps。

除此之外,Adobe还在这个浏览器里头嵌入了nodejs的运行时,可以让我们在面板开发的时候使用nodejs的各种特性,这无疑大大的扩展了插件面板的能力,这篇文章我们就来介绍一下如何在CEP插件面板中使用nodejs,以及一些特性的应用吧

阅读更多
【CEP教程-12】如何从Ps中导出图片

【CEP教程-12】如何从Ps中导出图片

在做Ps插件开发的时候,一个非常常见的功能就是导出图片,有时候我们需要导出整个PSD文档,有时候我们需要导出某个图层或某个几个图层,市面上所有的和UI切图有关的产品和插件,都是运用了插件的图像导出能力来完成这个诉求。本篇文章我们就主要来介绍如何从Ps中获取图像,或许各种格式的图像。

阅读更多
【CEP教程-11】生成器

【CEP教程-11】生成器

这篇文章,我给大家介绍一下Photoshop一个比较冷门的扩展部分,叫生成器(英文generator),这个东西不在CEP插件面板这个体系内,了解和用的人也比较少。但是呢它确实也是Ps提供给开发者进行扩展定制的一个模块,并且它提供了一些非常独有的特性,对我们插件开发也有较大的助益,所以我单独开一个章节来进行介绍。

背景介绍

生成器,是Photoshop在2015年随着CC2015这个版本一起发布的。当时,由于移动端开始兴起,移动UI设计开始成为主流,随之诞生了一个叫Sketch的设计工具,主打UI设计,相比Ps它更轻巧在UI设计领域效率更高。Adobe也感觉到了压力,于是开始尝试在Ps上融入一些新的元素来提升UI设计能力,所以在CC2015中集成了两个东西:

阅读更多
【CEP教程-10】图层处理那些事

【CEP教程-10】图层处理那些事

前面三篇文章,我系统的介绍了Action Manager的基本逻辑和使用方法。希望通过这三部曲能够让大家对Ps脚本编程中的黑魔法有一个更深的认识,并且可以自己上手写一些AM代码,基本上目前绝大多数的场景,我都不需要去网上找别人的代码来抄,而是可以自己去挖掘最终自己写出来想要的功能逻辑。

今天这篇教程,我们会顺着AM继续实战,介绍Ps中最重要的一块 – 图层的常见操作,在课程结尾我们会沉淀出一份JS库文件,封装好了过程中写好的代码,便于日后使用。让我们现在开始吧~~

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

【CEP教程-9】Action Manager从好奇到劝退 - 下篇

首先,祝各位新年快乐!今天是2022年的第一天,我没有贪玩,想着要保持文章更新的频度,文章更新周期不要超过2两周,这样才能保证把这个教程顺利完整的写完。在这里祝大家新的一年都顺顺利利,也希望这套教程能够顺畅的完成。

上篇文章我们介绍了如何使用Action Manager来从PS中获取数据,我们深入讲解了ActionDescriptor的组织结构和使用逻辑,本质上和JS开发没有多大区别,我们通过ActionDescriptor, ActionReference, ActionList这3个对象以及他们提供的方法,进行递归遍历,将其中的key和value打印出来,以获取我们需要的数据项。并且我还介绍了如何从宿主全局出发通过对象树分析的方法,挨个将Ps的各个对象和数据进行挖掘,这样你就不需要去猜测某个目标用什么key了,这些key都在对象树的属性当中。如果你仔细研读该文章,并且自己实际动手去尝试了,应该就能够自己尝试的去写一些AM代码了,然后会发现它的功能针对比官方提供的DOM API要丰富强大的多。

这篇文章,我们开始介绍AM三部曲的最后一篇,如何对宿主进行设置操作。把设置放在最后来讲,是因为它相比GET行为,要更难,更不好理解,也更不可预期。所以阅读本篇文章,一定要专注认真,尽量跟随我的思路往下走,我会努力将这套方法一点点剖析出来,尽管如此,也不能确保Ps所有的目标对象都是可以设置成功的,这点你要提前明白。让我们开始吧

阅读更多
【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开发的前端同学应该都很熟悉,我就不展开介绍了。教程后面的篇章,会讲插件的打包,混淆,发布相关,会在介绍这块内容。

阅读更多