基于Photoshop插件的图标管理黎嘉尧.pptVIP

基于Photoshop插件的图标管理 By 黎嘉尧 商品展示组 -- 让工具来解放我们的双手 * 我们现在的做法？ 基本的都是手工，纯手工 -- 大量的重复的体力劳动！ 懂得偷懒会使用一些第三方的工具 -- 依赖工具，操作不方便 高端大气的工作流的拼图，很方便，也很粗暴 -- 高度依赖工作流 * 我们需要改变什么？ 不再是大量的重复劳动 用最小工具做最多的事情 良好的维护性，降低依赖 * 我所做的尝试！ 生成图标 基于psd的图标管理 拼图的坐标替换 PhotoShop插件 基于javascript的 Flash UI 功能模块 PhotoShop * Vtools的主要功能： 选中图层或者选区生成图片，图层生成支持批量 以图片格式导出整个文件，用于拼图的生成 图层生成图片选项： 记录路径：生成后直接使用最近的目录路径 从选区生成：以选区内容为目标生成图片 图片的生成格式 （JPG质量固定75，png按实际颜色数） 导入图标，主要用于新建拼图 根据拼图替换文件坐标 关闭 关闭 关闭 * 说一下Vtools Vtools实现了的功能：生成图标，生成拼图，替换坐标 Vtools实际上只是整合了图标相关的一些操作 而且，所有这些操作都和我们在PhotoShop上操作的一样 但是更准确更快。 Vtools不需要封装就可以源代码运行 路径 ：Adobe\Adobe Photoshop CS6\Plug-ins\Panels * Vtools是怎样实现的？ * 具体实现的原理 * PhotoShop objects(the JavaScript type library for PhotoShop) App Document 图层对象layers 选区对象selection 通道对象channel … 参考线对象guide 文字对象textfont Window Document DOM … PhotoShop : app.activeDocument.artLayers.getByName(my layer) Browser : window.document.getElementById(myDiv) * 图层对象 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) * 其他功能性的操作 复制(copy)的行为 属于非用户创建的对象 app.executeAction方法 完成copy的行为 PhotoShop提供了一些方法可以访问PhotoShop的底层 app.executeAction(eventID [, descriptor] [, displayDialogs]) 变形(transform) 属于非用户创建的对象 app.executeAction方法 完成transform的行为 多步骤的行为 步骤说明(descriptor) eventID：copy * 其他功能性的操作 实时输出PhotoShop中所有操作的代码插件 ： ScriptListener.8li 代码会记录在：ScriptingListenerJS.log