前不久在网上到处瞎晃的时候,发现Adobe的软件几乎都可以写插件。Fireworks更是很早的版本就支持使用javascript编写插件,于是乎如入桃园,奋斗几日为VD小伙伴们写了一个插件,命名AutoSlice。

文末会附上插件下载地址及说明

顾名思义,AutoSlice是一款提供自动切图功能的插件。通过AutoSlice,视觉设计师可以通过简单的配置,自动完成一份视觉稿在不同分辨率下的切图。 开发AutoSlice的目的是减少视觉设计师在不同分辨率下反复切图的耗时,同时精确对齐图片。

安装好AutoSlice后,可以在windows -> AutoSlice 打开AutoSlice窗口。和原生的一些窗口一样,AutoSlice可以拖放至Fireworks侧栏等位置。

使用AutoSlice时,请先确保你打开并只打开了一个你需要切图的视觉稿。


     在使用AutoSlice面板之前,视觉设计师需要重新命名你需要切图的元素或者组。

在元素或者组原来的名字后面加上$$,并按照下面的规则在$$中加入配置。注意原来的元素名不要包含$

接下来就到了使用AutoSlice窗口了,这个窗口主要用来设置你需要导出的分辨率(单位是像素)。

1)窗口中每一行代表一个需要切图的分辨率

   2)你不需要为视觉稿的原始分辨率额外填写一行,事实上,你什么都不填的情况下,AutoSlice总是会安视觉稿的分辨率默认切一套图。

3)每个输入框请出入6位正整数,不勾选的行和输入错误的行不会被用来设置切图。但也不会引发异常。

AutoSlice会采用当前文档的另存为中的设置来保存切图,为减小切图文件的大小,请先到save as窗口中,确认保存类型为拼合PNG。另存一个副本就可以改变保存设置。

  配置好后,可以点击Export按钮。系统会弹框让你选择切图文件安放的位置。

等待AutoSlice运行完成后,就可以去看看切好的图了!每个分辨率都会有一个文件夹。

AutoSlice会遍历每个page,但是需要保证每个page的分辨率一致。

  由于我的视觉设计师小伙伴们偏向mobile native的切图,所以AutoSlice中没有支持web合图和Font-icon,以后有机会应该会单独做插件。

最后,送上插件地址

http://bit.ly/QckC6U

因为Adobe的官方发布政策,AutoSlice在Adobe Exchange上的版本需要 Fireworks CS6。

AutoSlice我5月初就发布了,但是Adobe回信给我说Fireworks需要Add-ons才能下载新的插件。小伙伴们需要在5月21日之后才能到 https://creative.adobe.com/addons 下载Add-ons。同时确认你已经有了Adobe Exchange Manager CS6。

之后这一系列的文章会讲述一些Adobe插架开发的东西,之前虽然已经有人写过这方面的文章,但是年久失更,一些细节已经不适用。

转发请注明出处:http://www.cnblogs.com/Arthus/p/3738306.html

Fireworks Extension —— AutoSlice 介绍的更多相关文章

  1. Fireworks Extension —— 开发篇(Dom模型)

    如上一篇博文所叙述的,一个很偶然的机会,我得知可以使用Javascript开发Fireworks插件,又注意到了视觉小伙伴的需求,于是便上手开发Fireworks Extension了. 很幸运的,在 ...

  2. App Extensions篇之Share Extension

    转载请注明出处:http://www.cnblogs.com/zhanggui/p/7119572.html 1.前言 这里主要是对App Extension的一些介绍以及详细给大家介绍一下Share ...

  3. App Extensions篇之Sticker Pack Extension

    转载请标明原文链接:http://www.cnblogs.com/zhanggui/p/7151795.html 前言 上一篇文章对App Extension做了简单介绍以及对Share Extens ...

  4. iOS - Action Extension

    上一篇<iOS开发 之 Share Extension>介绍了分享扩展的开发与使用,本篇主要还是讲述在系统分享菜单中最底下一栏的功能扩展:Action Extension,该扩展跟Shar ...

  5. iOS - App Extension 整体总结

    一.App Extension的介绍 App Extension可以让你扩展你APP的自定义功能和内容,使用户可以在与其他应用或者系统进行互动的时候去使用它.app extension即为本文所说的e ...

  6. 2020年的UWP(3)——UWP和desktop extension的简单交互

    上一篇<2020年的UWP(2)--In Process App Service>中我们了解了UWP和Desktop Extension可以通过AppService进行数据交互.本篇我们就 ...

  7. iOS阶段学习第16天笔记(Category-NSSet-SEL-NSIndexSet 操作)

    iOS学习(OC语言)知识点整理 一.NSSet.NSMutableSet集合的介绍 1)NSSet.NSMutableSet集合,元素是无序的,不能有重复的值. 2)用实例方法创建一个不可变集合对象 ...

  8. iOS开发——语法篇OC篇&高级语法精讲

    高级语法精讲 一.NSSet.NSMutableSet集合的介绍 1)NSSet.NSMutableSet集合,元素是无序的,不能有重复的值. 2)用实例方法创建一个不可变集合对象 例如: //宏定义 ...

  9. Windbg Extension NetExt 使用指南 【2】 ---- NetExt 的基本命令介绍

    摘要 : 本章节介绍NetExt常用的命令. 并且对SOS进行一些对比. NetExt的帮助 要想玩好NetExt, 入门就得看帮助. 看NetExt的帮助可以调用!whelp 命令. 这样hi列举出 ...

随机推荐

  1. Java环境变量的配置及意义

    配置环境:Windows XP 首先是配置参数,这个网站上很多.很多网站上说要配置三个参数,即Path,classpath,JAVA_HOME三个.   简要的介绍一下这三个环境变量. Path使得系 ...

  2. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

  3. Node.js连接数据库

    Node.js连接数据库前,须要安装对应的包.假设安装sql server 须要先装包node-sqlserver. 我们以mysql为案例来说明node.js查询mysql数据. 1.安装 node ...

  4. [TypeScript] Inheritance

    Inheritance is a way toindicate that a class receives behavior from a parent class. Then we can over ...

  5. Effective C++ 总结(一)

    一.让自己习惯C++    条款01:视C++为一个语言联邦       为了更好的理解C++,我们将C++分解为四个主要次语言: C.说到底C++仍是以C为基础.区块,语句,预处理器,内置数据类型, ...

  6. 转载:IntelliJ Idea 常用快捷键列表

    IntelliJ Idea 常用快捷键列表 (http://www.open-open.com/lib/view/open1396578860887.html) Ctrl+Shift + Enter, ...

  7. 洛谷 P1273 有线电视网(dp)

    /* 想了半天没想出状态 自己还是太弱了 QAQ 题目问的是最多供给多少户 一般想法是把这个值定义为状态量 没想出来QAQ....看了看题解的状态 很机智.... f[i][j]表示i的子树 选了j个 ...

  8. Web项目练习总结(错误校正篇)

    老师布置任务,从SVN上弄个项目来练练手,熟悉下过程. myeclipse安装SVN 然后把MobileManageSys下下来 然后漫长的等待... 然后配置数据库,导入,这里用的是SQLyog,其 ...

  9. Electron

    跨平台桌面app开发 Appjs hex nwjs electron 官网:http://electron.atom.io/ 中文文档:https://github.com/atom/electron ...

  10. ViewPager滑动特效实现

    ewPager最常用于结合Fragment,这是一个方便的方式来供应和管理每个页面的生命周期. MainAcitivity的代码 import java.util.ArrayList; import ...