fireWork应用.doc

Firework的主要用途Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。 新推出的Fireworks 3 更是增加了许多脍炙人口的新功能： 1. 可以输出SWF和 Illustrator7文件；2. 与Dreamweaver紧密的配合； 3. 与网页编辑器的结合； 4. 可以直接编辑点阵图； 5. 更方便的Roll over； 6. 向量模式编辑； 7. 即时预览； 8. 允许加入Photoshop滤镜； 9. 可以读入Photoshop文件； 10. 提供MAC Gamme预览功能； 11. 提供GIF编辑环境； 12. 提供History panel来记录动作； 13. 提供全新的按钮制作工具； 14. 可编辑的操作环境； 15. 资料库（Library）的运用； 16. 提供图形与文字的样式库（Style）。 怎么样？Firework 3如此强大的网页编辑功能是不是很令人眼馋呀？！是不是恨不得马上就掌握这个网页编辑利器呀？！别急！就让我们一起来深入地研究它吧！ 第二节 基本概念firework的矢量图像一、 矢量图像 矢量图像是用包含颜色和位置属性的直线或曲线（即称为矢量）来描述图像属性的一种方法。比如说一个椭圆，它就包括由通过椭圆边缘的一些点组成的轮廓和轮廓内的点两部分。 对于矢量图像，椭圆的颜色取决于椭圆轮廓曲线的颜色和轮廓封闭的区域颜色，与轮廓内单独的点无关。我们可以通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质，也可以移动、放缩、变形，或者在不改变图形显示质量的前提下，改变具有矢量性质的椭圆的颜色。 矢量图形具有独立的分辨率，也就是说我们以各式各样的分辨率来显示矢量图形，它都不会失真。 二、 位图图像 位图图像是用每一个栅格内不同颜色的点来描述图像属性的，这些点就是我们常说的像素。就拿前面的椭圆来说吧，也可以由所有组成该椭圆的像素的位置和颜色来描述。因为编辑位图时，修改的是像素，而不是直线和曲线。因此无法通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。 位图图像的分辨率不是独立的，因为描述图像的数据是对特定大小栅格中图像而言的，因此，编辑位图会改变它的显示质量，尤其是放缩图像，会因为图像在栅格内的重新分配而导致图像边缘粗糙。在比位图图像本身的分辨率低的输出设备上显示图像也会降低图像的显示质量。 对于矢量图像和位图图像的转化，可以举一个简单的例子来说明，在firework 3.0中将文字变为路径（Convert to Path）时，可以看成是把文字变为矢量图像，若在对象监控板中选择Transform as Pixels，则可以转化为位图图像。 第三节：初识Firework 3启动Firework 3，我们就会发现它并不陌生，它长得和Photoshop十分相像。Firework 3视窗是由菜单栏、工具栏、工具箱和数个浮动面板组成，当我们开启或建立一个新文件时，视窗内还会出现一个绘图工作区，如图1所示。图1 Firework视窗一、 菜单栏 菜单栏位于Firework 3视窗的上方，当视窗内尚未开启任何文件时，菜单栏仅仅提供了“File（文件）”、“Edit（编辑）”、“View（视图）”、“Commands（命令）”、“Window（窗口）”与“Help（帮助）”六个菜单，而且菜单中所提供的项目也不多。不过当我们新建或开启一个文件时，菜单栏中的项目就热闹了许多，除了上述的六个菜单外，还增加了“Modify（修改）”、“Text（文本）”与“Xtras（滤镜）”三个菜单，而且菜单中的项目也增加了不少。 单击菜单后，就会弹出一个下拉式菜单，如果其中项目的右方有一个如图2的“箭头”符号，则表示该项目还有一个子菜单，单击该项目就会弹出它的子菜单，其中包含了更多的项目。 图2 菜单栏二、 工具箱 Firework 3工具箱的预设位置是在视窗的左方，它提供了一套极为专业的向量路径绘制工具群，利用这些工具我们可以绘制出十分动人的图形。 将工具箱拖曳到空白的位置，就可以把它变成独立的浮动面板，除此之外，我们还可以将它拖曳到视窗的右方，这可依个人喜好而定。 如果我们想隐藏工具箱，可以单击 “WindowToolbox”窗口 下的 工具 选项，使Toolbox左方的对钩消失即可，若想重新显示工具箱，单击选项，使对钩出现即可。 三、 工具栏 （窗口/工具栏/主要，修改）Firework 3工具栏（ Toolbars）（图3）包括Main（主工具栏）、Modify（修改工具栏）和View Control（视域控制栏）三种工具栏，预设状态下，它们都处于显示状态。 我们可以将这三个工具栏拖曳到任何位置，也可以将其拖曳成独立的浮动面板。 通过钩选和取消钩选 “Toolbars”菜单中的“Main、Modify或View Control”选项，我们可以将它们显示和隐藏。 图3 工具栏四、 浮动面板 Firework 3提供了许多浮动面板来方便我们设计图形，但是如果开启了所有的浮动面板，则会占满整个视窗。为了能够获得一个最佳的工作视窗，我们可以自行开启、关闭、缩放或移动浮动面板，甚至还可以将某个浮动面板加入另一个面板群组中，来组合出适合自己的浮动面板。 就拿“Stroke”面板来说吧，我们钩选“Window”中的“Stroke”项目，就可以将其开启；如果我们想要关闭它，只需单击浮动面板右上角的“关闭”按钮即可。如果我们想要切换到“Fill”面板，只需单击“Fill”选项卡即可；拖曳“Stroke”面板到“Frames”浮动视窗中，就可以将它加入其中，或者将其拖曳到空白处，就可以独立成一个浮动视窗；如果我们觉得浮动面板占用了太多空间，双击浮动面板的标题栏，就可以将其最小化，再次双击就可将其还原（图4）。 好啦！发挥你的想象力和创造力为自己设计一个最佳的工作视窗吧！ 图4 浮动面板位于软件右侧五、 状态栏 状态栏位于Firework 3视窗的下方，它可以显示我们所选取的菜单项目、工具箱内的工具或工具栏上的按钮之简介，也可以显示目前所选取的物件种类，除此以外，它还包括了一个视窗检视控制栏来切换我们所要检视的Frame。 第四节：制作一个简单的例子我们等不急了，能不能先演示一把！好吧，我们先来制作一个简单的动画（图1）。 图1 “闪烁的星”效果图一、 新建文件 单击新建按钮 ，弹出New Document（新文件）对话框（图2），设置画布为180x87像素（Pixels），分辨率（Resolution）为：72 像素/英寸（Pixels/Inch），画布颜色选择自定义（Custom）中的黑色，单击“ok”按钮，视窗内就出现了一个绘图工作区。图2 新文件对话框二、 选择工具 左键按住工具箱中的形状绘图工具，我们就会看到有三种形状可供选择，选择“多边形绘图工具” ；双击“多边形绘图工具”按钮，即可开启“Options”浮动面板（图3），在浮出的“Options”浮动面板中选择： 1. 形状（Shape）：Star 2. 棱角数目（Slides）：10 3. 内角角度（Angle）：15 图3 “Options”浮动面板第四节：制作一个简单的例子三、 绘制元件 图4 绘制元件在画布上拖动鼠标即可画出一个十角星（如图4a）；选取“细部选取工具” ，单击十角星，就会发现十角星图片四周出现了许多节点（如图4b），说明十角星已经被选中，选取菜单指令“WindowFill”，开启Fill（填充）浮动面板，在填充浮动面板中我们选择（如图5a）： 1. 填充方式：Solid 2. 填充颜色：白色 3. 边缘(Edge)：反锯齿（Anti-Alias） 4. 填充纹理（Texture）：Fiber 5. 纹理亮度值：0% 同理打开“Stroke”面板并将其设置为（如图5b）。 图5 Fill和Stroke属性浮动面板用鼠标左键按住一个棱角的节点，拖动鼠标即可改变棱角的位置和方向，这样我们通过改变棱角的位置和方向就可以为十角星设计出一个新的形象（如图6a）。 选中白色十角星，然后Ctrl+c、Ctrl+v复制两个十角星，将它们的填充分别改为绿色、红色，其他不变（如图6b）。 图6 改变外观 复制图形选中白色十角星，按下F8键，出现了元件属性对话框（Symbol Properties），我们为这个元件起一个名字，在名字（Name）栏中输入“xing1”；类型（Type）选择Graphic，单击“ok”按钮如（图7a）。 同理，将绿色、红色十角星定义为xing2、xing3元件。 选取菜单指令“WindowLibrary”开启“Library（资料库）”浮动面板，就会发现我们所编辑的十角星已经被加入到Library中了（图7b）。图7 加入资料库另外，原来画布内的图形自动转换成了分身（Instance），当我们选取元件分身时，它的左下方会出现“箭头”图示。（如图8） 图8 元件的分身如果对刚才的元件不是很满意，我们还可以进一步编辑，双击Library中的元件图形，进入元件编辑窗口，我们就可以按照自己的意愿去进一步修改元件，编辑完元件后，将窗口关闭，这时我们就会发现不仅元件有了变化，而且分身也发生了相应的变化。 这种本体与分身的观念，很适合用来制作动画，我们可以通过修改元件方便地修改所有的分身；另外，由于分身是元件的复制品，因此，使用分身还可以大量减少GIF动画文件大小；如果不想让某个分身跟随元件而改变，我们可以这样来实现：选中该分身，然后选取菜单“Modify/Symbol/Break Link”切断分身与元件之间的链接，这时，该分身就成了一个独立的对象，将不再受元件的影响。 第四节：制作一个简单的例子四、 制作动画 1. 选取“细部选取工具” ，按住Shift键，连续选中绿色、红色十角星，按下Delete键将它们删除。 2. 选中一般选物工具 ，用左键按住白色十角星，将它拖到画布的右上角。 3. 首先单击“变形工具” ，选中右上角的十角星，它的四周就出现了八个黑色的小方块，拖动它们可以改变图片的大小，这就是我们经常说的拖拽手柄（如图8a），拖动拖拽手柄右下角的小方块将十角星缩小一点；把鼠标放到拖拽手柄外面工作区域的空白处，我们就会看到一个环绕箭头，拖动鼠标绕着拖拽手柄旋转，看！十角星在随着鼠标的旋转而不断地旋转，现在我们将十角星旋转180度。然后选取菜单指令“WindowObjiect”开启对象监控板，选中十角星，将不透明度设置为19（如图8b）。图8 变形与透明度的更改 4. 从Library拖拽白色十角星元件到画布的左下角，就出现了一个白色十角星的分身，同理，我们将它的不透明度设置为45。 5. 按住Shift键，用细部选取工具选中我们刚才编辑的两个白色十角星，选取菜单指令“ModifySymbolTween Instances”，在弹出的Tween Instances对话框中，我们在Steps填入10，并钩选Distribute to Frames复选框，单击“ok”按钮。（如图9a）这时我们选取菜单指令“WindowFrames”开启帧图面板，发现里面居然有十二帧（如图9b），明明刚才我们只设置了十帧，这是为什么呢？多出的两帧是什么呢？其实是这样子的，Tween Instances只是在我们刚才编辑的两个十角星（右上角的作为初始帧，左下角的作为最终帧）之间插入了图形渐变的十帧，因此，总共的帧数就变成了十二帧。选中每一帧，我们都可以在画布中看到对应的渐变图形。 图9 插入帧五、 加入特效 1. 按住Shift键，选中第一帧到第十一帧，双击其中的一帧，在弹出的Frame Delay对话框中将时间延迟设置为“1/100 second”（0.01秒），这样就加快了十角星的飞行速度，将产生一种流逝的效果。 （如图10）图10 设置时间延迟2. 左键按住第十二帧将它拖曳到“新建/复制帧”按钮 上，松手就生成了第十二帧的复制帧-第十三帧，然后单击第十三帧，将画布的图片的不透明度设置为19。 3. 同理我们再复制第十二帧，却发现原来的第十三帧被挤到了第十四帧（原来当前帧的复制帧会出现在当前帧的下一帧），好吧，现在就将它拽回来！按住第十四帧将它拖到第十三帧，第十三帧上边线出现黑线时松手即可恢复原来帧的顺序，同理，如果我们想要调整其他帧的位置，只需将它拖到相应的位置即可。 现在，大家可能会想，我们为何不直接复制第十三帧呢？聪明！其实这里直接复制第十三帧才是最佳方法；那我又为何复制第十二帧呢？其实我只是想告诉大家一种现象和调整位置的方法，提醒大家在编辑帧的时候，一定要有一个清晰的思路，否则，我们将不得不面对令人头疼的帧的调整。 4. 单击第十四帧，选中画布中的图片，将它的不透明度设置为100；选中“文字工具”按钮 ，单击十角星，弹出文本编辑器，其中我们输入“洪”，具体设置（如图11），单击“ok”按钮，然后适当地调整一下“洪”的位置，使它位于十角星图片的中心。（如图12） 图11 文本编辑器图12 十角星中的“洪”字5. 选中第十四帧，然后单击Frames 浮动面板右上角的箭头按钮（如图13），在弹出的菜单选择“Add Frames”，弹出“Add Frames”窗口，在“Number”输入7，在“Insert new frames”项中，我们选择“After current frame”，单击“ok”按钮，这样我们就在当前帧的后面新建了七个空帧，单击第十四帧，选中画布中的十角星，单击Frames 浮动面板中“Info”选项卡，开启信息面板，其中我们可以看到十角星的x（13）、y（43）坐标，然后切换到Frames 浮动面板，选中第十六帧，接下来我们开启Library浮动面板，选中xing2元件，并将其拖到画布中，这样就产生了一个xing2的分身，用键盘移动它，信息面板中的x、y坐标也会随之变化，我们将它移动到x（13+35）、y（43）；接下来我们为绿色十角星添加文字，那么怎样才能保证第十六帧的文字属性和第十四帧的一致呢？我们首先切换到第十四帧，选中“洪”，查看它的坐标信息，然后Ctrl+C，接下来我们再返回第十六帧，Ctrl+V，然后移动“洪”，将它的x 坐标增加35，使它处于绿色十角星的中心，然后双击“洪”，开启文本编辑器，将“洪”改为“恩”，并将“恩”的颜色改为白色，单击“ok”按钮将文本编辑器关闭。 图13 在当前帧后加入新的帧6. 同理，我们可以分别在18、20帧完成相应的操作。 六、 调整时间延迟 为了能使动画更加具有“动”感，我们可以调整每一帧的时间延迟，来控制动画的效果，双击某一帧，然后在弹出的Frame Delay对话框中输入时间延迟，例如：“1/100 second”（0.01秒），设置完毕后，单击任何空白处即可关闭对话框。具体时间延迟设置如图14 图14 设置各帧时间延迟 现在我们来预览一下动画最终的效果，单击“状态栏”右方的播放按钮（如图15），画布中的动画就动了起来，如果我们觉得动画效果不够理想，单击“停止”按钮或者单击任何空白的地方将动画停止，然后调整不满意的地方，通过不断的修改和调试，我们就可以实现更加理想的动画效果。 图15 播放按钮七、 输出动画 现在我们可以将动画保存为GIF格式了，选取菜单指令“FileExport Preview”，开启Export Preview窗口，选择“Option”选项卡，在“Format”栏中选择“Animated GIF”（如图16），然后切换到“Animation”选项卡，将动画效果设定为“反复播放”方式，最后单击“Export”按钮，在“Export”窗口中，选择保存路径，输入文件名，例如：闪烁的星，单击“保存”按钮，动画就以 .gif的格式保存起来了。 到此为止，整个GIF动画就全部完成了，感觉怎么样？是不是已经可以制作动画了！如果是这样，你已经领会了Firework 3 强大的GIF动画功能，当然如果你想彻底地精通Firework 3，掌握它更为强大的网络图形编辑功能，那就赶快和我们一起踏上征服Firework 3的轻松之旅吧！图16 输出动画第一节：编辑向量图形我们先来看一看下边的效果图（如图1）图1 苹果中的笑脸怎么样？是不是很有意思！下面我们就来看一下它是如何制作的？ 一. 绘制苹果 首先，我们新建一个文件（300x300 Pixels；颜色为绿色），然后设置Stroke面板（如图2a），Fill、Effect面板为None；选择“形状绘图工具” ，在画布中绘制一个椭圆；双击“自由格式工具” ，弹出工具参数面板（Options），设置光标的半径大小为40像素（如图2b）；在画布中按下鼠标，可以看到鼠标变成了一个红色的圆，用这个红色的圆拖动路径变成如图3的样子。这样苹果的大部分轮廓就出来了。 图2 初始设置图3 苹果的最初轮廓现在我们再来为苹果添加一个小小的柄，按住自由格式工具，我们就会发现弹出了四种工具（其实，每个右下角带有一个小三角形的工具（如图4a），按住它都会弹出其它可供选择的同类型工具），选择“区域变形工具”，然后双击它，弹出工具参数面板（Options），设置光标的半径大小为10像素，力度为80%，选中Pressure的两个选项和Preview选项，如图4b所示；然后从苹果的内部来拖动路径，按住鼠标左键向上拖，如图5所示，其中小圆圈为鼠标的形状。 图4 自由格式工具参数选择图5 苹果的基本轮廓二. 美化苹果 下面我们来为苹果化妆一下，让它更加漂亮、更加具有立体感，首先选择“细部选取工具”并单击画布的空白处，取消对苹果的选择状态，然后将笔刷的颜色设置为白色，将漆桶的颜色设置为红色，Fill 面板选择Radial，其他设置如图6a；双击漆桶，弹出工具参数面板，具体设置如图6b；在苹果的内部拖动鼠标，苹果就穿上了新装；下面我们再为苹果美化一下，按住圆形手柄，将它拖到苹果的核心；拖动长方手柄，适当改变一下白色的辐射范围；另外，我们将鼠标放到手柄的黑线上，就会出现一个环形箭头，按住并拖动鼠标，适当地改变填充图案的方向（如图7）。 图6 填充和漆桶参数设置图7 对苹果的美化接下来，我们再为苹果添加一个特效，使它更加具有立体感，首先选中苹果，然后开启“Effect”面板，单击“特效”按钮并在弹出的菜单中选择“Shadow and GlowDrop Shadow”（如图8a），最后双击“Drop Shadow”，将其设置如图8b。 图8 立体效果设置这样，一个具有立体感、光泽鲜艳的苹果就浮现在我们的眼前了。（如图9） 图9 立体效果的苹果三. 添加笑脸 怎样才能为苹果添加一副笑脸呢？ 图10 割图首先单击“打开文件”按钮，双击“打开”对话框我们预先准备好的“笑脸.jpg”，笑脸.jpg就在一个新的工作区域中打开了；按下“形状选择工具”，选择“割图工具”；拖动鼠标将“笑脸”框住，利用键盘适当地改变一下选择区域位置，拖动缩放手柄使选择区域尽量的小，然后回车，“笑脸”就被截下来了（如图10）；双击“魔术棒”，在弹出的“Option”面板中将“Tolerance”设置为：30（注：颜色的容许度Tolerance越大，选择范围越大，但是太大，会造成选择范围不准确，因此需要不断地尝试，以便设置一个合适的值），然后按住Shift 键，点击笑脸外的地方（如图11a），然后按下Ctrl+Shift+I组合键-反选，这样选择区域就变成了笑脸（如图11b），Ctrl+C将它复制到剪贴板中。图11 选择笑脸单击“新建文件”按钮 ，弹出了新文件对话框，由于Fireworks 3可以根据剪贴板的内容自行裁定新建文件的尺寸和分辨率大小，所以我们只需要将画布的颜色设置为透明即可，单击“ok”按钮，笑脸就在新的画布中打开了；接下来我们再进一步调整一下笑脸，首先，双击“橡皮工具” ，弹出工具参数面板，设置擦除尺寸为：6；Erase to 项设置为：Transparent（透明），其他具体设置如图12a，然后用橡皮将头部以外的部分擦掉，接下来，选择“变形工具”将它适当地缩小（如图12b）。将笑脸复制下来，切换到“苹果”工作区，Ctrl+V，将笑脸拖到苹果的核心。 图12 橡皮工具和添加笑脸四. 调整画布 为了便于编辑，我们可以将“笑脸”和“苹果”合并，首先选中它们，然后选取菜单指令“ModifyGroup”即可。 接下来，我们选中“一般选物工具” 将合并后的“笑脸”和“苹果”拖到画布的左上角，然后选取菜单指令“ModifyCanvas Size”，在弹出的窗口中，我们将画布的大小改为130x130 Pixels（视具体情况而定），Anchor（锚）设为左上角，单击“ok”即可（如图13）。图13 画布大小参数面板同理，如果我们想要调整画布的颜色，选取菜单指令“ModifyCanvas Color”，在弹出的窗口中选中Custom，并将颜色调整为最佳效果即可(如图14)。 图14 画布颜色参数面板到此为止，整个“苹果中的笑脸”就编辑完了。 五. 保存文件（最佳化影像处理） 1、 保存为GIF格式选取菜单指令“FileExport Preview”，开启Export Preview窗口，选择“Option”选项卡；要转存为GIF格式，我们首先必须在“Format”选项中选择“GIF”选项；然后在“Palette”选择适当的色盘，我们常用的色盘为： Adaptive 色盘：Adaptive的意思为最适合的色彩，如果我们要转存的图片不只是渐进式的色彩，那么这个色盘会先选用相对安全的色彩，然后再以延续渐进的方式来加入非安全性的色彩，因此，转存后的图片将会有不错的效果。 WebSnap Adaptive 的意思是接近网页的最适合色彩，如果我们转存的是相片图形，它会使图片获得更平顺的效果。 我们选择Adaptive 色盘，然后再在“Loss”选项中设置一下压缩比率，它的预设值为0，表示压缩的品质最好，但是图片的体积最大，若设为100，则压缩后的体积最小，但图片品质最差。我们可以根据需要设置适当的压缩比率。 另外，色彩数量也是影响图片大小的一个重要因素，色彩数量越少，图片的体积就越小，但相对的图片品质就会降低，我们可以在如图的选项中选择系统提供的色彩数量，也可以手动修改色彩数量，这样我们就可以通过使用最少的色彩，达到最好的图片品质。 大家都知道GIF文件可以设置透明色，那么在Fireworks 3中它是如何设置的呢？在窗口的下方，我们可以看到三个吸管状的按钮，使用它们就可以设置图片的透明色：透明色选择按钮可以选取一个色彩作为透明色；增加透明色按钮可以选取两个以上的颜色；删除透明色按钮可以恢复色彩原来的颜色。 如果图片已经设置了透明色，我们只需选择透明色下拉菜单中的“Index Transparency”或“Alpha Transparency”即可。 单击“Export”按钮就可以将图片保存为GIF文件了。（如图15） 图15 保存为GIF格式2、 保存为JPG格式 转存为JPG要比GIF简单的多，首先在“Format”选项中选取“JPEG”格式，然后在“Quality”选项中指定图片的压缩品质即可，数值越大则品质越好，但相对的图片体积会变大；数值越小将会获得较小的文件，但图片品质会越差。（如图16） 图16 保存为JPG格式另外，下面几项也会大大影响图片的大小和品质： 光滑度： 光滑度（Smoothing）可以使图片更加光滑，但同时会使图片模糊化，在“Smoothing”选项中可以指定图片的光华度，其中No Smoothing表示不使用光滑度的功能，而8 Maximum Smoothing为最大的光华度。（如图17）图17 光滑度对比渐进式效果： 钩选“Progressive”选项后会稍微增加文件的体积，其效果为浏览器下载这个文件时，会有从模糊到清晰般的渐进效果。 锐化效果： 钩选“Sharpen Color Edges”选项后，可以增加图片色彩边缘的锐化度。所谓色彩边缘指的是图片内因为色彩反差而形成的边缘，因此锐化的结果将会产生更加清晰的图片，但文件体积会变大。（如图18）图18 锐化效果对比3、 保存为png格式 gif是Firework 3的标准图片格式，将图片保存为png格式，其实就是保存一个源文件，以便于我们以后的进一步修改。 单击“保存按钮” 就可以将图片保存为png格式文件。第二节：编辑点阵式图形如果大家对Flash比较熟悉的话，那么对遮照效果肯定不会陌生。遮照效果就是将两个对象组合在一起，而处于下层的对象只能透过上层对象才能看到的一种效果。 我们有时真的不得不佩服Macromedia的能力。如此酷的效果（如图1），使用Firework我们只需要一条命令“Mask to Path”就可轻易实现。图1 遮照效果具体操作步骤如下： 1、打开一张图片，例如：zhezhao.gif。（如图2） 注意：在打开图片时，最好将“打开”对话框下方的Open as “Untitled”选项选中，这样文件将被复制成名字为“Untitled”的新文件，可以防止源文件被误修改。 图2 原图2、选中“文字工具”，单击图片，在弹出的文本编辑器中输入“酷”字，具体设置如图3，单击“ok”按钮即可。 图3 输入文字3、单击“一般选物工具”，将“酷”移到人物的头部，拖动鼠标将图片和文字全部选中，然后选取菜单指令“ModifyMask GroupMask to Path”。 （如图4）图4 Mask Group菜单4、OK，一切搞定（如图5）。 图5 遮照效果细心的朋友可能会发现，在菜单“ModifyMask Group”中还有另外一个选项Mask to Image，其实，这是Firework3.0新增的功能。 以往我们要创作如图的渐变效果，需要先对图片作渐变特效，然后运用Mask to Path来实现。现在有了Mask to Image，我们就再不用为此发愁了。 1、打开一张图片：zhezhao.gif。 2、创建渐变字：在图片上输入“酷”字并选中“酷”，将笔刷颜色设置为深色（例如：黑色），将漆桶颜色设置为浅色（例如：白色），将“Stroke”面板设置为“None”，将“Fill”面板填充属性设置为Linear，然后选取“漆桶”对文字进行渐变填充（如图6）。图6 渐变填充3、将文本对象移到图片对象上合适的位置，按Ctrl+A将文本对象和图片对象选中。4、选取菜单“ModifyMask GroupMask to Image”。（如图7）图7 渐变填充后的遮掩效果如果想对已经作了遮照处理的文字进行修改，我们只需要打开它的gif源文件，选中“一般选物工具”，单击图片，图片就呈现选中状态，并且图片中心出现如图标识；选中“文字工具”，单击图片，弹出文本编辑器，其中我们就可以按照自己的意愿进行修改文字；如果单击“漆桶”，画布中就会出现填充手柄，通过拖动圆形手柄和方形手柄就可以改变渐变效果。 另外，如果我们用“一般选物工具”选中图片，然后选择菜单“ModifyUngroup”将图形对象和文本对象分组，就回到了遮照处理前的效果，这样我们就可以进行大规模的修改和调整了。 Mask to Image和Mask to Path的区别： Mask to Image：以上方对象作为遮色物件，颜色较深的部分会保留下方物件，而颜色较浅的区域则对下方物件产生淡化效果。 （如图7） Mask to Path：以上方的遮色物件来剪裁下方物件，因此，位于上方物件的尺寸应该比下方物件小，这样才能产生剪裁的效果，Mask to Path仅对下方物件做剪裁，不会有其他效果。 （如图8）图8 Mask to Path效果第三节：文字一、 文本特效 对于其它图形软件来说，要创建空心字、各种填充色的描边字或带底纹的各种效果字，那不仅是件非常繁琐的差事，甚至是无法做到的事情，但是在Firework中，我们轻而易举便能实现。 首先输入文字（例如：“洪恩在线”），选中文本对象，这时被选中的文本外围会出现一个蓝色的框（如图1a）；然后我们在Stroke面板中选择（如图1b）： 图1 选择文字 调整Stroke. 笔型：Basic . 笔的力度：SoftLine . 羽化半径：如图所示. 线条宽度： . 填充纹理（Texture）：颗粒. 纹理亮度值：0% 至此，我们已经可以看到字体多了层边缘；开启Fill填充面板，在Fill填充面板中我们可以为字体选取不同的颜色填充效果，如渐变、加底纹、辐射效果等等。当然，如果将填充类型设定为None，字体的实心部分就会消失，这样我们就可以得到如图的空心字。（如图2）图2 字体效果 Firework 3还提供了方便有效的Styles面板，我们只需要选中文本对象，然后单击Styles面板中的任何一种样式，这时我们便能以最快捷的方法制作出各种各样的特效字（如图3）；如果配合其它面板如Fill面板、Effect面板等一起使用，我们还可以做出更多更美的的特效。 图3 样式效果当然Styles面板中的样式不仅对文字有效，而且对图片同样有效。单击Styles面板右上角的小三角形，在弹出的菜单中我们会发现其中包含有“New Style”、“Edit Style”等等选项，原来Firework还允许我们新建Style、编辑Style、导入导出Style等功能。 （如图4） 图4 Styles浮动面板二、 制作文字路径 Firework作为一种图形处理软件，集合了矢量、位图等绘图工具的优点，它可以象其它矢量绘图软件一样方便地编辑文字。 首先输入文字：天，并选中文本对象；选取菜单“TextConvert to Paths”，这时文本对象中的每个字符都被转换成路径；利用“细部选取工具”可以对字符进行任意的拖拉变形。 如果我们想对多个或所有的字符进行自由变形、旋转、斜切、水平翻转、垂直翻转等处理，可以按住shift键来同时选取多个字符，然后选取菜单“ModifyTransform”中相应的选项即可。 三、 文字和路径的结合 利用Firework中的“Attach to Path”，我们可以让文本按照设定的路径进行排列；另外，为文本设定不同的对齐方式，我们还可以获得风格各异的文字排列效果，不仅如此，最令人惊叹的是，附在路径上的文本还仍然保留着可以在Text Editor中编辑的特性。 将文本按照路径进行排列的具体步骤如下： 1、输入文字，例如：洪恩在线。 2、选取“钢笔工具” ，首先单击画布设置路径的起始点，然后在适当的位置按下鼠标，并拖动鼠标，绘制出一个弧形路径，此时松开鼠标，将鼠标移动到路径的终点，双击鼠标退出编辑状态，这样，一个美妙的弧形路径就绘制出来了。 另外，我们也可以利用直线、椭圆、铅笔等路径绘制工具，来绘制文本排列的路径。这里值得注意的是：当我们用椭圆工具来绘制路径时，必须将Fill面板中的填充类型设为“None”，这样我们才能得到一个没有填充的路径。（如图5） 图5 绘制弧形3、按住Shift键同时选取文本对象和路径对象。 4、选取菜单“TextAttach to Path”，这时被选中的文本就会沿着路径排列。（如图6）图6 文本沿路径排列5、选取菜单“TextAlign（对齐）”中上一栏的“Justified（左右两端对齐）”对齐方式，选取菜单“TextOrientation（方向）”中的“Rotate Around Path（绕着路径旋转）”，“洪恩在线”就摇身一变，成了另外一个样子（如图7）。图7 绕着路径旋转6、如果我们要修改文本，只需双击文本对象就可以在打开的Text Editor中对文本进行重新编辑，例如，我们单击“文本排列顺序”的反向按钮，文本就变成了水平反向排序（如图8）。图8 水平反向排列、如果我们想让文本垂直反向排列，只需选中文本对象，然后选取菜单“TextReverse Direction（反方向）”即可。（如图9） 图9 垂直反向排列、如果我们想要改变路径，就需要执行“TextDetach from Path”将文本和路径分离，然后才能对路径做进一步的编辑。 、文本附加路径通常是以路径的起点作为文本环绕路径的起点，我们可以通过改变“Object”面板中“Text Offset（文本偏移量）”来调整文本环绕路径的位置，例如，将“Text Offset”改为20，效果如图10。图10 起始位置变更的效果合并已有图片第一节：制作GIF动画当我们在网上冲浪时，看到形形色色的动画效果，一定会有一种冲动，那就是将这个漂亮的动画存储到自己的硬盘上，那么你知道这些动画是如何制作的的吗？ 其实动画的原理很简单，就是让图片有秩序地轮流显示。 利用Firework 3制作动画总共有三种方法，由易到难分别为：合并已有图片生成动画，利用Tween Instances生成动画和手工绘制。 一、 合并已有图片生成动画 合并已有图片形成动画，顾名思义就是将一系列图片按顺序排列在不同的帧中从而生成动画，当然，首先我们必须有一串连续的图片，然后，在Fireworks中，选择菜单指令“File/Open Multiple”，这时将弹出“打开”对话框（如图1）， 进入所需图片所在的目录，然后按照动画中图片显示的顺序依次选取图片，并单击“Add”按钮将这三张图片加入到对话框下面的窗口；注意：我们还必须勾选对话框最下面的“Open as Animation”（以动画打开）选项，不然的话，我们打开的将是三张分开的静态图片；最后，单击“Done”（完成）按钮。 图1 以动画打开单击窗口右下角状态栏的播放按钮，怎么样？效果还不错吧！ 现在只是一只海鸥在不停地飞，如果为它再添加一副背景，效果一定会更好，好吧，下面我们就为海鸥添加一副大海的背景。 添加背景的方法有两种：自动复制和共享图层。 . 自动复制 图2 添加帧首先，单击“Frames”面板右上角如图2按钮，选择“Add Frames”，在弹出的对话框中选择“Number”为1和“At the end”，单击“ok”按钮。图3 编辑模式状态然后将画布的大小改为200x150（Pixels）；接下来，打开背景图片，发现图片周围有一个如图3的边框，说明图片处于图像编辑模式，选择“Modify/Exit Image Edit (Ctrl+Shift+D)”，使图片进入对象编辑模式，如果想让图片打开时总为对象编辑模式，我们将“File/Preferences”的“Editing”面板中“Open in Image Edit Mode”复选框前面的对钩去掉即可。（如图4）图4 Prefernces对话框选中新添加的“Frame 4”，将背景图片拷入其中并适当地调整一下背景图片的位置，然后选中图片，单击“Frames”面板右上角如图4按钮，在弹出菜单中选择“Copy to Frames”，进入“Copy to Frames”窗口，选择拷贝范围为：All Frames，单击“ok”按钮 。图4 拷贝帧打开“Frames”面板，我们发现前三帧的图片都被背景图片遮住了，单击第一帧，然后选中画布中的图片，执行菜单指令“Modify/Arrange/Send”；或者单击修改工具栏的置后工具（如图5），将背景图片移到动画图片的后面，其它帧同理。图5 置后工具最后双击“Frame 4”，将它的时间延迟设置为0（如图6）。图6 延时设置至此，背景添加完毕，赶快预览一下动画的效果吧！（如图7） 图7 动画效果图. 共享图层 共享图层就是使用“Layers”图层面板，将指定的背景图片设定为共享图层，如此即可在所有的帧中看到该背景。我们有时可能会误认为每一帧都拥有一个图层，其实不论设定的帧有多少，这些帧都位于同一图层上，只是出现的时间不同罢了。 下面我们就利用此方法为刚才的动画添加一个背景： 首先，将画布的大小改为200x150（Pixels），然后开启“Layers”图层面板，单击“Layers”图层面板右上角如图按钮，选择“New Layer”，在弹出的“New Layer”对话框中，为新层起一个名字，例如：background，钩选“Share Across Frames”复选框，单击“ok”按钮，“background”图层就成了共享图层，（如图8）左键按住“background”图层，将它拖到“Layer 1”图层下面；然后打开背景图片，单击“矩形选择工具” ，选择我们需要的背景，将其拷到“background”图层的画布中，并适当地调整一下背景的位置。好了，一切ok！ 图8 共享图层其他制作方法二、 利用Tween Instances生成动画 利用Tween Instances生成动画是Firework 3十分强大的功能之一，它的原理是将图片转化为元件（symbol），然后，确定元件的初始和结束分身（instance），再利用Tween Instances将这些分身转换为具有过渡效果的连续帧（frame）。 Tween Instances功能支持元件的位移、旋转、缩放、扭曲、倾斜以及不透明度的过渡。 具体的动画制作过程我们可以参见第一章的第四节，这里就不再重复。 三、 手工绘制如果我们要手工绘制动画，就需要用到Firework 3的洋葱皮功能（Onion Skinning），它就象我们制作卡通用的半透明纸一样，在编辑当前帧的同时，可以看到此前或此后帧中的内容，这样，我们在手绘动画时就可以方便地绘制图案。 下面我们就来认识一下洋葱皮功能，开启“Frames”面板，单击“洋葱皮功能”按钮（如图），弹出菜单中选项分别为： No Onion Skinning： 关闭洋葱皮功能； Show Next Frame： 在当前帧中显示下一帧的内容； Before and After： 在当前帧中显示前一帧和下一帧的内容； Show All Frames： 在当前帧中显示所有帧中的内容； Custom： 可以设置洋葱皮的显示功能； Multi-Frame Editing： 可以透过洋葱皮编辑其他帧中的内容。图9 洋葱皮功能菜单空说无用，打开我们先前制作的“海鸥”动画，然后选中Show All Frames，我们不仅可以看到当前帧的海鸥，还可以看到其他两帧中海鸥的淡化效果（如图10）；Firework 3的洋葱皮功能十分强大，而且方便高效，我们可以在以后的手工绘制动画中慢慢地体会。 图10 淡化效果第二节：外挂程序 Xtras一、 基本特效 打开“Xtras”菜单，我们就可以看到Firework 3的各种特效：（如图1） Adjust Color： 色彩特效； Blur： 模糊特效； Other： 其他特效； Sharpen：清晰特效。 图1 Xtras菜单使用Xtras的特效指令，其效果和特效面板相同，但对图片赋予的任何特效，基本上不会出现在特效面板上。 二、 Eye Candy 3.1 LE 滤镜 Firework 3本身自带有两个特效滤镜：Cutout滤镜和Motion Trail滤镜。Cutout滤镜 Cutout滤镜可以将点阵式图片背景透明化，并在图片上加入阴影等特效。（如图2）图2 Cutout滤镜具体操作步骤如下： 首先打开一副图片（例如：lanqiu.gif），然后单击“魔术棒”工具，点击图片的背景；选取菜单指令“XtrasEye Candy 3.1 LECutout”，进入Cutout视窗，它的各个选项功能如下： A 设定阴影方向； B 设定阴影效果：Distance（像素间距）、Blur（模糊效果）、Opacity（淡化效果）； C 设定阴影颜色和填充颜色； D 设定阴影模式（共十一种）； E 启动和关闭预览效果； F 图片预览比例。 设置完毕后，单击视窗右上方的“对钩”即可。 M