由Macromedia(在2005年被Adobe收购)推出的一款网页作图软体,软体可以加速 Web 设计与开发, 是一款创建与最佳化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与点阵图图像的灵活性, 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Flash软体省时集成。 在 Fireworks中将设计迅速转变为模型, 或利用来自Illustrator、Photoshop和Flash的其它资源。 然后直接置入Dreamweaver中轻鬆地进行开发与部署。
基本介绍
- 外文名Adobe Fireworks
- 发布方Macromedia公司
- 类型图形编辑软体
- 易用度容易
简要介绍
Fireworks是Macromedia公司发布的一款专为网路图形设计的图形编辑软体,它大大简化了网路图形设计的工作难度,无论是专业设计家还是业余爱好者,使用Fireworks都不仅可以轻鬆地製作出十分动感的GIF动画,还可以轻易地完成大图切割、动态按钮、动态翻转图等,,对于辅助网页编辑来说,Fireworks将是最大的功臣。藉助于Macromedia Fireworks 8,您可以在直观、可定製的环境中创建和最佳化用于网页的图像并进行精确控制。Fireworks 业界领先的最佳化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 MacromediaDreamweaver和 MacromediaFlash共同构成的集成工作流程可以让您创建并最佳化图像,又能避免由于进行Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具,无需学习代码即可创建具有专业品质的网页图形和动画,如变换图像和弹出选单等。
2005年,Adobe用34亿美元收购macromedia公司,fireworks随之跟随至adobe。
2013年05月07日
宣布终结Creative Suite(CS)家族的,Adobe宣布迎来Creative Cloud(CC)全新系列套用和服务。MAX大会上,Adobe证实,Web设计、原型设计和移动应用程式设计工具Fireworks被毙掉了。
Adobe表示,他们已经决定,Fireworks不会包含在CC家族中,开发团队将专注于开发全新的工具来满足消费者的需求。这样做的主要原因是, Fireworks、Photoshop、Illustrator、Edge Reflow之间在功能上有较多重叠。
不过,Fireworks CS6今后仍然可以使用,也可以购买,不过和CS6套装以及其它组件一样,只能买到数字版。只是,Adobe不再为其开发新的功能,今后只是提供必要的安全更新和Bug修复。
Adobe将正式发布CC家族产品,包括Photoshop CC、InDesign CC、Illustrator CC、Dreamweaver CC、Premiere Pro CC等,只是没有Fireworks CC了。
Fireworks与Dreamweaver、Flash统称为网页三剑客。
创建编辑
创建和编辑矢量图像与点阵图图像,并导入和编辑本机Photoshop和Illustrator档案。
图像最佳化
採用预览、跨平台灰度系统预览、选择性JPEG压缩和大量导出控制项,针对各种互动情况最佳化图像。
高效集成
导入 Photoshop (PSD) 档案,导入时可保持分层的图层、图层效果和混合模式。将 Fireworks (PNG) 档案保存回 Photoshop (PSD) 格式。导入 Illustrator (AI) 档案,导入时可保持包括图层、组和颜色信息在内的图形完整性。
原型构建
网站和各种 Internet应用程式构建互动式布局原型。将网站原型导出至 Adobe Dreamweaver,将 RIA 原型导出至 Adobe Flex。
支持多页
使用新的页面板在单个文档 (PNG 档案) 中创建多个页面,并在多个页面之间共享图层。每个页面都可以包含自己的切片、图层、帧、动画、画布设定,因而可在原型中方便地模拟网站流程。
组织方式
採用与 Adobe Photoshop 类似的新分层图层结构来组织和管理原型,使您能方便地组织 Web 图层和页面。
滤镜效果
套用灯光效果、阴影效果、样式和混合模式 (包括源自 Photoshop 的7种新的混合模式),增加文本和元件的深度和特性。
公用库存
公用库中包含 Web应用程式、表单、界面和网站中经常用到的图形元件、文本元件和动画,可以使用它迅速开始原型构建过程。
智慧型缩放
通过 9 切片缩放智慧型地缩放矢量图像或点阵图图像中的按钮与图形元件。将 9 切片缩放与新的自动形状库相结合,以加速网站和应用程式的原型构建进度。
简化集成
複製 Fireworks CS3 中的任意对象,并直接贴上到 Dreamweaver CS3 中。创建可保存为 CSS 和 HTML(标準通用标记语言下的一个套用) 的弹出选单。将 Fireworks (PNG) 档案直接导出至 Flash CS3,导出时可保持矢量、点阵图、动画和多状态不变,然后在 Flash CS3 中编辑档案。
主要说明
为Macromedia家族的一员,三剑客之一的FW,这款软体的主要任务和特色就是製作矢量图为网页服务,FW也是Flash的最佳伴侣,在三剑客的MX系列中,FW和Flash的联繫更为紧密,所以无论是网页製作和Flash製作,Fw都是不可或缺的利器.在Fw3年的套用实践过程中,我无时无刻不在感受她的卓越和便利。的确,网页製作看重的是效果和速度,并不是你用的软体专业与否,你用了多少个软体作出的网页,设计师作出的网页是为了让大家接受而不是显示自己的本领,在这样的前提下,Fw的确是最好的选择,最好的矢量图效果,最快的速度。
必知功能
在最佳化面板里有“导出jpg较高品质”,导出默认的80品质(可以用“2幅”画面对比之前之后的大小)
众所周知,在网页上的jpg图片如果过大,会严重影响页面的打开速度,Fireworks提供最佳化图片的功能,即缩小图片的KB,而且不影响画面的质量(除非放大了与原图对比)。由于很多人喜欢用photoshop製作jpg图片,所以它的容量会很大(因为它是适合处理印刷品,要求较清晰),最终还是要用Fireworks来处理一下。
快捷键表
工具
指针、选择后方对象 【V】,【0】
部分选定 【A】,【1】
选取框、椭圆选取框 【M】套索、多边形套索 【L】
裁剪、导出区域 【C】
魔术棒 【W】
线条工具 【N】
钢笔工具【P】
矩形、圆角矩形、椭圆、多边形 【U】
文本工具【T】
铅笔、刷子 【B】
矢量路径、重绘路径 【P】
缩放、倾斜、扭曲 【Q】
自由变形、更改区域形状 【O】
滴管工具 【I】
油漆桶、渐变 【G】
橡皮擦工具【E】
模糊、锐化、减淡、加深、涂抹 【R】
橡皮图章工具【S】
刀子工具 【Y】矩形热点、圆形热点、多边形热点 【J】
切片、多边形切片 【K】
手形工具【H】
缩放工具【Z】
隐藏/显示切片 【2】
设定默认笔触/填充色【D】
交换笔触/填充色【X】
切换萤幕模式 【F】
选单命令
新建档案(N) 【Ctrl】+【N】
打开(O)… 【Ctrl】+【O】
关闭(C) 【Ctrl】+【W】
保存(S) 【Ctrl】+【S】
储存为(A)… 【Ctrl】+【Shift】+【S】
导入(I)… 【Ctrl】+【R】
导出(E)… 【Ctrl】+【Shift】+【R】
导出预览(R)… 【Ctrl】+【Shift】+【X】
在浏览器中预览 【F12】
在辅助浏览器中预览 【Ctrl】+【F12】,【Shift】+【F12】
列印(P)… 【Ctrl】+【P】
退出(X) 【Ctrl】+【Q】
撤消 【Ctrl】+【Z】
重做 【Ctrl】+Y,【Ctrl】+【Shift】+【Z】
插入新建按钮(B)… 【Ctrl】+【Shift】+【F8】
新建元件(Y)… 【Ctrl】+【F8】
热点(H) 【Ctrl】+【Shift】+【U】
切片(S) 【Alt】+【Shift】+【U】
查找和替换(F)… 【Ctrl】+【F】
剪下(T) 【Ctrl】+【X】
複製(C) 【Ctrl】+【C】
複製HTML代码(H)… 【Ctrl】+【Alt】+【C】
贴上(P) 【Ctrl】+【V】
清除 【退格】,【DEL】
贴入内部(I) 【Ctrl】+【Shift】+【V】贴上属性(A) 【Ctrl】+【Alt】+【Shift】+【V】
重複(L) 【Ctrl】+【Alt】+【D】
克隆(N) 【Ctrl】+【Shift】+【D】
参数选择(F)… 【Ctrl】+【U】
放大(Z) 【Ctrl】+=,【Ctrl】+(小)+,【Ctrl】+【Shift】+【=】
缩小(O) 【Ctrl】+-,【Ctrl】+(小)【-】
缩放比率50% 【Ctrl】+5,【Ctrl】+(小)【5】
100% 【Ctrl】+1,【Ctrl】+(小)【1】
200% 【Ctrl】+2,【Ctrl】+(小)【2】
300% 【Ctrl】+3,【Ctrl】+(小)【3】
400% 【Ctrl】+4,【Ctrl】+(小)【4】
800% 【Ctrl】+8,【Ctrl】+(小)【8】
1600% 【Ctrl】+6,【Ctrl】+(小)【6】
选区符合视窗大小(S) 【Ctrl】+【Alt】+0,【Ctrl】+【Alt】+(小)【0】
文档符合视窗大小(F) 【Ctrl】+0,【Ctrl】+(小)【0】
完整显示(D) 【Ctrl】+【K】
隐藏所选(H) 【Ctrl】+【L】
显示全部(A) 【Ctrl】+【Shift】+【L】
标尺(R) 【Ctrl】+【Alt】+【R】
显示格线(G) 【Ctrl】+【Alt】+【G】
对齐格线(S) 【Ctrl】+【Alt】+【Shift】+【G】
显示引导线(U) 【Ctrl】+【;】 锁定引导线(L) 【Ctrl】+【Alt】+【;】
对齐引导线(S) 【Ctrl】+【Shift】+【;】
切片引导线(L) 【Ctrl】+【Alt】+【Shift】+【;】
隐藏边缘(E) 【F9】
隐藏面板(P) 【F4】,【Tab】
选择全部(S) 【Ctrl】+【A】
取消选择(D) 【Ctrl】+【D】
整体选择(E) 【Ctrl】+【→】
部分选定(U) 【Ctrl】+【←】
反选(V) 【Ctrl】+【Shift】+【I】
修剪画布(T) 【Ctrl】+【Alt】+【T】
符合画布(F) 【Ctrl】+【Alt】+【F】
选择动画(A)… 【Alt】+【Shift】+【F8】
转换为元件(C)… 【F8】
补间实例(T)… 【Ctrl】+【Alt】+【Shift】+【T】
平面化所选(F) 【Ctrl】+【Alt】+【Shift】+【Z】
向下合併(D) 【Ctrl】+【E】
任意变形(T) 【Ctrl】+【T】
数值变形(N)… 【Ctrl】+【Shift】+【T】
旋转90°顺时针 【Ctrl】+【Shift】+【9】
旋转90°逆时针 【Ctrl】+【Shift】+【7】
移到最前(F) 【Ctrl】+【Shift】+【↑】
向前移动(B) 【Ctrl】+【↑】
向后移动(S) 【Ctrl】+【↓】
移到(K) 【Ctrl】+【Shift】+【↓】
左对齐(L) 【Ctrl】+【Alt】+1,【Ctrl】+【Alt】+(小)【1】
垂直居中(V) 【Ctrl】+【Alt】+2,【Ctrl】+【Alt】+(小)【2】
右对齐(R) 【Ctrl】+【Alt】+3,【Ctrl】+【Alt】+(小)【3】
顶对齐(T) 【Ctrl】+【Alt】+4,【Ctrl】+【Alt】+(小)【4】
水平居中(H) 【Ctrl】+【Alt】+5,【Ctrl】+【Alt】+(小)【5】
底对齐(B) 【Ctrl】+【Alt】+6,【Ctrl】+【Alt】+(小)【6】
均分宽度(W) 【Ctrl】+【Alt】+7,【Ctrl】+【Alt】+(小)【7】
均分高度(D) 【Ctrl】+【Alt】+9,【Ctrl】+【Alt】+(小)【9】
合併路径(J) 【Ctrl】+【J】
拆分路径(S) 【Ctrl】+【Shift】+【J】
组合路径(G) 【Ctrl】+【G】
取消组合路径(U) 【Ctrl】+【Shift】+【G】
缩小字型(S) 【Ctrl】+【Shift】+【,】
增大字型(L) 【Ctrl】+【Shift】+【.】
粗体样式(B) 【Ctrl】+【B】
斜体样式(I) 【Ctrl】+【I】
左对齐(L) 【Ctrl】+【Alt】+【Shift】+【L】
右对齐(R) 【Ctrl】+【Alt】+【Shift】+【R】
两端对齐(J) 【Ctrl】+【Alt】+【Shift】+【J】
强制齐行(S) 【Ctrl】+【Alt】+【Shift】+【S】
附加到路径(P) 【Ctrl】+【Shift】+【Y】
转换为路径(C) 【Ctrl】+【Shift】+【P】
检查拼写(S)… 【Shift】+【F7】
重複外挂程式【Ctrl】+【Alt】+【Shift】+【X】
开新视窗(N) 【Ctrl】+【Alt】+【N】
显示隐藏”工具”(T) 【Ctrl】+【F2】
显示隐藏”属性”(P) 【Ctrl】+【F3】
显示隐藏”答案”(A) 【Alt】+【F1】
显示隐藏”最佳化”(O) 【F6】
显示隐藏”层”(L) 【F2】
显示隐藏”帧”(R) 【Shift】+【F2】
显示隐藏”历史记录”(H) 【Shift】+【F10】
显示隐藏”样式”(S) 【Shift】+【F11】
显示隐藏”库”(Y) 【F11】
显示隐藏”URL”(U) 【Alt】+【Shift】+【F10】
显示隐藏”颜色混合器”(M) 【Shift】+【F9】
显示隐藏”样本”(W) 【Ctrl】+【F9】
显示隐藏”信息”(I) 【Alt】+【Shift】+【F12】
显示隐藏”行为”(B) 【Shift】+【F3】
显示隐藏”查找和替换(F) 【Ctrl】+【F】
其它
下一帧 【PgDn】,【Ctrl】+【PgDn】
克隆并向上大幅推动 【Alt】+【Shift】+【↑】,【Ctrl】+【Alt】+【Shift】+【↑】
克隆并向上轻推 【Alt】+【↑】,【Ctrl】+【Alt】+【↑】
克隆并向下大幅推动 【Alt】+【Shift】+【↓】,【Ctrl】+【Alt】+【Shift】+【↓】
克隆并向下轻推 【Alt】+【↓】,【Ctrl】+【Alt】+【↓】
克隆并向右大幅推动 【Alt】+【Shift】+【→】,【Ctrl】+【Alt】+【Shift】+【→】
克隆并向右轻推 【Alt】+【→】,【Ctrl】+【Alt】+【→】
克隆并向左大幅推动 【Alt】+【Shift】+【←】,【Ctrl】+【Alt】+【Shift】+【←】
克隆并向左轻推 【Alt】+【←】,【Ctrl】+【Alt】+【←】
前一帧 【PgUP】,【Ctrl】+【PgUP】
向上大幅推动 【Shift】+【↑】
向上轻推 【↑】
向下大幅推动 【Shift】+【↓】
向下轻推 【↓】
向右大幅推动 【Shift】+【→】
向右轻推 【→】
向左大幅推动 【Shift】+【←】
向左轻推 【←】
播放动画【Ctrl】+【Alt】+【P】
用所选填充象素 【Alt】+【退格】,【Alt】+【DEL】
贴上于内部 【Ctrl】+【Shift】+【V】
编辑点阵图【Ctrl】+【E】
退出点阵图模式【Ctrl】+【Shift】+【E】
网页切法
切片在製作网页的过程中占有很重要的地位,切片的成功与否直接决定日后网页製作的进度快慢和网站运行的速度,只有通过大量的练习才能体会切片的含义
切片介绍
1. 切片是将图片转换成可编辑网页的一座桥樑,通过切片才可以将普通图片变成Dreamweaver可以编辑的网页格式
2. 切片后的图像可以更快的在网路上传播
3. 切片后的图像也是网页中片的主要来源
切片方法
1. 切片保证切出网页中需要多次修改的区域,例如文字区域
2. 切片图像的大小儘量保持在15K以内(便于网路传输)
3. 充分利用Dreamweaver中的自动拼贴功能减少垃圾切片
操作技巧
技巧1使用键盘的方向键移动对象时,按住【Shift】键不放,每次可以移动10个像素。
技巧2使用【指针】工具移动对象时,按住【Shift】键不放,可以保证其水平或垂直移动。
技巧3按住【Alt】键不放拖拽某个对象,即可对其进行複製。自动形状不能用这个操作,因为自动形状是一种组合状态,可以使用複製贴上命令複製。
技巧4对于所有的形状绘製工具而言,按住【Shift】键不放进行绘製,可以保证其宽高比始终为11。
技巧5使用基本形状工具绘製形状时,按住【空格】键不放,不要鬆开滑鼠左键,可以移动矢量图形的位置。绘製选区的时候也是如此。
技巧6使用【矩形】工具绘製矩形时,按住键盘的上或下键不放,不要鬆开滑鼠左键,可以增加或减少矩形的圆度。
技巧7需要选择组内对象时,并不需要取消组合,可以选择【部分选定】工具来选择组内对象,这对于多个组合对象的编辑来说非常方便。
技巧8使用【钢笔】工具绘製路径的过程中,按住【Alt】键不放,可以随时调整路径点的控制手柄。
技巧9使用【刷子】工具绘制图像时,按住【Shift】键不放,绘製出出一条水平或垂直线后,释放滑鼠,但不要鬆开【Shift】键,继续绘製,fireworks会把所画前一条线的终点和后一条线的起点连线起来。
技巧10按住【Alt】键,单击【层】面板中的点阵图图层,可以根据点阵图的形状获得选区。
技巧11绘製多个选区时,按住【Shift】键表示增加选区;按住【Alt】键表示减选区;按住【Shift】+【Alt】键表示对选区进行交集运算。
技巧12在给选区填充颜色时,可以使用【Alt】+【Delete】键快速填充颜色,与photoshop里填充前景色的快捷键一样。
技巧13按快捷键【Ctrl】+【F8】,可以创建一个新的元件。
技巧14按住【Ctrl】键,单击【混色器】面板下方的颜色栏,可以快速切换到不同的颜色模式。
技巧15在颜色弹视窗採集颜色时,按住【Shift】键可以确保获得的颜色为网路安全色。
技巧16如果要给辅助线精确定位,可以在辅助线上双击滑鼠左键,在弹出的【移动引导线】对话框中输入详细的坐标。
技巧17在【层】面板中,选中蒙板图示并像移动图层那样按住蒙板图示将其移动到其他位置,这样可以删除蒙板,并且保留下了蒙板对象。
技巧18使用【文本】工具单击已经创建的文本,待游标转换为文本游标时,按住键盘上的【Ctrl】加键盘的左右键可以用来改变字元间距,按住【Ctrl】加键盘的上下键可以用来改变文本的行距。
学习辅导教材,网路上有很多文字图片类的和视频类的教程。看书本结合练习也是很好的选择!
羽化方法
用Fireworks对点阵图边缘进行羽化,这是在fireworks运用中常用到的功能,希望对大家学习fireworks有所帮助。
方法一
一、导入点阵图
二、用椭圆工具,在点阵图上画一个椭圆,填充色为黑色。并在其fill面板中,设定edge为feather,默认为10,不过我们可以设得比较大。
三、用黑色箭头工具全选这二个物体。
四、选单modify中的mask命令,并在其后序选单中选择group as mask.
五、这样图片边缘羽化也就完成了。用mask做羽化有一个好处,就是当你选择这个图片时,框线是蓝色的时候,选中当中的蓝色标记,就能把改变图片的位置。呵呵,这样你就不需要担心选择的地方不正确了,只要确定好最终的图片大小 ,就能随意调节羽化图片的哪一部份。
六、取消羽化。Modify选单的最下面命令,ungroup,就能取消羽化,把图片还原成原先的点阵图和黑色的椭圆形。
方法二
一、在档案中导入一张需要被羽化的点阵图(选单 %26gt; file %26gt; import)
二、在工具列中选择椭圆形选择工具或是矩形选择工具,在点阵图需要羽化的部位进行选择。
三、选单 %26gt; modify %26gt; marquee %26gt; feather命令。
四、在feather selection对话框中设定羽化的半径,这里我选了20个象素,点击OK
五、用黑色箭头工具,把这个选择框拉到一边,相应的图片也跟着移到旁边。
六、我们可以把不需要的图片删除,也可以把这个已经羽化完了的图片複製到别的档案中去。