1
第 3章 Fireworks MX 制作网页图形
学习目标
? 使用各种面板。
? 熟悉矢量工具，能制作和编辑矢量图形。
? 熟悉位图工具，能制作和编辑位图图形。
? 能制作按钮，创建简单动画。
2
第 3章 Fireworks MX 制作网页图形
教学内容
3.1 Fireworks MX基础
3.2 Fireworks MX基本操作
3.3 位图操作
3.4 矢量图操作
3.5 文本操作
3.6 按钮制作
3.7 创建 GIF动画
本章小结
返回总目录
3
3.1 Fireworks MX 基础
Fireworks MX由 Macromedia公司推出，
是目前最优秀的 Web图像制作软件，它将矢
量图和位图编辑工具相结合，并赋予图像动
态特性。可将文档另存为 JPEG, GIF 或其
他格式的文件以便在网页中使用。还能导出
与 Photoshop等软件类型匹配的文档。
返回目录
4
3.1 Fireworks MX 基础 — 工作窗口
主要由标题栏、菜
单栏、工具栏、工
具箱、工作区、属
性面板、面板组和
状态栏等部分组成。
其中菜单栏包含创
建与编辑图片的全
部命令，工具栏包
含菜单中常用命令
的按钮，状态栏显
示当前文档的主要
信息。
工作区,位于工具箱右边，在工作区中显示和编辑图像。
属性面板,当选中工具箱中的某个选项时，可以在属性面板上进行相
应属性设置。 面板组,位于工作区右边，面板是非常重要的辅助作图
工具，按各自功能分组，每组有若干个面板。
Fire
wo
rks
MX
工
作
窗
口
返回目录
5
3.1 Fireworks MX 基础 — 常用面板简介
1,混合器面板,用于创建笔尖颜色和填充颜色 。 创建颜色可以单击
颜色按钮, 在弹出的调色板选择某个颜色方框, 或
在 R,G,B框中输入相应红, 绿, 蓝的数值, 还可
以在面板底部的选色盘中单击所需颜色 。 单击, 混色
器, 面板的按钮, 可更改的颜色模式 。
2,样本面板,显示当前调色板, 单击面板中的色样可以快速设置图
像颜色 。, 样本, 面板与, 混合器, 面板在同一个面
板组 。
3,帧面板,主要用于制作动画效果 。 单击, 帧, 面板右上角的按钮,
从
弹出的菜单中对帧进行操作 。
返回目录
6
3.1 Fireworks MX 基础 — 常用面板简介
4,历史纪录面板,用来记录用户对图像所作的改动 。 用户的每一步
操作都记录在该面板中, 以便用户恢复图像或恢复到某一指定操作 。
按钮是一个撤销标记, 拖动该标记可以撤销或恢复最近的操作 。 利
用, 历史纪录, 面板还可以创建批处理命令 。 方法为：按下 Shift键
在该面板中选定多个历史动作 → 单击该面板右下角的, 将步骤保存
为, 按钮 → 在对话框的, 名称, 文本框中输入命令名 → 单击, 确
定, 按钮 。 这个名称就会出现在, 命令, 菜单的底部, 单击它可执
行一系列动作 。
5,行为面板,用于管理行为 。 行为决定热点和切片对鼠标移动所做
出的响应 。
6,信息面板,提供所选对象的尺寸和画布指针的精确坐标 。
返回目录
7
3.1 Fireworks MX 基础 — 常用面板简介
7,样式面板,提供了许多可直接用于图形或者文本的图案样式 。 选
定图形或文本后单击, 样式, 面板中的样式图标, 就可以自动应用
选择的样式 。
8,URL面板,用于添加, 删除对象的 URL地址 。 当鼠标指向图像文
件中指定了 URL地址的热点区域时, 该地址会出现在面板的当前
URL列表中 。
9,库面板,包含图形文件, 按钮文件和动画文件 。 打开, 库, 面板
将元件从, 库, 面板拖到文档中, 便生成了该元件的一个实例, 修
改元件便相当于修改了该元件的全部实例 。
10,优化面板,用于管理控制对象大小和文件类型的设置, 以及处理
要导出的文件或切片的调色板 。
返回目录
8
3.2 Fireworks MX 基本操作 — 画布基本操作
1,创建画布
单击, 文件 → 新建, 命令, 出现
如图所示的, 新建文档, 对话框, 再
该对话框中对画布大小和画布颜色进
行设置 。
2,改变画布尺寸
单击, 修改 → 画布 → 画布大小,
命令, 会出现, 画布大小, 对话框,
在, 宽度, 和, 高度, 文本框中输入
新的数值就可以重新指定画布的大小,
重新指定大小后画布会相应扩展或缩
小 。, 锚
新建文档对话框
定”给出了扩展或缩小新画布时的参考方向，默认以中心为参考。
返回目录
9
3.2 Fireworks MX 基本操作 — 画布基本操作
3．更改画布属性
（ 1）裁剪画布
当画布大小比画布上的对象大时，可以通过修剪画布来调整画布
的大小，使其刚好适合对象所占据的空间大小。具体操作为“修改 →
画
布 → 修剪画布”，就可以将多余的画布裁剪掉，使剩余画布与画布内
对
象的大小一致。
如果对象的内容有一部分处于画布的可视范围之外，通过“修剪
画
布”命令会将这部分内容裁剪掉；要想调整画布使其容纳所有的图像
对
象，可以通过“修改 → 画布 → 符合画布”命令。
（ 2）旋转画布
如果需要将整个画布连同上面的所有对象旋转特定的角度，则可
以选择“修改 → 画布 → 旋转 180度 /旋转 90度（顺时针） /旋转 90度（逆
时针）”来达到目的。
返回目录
10
3.2 Fireworks MX 基本操作 — 辅助工具的使用
1．网格
网格是一种设计工具，在画布上显示为由横线和竖线构成的网状体系，
只在工作环境中可见，图像输出时不可见。利用网格可以给对象进行精确定
位。可通过“视图 → 网格 → 显示网格”命令显示和隐藏网格。
2．标尺
要测量、组织和计划作品的布局可通过标尺来实现。 Fireworks中的标
尺以象素为单位。显示和隐藏标尺，可通过“视图 → 标尺”命令来实现。
3．辅助线
辅助线是从标尺拖到文档画布上的线条，可以帮助精确对齐目标。要显
示辅助线，首先要显示标尺，执行“视图 → 辅助线 → 显示辅助线”命令，然
后
在水平标尺或垂直标尺上按住鼠标向文档视图中拖动，就可以产生一条辅助
线。 要锁定辅助线，不允许随意调整辅助线的位置，可以执行“视图
→ 辅助线 → 锁定辅助线”命令。
返回目录
11
3.2 Fireworks MX 基本操作 — 位图与矢量图
位图 是由被称为象素的彩色小正方形组成的图形,
这些小正方形就像马赛克中的瓷片那样拼合在一起形成
图形 。 编辑位图图形时修改的是像素, 而不是线条和曲
线 。 位图图形与分辨率有关 。
矢量图 由称为矢量的线条和曲线描述图形, 用算术
方法生成 。 它的基本元素是节点和路径, 一个路径至少
有两个节点, 节点上包含的控制点负责相邻路径的形状
和长度 。 编辑矢量图形时, 修改的是描述其形状的线条
和曲线的属性 。 矢量图形与分辨率无关 。
返回目录
12
3.3 位图操作 — 常用位图绘图工具
“工具箱, 面板的, 位
图,
部分包含位图选择和编辑
工具 。 如图所示 。 要编辑
文档中的位图像素, 可以
从, 位图, 部分中选择工
具 。
位图工具箱中有的工具
右下方带有黑色小三角,
说明这些工具可以扩展 。
位图工具箱
返回目录
13
3.3 位图操作 — 常用位图绘图工具
1．选择工具
选取位图是位图处理中最基本的操作，它能精确定
位图像中像素的编辑范围。
（ 1）,在图像中选取一个矩形区域。
（ 2）,在图像中选择一个椭圆形区域。
（ 3） 魔术棒工具：在图像中选择一个颜色相似的区
域。颜色匹配范围由属性面板中的“容差”选项来
确定。
（ 4）,在图像中选择一个自由形状的区域。
（ 5）,在图像中选择一个直边的自由形状区
域。
返回目录
14
3.3 位图操作 — 常用位图绘图工具
2,刷子工具
利用“刷子”工具可以创建比较柔和的线条。其对应的属性面板如
图所示。
刷子工具的属性面板
返回目录
15
3.3 位图操作 — 常用位图绘图工具
3,铅笔工具
使用铅笔工具可以绘制任意曲线和直线。按下
Shift键拖动，画出的线为水平、垂直或倾斜线。
4,橡皮擦工具
该工具是用来擦除位图的。 选择工具箱中的橡
皮擦工具。在对应的属性面板中选择橡皮擦形状（圆
形或矩形），设置橡皮擦的大小、不透明度以及边缘
柔化度。在图像中拖动就可擦除处。
5,滴管工具
使用滴管工具可以从图像中选取颜色来指定新的
笔触颜色或填充色，然后把它应用到其他图像中。
返回目录
16
3.3 位图操作 — 常用位图绘图工具
6,填充工具
Fireworks中包括 2种填充工具,和 。使用
“油漆桶”工具可以将位图图像的颜色改为“填充颜色”框中的当前色。
用“渐变”工具可以将位图图像的颜色变为渐变颜色。
7,橡皮图章工具
“橡皮图章”工具复制或克隆位图图像的部分区域，将其压印到
图像中的其他区域。修复有划痕的照片或去除图像上的灰尘时，克隆像
素很有用。可以复制照片的某一像素区域，然后用克隆的区域替代有划
痕或灰尘的部分。
8,模糊与 锐化工具
模糊工具和锐化工具影响像素的焦点。模糊工具主要通过柔化突出
的色彩与柔和边界以使图像的色彩过渡平滑。锐化工具与模糊工具相反，
通过增大图像相邻像素之间的色彩反差以使图像的边界更加清晰，对于
修复扫描问题或聚焦不准的照片很有用。选择工具后设置“属性” 面
板，然后在要锐化或模糊的像素上拖动工具即可。
返回目录
17
3.3 位图操作 — 位图蒙版
蒙版效果一般是由两个已成组的对象组成的，称为蒙版组。
组中位于顶部的对象（蒙版）会对底部的对象产生一个剪切的效
果，即位于蒙版底部的对象被留下，其余部分被“剪切”掉（实际
上
是遮盖）。
位图蒙版练习
1,打开一幅位图图形。
2,绘制两个椭圆，使它们相互重叠，用作蒙版的对象。
3,按住 Shift键将两个椭圆都选中。
4,单击“编辑 →,剪切”命令，剪切用作蒙版的对象。
5,用选择工具选取位图图像。
6.单击“编辑 → 粘贴为蒙版”命令，或者单击“修改 → 蒙板 →
粘贴
为蒙版”命令，创建出蒙板效果。
返回目录
18
3.3 位图操作 — 给位图加边框
利用, 命令 → 创意 → 添加图
片
框, 命令可以给位图添加各种各
样的边框 。
给图片加边框练习
1.打开一幅位图图片。
2.单击“命令 → 创意 → 添加
图
片框”命令，出现对话框。如图
所示。
3.在“添加图片框”中选择
一种
添加图片框对话框
边框图案，设置框的大小，单击“确定”。现在，图片已被加上
了边框,
返回目录
19
3.3 位图操作 — 调整位图颜色与色调
1．使用“亮度 /对比度”调整图像颜色
亮度 /对比度指颜色的相对明暗程度，通常用从 0%
（黑）到 100%（白）的百分比来度量，作用于整个图
像中所有像素，对单个通道无效。
方法如下,
（ 1）打开一个位图图像，用“滤镜 → 调整颜色 → 亮
度 / 对比度”命令打开“亮度 / 对比度”对话框。
（ 2）拖动滑块分别调整亮度和对比度的设置，值的
范围从 –100 到 100，单击“确定”可看到调整后的效
果。
返回目录
20
3.3 位图操作 — 调整位图颜色与色调
2．使用“色阶”调整图像颜色
色阶用于描绘图像像素亮度的程度,方法如下：
（ 1）打开一个位图图像，单击“滤镜 → 调整颜色 → 色阶”命令
打
开色阶对话框。色阶对话框如图所示。
（ 2）在色阶对话框中进行设置，单击“确定”可看到调整后的
效
果。
色阶对话框
返回目录
21
3.3 位图操作 — 调整位图颜色与色调
3．使用“曲线”调整图像颜色
“曲线”与“色阶”一样，也用来调整图像的色调范围，是
色彩
调整命令中最有效的方法，可以在不影响其他颜色的情况下沿色调
范围调整任何颜色，使图像效果发生很大变化。可以用“滤镜 → 调
整颜色 → 曲线”命令打开“曲线”对话框，对话框中的水平线表
示像
素原来的亮度值（输入色阶），垂直线表示新的亮度值（输出色
阶），对于 RGB图像，暗调位于左边。 方法如下：
（ 1）打开一个位图图像，打开“曲线”对话框。
（ 2）可以在“输入”和“输出”框中直接输入数值调节亮度，
也可
在曲线上单击后拖动，“输入”和“输出”框中的数值会随着改变。
如果
要删除某个点，只需将该点拖到网格外部即可。单击确定可看到调
整后的效果。
返回目录
22
3.3 位图操作 — 位图蒙版
4．使用“色相 /饱和度”调整图像颜色
“色相 /饱和度”是简单调色工具，多用来做各种添
加
颜色的琐碎工作。
方法如下：
（ 1）打开一个位图图像。
（ 2）用“滤镜 → 调整颜色 → 色相 / 饱和度”命令打
开
“色相 /饱和度”对话框。
（ 3）在“色相 /饱和度”对话框中进行设置，单击确
定
可看到调整后的效果。
返回目录
23
3.4 矢量图操作 — 常用矢量绘图工具
矢量工具箱如图所示。
1．直线工具
使用“直线”工具可以绘制直
线
路径。
2．钢笔工具
矢量工具箱
使用“钢笔工具”可以生成直线或曲线路径。
若想生成连续的直线路径，只须在画布中不同的地
方单击即可。若想画贝塞尔曲线，可在使用钢笔工
具单击的同时拖动鼠标。
返回目录
24
3.4 矢量图操作 — 常用矢量绘图工具
3．自动形状工具组
自动形状工具组如图所示，在画布上拖动鼠标，松
开后即绘出形状，拖动形状的控制点可调整绘制出的形
状。
自动形状工具组
返回目录
25
3.4 矢量图操作 — 常用矢量绘图工具
4．自由变形工具组
利用“自由边形”工具组可以直接对路径进行编辑来改变对象的形状，
可以弯曲或变形路径、扭曲路径等。
（ 1）“自由变形”工具 的使用
要想直接对矢量对象进行弯曲和变形，而不是对各个点执行操作，可以
利用“自由变形”工具 来实现。具体方法如下：
新建一个画布 → 用钢笔工具画一条直线 → 从工具箱中选择“自由变形”
工具 → 指针接近直线路径（鼠标指针变为） → 按下鼠标左键拖动直线路径使
路径拉伸。当指针变为指针带圆圈的形状时 → 按下鼠标左键拖动可使路径变
形。
（ 2）“更改区域形状”工具 的使用
可以使用“更改区域形状”工具对变形区域指针外圆里的所有选定路径
的区域进行拉伸，指针的内圆是工具的全强度边界。内外圆之间的区域以低
于全强度的强度更改路径形状。指针外圆确定指针引力拉伸。
为对源矢量图形进行拉伸的步骤如下：
返回目录
26
3.4 矢量图操作 — 常用矢量绘图工具
从工具箱中选择“更改区域形状”工具 → 在对应属性面板中设置指针
大小
和强度 → 按下鼠标左键跨越路径拖动可使路径扭曲。
（ 3）路径洗刷工具
“路径洗刷”工具分为“添加”和“去除”两种。可以使用“路径洗
刷”工具来更
改路径的外观。使用不断变化的压力或速度，可以更改路径的笔触属性。
使用“编辑笔触”对话框的“敏感度”选项卡指定这些属性中的哪个属性 受到“路
径洗刷”工具的影响。还可指定影响这些属性的压力和速度的数量。“路
径洗
刷”工具只能用在具有压力感应刷子描边的路径上。
5．刀子工具
像真正的刀子一样，“刀子”工具能将一个路径切成两个或多个路
径。具体方法是：
（ 1）用“矢量路径”工具，画矢量图形。
（ 2）从工具箱中选择“刀子”工具。
（ 3）在想要切断的地方单击，或跨越路径拖动鼠标，就可以切断
路径。
返回目录
27
3.4 矢量图操作 — 路径的组合
路径能被拆分也能被组合。要将两段路径接起来，方法为：
1．从工具箱中选择“指针”工具，按下 Shift键选择两条路径。
2．单击“修改 → 组合路径 → 结合”命令，可把两段路径接起
来。
如果两条路径中间有距离，那么结合起来之后，从外观上看并没有
改变，但是当移动时，会看到两条路径一块移动。
3．要把这条路径再拆开，单击“修改 → 组合路径 → 拆分”命
令。
4．在“修改 → 组合路径”的下拉菜单中还有联合、交集、打
孔和
裁切命令。
分别对两个不规则圆的路径进行“联合”、“交集”、“打孔”
和“裁
切”后看效果图。根据结果图，可以比较一下这几个命令的不同之
处。
返回目录
28
3.5 文本操作 — 文本的输入与编辑
文本是图形设计中非常重要的元素，它被作为一个对象整体保
存和控制。可以在文档任何位置输入文本，然后对文本进行处理。
1,输入文本
方法为：
（ 1）从工具箱中选择“文本”工具 。
（ 2）单击画布上要输入文本的地方会建立一个自动调整大小的
文本框。也可以在画布上拖动鼠标来绘制一个固定宽度的文本框，
这样输入文本会使文本块的宽度固定，但高度会随着文本内容的增
多而增加。
（ 3）在文本框中输入文本。在输入过程中按回车键可输入分段
符。单击文本框的外部或者切换工具就可以结束输入。
返回目录
29
3.5 文本操作 — 文本的输入与编辑
2,编辑文本
移动文本具体方法为：
（ 1）从工具箱中选择“指针”工具。
（ 2）用鼠标单击文本，这时文本框边线为蓝色，按下鼠标左键
可拖动文本到所需的位置，也可在将鼠标移到文本附近，当文本框
变为红色时按下鼠标左键拖动。要调整文本的属性可在“属性”面
板
中进行。可通过在同一选项中设置不同的值来观察文本有什么变
化。属性面板如图所示。
文本属性面板
返回目录
30
3.5 文本操作 — 将 文本附加与路径
为了使文本能按所画路径进行排列, 可采用将文本附加到路径的方法 。
下面以具体实例说明如何将文本附加于路径 。
波浪字
1）创建一个新文档。
2）从工具箱中选择“直线”工具 → 在画布上画一条直线。
3）从工具箱中选择“钢笔”工具 → 在直线的任意位置单击添加一个点
→
拖动该点绘制出一条曲线路径 。
4）在工具箱中选择“文本”工具。
5）在“属性”面板中设置文本的字体为“华文彩云” → 设置字号，单
击“两
端对齐”按钮 → 在画布上输入文本“像雾像雨又像风”。
6）单击“窗口 → 样式”命令 → 在出现的“样式”面板中选,Style 26” 。
7）选择“指针”工具 → 按下 Shift键的同时选中文本和文本要附加到的
路
径。
8）单击“文本”菜单 → 选“方向”命令 → 在级联菜单中选择一种文本
方向。
至此，得到文本附加于路径的效果图。
返回目录
31
3.5 文本操作 — 将 文本转换为路径
可以将文本附加到路径，也可以将文本转换为路径。将文本转
换为路径之后，就可以像编辑矢量一样编辑文本的形状。下面用一
个实例来讲解如何操作。
文本转换为路径练习
1）从工具箱中选择“文本”工具，在属性面板中设置文字的
属性，并在画布中输入文本。
2）选定文本 → 单击“文本”菜单 → 选“转换为路径”命令，
将文本转换为路径。
3）单击“修改 → 取消组合”命令，可以将其分解成多个路径。
4）从工具箱中选择“油漆桶”工具对每个形状进行填充。
5）从工具箱中选择“指针”工具，把三个形状同时选中，然
后单击“修改 → 组合”命令，将它们组合为一个整体（看作一个对
象）。
返回目录
32
3.5 文本操作 — 文本变形
工具箱中有一个工具组, 如图所示, 可以利用这几个工具对文本
进行变形 。
文本变形练习
1）选定文本。以图 3-75作为要变形的文本，对文本进行变
形。
2）从工具箱中选择“倾斜”工具，这时文本进入编辑状态，
在文本框周围有句柄。
3）拖动句柄可以拖出不同的变形，松开鼠标后会看到变形
效果。
变形工具箱
返回目录
33
3.6 按钮制作 — 元件
在 Fireworks MX中按钮是作为“元件”出现的。所有的元件都会出
现在“库”面版中，选中某个元件后，会在面板中显示其预览图，要使用
已有的元件，可以用鼠标将元件从面板中拖出到画布上，被拖到画布上的
元件叫做元件的“实例”。“库”面板中的按钮元件是特定于文档的，在
新打开的文档中面板是空的。元件有三种类型：图形、动画和按钮。
1．按钮元件的四种状态
按钮元件有四种状态，分别是：弹起、滑过、按下、按下时滑过。
“弹起”状态：按钮的默认外观或按钮静止时的外观。
“滑过”状态：当指针滑过按钮时该按钮的外观。此状态提醒用户
单击鼠标时很可能会引发一个动作。
“按下”状态：表示单击时的按钮外观。按钮的“凹下”图像通常
用于表示按钮已按下。此按钮状态通常在多按钮导航栏上表示当前网页。
“按下时滑过” 状态：表示指针滑过处于“按下”状态按钮时按钮
的外观。此按钮状态通常表明指针正位于多按钮导航栏中当前网页的按钮
上方。
返回目录
34
3.6 按钮制作 — 元件
2．新建元件
新建元件有以下几种方法：
（ 1）在画布空白区域右击鼠标 → 在弹出的快捷菜单中选“插入新元
件”；
（ 2）单击“库”面板右上角三角符号 → 在弹出的菜单中选“新建元
件”；
（ 3）单击“编辑 → 插入 → 新建元件”命令，可以新建一个元件。
3．设置元件属性
执行上述三种操作中的任一种，都会弹出如图所示的对话框。在“名
称”框中给元件起名，在“类型”框中选择新建元件的类型，最后单击
“确定”按钮。
元件属性对话框
返回目录
35
3.7 创建 GIF动画
动画图形可以为网站增加活泼生动、复杂多变的外观。上网时经常看
到一些横幅广告和卡通动画，这些效果在 Fireworks MX2004 中就可以实
现。动画原理与电影原理类似，由一系列静态图像（每幅称为一帧）合并
而成，图像按顺序播放。在 Fireworks 中制作动画的一种方法是通过创建
元件并不停地改变它们的属性来产生运动的视觉。一个元件就像是一个演
员，其动作由制作者设计。每个元件的动作都储存在一个帧中，当按顺序
播放所有帧时就成了动画。
“补间”是一个传统的动画术语，它描述了这样的过程：主要的动画
制作者只绘制关键帧（包含重大变化的帧），而助手则绘制关键帧之间的
帧。在 Fireworks 中，补间混合了同一元件的两个或更多的实例，使用插
值属性创建中间的实例。利用计算机制作动画仅需要制作动画的起始帧和
结束帧，余下的工作由计算机完成，即采用“补间”技术。“补间”对于
在画布上制作复杂的移动对象、动态效果、以及在动画的每一帧都改变的
对象很有帮助。
返回目录
36
3.7 创建 GIF动画 — 动画实例
淡入淡出动画效果
1）新建一个文档，设置其背景颜色为,9933CC”。
2）从工具箱中选择“文本”工具 → 在属性面板中设置字体为“华文彩
云”，字号为 56，颜色为红色。
3）在画布上输入文字“淡入淡出”。
4）用“指针”工具选取文本，然后单击“修改 → 元件 → 转换为元件”命
令，会出现,元件属性”对话框,在对话框中设置类型为“图形”。
5）执行两次“编辑 → 克隆”命令，将当前实例克隆两次。
6）在“层”面板中双击某个图形元件的名称为其改名，用此方法分别将
各层命名为 1,2和 3。
7）单击,1”层使其当前 → 属性面板设置实例不透明度设为 0。
8）,3”层当前，在属性面板中将元件实例不透明度设为 0。
9）按住 Shift键，把“层”面板中三个图层全部选中，双击“帧”面板中
“帧 1”右侧的数字，将延迟时间设为 30。
10）单击“修改 → 元件 → 补间实例”命令，出现“补间实例”对话框，
“步骤”框中填 10→ 选中“分散到帧”复选框 → 单击“确定”按钮。
11)单击文档窗口下方的按钮，就可以看到文字淡入淡出的效果。
返回目录
37
本 章 小 结
? Fireworks MX基础
Fireworks MX由 Macromedia公司推出, 是目前最优秀的 Web图
像制作软件, 它将矢量图和位图编辑工具相结合, 并赋予图像动态
特性 。 Fireworks MX工作窗口主要由标题栏, 菜单栏, 工具栏, 工
具箱, 工作区, 属性面板, 面板组和状态栏等部分组成 。
? Fireworks MX基本操作
– 在 Fireworks MX中绘制图形要使用画布作为创作平台 。 创建
画布后可改变画布大小也可更改画布属性 。
– Fireworks MX的辅助工具有网格, 标尺和辅助线等 。
– 位图是由被称为象素的彩色小正方形组成的图形, 这些小正
方形就像马赛克中的瓷片那样拼合在一起形成图形 。 矢量图
由称为矢量的线条和曲线描述图形, 用算术方法生成 。
返回目录
38
本 章 小 结
? 位图操作
–, 工具箱, 面板的, 位图, 部分包含位图选择和编辑工具 。
– 蒙版效果一般是由两个已成组的对象组成的, 称为蒙版组 。
组中位于顶部的对象 （ 蒙版 ） 会对底部的对象产生一个剪
切的效果, 即位于蒙版底部的对象被留下, 其余部分被
,剪切, 掉 （ 实际上是遮盖 ） 。
– 利用, 命令 → 创意 → 添加图片框, 命令可以给位图添加各
种各样的边框 。
– 可以用滤镜来帮助改善位图的颜色和色调, 从而调整图像
的对比度, 亮度, 色调范围, 色相和饱和度等 。
返回目录
39
本 章 小 结
? 矢量图操作
– 常用矢量绘图工具 支线, 钢笔, 自动形状工具组, 自由变
形工具组 和刀子工具 。
– 单击, 修改 → 组合路径 → 结合 （ 或拆分 ）, 命令, 可拆分
或组合路径 。
? 文本操作
– 可以在文档的任何位置输入文本, 然后对文本进行处理 。
– 为了使文本能按所画路径进行排列, 可采用将文本附加到
路径的方法 。
– 可以将文本附加到路径, 也可以将文本转换为路径 。
– 工具箱中有一个工具组, 可以利用这几个工具对文本进行
变形 。
返回目录
40
本 章 小 结
? 按钮制作
– 元件有三种类型：图形, 动画和按钮 。
– 按钮元件有四种状态, 分别是：弹起, 滑过, 按下, 按下
时滑过 。
? 创建 GIF动画
– 在 Fireworks 中制作动画的一种方法是通过创建元件并不
停地改变它们的属性来产生运动的视觉 。
–, 补间, 是一个传统的动画术语, 它描述了这样的过程：
主要的动画制作者只绘制关键帧 （ 包含重大变化的帧 ）,
而助手则绘制关键帧之间的帧 。 利用计算机制作动画仅需
要制作动画的起始帧和结束帧, 余下的工作由计算机完成,
即采用, 补间, 技术 。
返回目录
第 3章 Fireworks MX 制作网页图形
学习目标
? 使用各种面板。
? 熟悉矢量工具，能制作和编辑矢量图形。
? 熟悉位图工具，能制作和编辑位图图形。
? 能制作按钮，创建简单动画。
2
第 3章 Fireworks MX 制作网页图形
教学内容
3.1 Fireworks MX基础
3.2 Fireworks MX基本操作
3.3 位图操作
3.4 矢量图操作
3.5 文本操作
3.6 按钮制作
3.7 创建 GIF动画
本章小结
返回总目录
3
3.1 Fireworks MX 基础
Fireworks MX由 Macromedia公司推出，
是目前最优秀的 Web图像制作软件，它将矢
量图和位图编辑工具相结合，并赋予图像动
态特性。可将文档另存为 JPEG, GIF 或其
他格式的文件以便在网页中使用。还能导出
与 Photoshop等软件类型匹配的文档。
返回目录
4
3.1 Fireworks MX 基础 — 工作窗口
主要由标题栏、菜
单栏、工具栏、工
具箱、工作区、属
性面板、面板组和
状态栏等部分组成。
其中菜单栏包含创
建与编辑图片的全
部命令，工具栏包
含菜单中常用命令
的按钮，状态栏显
示当前文档的主要
信息。
工作区,位于工具箱右边，在工作区中显示和编辑图像。
属性面板,当选中工具箱中的某个选项时，可以在属性面板上进行相
应属性设置。 面板组,位于工作区右边，面板是非常重要的辅助作图
工具，按各自功能分组，每组有若干个面板。
Fire
wo
rks
MX
工
作
窗
口
返回目录
5
3.1 Fireworks MX 基础 — 常用面板简介
1,混合器面板,用于创建笔尖颜色和填充颜色 。 创建颜色可以单击
颜色按钮, 在弹出的调色板选择某个颜色方框, 或
在 R,G,B框中输入相应红, 绿, 蓝的数值, 还可
以在面板底部的选色盘中单击所需颜色 。 单击, 混色
器, 面板的按钮, 可更改的颜色模式 。
2,样本面板,显示当前调色板, 单击面板中的色样可以快速设置图
像颜色 。, 样本, 面板与, 混合器, 面板在同一个面
板组 。
3,帧面板,主要用于制作动画效果 。 单击, 帧, 面板右上角的按钮,
从
弹出的菜单中对帧进行操作 。
返回目录
6
3.1 Fireworks MX 基础 — 常用面板简介
4,历史纪录面板,用来记录用户对图像所作的改动 。 用户的每一步
操作都记录在该面板中, 以便用户恢复图像或恢复到某一指定操作 。
按钮是一个撤销标记, 拖动该标记可以撤销或恢复最近的操作 。 利
用, 历史纪录, 面板还可以创建批处理命令 。 方法为：按下 Shift键
在该面板中选定多个历史动作 → 单击该面板右下角的, 将步骤保存
为, 按钮 → 在对话框的, 名称, 文本框中输入命令名 → 单击, 确
定, 按钮 。 这个名称就会出现在, 命令, 菜单的底部, 单击它可执
行一系列动作 。
5,行为面板,用于管理行为 。 行为决定热点和切片对鼠标移动所做
出的响应 。
6,信息面板,提供所选对象的尺寸和画布指针的精确坐标 。
返回目录
7
3.1 Fireworks MX 基础 — 常用面板简介
7,样式面板,提供了许多可直接用于图形或者文本的图案样式 。 选
定图形或文本后单击, 样式, 面板中的样式图标, 就可以自动应用
选择的样式 。
8,URL面板,用于添加, 删除对象的 URL地址 。 当鼠标指向图像文
件中指定了 URL地址的热点区域时, 该地址会出现在面板的当前
URL列表中 。
9,库面板,包含图形文件, 按钮文件和动画文件 。 打开, 库, 面板
将元件从, 库, 面板拖到文档中, 便生成了该元件的一个实例, 修
改元件便相当于修改了该元件的全部实例 。
10,优化面板,用于管理控制对象大小和文件类型的设置, 以及处理
要导出的文件或切片的调色板 。
返回目录
8
3.2 Fireworks MX 基本操作 — 画布基本操作
1,创建画布
单击, 文件 → 新建, 命令, 出现
如图所示的, 新建文档, 对话框, 再
该对话框中对画布大小和画布颜色进
行设置 。
2,改变画布尺寸
单击, 修改 → 画布 → 画布大小,
命令, 会出现, 画布大小, 对话框,
在, 宽度, 和, 高度, 文本框中输入
新的数值就可以重新指定画布的大小,
重新指定大小后画布会相应扩展或缩
小 。, 锚
新建文档对话框
定”给出了扩展或缩小新画布时的参考方向，默认以中心为参考。
返回目录
9
3.2 Fireworks MX 基本操作 — 画布基本操作
3．更改画布属性
（ 1）裁剪画布
当画布大小比画布上的对象大时，可以通过修剪画布来调整画布
的大小，使其刚好适合对象所占据的空间大小。具体操作为“修改 →
画
布 → 修剪画布”，就可以将多余的画布裁剪掉，使剩余画布与画布内
对
象的大小一致。
如果对象的内容有一部分处于画布的可视范围之外，通过“修剪
画
布”命令会将这部分内容裁剪掉；要想调整画布使其容纳所有的图像
对
象，可以通过“修改 → 画布 → 符合画布”命令。
（ 2）旋转画布
如果需要将整个画布连同上面的所有对象旋转特定的角度，则可
以选择“修改 → 画布 → 旋转 180度 /旋转 90度（顺时针） /旋转 90度（逆
时针）”来达到目的。
返回目录
10
3.2 Fireworks MX 基本操作 — 辅助工具的使用
1．网格
网格是一种设计工具，在画布上显示为由横线和竖线构成的网状体系，
只在工作环境中可见，图像输出时不可见。利用网格可以给对象进行精确定
位。可通过“视图 → 网格 → 显示网格”命令显示和隐藏网格。
2．标尺
要测量、组织和计划作品的布局可通过标尺来实现。 Fireworks中的标
尺以象素为单位。显示和隐藏标尺，可通过“视图 → 标尺”命令来实现。
3．辅助线
辅助线是从标尺拖到文档画布上的线条，可以帮助精确对齐目标。要显
示辅助线，首先要显示标尺，执行“视图 → 辅助线 → 显示辅助线”命令，然
后
在水平标尺或垂直标尺上按住鼠标向文档视图中拖动，就可以产生一条辅助
线。 要锁定辅助线，不允许随意调整辅助线的位置，可以执行“视图
→ 辅助线 → 锁定辅助线”命令。
返回目录
11
3.2 Fireworks MX 基本操作 — 位图与矢量图
位图 是由被称为象素的彩色小正方形组成的图形,
这些小正方形就像马赛克中的瓷片那样拼合在一起形成
图形 。 编辑位图图形时修改的是像素, 而不是线条和曲
线 。 位图图形与分辨率有关 。
矢量图 由称为矢量的线条和曲线描述图形, 用算术
方法生成 。 它的基本元素是节点和路径, 一个路径至少
有两个节点, 节点上包含的控制点负责相邻路径的形状
和长度 。 编辑矢量图形时, 修改的是描述其形状的线条
和曲线的属性 。 矢量图形与分辨率无关 。
返回目录
12
3.3 位图操作 — 常用位图绘图工具
“工具箱, 面板的, 位
图,
部分包含位图选择和编辑
工具 。 如图所示 。 要编辑
文档中的位图像素, 可以
从, 位图, 部分中选择工
具 。
位图工具箱中有的工具
右下方带有黑色小三角,
说明这些工具可以扩展 。
位图工具箱
返回目录
13
3.3 位图操作 — 常用位图绘图工具
1．选择工具
选取位图是位图处理中最基本的操作，它能精确定
位图像中像素的编辑范围。
（ 1）,在图像中选取一个矩形区域。
（ 2）,在图像中选择一个椭圆形区域。
（ 3） 魔术棒工具：在图像中选择一个颜色相似的区
域。颜色匹配范围由属性面板中的“容差”选项来
确定。
（ 4）,在图像中选择一个自由形状的区域。
（ 5）,在图像中选择一个直边的自由形状区
域。
返回目录
14
3.3 位图操作 — 常用位图绘图工具
2,刷子工具
利用“刷子”工具可以创建比较柔和的线条。其对应的属性面板如
图所示。
刷子工具的属性面板
返回目录
15
3.3 位图操作 — 常用位图绘图工具
3,铅笔工具
使用铅笔工具可以绘制任意曲线和直线。按下
Shift键拖动，画出的线为水平、垂直或倾斜线。
4,橡皮擦工具
该工具是用来擦除位图的。 选择工具箱中的橡
皮擦工具。在对应的属性面板中选择橡皮擦形状（圆
形或矩形），设置橡皮擦的大小、不透明度以及边缘
柔化度。在图像中拖动就可擦除处。
5,滴管工具
使用滴管工具可以从图像中选取颜色来指定新的
笔触颜色或填充色，然后把它应用到其他图像中。
返回目录
16
3.3 位图操作 — 常用位图绘图工具
6,填充工具
Fireworks中包括 2种填充工具,和 。使用
“油漆桶”工具可以将位图图像的颜色改为“填充颜色”框中的当前色。
用“渐变”工具可以将位图图像的颜色变为渐变颜色。
7,橡皮图章工具
“橡皮图章”工具复制或克隆位图图像的部分区域，将其压印到
图像中的其他区域。修复有划痕的照片或去除图像上的灰尘时，克隆像
素很有用。可以复制照片的某一像素区域，然后用克隆的区域替代有划
痕或灰尘的部分。
8,模糊与 锐化工具
模糊工具和锐化工具影响像素的焦点。模糊工具主要通过柔化突出
的色彩与柔和边界以使图像的色彩过渡平滑。锐化工具与模糊工具相反，
通过增大图像相邻像素之间的色彩反差以使图像的边界更加清晰，对于
修复扫描问题或聚焦不准的照片很有用。选择工具后设置“属性” 面
板，然后在要锐化或模糊的像素上拖动工具即可。
返回目录
17
3.3 位图操作 — 位图蒙版
蒙版效果一般是由两个已成组的对象组成的，称为蒙版组。
组中位于顶部的对象（蒙版）会对底部的对象产生一个剪切的效
果，即位于蒙版底部的对象被留下，其余部分被“剪切”掉（实际
上
是遮盖）。
位图蒙版练习
1,打开一幅位图图形。
2,绘制两个椭圆，使它们相互重叠，用作蒙版的对象。
3,按住 Shift键将两个椭圆都选中。
4,单击“编辑 →,剪切”命令，剪切用作蒙版的对象。
5,用选择工具选取位图图像。
6.单击“编辑 → 粘贴为蒙版”命令，或者单击“修改 → 蒙板 →
粘贴
为蒙版”命令，创建出蒙板效果。
返回目录
18
3.3 位图操作 — 给位图加边框
利用, 命令 → 创意 → 添加图
片
框, 命令可以给位图添加各种各
样的边框 。
给图片加边框练习
1.打开一幅位图图片。
2.单击“命令 → 创意 → 添加
图
片框”命令，出现对话框。如图
所示。
3.在“添加图片框”中选择
一种
添加图片框对话框
边框图案，设置框的大小，单击“确定”。现在，图片已被加上
了边框,
返回目录
19
3.3 位图操作 — 调整位图颜色与色调
1．使用“亮度 /对比度”调整图像颜色
亮度 /对比度指颜色的相对明暗程度，通常用从 0%
（黑）到 100%（白）的百分比来度量，作用于整个图
像中所有像素，对单个通道无效。
方法如下,
（ 1）打开一个位图图像，用“滤镜 → 调整颜色 → 亮
度 / 对比度”命令打开“亮度 / 对比度”对话框。
（ 2）拖动滑块分别调整亮度和对比度的设置，值的
范围从 –100 到 100，单击“确定”可看到调整后的效
果。
返回目录
20
3.3 位图操作 — 调整位图颜色与色调
2．使用“色阶”调整图像颜色
色阶用于描绘图像像素亮度的程度,方法如下：
（ 1）打开一个位图图像，单击“滤镜 → 调整颜色 → 色阶”命令
打
开色阶对话框。色阶对话框如图所示。
（ 2）在色阶对话框中进行设置，单击“确定”可看到调整后的
效
果。
色阶对话框
返回目录
21
3.3 位图操作 — 调整位图颜色与色调
3．使用“曲线”调整图像颜色
“曲线”与“色阶”一样，也用来调整图像的色调范围，是
色彩
调整命令中最有效的方法，可以在不影响其他颜色的情况下沿色调
范围调整任何颜色，使图像效果发生很大变化。可以用“滤镜 → 调
整颜色 → 曲线”命令打开“曲线”对话框，对话框中的水平线表
示像
素原来的亮度值（输入色阶），垂直线表示新的亮度值（输出色
阶），对于 RGB图像，暗调位于左边。 方法如下：
（ 1）打开一个位图图像，打开“曲线”对话框。
（ 2）可以在“输入”和“输出”框中直接输入数值调节亮度，
也可
在曲线上单击后拖动，“输入”和“输出”框中的数值会随着改变。
如果
要删除某个点，只需将该点拖到网格外部即可。单击确定可看到调
整后的效果。
返回目录
22
3.3 位图操作 — 位图蒙版
4．使用“色相 /饱和度”调整图像颜色
“色相 /饱和度”是简单调色工具，多用来做各种添
加
颜色的琐碎工作。
方法如下：
（ 1）打开一个位图图像。
（ 2）用“滤镜 → 调整颜色 → 色相 / 饱和度”命令打
开
“色相 /饱和度”对话框。
（ 3）在“色相 /饱和度”对话框中进行设置，单击确
定
可看到调整后的效果。
返回目录
23
3.4 矢量图操作 — 常用矢量绘图工具
矢量工具箱如图所示。
1．直线工具
使用“直线”工具可以绘制直
线
路径。
2．钢笔工具
矢量工具箱
使用“钢笔工具”可以生成直线或曲线路径。
若想生成连续的直线路径，只须在画布中不同的地
方单击即可。若想画贝塞尔曲线，可在使用钢笔工
具单击的同时拖动鼠标。
返回目录
24
3.4 矢量图操作 — 常用矢量绘图工具
3．自动形状工具组
自动形状工具组如图所示，在画布上拖动鼠标，松
开后即绘出形状，拖动形状的控制点可调整绘制出的形
状。
自动形状工具组
返回目录
25
3.4 矢量图操作 — 常用矢量绘图工具
4．自由变形工具组
利用“自由边形”工具组可以直接对路径进行编辑来改变对象的形状，
可以弯曲或变形路径、扭曲路径等。
（ 1）“自由变形”工具 的使用
要想直接对矢量对象进行弯曲和变形，而不是对各个点执行操作，可以
利用“自由变形”工具 来实现。具体方法如下：
新建一个画布 → 用钢笔工具画一条直线 → 从工具箱中选择“自由变形”
工具 → 指针接近直线路径（鼠标指针变为） → 按下鼠标左键拖动直线路径使
路径拉伸。当指针变为指针带圆圈的形状时 → 按下鼠标左键拖动可使路径变
形。
（ 2）“更改区域形状”工具 的使用
可以使用“更改区域形状”工具对变形区域指针外圆里的所有选定路径
的区域进行拉伸，指针的内圆是工具的全强度边界。内外圆之间的区域以低
于全强度的强度更改路径形状。指针外圆确定指针引力拉伸。
为对源矢量图形进行拉伸的步骤如下：
返回目录
26
3.4 矢量图操作 — 常用矢量绘图工具
从工具箱中选择“更改区域形状”工具 → 在对应属性面板中设置指针
大小
和强度 → 按下鼠标左键跨越路径拖动可使路径扭曲。
（ 3）路径洗刷工具
“路径洗刷”工具分为“添加”和“去除”两种。可以使用“路径洗
刷”工具来更
改路径的外观。使用不断变化的压力或速度，可以更改路径的笔触属性。
使用“编辑笔触”对话框的“敏感度”选项卡指定这些属性中的哪个属性 受到“路
径洗刷”工具的影响。还可指定影响这些属性的压力和速度的数量。“路
径洗
刷”工具只能用在具有压力感应刷子描边的路径上。
5．刀子工具
像真正的刀子一样，“刀子”工具能将一个路径切成两个或多个路
径。具体方法是：
（ 1）用“矢量路径”工具，画矢量图形。
（ 2）从工具箱中选择“刀子”工具。
（ 3）在想要切断的地方单击，或跨越路径拖动鼠标，就可以切断
路径。
返回目录
27
3.4 矢量图操作 — 路径的组合
路径能被拆分也能被组合。要将两段路径接起来，方法为：
1．从工具箱中选择“指针”工具，按下 Shift键选择两条路径。
2．单击“修改 → 组合路径 → 结合”命令，可把两段路径接起
来。
如果两条路径中间有距离，那么结合起来之后，从外观上看并没有
改变，但是当移动时，会看到两条路径一块移动。
3．要把这条路径再拆开，单击“修改 → 组合路径 → 拆分”命
令。
4．在“修改 → 组合路径”的下拉菜单中还有联合、交集、打
孔和
裁切命令。
分别对两个不规则圆的路径进行“联合”、“交集”、“打孔”
和“裁
切”后看效果图。根据结果图，可以比较一下这几个命令的不同之
处。
返回目录
28
3.5 文本操作 — 文本的输入与编辑
文本是图形设计中非常重要的元素，它被作为一个对象整体保
存和控制。可以在文档任何位置输入文本，然后对文本进行处理。
1,输入文本
方法为：
（ 1）从工具箱中选择“文本”工具 。
（ 2）单击画布上要输入文本的地方会建立一个自动调整大小的
文本框。也可以在画布上拖动鼠标来绘制一个固定宽度的文本框，
这样输入文本会使文本块的宽度固定，但高度会随着文本内容的增
多而增加。
（ 3）在文本框中输入文本。在输入过程中按回车键可输入分段
符。单击文本框的外部或者切换工具就可以结束输入。
返回目录
29
3.5 文本操作 — 文本的输入与编辑
2,编辑文本
移动文本具体方法为：
（ 1）从工具箱中选择“指针”工具。
（ 2）用鼠标单击文本，这时文本框边线为蓝色，按下鼠标左键
可拖动文本到所需的位置，也可在将鼠标移到文本附近，当文本框
变为红色时按下鼠标左键拖动。要调整文本的属性可在“属性”面
板
中进行。可通过在同一选项中设置不同的值来观察文本有什么变
化。属性面板如图所示。
文本属性面板
返回目录
30
3.5 文本操作 — 将 文本附加与路径
为了使文本能按所画路径进行排列, 可采用将文本附加到路径的方法 。
下面以具体实例说明如何将文本附加于路径 。
波浪字
1）创建一个新文档。
2）从工具箱中选择“直线”工具 → 在画布上画一条直线。
3）从工具箱中选择“钢笔”工具 → 在直线的任意位置单击添加一个点
→
拖动该点绘制出一条曲线路径 。
4）在工具箱中选择“文本”工具。
5）在“属性”面板中设置文本的字体为“华文彩云” → 设置字号，单
击“两
端对齐”按钮 → 在画布上输入文本“像雾像雨又像风”。
6）单击“窗口 → 样式”命令 → 在出现的“样式”面板中选,Style 26” 。
7）选择“指针”工具 → 按下 Shift键的同时选中文本和文本要附加到的
路
径。
8）单击“文本”菜单 → 选“方向”命令 → 在级联菜单中选择一种文本
方向。
至此，得到文本附加于路径的效果图。
返回目录
31
3.5 文本操作 — 将 文本转换为路径
可以将文本附加到路径，也可以将文本转换为路径。将文本转
换为路径之后，就可以像编辑矢量一样编辑文本的形状。下面用一
个实例来讲解如何操作。
文本转换为路径练习
1）从工具箱中选择“文本”工具，在属性面板中设置文字的
属性，并在画布中输入文本。
2）选定文本 → 单击“文本”菜单 → 选“转换为路径”命令，
将文本转换为路径。
3）单击“修改 → 取消组合”命令，可以将其分解成多个路径。
4）从工具箱中选择“油漆桶”工具对每个形状进行填充。
5）从工具箱中选择“指针”工具，把三个形状同时选中，然
后单击“修改 → 组合”命令，将它们组合为一个整体（看作一个对
象）。
返回目录
32
3.5 文本操作 — 文本变形
工具箱中有一个工具组, 如图所示, 可以利用这几个工具对文本
进行变形 。
文本变形练习
1）选定文本。以图 3-75作为要变形的文本，对文本进行变
形。
2）从工具箱中选择“倾斜”工具，这时文本进入编辑状态，
在文本框周围有句柄。
3）拖动句柄可以拖出不同的变形，松开鼠标后会看到变形
效果。
变形工具箱
返回目录
33
3.6 按钮制作 — 元件
在 Fireworks MX中按钮是作为“元件”出现的。所有的元件都会出
现在“库”面版中，选中某个元件后，会在面板中显示其预览图，要使用
已有的元件，可以用鼠标将元件从面板中拖出到画布上，被拖到画布上的
元件叫做元件的“实例”。“库”面板中的按钮元件是特定于文档的，在
新打开的文档中面板是空的。元件有三种类型：图形、动画和按钮。
1．按钮元件的四种状态
按钮元件有四种状态，分别是：弹起、滑过、按下、按下时滑过。
“弹起”状态：按钮的默认外观或按钮静止时的外观。
“滑过”状态：当指针滑过按钮时该按钮的外观。此状态提醒用户
单击鼠标时很可能会引发一个动作。
“按下”状态：表示单击时的按钮外观。按钮的“凹下”图像通常
用于表示按钮已按下。此按钮状态通常在多按钮导航栏上表示当前网页。
“按下时滑过” 状态：表示指针滑过处于“按下”状态按钮时按钮
的外观。此按钮状态通常表明指针正位于多按钮导航栏中当前网页的按钮
上方。
返回目录
34
3.6 按钮制作 — 元件
2．新建元件
新建元件有以下几种方法：
（ 1）在画布空白区域右击鼠标 → 在弹出的快捷菜单中选“插入新元
件”；
（ 2）单击“库”面板右上角三角符号 → 在弹出的菜单中选“新建元
件”；
（ 3）单击“编辑 → 插入 → 新建元件”命令，可以新建一个元件。
3．设置元件属性
执行上述三种操作中的任一种，都会弹出如图所示的对话框。在“名
称”框中给元件起名，在“类型”框中选择新建元件的类型，最后单击
“确定”按钮。
元件属性对话框
返回目录
35
3.7 创建 GIF动画
动画图形可以为网站增加活泼生动、复杂多变的外观。上网时经常看
到一些横幅广告和卡通动画，这些效果在 Fireworks MX2004 中就可以实
现。动画原理与电影原理类似，由一系列静态图像（每幅称为一帧）合并
而成，图像按顺序播放。在 Fireworks 中制作动画的一种方法是通过创建
元件并不停地改变它们的属性来产生运动的视觉。一个元件就像是一个演
员，其动作由制作者设计。每个元件的动作都储存在一个帧中，当按顺序
播放所有帧时就成了动画。
“补间”是一个传统的动画术语，它描述了这样的过程：主要的动画
制作者只绘制关键帧（包含重大变化的帧），而助手则绘制关键帧之间的
帧。在 Fireworks 中，补间混合了同一元件的两个或更多的实例，使用插
值属性创建中间的实例。利用计算机制作动画仅需要制作动画的起始帧和
结束帧，余下的工作由计算机完成，即采用“补间”技术。“补间”对于
在画布上制作复杂的移动对象、动态效果、以及在动画的每一帧都改变的
对象很有帮助。
返回目录
36
3.7 创建 GIF动画 — 动画实例
淡入淡出动画效果
1）新建一个文档，设置其背景颜色为,9933CC”。
2）从工具箱中选择“文本”工具 → 在属性面板中设置字体为“华文彩
云”，字号为 56，颜色为红色。
3）在画布上输入文字“淡入淡出”。
4）用“指针”工具选取文本，然后单击“修改 → 元件 → 转换为元件”命
令，会出现,元件属性”对话框,在对话框中设置类型为“图形”。
5）执行两次“编辑 → 克隆”命令，将当前实例克隆两次。
6）在“层”面板中双击某个图形元件的名称为其改名，用此方法分别将
各层命名为 1,2和 3。
7）单击,1”层使其当前 → 属性面板设置实例不透明度设为 0。
8）,3”层当前，在属性面板中将元件实例不透明度设为 0。
9）按住 Shift键，把“层”面板中三个图层全部选中，双击“帧”面板中
“帧 1”右侧的数字，将延迟时间设为 30。
10）单击“修改 → 元件 → 补间实例”命令，出现“补间实例”对话框，
“步骤”框中填 10→ 选中“分散到帧”复选框 → 单击“确定”按钮。
11)单击文档窗口下方的按钮，就可以看到文字淡入淡出的效果。
返回目录
37
本 章 小 结
? Fireworks MX基础
Fireworks MX由 Macromedia公司推出, 是目前最优秀的 Web图
像制作软件, 它将矢量图和位图编辑工具相结合, 并赋予图像动态
特性 。 Fireworks MX工作窗口主要由标题栏, 菜单栏, 工具栏, 工
具箱, 工作区, 属性面板, 面板组和状态栏等部分组成 。
? Fireworks MX基本操作
– 在 Fireworks MX中绘制图形要使用画布作为创作平台 。 创建
画布后可改变画布大小也可更改画布属性 。
– Fireworks MX的辅助工具有网格, 标尺和辅助线等 。
– 位图是由被称为象素的彩色小正方形组成的图形, 这些小正
方形就像马赛克中的瓷片那样拼合在一起形成图形 。 矢量图
由称为矢量的线条和曲线描述图形, 用算术方法生成 。
返回目录
38
本 章 小 结
? 位图操作
–, 工具箱, 面板的, 位图, 部分包含位图选择和编辑工具 。
– 蒙版效果一般是由两个已成组的对象组成的, 称为蒙版组 。
组中位于顶部的对象 （ 蒙版 ） 会对底部的对象产生一个剪
切的效果, 即位于蒙版底部的对象被留下, 其余部分被
,剪切, 掉 （ 实际上是遮盖 ） 。
– 利用, 命令 → 创意 → 添加图片框, 命令可以给位图添加各
种各样的边框 。
– 可以用滤镜来帮助改善位图的颜色和色调, 从而调整图像
的对比度, 亮度, 色调范围, 色相和饱和度等 。
返回目录
39
本 章 小 结
? 矢量图操作
– 常用矢量绘图工具 支线, 钢笔, 自动形状工具组, 自由变
形工具组 和刀子工具 。
– 单击, 修改 → 组合路径 → 结合 （ 或拆分 ）, 命令, 可拆分
或组合路径 。
? 文本操作
– 可以在文档的任何位置输入文本, 然后对文本进行处理 。
– 为了使文本能按所画路径进行排列, 可采用将文本附加到
路径的方法 。
– 可以将文本附加到路径, 也可以将文本转换为路径 。
– 工具箱中有一个工具组, 可以利用这几个工具对文本进行
变形 。
返回目录
40
本 章 小 结
? 按钮制作
– 元件有三种类型：图形, 动画和按钮 。
– 按钮元件有四种状态, 分别是：弹起, 滑过, 按下, 按下
时滑过 。
? 创建 GIF动画
– 在 Fireworks 中制作动画的一种方法是通过创建元件并不
停地改变它们的属性来产生运动的视觉 。
–, 补间, 是一个传统的动画术语, 它描述了这样的过程：
主要的动画制作者只绘制关键帧 （ 包含重大变化的帧 ）,
而助手则绘制关键帧之间的帧 。 利用计算机制作动画仅需
要制作动画的起始帧和结束帧, 余下的工作由计算机完成,
即采用, 补间, 技术 。
返回目录
