设为首页收藏本站

华印社区

 找回密码
 加入华印

QQ登录

只需一步,快速开始

查看: 290|回复: 13

零基础学做photoshop插件,零基础快速入门photoshop插件开发教程(前言)

[复制链接]
发表于 2016-5-27 14:51:36 | 显示全部楼层 |阅读模式
本帖最后由 蚀刻先锋 于 2016-5-27 15:39 编辑

版权声明:本文为郑小强原创,经允许在华印网共享,未经论坛允许不得转载。背景介绍
Adobe提供了诸多功能强大的图形编辑软件,其中像PS, AI之类的更是广大UI设计师必备工具。然而在功能强大的同时,面对不同的使用场景所需要的特殊需求,主体功能便无法满足了。为此,adobe为各个软件提供了插件机制,为广大设计爱好者提供平台来丰富adobe产品的功能。
目前该平台软件的插件开发已经形成了相应的市场规模,有诸多专门做该平台插件的公司诞生,也有许许多多的优秀插件产品出来,满足用户对不同的设计需要,大大提升工作效率。
作为一个开发者,也开发过该平台的插件产品,期间踩过许许多多的坑,发现这个领域主要还是国外开发者居多,国内对应的资料和开发人员都比较少,中文的相关资料也都非常碎片化,不成系统。
本博客将专门投入adobe平台的插件开发研究,力求系统的将对应的知识点沉淀下来,供大家参考。

adobe插件的几种形态
由于历史原因,adobe在经历多年的发展,在不同的阶段提供了不同的插件、扩展方式,这些方式经过几经变化,修正和升级,导致了目前存在多种插件形态的局面。这些不同的形态由不同的技术实现方案构成,本文将分别介绍这些不同形态的插件和对应的技术组成结构。
本文将主要以photoshop为宿主软件来介绍对应的插件开发机制,对于其它的软件也基本类似
第一种 脚本插件
这是最常见的一种插件方式,你通过编写一个脚本文件,然后在PS里头运行,即可完成对应的操作。典型的例子是一个比较有名的圆角编辑脚本插件CornerEditor ,如下图

这个插件可以帮助你快速的编辑图层的圆角,随便改数值即可。
这个脚本就是有一个jsx的文件组成的,jsx 是adobe对JavaScript 的扩展语言,又叫做ExtensionScript 它是对js语言的一种扩展,提供了访问宿主(photoshop)相关功能接口的特性。
下面是一段简单的jsx代码
[JavaScript] 纯文本查看 复制代码
var doc = app.documents.add(300, 200);[/align][/b]doc.name = "TestDoc";
var layer = doc.artLayers.add();
layer.name = "test layer";
layer.kind = LayerKind.TEXT;
var textItem = layer.textItem;
textItem.contents = "Hello photoshop scripting";


上面这段代码会在当前的ps里头新建一个文档,并且新增一个文字图层
CornerEditor和这个类似,它也是一个写了很多js代码的文件,只要将改脚本文件放到PS的Scripts目录下,就可以通过PS的菜单栏 文件->脚本 列表里头看到它,点击该脚本名称,就会弹出上面图片显示的界面窗口。
这种脚本,可以实现基本的UI界面(比如上图),这些基本的UI控件都是宿主软件提供的,比如输入框,单选、多选、按钮等。但是只能使用这些基本的控件,无法自己绘制UI。它的优点是简单、小巧,开发速度快,随便打开一个记事本就可以开始写了,安装和使用也比较简单。
整体而言,这种脚本插件的方式,更适合一些轻量的功能集合,可以在一个简单面板里头快速完成的动作。
第二种 面板插件
面板插件也是比较常见的一种插件形态,它看起来跟你的图层面板、颜色面板等很像。比如ps自带的颜色主题面板插件

它就是一个很典型的面板插件,它和第一个脚本插件的相比,要更复杂一些技术结构,它能够支持更加复杂的UI界面和更多的功能特性。
CS6及以前的版本
对于CS6及以前的版本,开发这种面板插件需要用到FLASH的相关技术,编写ActionScript 来开发功能,你需要如下的开发环境
  • FlashBuilder
  • ExtensionBuilder2
这两个软件,都可以在网上搜到下载,这里就不提供链接了。ExtensionBuilder2需要集成在FlashBuilder中使用,集成好之后,就可以开始开发面板插件了。界面通过flashbuilder的默认界面编辑器来完成,功能部分需要自己写ActionScript,adobe提供了对应接口API,可以在EB2的帮助里头找到对应的文档。
CS6之后的版本
从CC开始,adobe就打算放弃flash架构,改投html。于是在CC的版本中加入了html架构的面板支持,并且在CC2014开始直接废弃了flash的插件架构。这也是为什么你看到很多以前用的插件都无法再CC2014/15上跑起来,并且这些插件的开发者也停止更新了(因为技术架构变了哇~~需要重新写代码)
但是adobe抛弃flash转投html是明智的,html架构更轻量,跨平台兼容性更好,配上chromium的支持,现在已经随处可见了~~ 本博客也会重点介绍基于html架构下的面板开发技术。
基于html的面板开发,就和传统的web开发很类似,你不需要有很牛逼特定的IDE或者开发环境来进行开发,你只需要一个可以写代码的文本编辑器和一个完整的photoshop就可以了。它的基本技术组成如下
HTML: 负责面板的界面结构和内容组成
CSS: 负责面板的样式展现
JAVASCRIPT: 负责面板的用户交互和行为逻辑
ExtensionScript: 负责与宿主ps通信
这里不深入介绍具体的开发指南,后面会专门写文章开发入门的文章介绍相关内容。
这种面板插件是目前最流行的插件方式,墙裂推荐。
第三种 独立软件
除了ps自带的面板之外,还有一些独立的第三方软件,他们也可以和photohsop进行交互,对设计稿进行一些处理,下面是一个例子:
这是一种独立的外挂,和普通客户端软件类似,需要单独安装,安装成功后,打开PS,他们可以和PS进行通信。
这种第三方软件,可以通过photoshop提供的com库进行通信,下面是一段简单的VB代码,可以在PS中新建一个文档,新建一个文字图层
      
