Fireworks_8图像制作
fireworks课件
Macromedia Fireworks 8
一、Fireworks 工作界面介绍 二、动画制作 三、切片和热点 四、行为 五、优化和导出
Fireworks 工作界面介绍
绘图编辑区是编辑图形图像的工作区 工具箱与工具栏提供了常用的绘图工具和编辑工具 控制面板主要有【层】、【帧】、【优化】和【历史】 等面板组成，用于设置动画、优化和简化工作流程等 行为。 菜单栏主要包括【文件】、【编辑】、【视图】、 【选择】、【修改】、【文本】、【命令】、【滤 镜】、【窗口】和【帮助】10个菜单，主要负责工具 箱与工具栏没有的其他一些复杂命令与行为。
菜单栏 工具栏
控制 面板 绘图编 辑区 工具箱
属性检 查器
工具箱
选取工具组 变换工具组
部分选定工具 切割工具组
选取框工具组 魔术棒工具 铅笔工具 模糊工具组
套索工具组 刷子工具 橡皮擦工具 橡皮章工具
工具箱
直线工具 矩形工具组 自由路径工具组
钢笔工具组Байду номын сангаас文本工具 刻刀工具
热区工具组 隐藏热区和切片
行为——fireworks自带的行为 自带的行为 行为
简单变换图像行为 交换图像行为 添加状态栏信息 添加导航栏 添加弹出菜单
注：切换到fireworks
动画制作
行为
行为就是在网页中进行的一系列动作。通过这 些动作，可是实现用户同网页的交互或导致某 个任务的执行。通常一个行为由一个事件和一 系列动作组成。 举个例子，用户将鼠标移动到一副图像上，这 就产生了一个事件，如果这时候图像发生变化， 就导致了一系列动作发生。
行为
Fireworks的行为可以通过行为面板进行添加 和编辑。 不是所有对象都能添加行为的， Fireworks只 允许为热区或切片添加行为。
Fireworks位图制作和处理
位图制作和处理
1 打开或导入位图
2 矢量转换为位图（平面化所选）：为了追求一些特殊的图像处理效果，需要把矢量的形状平面化。
如：网格字等。
3 绘制位图对象：使用铅笔和刷子工具，可以快速的制造出手绘等效果。
4 编辑位图对象，先要设置编辑区域。
可以使用的工具是选取框工具、椭圆选取框工具、套索工具、多边形套索工具，魔术棒工具；按住Shift或者Alt键，操作选区工具可以产生增加选区或者减少选区的效果；菜单‘选择’可以对设置好的选区进行调整；矢量图也可以转换为选区，这在设置规则而复杂的选区时特别有效。
5 编辑位图：擦除、模糊、锐化、减淡、加深、涂抹、替换颜色等，注意属性的调整。
比较菜单‘滤镜’和属性面板上的滤镜的异同。
利用Fireworks制作动画
掌握创建逐帧动画 掌握创建元件动画 掌握创建其他动画 掌握制作逐字变色动画
25.1 创建逐帧动画
逐帧动画需要用户更改影片每一帧中的舞台 内容。简单的逐帧动画并不需要用户定义过 多的参数，只需要设置好每一帧，动画即可 被播放。逐帧动画最适合于每一帧中的图像 都在更改的动画，而不仅仅是简单地在舞台 中移动的复杂动画。
(2)单击【帧】面板右上角的按钮，在弹出的菜单中选择 【属性】命令，弹出【帧属性】对话框。
(3)在【帧延时】文本框中输入需要设置的时间。设置完 毕后，单击此对话框以外的区域或按Enter键，即可完成 对该帧延迟时间的设置。
25.2 创建元件动画
动画元件可以是创建或导入的任何对象，并 且在一个文件中可以有许多元件。每个元件 都有它自己的属性并可独立运动。
25.2.1 元件和实例 25.2.2 编辑元件
25.2.1 元件和实例
如果文档中有重复使用的元素，可通过复制和粘贴 操作在文档中创建对象。
元件和实例还有一些其他用处，如制作动画。Flash 的元件和实例，就是通过创建元件，并不停地改变 实例属性，来表示运动的感觉。一个元件就像一个 木偶，一举一动都是由操作者完成。
(3)在对话框中选中【以动画打开】复选框，单击【打开】 按钮，Fireworks就会在单个文件中打开所需要的文件。在 【帧】面板中可以看到每个文件都按选定的顺序放置在 【帧】面板中。
25.3.2 导入现有GIF动画
导入现有GIF动画的具体操作步骤如下。
(1)选择【文件】|【打开】命令，弹出【打开】对话框。 (2)在对话框中选择要导入的GIF动画，单击【打开】按钮，
25.1.2 编辑帧
可以在【帧】面板中添加、复制、删除帧和 更改帧的顺序。
第5章 Fireworks基本操作
【例5.6】粘贴为蒙板
（1）打开一张图片文件，选择“椭圆”工具，边按住键盘上的Shift 键边拖动鼠标可以在图片上画一个圆，然后克隆一个一样的圆，用 “指针”工具调整两个圆的位置,如下图所示。
（2）按住键盘上的Shift，同时选中这两个圆。 （3）执行“修改”→“组合”菜单命令，将两个圆组合在一起。 （4）执行“编辑”→“剪切”菜单命令，剪切两个圆。
【例5.3】位图的编辑
【例5.3】位图的编辑
（1）执行“文件”→“打开”菜单命令打开文档 “car.jpg”。 （2）选择工具面板上的“魔术棒”工具，在图片空白 处点击一下，即选中空白区域。 （3）选择工具面板上的“渐变”工具。 （4）在“属性”面板上，按下“填充颜色”按钮向下 的箭头，设置渐变色，点击左边的颜色样本改为黄色， 右边的颜色样本改为白色。 （5）再将“属性”面板上的纹理设置为“钢琴键” 。 （6）在选中的空白区域内单击，即将渐变色运用到选 区中。
【例5.5】文字蒙板
（1）创建一个空白文档（400*300像素），画布颜色为黑色，选择工具 面板中的“刷子”工具在属性面板中设置笔触属性。 （2）使用笔刷在文档中拖动，绘制位图图像 (3)使用“文字”工具在文档中输入：HAPPY LIFE，在属性面板中设置文 字属性。 (4)按住键盘上的CTRL键，在层面板中选择文字层和位图层后松开，执行 “修改”→“蒙板”→“组合为蒙板”命令，即可完成蒙板效果的创建。
Fireworks的工作界面
样式面板的使用
通过创建样式，可以保存 并重新应用一组预定义的 填充、笔触、滤镜和文本 属性。将样式应用于对象 后，该对象即具备了该样 式的特性。Fireworks 提供 了许多预定义的样式。可 以添加、更改和删除样式。 还可将样式导出以便与其 他 Fireworks 用户共享，或 者从其它 Fireworks 文档导 入样式。
Fireworks教程
在“品质”文本框中，键入 75，或使用“品质”滑块。
选择“锐化颜色边缘”选项。
单击“导出” ……
中国人民大学 王蓉 29
教程：处理照片 预览和导出图像
在出现的“导出”对话框中，浏览到硬盘上的如下文件夹：
local_sites/cafe_townsend/images/
选择“导出”弹出菜单中的“帧到文件”。
“工具”面板 “属性”检查器
各种面板 中国人民大学 王蓉 3
Fireworks简介 “工具”面板
“工具”面板被编排为六个类别：
推荐网上视频教程:
选择 位图 矢量 Web 颜色 视图
中国人民大学 王蓉 4
Fireworks简介 从某个工具组中选择一种工具 “工具”面板中工具右下角的小三角表示它是某个工具组的一部分。 例如，“矩形”工具属于基本形状工具组，该工具组还包括“圆角矩形”、“椭圆”和“多边形” 基本工具，以及分隔线下面显示的所有“智能形状”工具。
中国人民大学 王蓉 22
教程：处理照片 创作图像—创建和命名帧
帧是 Fireworks 的一项功能，通常用于创建动画和变换图像。在本例中，将使用帧容纳各个照片，然后将 它们一次导出到单独的文件中。
1 确保在 Fireworks 中打开了ImageSource.png 文件。 2 选择“窗口”>“帧”，以打开“帧”面板。 3 单击面板右上角的上下文菜单， 然后选择“添加帧”。
结束该过程。
中国人民大学 王蓉 18
教程：处理照片 批量处理大型图像文件 当查看 camera_files 文件夹中的文件时，可以看到 Fireworks 已将原始图像文件放入名为 Original Files 的文件夹中，而且缩放操作已显著地减小了文件的大小。
fireworks教程
fireworks教程Fireworks是一款由Adobe公司开发的图形编辑软件，主要用于创建和编辑Web图像，特别适用于设计师和开发人员在制作网站时进行图像处理和优化。
本教程将介绍Fireworks 的基本功能和使用方法，帮助读者快速上手并提升其设计能力。
简介Fireworks是一款在Adobe Creative Suite软件套件中独立存在的软件，最早被设计用于处理和优化Web图像。
它的特点是集成了矢量图形编辑器和位图编辑器的功能，能够同时处理SVG、PNG、GIF、JPEG等多种图像格式。
Fireworks的设计理念是帮助用户快速创建和编辑Web图像，提供丰富的工具和特效，支持切片和优化，以及生成HTML和CSS代码。
下载和安装Fireworks可以通过Adobe官方网站下载安装程序。
安装过程与大多数软件相似，跟随提示完成即可。
安装后，启动软件并进入主界面。
界面概览Fireworks的主界面分为几个主要区域：1.菜单栏：包含各种工具和功能的菜单。
2.工具栏：包含常用工具的按钮，用于选择和应用工具。
3.画布：用于显示和编辑图像的区域。
4.图层面板：显示和管理图像的各个图层。
5.属性面板：用于调整和修改工具和图层的属性。
基本操作创建新文档要创建新的Fireworks文档，请执行以下操作：1.单击菜单栏中的“文件”>“新建”。
2.在弹出的对话框中，设置文档的尺寸、分辨率和背景颜色等选项。
3.单击“确定”创建新文档。
绘制基本图形Fireworks提供了多种绘图工具，可以帮助用户创建各种基本图形。
以下是创建基本图形的一般步骤：1.选择合适的绘图工具，例如矩形工具或椭圆工具。
2.在画布上单击并拖动，绘制出所需大小的图形。
3.在属性面板中设置图形的颜色、边框大小和样式等属性。
编辑图像Fireworks提供了丰富的编辑工具和功能，可以对图像进行调整和修改。
以下是一些常用的图像编辑操作：1.裁剪图像：选择裁剪工具，拖动鼠标选择要保留的区域，点击“裁剪”按钮完成裁剪操作。
FIREWORKS8标准实例教程教程配套全册教学课件
1．分组和移动面板 Fireworks自动把功能相近的面板停靠在同一个面板停靠架上，选择
其中一个面板，整个面板停靠架便会一起出现。也可以手动对浮动面 板进行停靠和拆分操作。
1.3.2 菜单的使用
Fireworks 8菜单的使用方法与其它Windows应用软件完全一致。在此 不再赘述。
1.3.3 工具箱的使用
Fireworks的工具箱通常固定在窗口的左边，主要由选择工具、位图工 具、矢量工具、网页工具、颜色工具、视图工具组成。那些带有黑色 小箭头的工具按钮即是一个工具组，其中包含了一些相同类型的工具。
1.3 基 本 操 作
1.3.1 认识Fireworks 8的工作界面 单击【开始】/【程序】/【Macromedia】/【Macromedia Fireworks 8】
命令启动Fireworks 8软件。 Fireworks 8的工作界面主要由标题栏、菜单栏、常用工具栏、工具箱、
修改工具栏、编辑窗口及多个面板组成。编辑窗口是用户使用 Fireworks进行创作的主要工作区。文档编辑窗口顶部有4个选项卡， 用于控制文档编辑窗口的显示模式。
第一章 初识Fireworks 8
1.1 Fireworks 8的新功能
1.Fireworks 8不仅继承了以往Fireworks的强大功能，还增添了许多新的特性。 下面我们看一下它与以前的版本相比有哪些改进。
2.新增〖图像编辑〗面板，使用该面板可以快捷地访问常用的图像编辑工具、 滤镜和菜单命令。
1.2.2 分辨率 分辨率是位图特有的概念，图像的分辨率是指单位长度上的像素数，通常用
每英寸中的像素数来表示（即ppi）。图像的分辨率越高，构成图像的像素数 就越多，相应地，图像文件也就越大。在处理网页图像时，一定要平衡好图 像的色彩品质和网络传输速度之间的关系。 设计处理网页图像时，一般地，PC机的分辨率是 96 ppi，苹果机的分辨率是 72 ppi。
使用Fireworks编辑网页图像
• GIF动画能够输出透明背景的图片，可以应用 于各种颜色背景的网页。
2、优化与导出动画
• 文件/导出向导 • 示例：制作字体遮罩动画（P384）
第十章 使用Fireworks编辑网页图像
一、 Fireworks工作环境 • Fireworks MX 2004的工作界面由4部分组成
：文件视图、功能面板、工具箱和属性面板。 1、工具栏 2、视图方式 1）原始视图 • 创建图形或对图像进行编辑操作 2）预览视图 • 可通过优化面板对图像进行优化操作 3）2幅视图 • 可以预览原图像与优化图像后的对比效果
第十章 使用Fireworks编辑网页图像
4）4幅视图 • 除了左上角的原图像外，可以单击选择任意一幅图
像，在优化面板中设置不同的优化参数，然后从中 选择一种显示效果好而文件大小又适宜网络传输的 优化方案。 3、面板组 二、绘制图形 1、绘图工具 2、选择对象和像素（P364） 三、编辑图像 • Fireworks可以进行两种图像模式的编辑操作，一 种是对基于路径的矢量对象（简称对象模式）的操 作，另一种是对基于像素的图形对象（简称图像模 式）的操作。
第十章 使用Fireworks编辑网页图像
1、修饰图像（P365） 2、填充图像 • 通过属性窗口进行填充修饰 3、应用样式 • 样式主要用于图形及文字对样式的直接套用。 • 窗口/样式
第十章 使用Fireworks编辑网页图像
4、创建热点区域 1）使用热点工具 • 矩形热点 • 椭圆形热点 • 多边形热点 2）热点区域的创建和编辑 • 通过属性面板修改热点区域的参数 5、应用切片 • 切片就是将图形分割成一个个的小区域，在
第十章 使用Fireworks编辑网页图像
fireworks动画制作的三种方法
fireworks动画制作的三种方法jpg、png、bmp等静态图片用photoshop软件制作十分简单，有时候，而那些貌似flash的动态图片如何制作呢?下面小编给大家整理了关于一些fireworks动画制作的三种方法，希望大家喜欢fireworks动画制作的三种方法：合并已有图片生成动画合并已有图片形成动画，顾名思义就是将一系列图片按顺序排列在不同的帧中从而生成动画，当然，首先我们必须有一串连续的图片，然后，在Fireworks中，选择菜单指令“File/Open Multiple”，这时将弹出“打开”对话框(如图1)，进入所需图片所在的目录，然后按照动画中图片显示的顺序依次选取图片，并单击“Add”按钮将这三张图片加入到对话框下面的窗口;注意：我们还必须勾选对话框最下面的“Open as Animation”(以动画打开)选项，不然的话，我们打开的将是三张分开的静态图片;最后，单击“Done”(完成)按钮。
图1 以动画打开单击窗口右下角状态栏的播放按钮，怎么样?效果还不错吧!现在只是一只海鸥在不停地飞，如果为它再添加一副背景，效果一定会更好，好吧，下面我们就为海鸥添加一副大海的背景。
fireworks动画制作的添加背景的方法有两种：自动复制和共享图层。
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”复选框前面的对钩去掉即可。
使用Fireworks8制作图像
【实例6.4】绘制一本打开的书，并且上 面有两个半圆的LOGO图片。
【实例6.5】绘制向外扩展的五角星。
文本的编辑
Fireworks 8提供了许多文本功能。使用工具箱中的 “文本”工具，在画布中希望文本块开始的位置单击或拖 动光标，可产生一个文本块，可以在其中输入文字。
1．固定宽度文本块和自动调整大小文本块 2．设置文本属性 3．文本附加到路径 4．文本转换为路径和位图 【实例6.6】制作圆形印章效果。
1．选择描边种类 2．在路径上放置笔触 3．为笔触增加纹理
填充
Fireworks的填充可以将路径变为实际应用中的各种 图形效果。
1．填充对象 2．设置填充 3．设置渐变填充 4．调整填充效果 5．为填充增加纹理和设置边缘 【实例6.7】制作一个立体效果的按钮。
使用样式和形状
Fireworks的“资源”面板组中提供了大量定义好的 样式和图形，可以在制作图像时直接使用。
创建和编辑位图
1．绘制图形 2．导入外部图像 3．擦除位图
编辑选区
在网页制作时对位图的处理主要是进行修饰处理，如 改变大小、修改颜色、增加特效、去除红眼和多余的色斑 等。修饰图像前一般先要选取要修饰的区域，形成一个闪 烁虚线组成的选区。
1．增加选区 2．选区边缘设置 3．编辑选区
【实例6.8】制作羽化的图像。
6.1 Fireworks 8简介
Macromedia Fireworks 8的工作界面与Dreamweaver 8的工作环境相似，都采用了非常人性化的设计界面，用 户可以根据实际需要进行设置。
网页图像的格式
在计算机图形学中，根据成像原理和绘制方法的不同，可 以将图像分为两大类：基于数学公式描述的矢量图形和基于 像素的位图图像。位图是由屏幕上许多细微的小点组成，基 于位图的图形程序实际上就是把图形中的像素点作为处理的 对象。位图的优点是能够真实地模拟现实生活中的色彩，缺 点是放大后会失真。矢量图形是由直线和曲线构成的，其显 示质量与屏幕分辨率无关，当进行缩放时，图形仍将保持原 有显示质量，不会失真。
Fireworks 8 教程第01章 Fireworks 8使用基础
中文版Fireworks 8基础与上机实训
1.3 创建Fireworks文档
在Fireworks 8中创作图片时，首先要创建一个新文档或者打开一 个已经存在的文档。建立文档时的一些重要参数可以在创作过程中随时 改变 。
❖ 新建新文档 ❖ 打开文档 ❖ 保存和导出文档
中文版Fireworks 8基础与上机实训
保存和导出文档
在Fireworks 中创建的文档一般都会保存为PNG格式文档。如果想 生成Web页中常用的JPEG或GIF格式，则需要使用“导出”命令。
选择“文件”|“保存”命令，打开下图所示的“另存为”对话框。 在该对话框的“文件名”文本框中输入文档名称，并选择保存路径，然 后单击“保存”按钮即可保存文档 。
中文版Fireworks 8基础与上机实训
快速创建切片和热点
切片是Fireworks中用于创建交互性对象的基本构造块，它不像矢 量图形或位图图形那样以图像的形式存在，而是作为网页对象以HTML 代码的形式出现。在Fireworks的“层”面板的“网页层”中可以查看、 选取和编辑切片对象。此外，使用拖放交换图像的方式将交互性添加到 切片也是一种快速创建交换图像效果的方法。下图所示为在网页图像上 创建的切片 。
中文版Fireworks 8基础与上机实训
1.7 思考与练习
填空题
5. 若要在文档的水平和垂直尺寸之间保持相同的比例，可以选择“图像大小”对话框中的 _____ 复选框。
6. Fireworks的_____ 在画布上显示为一个由横线和竖线相交构成的网状体系。它不随设计的文 档一同导出，只是起到辅助设计的作用，只能在工作环境中看到。
在Fireworks 8中，工具箱可以在窗口中任意移动，用户只需在其 上按下鼠标左键并拖动，即可在非功能区改变其放置位置。。
Fireworks 图像处理操作步骤
Fireworks 图像处理操作步骤一、图像造型1、创建文档。
在Fireworks中新建一个文档，设置画布宽度为500像素，高度为350像素，分辨率为72像素/英寸，画布颜色为白色。
2、选取椭圆形位图。
选择“文件/导入”菜单项，在弹出的对话框中选择图像文件，打开，返回Fireworks画布，移鼠标至画布左上角单击，导入图像到画布中。
3、羽化选区边缘。
选择“选择/羽化”菜单项，对话框中设置半径为30像素为过渡宽度，确定。
4、清除选区外图像。
选择“选择/反选”菜单项，按Del键清除图像。
5、裁剪图像。
点击工具箱中裁剪工具，在图像中按鼠标左键拖动，框选出需要保留的图像部分，将出现画布裁剪框。
方框四周有8个黑色小方块，为裁剪控制点，拖动控制点能调整裁剪边线。
在裁剪框中双击，完成画布裁剪。
二、图像合成：将3张图片的部分画面合成一幅风景照。
1、打开图片文件。
在Fireworks中打开背景图片文件。
2、导入图片到合成文件中。
打开层面板，点击层面板下端“新建/重制层”按钮，将产生一个新的层。
双击该层名称，在弹出“层名称”对话框中输入“草地”作为该层名称。
按Ctrl+R，在弹出的“导入”对话框中选择有草地的图像文件，将其导入到画布中，此图像的位图层将放置在“草地”层文件夹中。
同样方法，建立“人物”层文件夹，将另一张含有人物的图像导入到该层文件夹中。
单击“人物”层左边“层显示/隐藏”图标，掩盖该层上的图像。
3、制作合成图像的草地。
点击草地图像，在位图工具箱中选择“选取框”工具，框选择图片中草地之外要清除的部分，按删除键清除多余图像。
按Ctrl+D释放选区，用指针选择工具移动图像与画布的左下角对齐。
右击该图片，选择快捷菜单中的“变形/缩放”菜单项，图像四周出现缩放控制框，调整图像大小，覆盖背景图右端，双击图片，退出缩放状态。
草地上边缘过于平直，使用橡皮擦工具修描上边缘，形成较为自然边界。
可在属性检查器中设置橡皮擦大小为30 像素，边缘为90像素。
SW05 第5章 Fireworks8 基本操作电子课件
2018/7/25
第5章
Fireworks8简介
25
5.2.4 添加与编辑文本
9．单击菜单栏中“修改”|“画布”|“修剪画布”命令，使画布大 小与图形大小一致。 10．保存文件。 文本在附加到路径后，选择“文本”工具并选中要编辑的文本， 就可以编辑文本。此外将含有软硬回车符的文本附加到路径时会现错 误。
2018/7/25
第5章
Fireworks8简介
29
5.2.6 制作网页导航实例
4．矩形应用了样式如图所示。
5．选择文本工具，在属性检查器中设置字体：隶书，字号：28， 加粗，颜色：#993333，在矩形上添加文本“首页”。 6．单击菜单栏中“修改”|“画布”|“修剪画布”，使画布与图形 大小一致。 7．保存文件完成按钮的制作。
5.1.2文件的基本操作
2018/7/25
第5章
Fireworks8简介
4
5.1.1 Flash8的操作界面
单击“开始”按钮，在开始菜单中依次选择“程序”— “Macromedia”—“Macromedia Fireworks 8 ”，启动Fireworks 8 程 序，进入Fireworks 8 的欢迎界面，如图所示。
2018/7/25
第5章
Fireworks8简介
12
5.2.1 编辑图像的基本操作
2．扭曲工具
（1）选择要扭曲的对象。 （2）单击扭曲工具，在文档窗口中，图形四周出现8 个方形变形手柄。 （3）将鼠标移到变形手柄，变为双向箭头时，按下并 拖动鼠标
Fireworks8简介
2018/7/25
第5章
Fireworks8简介
20
5.2.3 绘制与编辑失量对象
Fireworks教程
Fireworks是由Macromedia公司开发的网页制作软件利器之一。
在绘图方面Fireworks结合了位图以及矢量图处理的特点，不仅具备复杂的图象处理功能，并且还能轻松地把图形输出到Flash，Dreamweaver 以及第三方的应用程序。
在网页制作方面Fireworks能快速地为图形创建各种交互式动感效果，不论在图象制作或是在网页支持上都有着出色的表现。
随着版本的不断升级，功能的不断加强，Fireworks受到越来越多图像网页制作者的青睐。
目前的最新版本Fireworks MX 2004 中文版更是以它方便快捷的操作模式，和在位图编辑、矢量图形处理与GIF动画制作功能上的多方面优秀整合，赢得诸多好评。
为了使更多的初学者能够尽快掌握Fireworks，编者选用了Fireworks MX 2004 中文版为蓝本进行系列教程讲解，希望能为大家学习Fireworks带来帮助。
第一部分中我们先来了解一下Fireworks MX 2004中文版的操作界面。
一、创建新文档在启动Fireworks MX 2004中文版时，会出现一个启始页面窗口，在这里你可以快速访问最近编辑过的文档或创建一个新文档，也可以访问帮助一类的文件或网页。
当我们选择“创建一个新文档”后，就会弹出“新建文档”的对话框，如图1—01。
图1—01画布大小：设置文件画布的宽、高度，可以用象素、英寸或厘米为单位。
分辨率：文件的分辨率越高，图像越精细，但同时文件也会越大。
画布颜色：文档画布颜色有三个选项，依次为白色、透明色和自定义颜色。
在自定义颜色下方的色彩选择框中，可以自行选择一种颜色。
单击“确定”后，新的文件就创建完成了。
二、Fireworks的工作界面新建文档完成后就可以看到Fireworks的工作界面了，如图。
Fireworks 的工作界面由“菜单栏”、“工具栏”、“工作区”、“工具条”、“组合面板”和“属性框”六个部分组成。
图1—02工作区：在工作区上不仅可以绘制矢量图，也可以直接处理点阵图（位图）。
使用Fireworks创建动画效果的基本方法介绍
使用Fireworks创建动画效果的基本方法介绍Fireworks是一款专业的图像处理和设计软件，除了常见的图像编辑功能外，它还提供了动画设计的功能。
在这篇文章中，我们将介绍使用Fireworks创建动画效果的基本方法。
一、导入素材在开始制作动画之前，首先需要准备好所需的素材。
可以使用Fireworks自带的绘图工具绘制图形，也可以导入外部图片或矢量图形。
要导入素材，可以选择“文件”菜单中的“打开”选项，然后选择所需的文件。
二、创建帧和图层在Fireworks中，动画是由一系列帧组成的。
每一帧都可以看作是动画的一个时间点。
要创建帧，可以使用“窗口”菜单中的“图层”选项打开图层面板。
在图层面板中，点击右上角的“新帧”按钮即可创建新的帧。
在每个帧中，可以使用图层面板创建多个图层。
图层可以看作是帧中的不同元素的集合，它们可以分别控制和编辑。
要创建图层，可以使用图层面板中的“新建图层”按钮。
通过调整图层的顺序和可见性，可以实现图像在不同帧之间的变化效果。
三、编辑图像一旦完成帧和图层的创建，接下来就可以编辑图像了。
Fireworks提供了丰富的图像编辑工具和特效效果，可以根据需要进行调整。
例如，可以使用画笔工具对图像进行绘制和涂抹，在图层面板中选择图层，然后使用编辑菜单中的其他工具进行剪切、复制、粘贴等操作。
同时，Fireworks还提供了一系列的滤镜和特效效果，可以通过应用这些效果来改变图像的颜色、光照、纹理等，从而达到不同的动画效果。
四、设置动画属性在编辑好每个帧和图层后，需要设置动画的属性。
点击窗口菜单中的时间轴选项，打开时间轴面板。
在时间轴面板中，可以设置动画的播放速度、循环次数、缓动效果等。
还可以调整每一帧的时间长度，以便控制动画对象的运动速度和变化频率。
五、导出动画完成所有的编辑和设置后，就可以将动画导出为可用的格式了。
点击文件菜单中的“导出”选项，选择所需的文件格式，然后保存动画文件。
总结使用Fireworks创建动画效果需要以下基本步骤：导入素材、创建帧和图层、编辑图像、设置动画属性和导出动画。
第六章Fireworks 8.0的遮罩
6.2.5 使用显示和隐藏创建蒙版
2．使用【显示所选】和【隐藏选区】命令创建蒙版 ．使用【显示所选】 隐藏选区】 若要用“显示所选” 隐藏选区”命令创建蒙版， 若要用“显示所选”和“隐藏选区”命令创建蒙版，具体操作步骤 如下： 如下：）从“工具”面板中选择“魔术棒”或任何选取框或套索工具。 （1） 工具”面板中选择“魔术棒”或任何选取框或套索工具。 （2）在位图中选择像素，如左图所示。 ）在位图中选择像素，如左图所示。 （3）执行下列操作之一来创建蒙版： ）执行下列操作之一来创建蒙版： 选择【修改】 【蒙版】 【显示所选】 选择【修改】→【蒙版】→【显示所选】命令显示由像素选区 定义的区域，如图所示。 定义的区域，如图所示。
本章目标
了解Fireworks中蒙版的作用 了解关于导入和导出Photoshop层蒙版 掌握Fireworks中蒙版的创建与编辑及蒙版类型的修改
2
6.1 关于遮罩
3
6.2 创建遮罩
6.2.1 6.2.2 6.2.3 6.2.4 6.2.5 使用【粘贴为蒙版】 使用【粘贴为蒙版】命令创建蒙版 使用【组合为蒙版】 使用【组合为蒙版】命令创建蒙版 使用【粘贴于内部】 使用【粘贴于内部】命令创建蒙版 使用【添加蒙版】 使用【添加蒙版】创建蒙版 使用显示和隐藏创建蒙版
（3）选择【编辑】→【剪切】命令将对象移到剪贴板。 ）选择【编辑】 【剪切】命令将对象移到剪贴板。 （4）选择要将内容粘贴到其中的对象，此对象将用作蒙版或剪贴 ）选择要将内容粘贴到其中的对象， 路径。粘贴的对象看起来位于蒙版对象的内部， 路径。粘贴的对象看起来位于蒙版对象的内部，或者被蒙版对象剪 贴了。 贴了。
8
6.2.2 使用【组合为蒙版】命令创建蒙版 使用【组合为蒙版】
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Fireworks 8.0
35
（3）路径的基本操作——合并
可以将多个路径对象合并成单个路径对象。 选择两个或多个路径，然后选择“修改” －> “组合路径”－>“合并” 。
Fireworks 8.0
36
（3）路径的基本操作——联合
联合路径是指将多个对象混合后，以所有 对象的外部轮廓作为路径，生成一个新的 对象。 选择“修改”->“组合路径”->“联合”。
面板抓取器
选项菜单
提示：在网页三剑客中的浮动面板的操作方法基本一致。
Fireworks 8.0 11
1.工具栏的组成和基本操作
通过窗口菜单，调出“主要”工具栏和 “修改”工具栏
问：在DW中如何调出“文档”和“标准”工具栏？
Fireworks 8.0 12
“主要”工具栏
新建按钮 打开按钮（打开图片文件） 保存按钮（扩展名为.png） 导入按钮（将外部的图片导入Fireworks ） 导出按钮（导出其他格式的文件，如gif、 jpg等）
Fireworks 8.0 23
2. 绘制圆角矩形
（1）从“矩形”工具弹出菜单中，选择 “圆角矩形”工具。 （2）拖动画布以绘制矩形。
Fireworks 8.0
24
3.绘制多边形和星形
选择 菜单项后，鼠标光 标变成“+”，在画布上拖拽便画出多边ห้องสมุดไป่ตู้。
Fireworks 8.0
25
绘制多边形和星形（续）
Fireworks 8.0 42
操作步骤（续）
9.
10.
11. 12.
把该矩形移动到和圆环内圆和外圆相切的位置，（这一 步要小心操作，放大来移动更好些），然后把矩形克隆 一个，把克隆出来的矩形逆时针转90度，然和再把它移 动到和圆环的内圆和外圆相切的位置。 再拖画一个16×16的正方形（目的就是要把圆环最下面 的部分去掉），使拖画出的矩形旋转45度，然后同时选 中该正方形和圆环，“修改”－>“组合路径”－>“打孔”。 同时选中残缺的圆环和两个矩形， “修改”－>“组合路 径”－> “联合” 。 然后把它顺时针旋转90度，移动到镂空矩形的右侧，对 齐。
选中 ，在属性面板中将 多边形选项调节到 选项，拖拽 鼠标，即可绘制各种星形。
Fireworks 8.0
26
绘制多边形和星形（续）
自动形状是智能矢量对象组，这些对象组 遵循特殊的规则以简化常用可视化元素的 创建和编辑。
打开/关闭螺 旋形
螺旋数
Fireworks 8.0
27
编辑路径
1.绘制路径 绘制路径一般使用钢笔工具，路径的形状 是由路径上绘制的点和控制柄决定的，控 制柄是用来控制曲线在定位点处的斜度和 弯曲程度 。 定位点
控制柄
Fireworks 8.0
28
绘制折线
在文档窗口指定的位置处，单击鼠标左键， 然后在目的地再次单击鼠标左键，可在两 点之间绘制直线，多次单击可绘制折线。
Fireworks 8.0
29
绘制曲线
在文档窗口指定的位置处，按住鼠标左键 不放，拖动鼠标，直到显示为所需曲线为 止。
Fireworks 8.0
Fireworks 8.0
9
属性面板的基本操作
通过右击属性面板的标题栏，弹出菜单， 可以将属性面板以半高方式打开，只显示 两行属性，也可以全高方式打开，显示四 行属性。 同样可以通过单击“属性”二字 或字左侧的小三角 将属性检查器完全折 叠。
Fireworks 8.0
10
浮动面板
标题按钮 标题栏
Fireworks 8.0
3
Fireworks 8.0简介
2. Fireworks常用的文件类型 PNG：即可移植网络图形，是 Fireworks 的本身 文件格式。 GIF：是一种很流行的网页图形格式，可用于卡通、 徽标、包含透明区域的图形以及动画。 JPEG：专门为照片或增强色图像开发的图像格式。
Fireworks 8.0
16
打开按钮（续）
打开按钮功能等于“文件”菜单下的“打 开”命令。 若要打开已有的Fireworks文档时：
•
如果打开最近关闭的文档，可选择“文件”->“打开最近的文件” 子菜单中快速打开，此菜单最多可以列出10个最近打开的文档，
Fireworks 8.0 17
保存按钮
30
2.路径编辑
Fireworks 提供了多种编辑矢量对象的方法。 （1）使矢量对象弯曲和变形 （2）使用刀子工具 （3）路径的基本操作
Fireworks 8.0
31
（1）使矢量对象弯曲和变形
• 使用“自由变形”工具可以直接对 矢量对象执行弯曲和变形操作，而 不是对各个点执行操作。 • 利用“自由变形”工具绘制苹果。
41
Fireworks 8.0
操作步骤（续）
5.
6. 7.
8.
用椭圆工具按住Shift键在编辑区拖画出一个长和宽为60 像素的圆，选中该圆“编辑”－>“克隆”，克隆出一个 圆，选中克隆出来的圆“修改”－>“变形”－>“数值变 形”，在弹出的对话框中设置为“调整大小”，把长和 宽都设为20象素 选中这一大一小的两个圆，“修改“－>”组合路径“－>” 打孔“，得到了一个圆环。 选中该圆环，“编辑”－>“克隆”，克隆出一个圆环， 把它暂时隐藏起来备用。（隐藏的方法就是点击“图层” 面板前面的眼睛图标，当眼睛闭合状态时表示隐藏，眼 睛为睁开状态时表示该图层是可见图层）。 用矩形工具拖画一个宽为20象素，高为90象素的矩形。 选中该矩形，“修改”－>“变形”－>“数值变形”，使它 旋转450。
Fireworks 8.0
37
（3）路径的基本操作——交集
相交路径是指将所有选中对象的相交部分 的外部轮廓作为路径，生成一个新的对象。 选择“修改”->“组合路径” ->“交集”。
Fireworks 8.0
38
（3）路径的基本操作——打孔
打孔路径是指用上层对象的轮廓剔除下层 对象的内容,生成一个新的对象。 选择“修改”->“组合路径” -> “打孔” 。
第6章 Fireworks 8.0图像制作
教学内容
Fireworks8.0简介 矢量编辑 文本编辑 特效和样式 GIF动画制作 位图处理 图像切片
Fireworks 8.0 2
Fireworks 8.0简介
Fireworks 8.0简介 1.简介：Fireworks 8.0是一个功能非常强 大的绘制和处理图片的软件。它主要针对 网页图形设计和制作的，使用它创建和编 辑网页图形，可以对其进行动画处理、添 加高级交互功能以及优化图像等。
Fireworks 8.0
13
新建按钮
单击该按钮可新建一个png格式的图像文件。 png是Fireworks本身的文件格式。 当画布尺寸大于图像尺寸时，可以选择 “修改”－>“画布”->“符合画布”，去掉 周围没有使用的空间。
Fireworks 8.0
14
新建按钮（续）
新建文档对话框
1. 以象素、英寸或厘米为单位输入画布宽度和高度。
Fireworks 8.0
4
Fireworks 8.0简介
3.新功能 ：在直观、可定制的环境中创建 和优化用于网页的图像并进行精确控制。 对 ActionScript 和 CSS（层叠样式表）格 式的新增支持使 Fireworks 能够更有效地与 Dreamweaver 和 Flash 一起工作。 详见Fireworks 8.0帮助文档。
Fireworks 8.0
39
制作标记图形
使用的主要菜单：
“克隆” “修改”－>“变形”－>“数值变形” “修改“－>”组合为路径“－>”打孔“ “修改”－>“组合为路径”－> “联合” “修改”－>“变形”－> “水平翻转”
“编辑“－>
Fireworks 8.0
40
操作步骤
Fireworks 8.0 33
（2）使用“刀子”工具
“刀子”工具能够将一个路径切成两个或 多个路径。
Fireworks 8.0
34
操作步骤：
1.
2.
3.
4.
在图中绘制三个正圆分别以黑色和白色填 充。 选中大圆，选中“刀子”工具，进行纵向 沿圆心的切割，使之被切成两个半圆 修改右半圆的填充颜色为白色。 绘制一黑一白两个小圆放在图中。
Fireworks 8.0
32
操作步骤：
1.
2.
3. 4.
新建一个文件，在画布中绘制一个椭圆，单击“自由变 形”工具，在其属性面板中设置光标的半径大小为40像 素，在画布中按下鼠标，可以看到鼠标变成了一个红色 的圆，用这个红色的圆拖动路径变成苹果的样子。 为苹果添加一个小小的柄，选择“更改区域形状”工具， 在其属性面板中设置光标的半径大小为10像素，强度为 80，然后从苹果的内部来拖动路径，按住鼠标左键向上 拖。 选择“油漆桶”工具，对苹果进行为由白色到红色的放 射性渐变填充。 选中苹果，单击“滤镜”按钮并在弹出的菜单中选择 “阴影和光晕”，单击“投影”按钮， 使苹果更有立体 感。
1. 2.
3.
4.
新建文件，宽度为600，高度为600，单位为象素，背景 色为白色。 用工具箱中的矩形工具，在编辑区拖画出一个长和宽都 是100象素的正方形，填充色为浅蓝色（＃0099CC）。 选中该正方形，“编辑“－> “克隆”，克隆出一个，选 中克隆出的正方形，“修改”－>“变形”－>“数值变 形”，在弹出的对话框中设置为“调整大小”，把长和 宽都设为60象素。然后同时选中这两个一大一小的正方 形，“修改”－>“组合路径”－>“打孔”。这样，得到 了一个边框为20象素的镂空正方形。 选中这个镂空正方形，“修改”－>“变形”－>“数值变 形”， 使它旋转450。