fireworks

AdobeFireworks是Adobe推出的一款网页作图软件，软件可以加速Web设计与开发，是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与AdobePhotoshop、AdobeIllustrator、AdobeDreamweaver和AdobeFlash软件省时集成。在Fireworks中将设计迅速转变为模型，或利用来自Illustrator、Photoshop和Flash的其它资源。然后直接置入Dreamweaver中轻松地进行开发与部署。

发展沿革

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。借助于MacromediaFireworks8，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与MacromediaDreamweaver和MacromediaFlash共同构成的集成工作流程可以让您创建并优化图像，同时又能避免由于进行Roundtrip编辑而丢失信息或浪费时间。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。2005年，Adobe用34亿美元收购macromedia公司，fireworks随之跟随至adobe。

2013年05月07日宣布终结CreativeSuite（CS）家族的同时，Adobe宣布迎来CreativeCloud（CC）全新系列应用和服务。MAX大会上，Adobe证实，Web设计、原型设计和移动应用程序设计工具Fireworks被毙掉了。Adobe表示，他们已经决定，Fireworks不会包含在CC家族中，开发团队将专注于开发全新的工具来满足消费者的需求。这样做的主要原因是，Fireworks、Photoshop、Illustrator、EdgeReflow之间在功能上有较多重叠。不过，FireworksCS6今后仍然可以使用，也可以购买，不过和CS6套装以及其它组件一样，只能买到数字版。只是，Adobe不再为其开发新的功能，今后只是提供必要的安全更新和Bug修复。Adobe将正式发布CC家族产品，包括：PhotoshopCC、InDesignCC、IllustratorCC、DreamweaverCC、PremiereProCC等，只是没有FireworksCC了。Fireworks与Dreamweaver、Flash统称为网页三剑客。

主要功能

创建编辑

创建和编辑矢量图像与位图图像，并导入和编辑本机Photoshop和Illustrator文件。

图像优化

采用预览、跨平台灰度系统预览、选择性JPEG压缩和大量导出控件，针对各种交互情况优化图像。

高效集成

导入Photoshop(PSD)文件，导入时可保持分层的图层、图层效果和混合模式。将Fireworks(PNG)文件保存回Photoshop(PSD)格式。导入Illustrator(AI)文件，导入时可保持包括图层、组和颜色信息在内的图形完整性。

原型构建

网站和各种Internet应用程序构建交互式布局原型。将网站原型导出至AdobeDreamweaver，将RIA原型导出至AdobeFlex。

支持多页

使用新的页面板在单个文档(PNG文件）中创建多个页面，并在多个页面之间共享图层。每个页面都可以包含自己的切片、图层、帧、动画、画布设置，因而可在原型中方便地模拟网站流程。

组织方式

采用与AdobePhotoshop类似的新分层图层结构来组织和管理原型，使您能方便地组织Web图层和页面。

滤镜效果

应用灯光效果、阴影效果、样式和混合模式（包括源自Photoshop的7种新的混合模式），增加文本和元件的深度和特性。

公用库存

公用库中包含Web应用程序、表单、界面和网站中经常用到的图形元件、文本元件和动画，可以使用它迅速开始原型构建过程。

智能缩放

通过9切片缩放智能地缩放矢量图像或位图图像中的按钮与图形元件。将9切片缩放与新的自动形状库相结合，以加速网站和应用程序的原型构建进度。

简化集成

复制FireworksCS3中的任意对象，并直接粘贴到DreamweaverCS3中。创建可保存为CSS和HTML（标准通用标记语言下的一个应用）的弹出菜单。将Fireworks(PNG)文件直接导出至FlashCS3，导出时可保持矢量、位图、动画和多状态不变，然后在FlashCS3中编辑文件。

主要说明

为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】键不放进行绘制，可以保证其宽高比始终为1：1。技巧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命令，并在其后序菜单中选择groupasmask.五、这样图片边缘羽化也就完成了。用mask做羽化有一个好处，就是当你选择这个图片时，边框是蓝色的时候，选中当中的蓝色标记，就能把改变图片的位置。呵呵，这样你就不需要担心选择的地方不正确了，只要确定好最终的图片大小，就能随意调节羽化图片的哪一部份。六、取消羽化。Modify菜单的最下面命令，ungroup,就能取消羽化，把图片还原成原先的位图和黑色的椭圆形。方法二一、在文件中导入一张需要被羽化的位图（菜单%26gt;file%26gt;import）二、在工具栏中选择椭圆形选择工具或是矩形选择工具，在位图需要羽化的部位进行选择。三、菜单%26gt;modify%26gt;marquee%26gt;feather命令。四、在featherselection对话框中设置羽化的半径，这里我选了20个象素，点击OK五、用黑色箭头工具，把这个选择框拉到一边，相应的图片也跟着移到旁边。六、我们可以把不需要的图片删除，也可以把这个已经羽化完了的图片复制到别的文件中去。

参考资料

展开