[Visual Basic] 纯文本查看 复制代码
 Dim appRef = CreateObject("Photoshop.Application")
        Dim docRef = appRef.Documents.Add
        Dim layer = docRef.ArtLayers.Add
        layer.kind = PsLayerKind.psTextLayer
        Dim layerItem = layer.TextItem
        layerItem.Contents = "这是一个VB的外挂插件"
于是,你可以用visual studio,建立一个VB或者VC项目,然后通过引用ps的com库
adobe photoshop cc object library
这里就不深入介绍了
如果有需要,后续专门写VB开发面板的教程~~
这种插件适合对VB比较熟悉的同学,VB本身上手比较容易,借助VS可以快速弄出一个简单的交互界面。
第四种 基于C++的内置插件
如果你有在网上下载过一些PS的滤镜之类的东西,你就涉及到这类的插件,他们经常以xxx.8lixxx.8bx 之类的后缀结尾,这类插件你需要手动放到PS安装目录的plug-Ins目录下,然后启动PS之后他们就会自动加载,一个比较典型的这种插件就是PS自带的camera-raw
[Python] 纯文本查看 复制代码
import win32com.client[/align][/b]psApp = win32com.client.Dispatch("Photoshop.Application")
psApp.Open(r"D:\temp\blah.psd")         # Opens a PSD file
doc = psApp.Application.ActiveDocument  # Get active document object
layer = doc.ArtLayers[0]                # Get the bottom-most layer
layer.AdjustBrightnessContrast(20,-15)  # Bright +20, Contrast -15
doc.Save()                              # Save the modified PSD
这种插件的开发依赖adobe发布的sdk,可以在官网下载,sdk里头也提供了许多的sample,可以提供参考。开发完成之后,通过编译生成对应的.8li文件,放到插件目录下,即可运行。
这种插件由于用C写的,并且可以通过SDK直接和PS核心进行通信,在处理图像上有天然的计算(速度)优势,所以一般被用来做图像处理相关的功能。另外,它无法实现界面,需要单独的面板来提供支持,也因此,它对开发人员的技术能力要求更高。
总结
到这里你会发现,adobe的插件形式真实多啊~~~
其实,针对PS的扩展方式,还远不止上面这些形式,你几乎可以用你熟悉的任何语言来开发ps扩展,基于com库的话,你甚至可以用Python来和PS进行交互

还有,随着PS的版本不断升级,在扩展的支持上也提供了更多的特性,比如automate,generator,还接入了nodejs,有了这玩意,你几乎能搞所有的事情!注意,是所有的事情!
所以,你可以选择一种你想要的方式来为PS提供扩展。
最后,如果你对上面的某些内容感兴趣,请在评论里头留言,偶会在后面的文章中深入介绍。
一些参考资料
说实话,adobe的插件开发参考资料,实在实在实在是太TM少了!而且分散在各处,非常零散,并且社区方面,也内容不多,需要花很多心思去找。偶在这方面也是耗费了好多时间,在这里分享给大家
官方开发文档


对TA说:(0) 收起
回复

使用道具 举报

发表于 2016-5-27 20:04:41 | 显示全部楼层
有些复杂  要静心研究
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-6-14 17:35:06 | 显示全部楼层
这些没有详述解释,很难看懂是什么意思
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-6-18 21:43:37 | 显示全部楼层
楼主要是能出视频教程讲解就更好了,这样对于基础比较弱的朋友很重要,尤其是前面的平台搭建,比如要安装些什么样的软件,平台搭建好了后,可以尝试带着大家写几个简单的功能,其目的可以建立直观的印像,明白如何编写与调试,这样自然就水到渠成了。
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-6-19 16:26:00 | 显示全部楼层
来个最简单的代码
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-8-11 08:23:35 | 显示全部楼层
这是要代码的节奏啊,这得编程过关啊,搞设计的真没几个会
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-8-11 08:58:10 | 显示全部楼层
虽然没看懂,但大概意思也了解了一点点
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-9-21 17:53:23 | 显示全部楼层
要静心研究 有些复杂
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-9-24 14:21:25 | 显示全部楼层
得花大力气研究才行!!
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

发表于 2016-9-27 21:00:31 | 显示全部楼层
看懂前面一些  要代码就不会了
对TA说:(0) 收起
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 加入华印

本版积分规则

Archiver|手机版|小黑屋|华印社区 ( 陕ICP备16008585号-1  

GMT+8, 2017-1-16 18:48 , Processed in 0.132989 second(s), 54 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表