基于Photoshop插件的图标管理 -- 让工具来解放我们的双手 By 黎嘉尧 商品展示组
我们现在的做法？ 基本的都是手工，纯手工 -- 大量的重复的体力劳动！ 懂得偷懒会使用一些第三方的工具 -- 依赖工具，操作不方便 高端大气的工作流的拼图，很方便，也很粗暴 -- 高度依赖工作流 3
我们需要改变什么？ 不再是大量的重复劳动 良好的维护性，降低依赖 用最小工具做最多的事情 4
我所做的尝试！ Flash 生成图标 UI PhotoShop PhotoShop插件 基于psd的图标管理 功能模块 拼图的坐标替换 基于javascript的 5
选中图层或者选区生成图片，图层生成支持批量 关闭 关闭 关闭 Vtools的主要功能： 选中图层或者选区生成图片，图层生成支持批量 图层生成图片选项： 记录路径：生成后直接使用最近的目录路径 从选区生成：以选区内容为目标生成图片 以图片格式导出整个文件，用于拼图的生成 图片的生成格式 （JPG质量固定75，png按实际颜色数） 根据拼图替换文件坐标 导入图标，主要用于新建拼图 6
说一下Vtools Vtools实际上只是整合了图标相关的一些操作 而且，所有这些操作都和我们在PhotoShop上操作的一样 但是更准确更快。 Vtools不需要封装就可以源代码运行 路径 ：Adobe\Adobe Photoshop CS6\Plug-ins\Panels 7
Vtools是怎样实现的？ 8
具体实现的原理 9
PhotoShop objects(the JavaScript type library for PhotoShop) App Window Document Document 图层对象layers DOM 选区对象selection 通道对象channel 参考线对象guide 文字对象textfont … … PhotoShop : app.activeDocument.artLayers.getByName("my layer") Browser : window.document.getElementById("myDiv") 10
图层对象 Document.layers(Array) Or LayerSet.layers(Array) ArtLayer(obj) LayerSet(obj) ArtLayers(Array) LayerSets(Array) Document.ArtLayers(Array) Or LayerSet.ArtLayers(Array) Document.LayerSets (Array) Or LayerSet.LayerSets(Array) 11
其他功能性的操作 PhotoShop提供了一些方法可以访问PhotoShop的底层 复制(copy)的行为 app.executeAction(eventID [, descriptor] [, displayDialogs]) 复制(copy)的行为 app.executeAction方法 完成copy的行为 属于非用户创建的对象 eventID：copy 变形(transform) app.executeAction方法 完成transform的行为 属于非用户创建的对象 步骤说明(descriptor) 多步骤的行为 12
其他功能性的操作 实时输出PhotoShop中所有操作的代码插件 ： ScriptListener.8li 代码会记录在：ScriptingListenerJS.log 13
PhotoShop中特别的对象 new File ([path]) PhotoShop提供了可以操作文件和目录的js对象 new Window (type [, title, bounds, {creation_properties}]); PhotoShop提供了可以创建UI面板的对象 UI面板同时也可以对不同的组件绑定不同的时间，例如按钮，输入框 $.write (text[, text...]...) $对象主要用于调试和获取一些基本信息，在控制台输出信息,同console.log 14
最后： QQ群：154532253 工具是用我们熟悉的语言和在我们熟悉的软件上实现的 PhotoShop就是开发环境，随时可以开发和使用 除了图标管理，我们还可以实现更多的功能： 图标冗余检查，一键切图，智能排序图标…… 但是插件还存在版本兼容，使用范围等问题需要解决 QQ群：154532253 15
Thanks！ Q&A