中文站点-网站精选 - Fireworks的前世今生(以及Fireworks27个最强大的功能)
Fireworks的前世今生(以及Fireworks27个最强大的功能)
Information
原文地址:http://fireworks.smashingmagazine.com/2013/12/19/present-future-adobe-fireworks/
Iconfans独家稿件,转载请标注
除非你是从火星来的,要不然你不可能不知道Adobe已经停止了Fireworks的更新。Adobe计划在未来发布一款新工具来取代Fireworks
当你进行界面设计时,Fireworks会是你的选择吗?我想有很多设计师都喜欢这款优秀的图形工具。
在Adobe停止更新Fw的大背景下,Fireworks已死?或许未必,本文,我们来聊聊Fireworks。
从Macromedia时代起,我就开始使用Fireworks,是我日常工作中必不可少的工具。Fireworks短小精悍,如同瑞士军刀,用途广泛,功能强大。
几年前,Vitaly Friedman邀请我做Smashing Magazine网站Fireworks频道的编辑,我想都没想立马就同意了。时至今日,我们已经刊登了超过20篇的高质文章,获得了读者的一致认可。
而今年,Adobe宣布弃用Fireworks,老实说,我有点悲哀。当我回首往事,再去Adobe Fireworks博客下翻看一条条评论,我发现,我不是一个人在悲哀,很多人也同样喜欢Fireworks。
如果你是Fireworks的深度用户、喜爱用户,当你面对这种局面,你也不免有种“兔死狐悲”的感觉。
不过好消息是,我们还可以继续用CS6,直到Adobe发布一款足够强大,足以取代Fireworks的软件,我们拭目以待吧。
一.Adobe Fireworks: 现状
2013年五月,Adobe宣布停止更新Fireworks
Adobe Fireworks的未来扑朔迷离 (图像来源: by Ryan Hicks.)
那好消息是?Adobe表明会一直提供Fw CS6升级补丁,以便适应最新版的Windows和Mac OS X,不过我个人希望Fw CS6能融入到Adobe CC的生态环境中,并且可以单独购买。
(注意:不幸的是,Adobe似乎永远不会对Fireworks进行开源式发布,即便有上千人请愿Adobe继续研发Fireworks。)
更好的消息是?尽管Adobe有点不近人情,但是我们有民间支持,有很多团队在进行Fireworks的研发,为Fireworks不断加入新功能、新扩展。例如,最近添加了SVG导入和SVG导出。
尽管Fireworks的前景并不明朗,但是对于很多设计师来说,Fireworks是非常重要的工具,在工作流程中必须使用。
二.Fireworks为什么这么牛逼?
新手设计师往往这么问老师傅:“为什么要用Fw做UI设计啊?为什么不是用PS+AI做呢?”
其实,他们是不知道Fw的很多优秀功能。我们来一起看一下吧。
1.聚焦屏幕上的设计
Fireworks是一款专注于屏幕设计的软件;这是它的专长。因此它有很多功能能帮助UI设计师快速、精确的工作,尽量减小界面设计的杂乱感。直观易用,具备线框图设计和原型设计的功能。简直就是UI设计的瑞士军刀。
2.强大的矢量工具
和AI相比,Fireworks更容易掌握。你可以用最简单的方法画出最复杂的屏幕图像、插画、图表、网页设计,可以直接导出为位图或SVG,不用转换,其他图形工具立马就能接手下一步。
3.优秀的位图编辑工具
Fireworks 是一款优秀的位图编辑工具,但你想要修改位图时(例如,想要快速修改改颜色、裁剪图像,添加蒙版,都可用Fw实现)
4.创作实时原型图
想用Fw创造实时、可交互的原型图?完全可以,感兴趣的不妨翻翻Smashing Magazine 12年6月25号的Fw专栏文章。你会发现,Fw
是一款牛逼的实时原型图设计工具!例如,你可以用FW快速创建一个音乐播放器的原型设计。
5.创建实时IOS原型图
一款工具,三个功能:线框图设计,IOS原型设计,最终设计稿——只需一款Fireworks
感兴趣的不妨翻翻Smashing Magazine今年1月份的文章“iOS Prototyping With TAP And Adobe Fireworks (Part 1,Part 2,Part 3)”
6.FIREWORKS 智能PNG文件格式
Fireworks中的图像可保存为独家的、可编辑的PNG格式,优点多多:文件大小较小(一个包含多个页面的PNG文件,可能不到10MB,而PSD文件,同样内容,可能要几百MB)、内嵌源数据(注释、标注)、可用Finder和Explorer预览。最重要的是,能够在任何浏览器、任何设备中实时预览。
7.优异的导入导出、打开保存功能
Fireworks可以保存为以下文件,同时保持优秀的压缩比和质量:PNG32,PNG24,PNG8 PNG8+Alpha透明,JPG,GIF,SVG,ICO
除了这些“扁平,层级较少”的文件格式。Fireworks还可以打开大多数PSD文件和AI文件,以及EPS和大多数SVG文件。
Fireworks默认保存为Fw PNG,也可以保存为PSD和AI格式。
(注意: 在未来对PSD和AI文件的支持可能会有所限制,因为PS和AI会一直保持更新,而很多新功能,Fw并不支持)
8.页面、图层、状态(以及对象)
不管是什么网站,还是手机应用,页面都超过一个,并且拥有多种状态。Fw最强大的功能便是能够在“单一文件中,包含多个页面,以及状态”(详情参见“Using Pages, States and Layers in Fireworks”Fw的页面、状态以及图层功能 这篇文章)
页面,图层以及状态
那些熟悉PS的人可能都知道图层。但是Fireworks的页面功能更简单,更易懂。在AI中,多重画板的目的可能是相似的。但是Fw中页面的概念更加直观,更符合我们对页面和应用的认知模型。Fw中的主页面(Master Pages)能够方便我们为所有的页面创建一个标准的框架(例如,标头以及导航)。例如,当你对主页面作出改动时,其他页面会立即自动修改。
文本,图像,图形会以图层的形式组织。图层本身包含了很多的对象和子图层。Fw是一款基于对象的设计工具(每个对象都是互相独立的——你可以在画布中一点即可选取对象),我们可以利用图层来组织我们的源文件。我们可以为多页面分享图层,控制图层的可见度,甚至可以导出所选图层的对象。
Fw允许我们为页面和对象创建多重状态。这对UI设计来说,再方便不过了,因为很多元素需要多种状态,以便引导用户。(例如,按钮就有悬停状态,按压状态和正常状态),你可以为一个对象,设置对中状态。只需一个按钮,可以诠释三种按钮状态,而无需花三个按钮,代表不同状态。
9.复制和粘贴属性
想要把A对象的全部属性,复制到B对象上吗?简单!只需要Ctrl/Cmd + C然后Ctrl/Cmd + Alt +Shift +v就可以了
只想复制A对象的C属性给B,怎么做呢?简单, 只需要一个小小的扩展包,属性选择性粘贴(Paste Selected Attributes)即可。
10.移动设计的强大工具
因为Fw主要是一款矢量设计工具,因此很适合移动设计:iOS,Android,Windows Mobile。
11.一通(fireworks)百通(全部流程)的全能工具
Fw无所不能,可以作为设计流程每个阶段的工具。可以先从纸笔开始,画草图,想创意,然后再Fw中完成线框图,原型图,最终设计稿等步骤。不用切换工具,更紧凑的设计流程,节省时间!
感兴趣的不妨搜索一下“every stage of a screen design project.”(利用Fw,走完屏幕设计所有流程)这篇文章。
12.符号功能
Fireworks有两种符号:图形符号(Graphic Symbols)和富(组件)符号(Rich Symbols)。创建符号后,可在设计中多次使用,一旦修改了符号后,其他符号会立即相应改动。
图形符号和组件符号的区别在于,前者会在一切情况下保持外观的一致性,而后者相较如咋,比如说按钮的三种状态,后者的定制更复杂一些。
主要是Fw的符号功能,大大简化了设计流程,能够把图形、可编辑熟悉甚至编码结合在一起定制。
想了解、使用Fw中的符号功能?请看下面的几篇文章。
“Understanding Styles and Symbols” (理解样式和符号video) Adobe TV
“Symbols,”(符号) Fireworks帮助
“Creating a Symbol in Fireworks CS6”(用Fw CS6创建一个符号video), 教程
13.样式
样式之于Fw,有点类似于CSS之于网页,一触即发,一处文本和图形样式改动,会立马引起全局性的改动。如果你编辑一个样式,那么整体也会相应的修改。而且创建、保存、分享样式库非常容易。
实际上,我觉得Fireworks有点像CSS的终极扩展工具
Fireworks中的样式选项。
想了解Fw中的样式功能,请参考这些文章。
“Understanding Styles and Symbols” (理解样式和符号video), Adobe TV
“Fireworks CS4 Styles Management,”(Fw CS4样式管理) Darrell Heath, Layers
“Adobe Fireworks CS5: Installing and Utilizing Styles,” (Fw CS5:利用样式功能)Mountainstone Media
14.切片功能
切片作为一种手段,可以从整体设计中保存出一些特定的图形,比如说背景图案,按钮图形,图标或是插画。Fireworks的切片非常简单。简单选择所有想要保存的图像,然后编辑>插入>矩形切片即可。
每份切片都可以在属性面板中命名,都可以单独进行设置,也可以同时导出为PNG,GIF以及JPG。切片时要留意名称、保存路径和优化设置。这样便可以进行下一步的编辑了。
如果仅仅想要切一部分,而不是整体,那么可以使用工具面板中的切片工具。
这里是一些有用的教程/文章:
“Getting Started With Fireworks: Intro to Using the Slicing Tool,” (Fireworks新手入门,切片工具简介)Connor Turnbull, Webtuts+
“How to Slice Images Like a Pro in Adobe Fireworks” (如何专业高效的使用Fw中的切片工具?), Mike Locke
15.像素完美主义
还要“对齐到像素”?Fw完全不用,Fw中的对象完全像素对齐。仅在少数情况下,对象才有可能不按像素单位对齐,比如说缩放矢量对象。这时,只需修改>对齐像素(或者Ctrl/Cmd + K)就能解决问题。
16.属性面板与直接交互
在Fw中,利用选择工具和取消选择工具,你可以直接与画布上的对象交互。当选择对象时,属性面板会呈现对象所有信息,并且可编辑。
提供更直截了当的选取和编辑方式:无论是矢量对象,或是文本,或者是位图图像,或者是矢量蒙版,都可以选、改。
更直观有效的编辑——属性面板(View large version)
如上图,属性面板会根据对象的性质相应进行可适应调整:
vector mask,(矢量蒙版)
vector rectangle,(矢量矩形)
text object,(文本对象)
several objects.(多个对象)
17.更容易的渐变实现
使用Fw创造渐变非常容易,因为是实时模型。可以在属性面板中更直观的控制渐变参数。
Fw中的渐变 (图像来源: “Optimizing the Design Workflow With Fireworks Extensions, Part 3,” Ashish Bogawat)
Fw提供了多种渐变类型。支持:线性、放射性、矩形、圆锥形、轮廓、缎纹、星状、折叠、椭圆形、条状、博文、波浪等。
可以下载免费扩展,让渐变更加容易:渐变面板和渐变方向编辑器(此处下载:reviewed in detail).
18.混合模式
你信吗?Fw的混合模式比PS还多。而且有很多独特的混合模式非常实用。可以应用到任何对象上,不仅仅是位图。
Fireworks’ 的混合模式全图
这仅仅是一半
19.9切片缩放工具
某些情况下,当我们缩放对象时,我们需要保留某个部分的比例外观,为了避免缩放后,该部分出现变化,我们可以使用9切片工具。利用9切片工具,我们可以缩放该缩放的部分,保留不该缩放的部分。例如,按钮一般都有圆角,我们缩放按钮时可不想缩放了按钮的圆角。
可以保持“部分区域”的外观比例,同时缩放其他区域的比例,9切片工具
模态对话框也往往具备圆角,以及标题,图标、文本标签。当我们缩放的时候,我们可不希望上述部分也缩放了。因此再次利用9切片工具,可以很好、很简单的完成这个任务。
保持该保持区域的比例,缩放该缩放区域的比例,伸缩自如
20.多功能对齐面板
使用多功能对齐面板,你可以对齐、排布对象。精确布局
Fireworks 中对齐面板提供了很多选项
21.动态滤镜
适用于任何对象,并且是非破坏性操作。意味着你还可以添加、调整滤镜,而不损害源图像。滤镜的堆叠次序可以用简单的拖放来实现;可以选择滤镜的开/关(也就是不可见/可见)来查看具体效果;一个对象可以带有多种滤镜效果。动态滤镜可以用于颜色调整、阴影、发光、模糊效果灯,也可以编辑出PS实时效果,如果你打开的是PSD文件。
“内阴影”动态滤镜
22.链接图像
一个扩展,能够让你导入另一款App中的图像。类似Adobe CC中“智能对象”的新功能。
23.缩放笔触和效果
Fw对于UI设计师来说,简直就是神器。比如说,编辑>首选参数中的“缩放笔触和效果”这个选项,例如,当你需要为Retina和非Retina屏进行iOS界面设计时,这个就非常非常有用。
“缩放笔触和效果”非常容易开关
24.超级强力的自动形状功能!
Fireworks具备一项独一无二的功能,自动矢量形状!你可以轻松的创建(以及编辑)圆角矩形、星形、多边形、箭头型、齿轮型以及其他形状。利用自动形状属性面板。可以轻松的添加形状。
很多知名的扩展包,我说几个
Multi-Border Rectangle auto shape,
the Lorem Ipsum auto shape
the Filter Light Source and Sunburst auto shapes
25.CSS 属性
在Fireworks CS6中,结合 Matt Stow 的拓展插件 Fireworks CSS Professionalzr,可以轻松的提取对象的所有CSS属性(在CSS属性面板中)听起来是不是很梦幻?
26.查找和替换
大多数软件中都有的“查找和替换”功能,在Fw中,更强大。
Fw可以搜索PNG文件中的以下对象/属性
文本串
字体
颜色
URLs.
你可以规定在特定的页面内查找,特定的状态下查找。
非常灵活,例如,当需要寻找某种特定的颜色时。你可以根据笔触/描边,填充,滤镜等属性来筛选
非常强力、可定制化的查找和替换面板
27.批量处理
有时候,你不得不一遍一遍的重复某些操作。比如说编辑、缩放、调整、重命名,你需要给上百张照片不厌其烦的重复操作。这时,Fw的批量处理功能就能解决这个问题。
Fw可以非常简单的选择多个文件,然后执行同一操作。批量处理功能能够让你改变导出和调整设置,改变尺寸等等。甚至可以执行同一操作(例如,可以同步执行“高斯模糊”)批处理动作可以保存下来,以便再次使用。只需简单的文件>批处理,选择文件,创建自己的批处理脚本。
上面提到的仅仅是冰山一角,更多的扩展、更多的插件、更多的功能。
既然Adobe不给予更新支持,那么在很多开发者的帮助下,我们可以获得更新的功能,提高工作效率。
概括起来: 1 + 1 = 3 !
由于篇幅原因,还有很多Fw的强力功能没有提及,尽管很多Fw的功能独一无二,但是更重要的是,Fw可以面向多种用途。你可以在Fw中编辑栅格图和矢量图;简单的选择对象,属性面板可以自适应的课余相应属性。只需一款Fw,就可以完成除了草图之外的所有UI设计流程。同时质量优秀,文件容量小。
而Fw还可以导入PS、AI中的文件。
Fw就如同UI设计界的瑞士军刀。诸多强力工具,集成在一款轻量化的软件中。而且Fw还能够大幅提高效率,更更更重要的是,还有比Fw更容易学习、可用性更好、更直观的设计软件吗?
Ui设计师能用Fw,插画师能用Fw,网页设计师能用Fw,iOS和安卓界面设计师,前端开发者也都能用Fw。
Fireworks是UI设计最完美的工具吗?
不,Fireworks并不完美。我有着数千小时的Fw使用经验,经验告诉我,Fireworks并不完美。
那么对于UI设计师来说,什么工具是完美的呢?
PS?AI?Sketch?InDesign?Pixelmator?
似乎没有完美的东西存在,这是事实。
PS,好比斗室中的大象,PS的出现,是为了改善图像编辑和印刷设计。
虽然后来添加了很多Ui方面的功能,但是PS最大的优势不在UI设计。然而,已经有无数的人使用PS做UI设计,做了快十年了。Fireworks,主要针对的就是屏幕设计和界面设计,几乎每个功能都是为了帮助UI设计师更好、更有效率的设计而添加的。尽管Fireworks并不完美,但是相较之下,Fw更能满足UI设计师的大多数需求。我记得我曾在一篇文章中提到过,1+1=3,瑞士军刀的剪刀功能不如一把实实在在的剪刀有效,瑞士军刀的锯子也不如实实在在的锯子锋利,但是当你外出的时候,你拿把剪刀、拿把锯子,再拿点其他零碎工具,方便吗?这就是Fw的优势,尽管Fw的每一项功能都不是所有软件中最出众的,但是当他们结合起来,威力就相当强大了。
当然,Fw也有弱点,它的拾色器感觉有点太“复古”了。它不会使用超过2G的内存(32位应用),而且在单一文件中,如果你画了太多的页面或者符号。那么很快Fw就会变得很慢。而且Fw会随机出现bug,也会随机消失(不过其他软件也有bug,是吧?)但是这不会妨碍我们好好使用Fw。
没有最好的工具,只有最适合的工具,能够立马就用、满足大多数功能、提高效率的工具就是好工具,你说对吧?
随着Adobe的停更,很多Fw中独特出众的功能将要消失了。而Fw尽管具有很多独一无二的功能,但是还缺乏很多实用性功能,而停更,让实现功能添加这一愿望又变得遥遥无期。好在还有很多团体和开发者在不断研发扩展和插件。
我的论述到这里就结束了,这是上半部分,下半部分,我将重点展示一些Fireworks优秀作品、拓展阅读以及教程。
三. 一些Fireworks设计作品
让我们来看Fireworks实现的优秀设计作品,关于界面,关于插画。
Kawasaki Vulcan 1700 (vector illustration), by Isabel Aracama
Ferrari 288 GTO (vector illustration), by James Parker
Nikon (iOS icon), by Gianluca Divisi
TouchCDJPro (iOS UI), by Gianluca Divisi
Social bar (UI design), by Lorenzo Franchini
Expenses app (UI design), by Lorenzo Franchini
Restaurant navigation (UI design), by Tomas Gajar
Sample navigation (UI design), by Tomas Gajar
还想看更多?没问题!
还记得2010年末,我给Smashing Magazine杂志写了一篇颇具细节的文章“The Power of Adobe Fireworks: What Can You Achieve With It?.”(Adobe Fireworks的威力:这玩意儿都能用来做什么?)
在这篇文章中,我选了很多了的Fireworks优秀设计案例,范围包括UI设计,网页设计,矢量插画,Logo设计,图标设计,数字绘画设计,漫画设计,甚至为整套Adobe CS5进行了品牌设计,这篇文章有些年头了,但是还是不错的,你们可以看看。
Adobe’s CS5的品牌设计,用Fw完成 (View large version)
四.Fireworks插件的威力
若想让Fireworks更加强大,就必须使用插件。插件一般用JavaScript写成,能够直接在Fireworks中使用,新功能让Fireworks更改有效率。插件无所不能,能够让Fireworks更加强大。
我们发布了一篇Ashish Bogawat的文章,深度涵盖了Fw所有优秀插件。
个人角度,我推荐以下免费插件:
Tables panel
SVG Open/Import
SVG Export
Multi-Border Rectangle auto shape
Linked Images
Smart Resize
Smart Punch
Export Responsive HTML prototypes
Path panel
Modify commands
3D Rotate
Path manipulation commands
Generate Web Assets
Keyboard Resize
哦,推荐Project Phoenix,会保持对Fireworks插件的更新
五. 文章/教程推荐
UI/图标设计
“Refining Your Design in Adobe Fireworks,” Benjamin De Cock
“Design Cutting-Edge iOS Apps With Adobe Fireworks,” Ivo Mynttinen
交互(HTML以及移动端)原型
“Create Interactive Prototypes With Adobe Fireworks,” André Reinegger
“Interactive Prototypes and Time-Savers With Adobe Fireworks,” Trevor Kay
“iOS Prototyping With TAP and Adobe Fireworks”: part 1, part 2, part 3, Shlomo Goltz
设计师流程以及技法
“Developing a Design Workflow in Adobe Fireworks,” Joshua Bullock
“Extracting CSS Properties From Design Objects in Fireworks,” Shubhashri C. G.
“Interactive Prototypes and Time-Savers With Adobe Fireworks,” Trevor Kay
“Creating a Pattern Library With Evernote and Fireworks,” Kris Niles
“Useful Fireworks Techniques and Features for Large Design Teams,” Kris Niles
“Mojo Motors Responsive Redesign With Fireworks: UX and Interaction Design,” Olawale Oladunni
使用Fireworks进行UI设计的原因
“The Number 1 Reason I Love Fireworks,” Leigh Howells
“7 Reasons Why I Choose Fireworks Over Photoshop,” Russell McGovern
“Why Choose Fireworks?,” Stéphane Bergeron
“The Features That Make Fireworks the Application of Choice for Web Designers,” Steve Jaggard
“10 Reasons Why I Prefer Fireworks to Photoshop for Web Design,” Leigh Howells
六.取代Fireworks: 以后我们用什么?
毋庸置疑,很多设计师(包括我)还会继续使用搭载插件的Fw CS6,只要Fw还能运行在Windows和Mac OS X上。但是,不得不承认,Fw的时日无多,我们需要早作打算,选好“继承人”,那么什么软件可以取代Fireworks呢?我们来简略的聊一下。
现在
多人都说Sketch非常不错,但是Sketch在我看来,还是有不少局限的,而且也没有Fw那么功能强大。不幸的是,Sketch只能运行在Mac上。如果你有Mac的话,强烈推荐使用Sketch!这是三篇关于Sketch的文章,相信读后,你会跃跃欲试。
“It’s Time to Dump Photoshop and Embrace Sketch,” Baz Deas
“Discovering Sketch,” Jean-Marc Denis (of Google)
“Khoi Vinh on Using Sketch Instead of Photoshop,” Creative Bloq
Sketch是很优秀的UI设计工具。这幅Sketch作品是由很有天赋的设计师 Isabel Aracama设计的 (View large version)
Antetype 也可以加在备选名单里,以及 Pixelmator. 不幸运的是,这些都只能运行在Mac上
PC端, Xara Designer Pro 是个不错的选择,不过只支持Windows
未来
Alan Musselman (前 Macromedia/Adobe Fireworks项目经理以及开发人员)透露,目前他在做一个新项目,代号 EvolveUI. EvolveUI 能够满足现代屏幕设计中的大多数需求(比如说位图和矢量图的结合,样式,符号,交互原型图能力等),听起来非常不错。值得注意的是:这款应用是开源的、跨平台的(Windows,Mac以及Linux),第一版预期将在2014末发布,如果你感兴趣的话,你可以加入project’s Google Group 参与测试并讨论
而另外一款新式工具,来自 Tom Giannattasio 和 Adam Christ : Macaw项目。一款众筹项目,Kickstarter上可以找到(貌似已经凑够份子了),第一版将在2014年年初发布于Mac和Windows。这款应用看起来非常靠谱,但依然无法取代Fireworks,因为缺乏矢量/位图编辑工具,功能上更像是InDesign,主要用于网页设计,而不是屏幕设计。
据我个人的小道消息,Adobe似乎没有着手为Fireworks研发替代品。很多Fireworks的优秀功能被添加到了其他应用中(例如PS,AI,Edge Reflow)。似乎Adobe自己也意识到很多Fw的功能很棒,所以他们在努力的移植到其他应用中。但是,这么做,还是无法为FW找到“继承人”,这反而让设计师的工作更麻烦了——不断的换软件。
更正: 似乎Adobe已经开始着手研发Fireworks的替代品了,稍后我将报导此事。
七. 结论
那我们该怎么办呢?你可能会这么问,目前,我只能尽最大努力位置Smashing Magazine Fireworks频道的运转,我们还会继续讨论,继续使用。所以,使用Fireworks,还是很安全的。不会落伍。
当然,我们还在努力探索替代品。每一天都会出现新的工具,相信不久的将来,会有真正理解我们这些做界面的设计师,为我们专门开发一款适合UI设计的软件。(我个人觉得靠谱的一个是Sketch,另外一个是EvolveUI)
最后,感谢所有曾经支持Fireworks频道,用Fireworks设计,为Fireworks开发插件,热衷于Fireworks技术讨论的所有人。
曾经爱,一直到现在,感谢Fireworks陪我走过的这数千小时。
再见,吾爱
不久的将来,我们将与Fireworks依依惜别