第 4章 图像处理软件 Fireworks
《网页设计与制作》
网页设计与制作 2
? 4.1 Fireworks MX简介
? 4.2 Fireworks MX文档的基本操作
? 4.3 矢量图和位图
? 4.4 选择和编辑对象
? 4.5 颜色和填充
? 4.6 使用文本
? 4.7 特殊效果
? 4.8 GIF动画
? 4.9 图像的切片与导出
网页设计与制作 3
4.1 Fireworks MX简介
Fireworks MX是 Macromedia 公司推出的最
新专业化的 Web图像处理软件，它在原有版本的
基础上功能更为增强，用户界面更为友好。
使用 Fireworks,您可以在一个专业化的
环境中创建和编辑网页图形、对其进行动画处理、
添加高级交互功能以及优化图像。在 Fireworks
中，可以在单个应用程序中创建和编辑位图和矢
量两种图形。一切都可以随时进行编辑。除此之
外，工作流可以实现自动化，从而满足耗费时间
的更新和更改要求
网页设计与制作 4
Fireworks MX的 功能特点
? 良好的的用户界面
? 无模式位图和矢量编辑
? 切片表布局控件
? 实例级按钮元件编辑
? 快速导出
? 开放的工作流程特性
网页设计与制作 5
Fireworks MX工作界面
网页设计与制作 6
4.2 Fireworks MX文档的基本操作
? 新建与导入文档
? 文档的保存
? 浏览文档
? 设置文档属性
网页设计与制作 7
新建与导入文档
?, 文件, 菜单下的, 新建,
? 通过剪贴板创建文档
? 打开或导入文档
浏览文档
使用标尺、网格线、引导线等
网页设计与制作 9
设置文档属性
? 图像大小
– 选择, 修改 /画布 /图象大小,
? 画布大小
– 选择, 修改 /画布 /画布大小,
? 画布颜色
– 选择, 修改 /画布 /画布颜色 …,
? 旋转
– 选择, 修改 /画布 /旋转 ……,
网页设计与制作 10
4.3 矢量图和位图
? 矢量图和位图的概念
? 创建位图对象
? 绘制矢量对象
网页设计与制作 11
位图
局部放大时会产生较为严重的失真
网页设计与制作 12
矢量图
矢量图是以点和路径构成的，矢量图所记录的是
图像中每一个位置的坐标以及这些坐标之间的相互关
系。一般而言，对矢量图进行任意尺度的放大时都不
会有失真现象。
网页设计与制作 13
创建位图对象
? 创建新位图对象
– 使用 Fireworks MX的位图绘制和绘画工具，即可创
建位图图形对象。
? 创建空位图对象
– 单击, 层, 面板中的, 新建位图图象, 按钮，或者
选择, 编辑 /插入 /空位图, 菜单命令
? 用剪切或复制的方法
? 矢量对象转换成位图
– 选中矢量对象后，使用, 修改 /平面化所选, 菜单命
令即可转化成位图图像
网页设计与制作 14
绘制矢量对象
,工具, 面板的, 矢量, 部分的工具
即是对矢量进行编辑操作的工具，默认情
况下有, 线条,,, 钢笔,,, 矩形,,
,文本,,, 自由变形,,, 刀子, 工具
等。
网页设计与制作 15
4.4 选择和编辑对象
在 Macromedia Fireworks MX 中工作时，
将需要处理矢量对象、位图对象、文本块、
切片和热点以及象素区域。使用选择工具
和变形工具，可以移动、复制、删除、旋
转、缩放或倾斜对象。在具有多个对象的
文档中，可以通过对对象执行堆叠、组合
和对齐操作来组织它们。
网页设计与制作 16
选择对象
在画布上对任何对象执行任何操作之前，
必须首先选择该对象。
? 当“层”面板已打开并且层处于扩展状态时，
在该面板中单击一个对象即可选中该对象。
?, 工具, 面板, 选择, 部分中 有, 指针工具,,
,选择后方对象工具, 和, 部分选定工具, 可
进行选择对象。
? 选择, 选择, 菜单下的, 选择全部,,可将活
动文档窗口内的全部对象一起选中。
网页设计与制作 17
网页设计与制作 18
选择象素
? 创建选区选取框
网页设计与制作 19
? 调整选区选取框
– 向选区添加象素：按住 Shift键使用任何位图选择工
具绘制要添加到选区中的区域 。
– 从选区中去除象素：按住 Alt键并使用位图选择工具
绘制 不再属于选区的象素区域 。
– 通过交叉选取框创建选取框：使用任何位图选择工
具创建一选取框，再按住 Alt+Shift键创建重叠原选
取框的新选取框，则只有两个选取框的交叉区域内
的象素被选定。
– 羽化象素选区
– 创建和移动浮动象素选区
网页设计与制作 20
变形和扭曲
? 缩放对象
? 旋转对象
? 翻转对象
? 倾斜对象
? 扭曲对象
网页设计与制作 21
网页设计与制作 22
网页设计与制作 23
组织对象
网页设计与制作 24
修饰位图
? 克隆象素
? 模糊和锐化象素
? 减淡和加深象素
? 调整位图亮度和对比度
? 调整色相和饱和度
? 裁剪所选位图
网页设计与制作 25
编辑矢量对象路径
? 通过矢量路径上的点来编辑路径
? 拉伸或推动所选路径
? 扭曲路径
? 将路径剪切为多个对象
? 合并路径对象
? 删除路径对象的部分
? 收缩或扩展路径
网页设计与制作 26
4.5 颜色和填充
颜色也是网页设计及制作中需要着重
考虑的因素之一，可以说颜色应用得好坏
将直接影响到最终的网站。
? 真彩色
? 网页安全色
Macromedia Fireworks MX 包含各种面
板、工具和选项，用于组织和选择颜色并
将颜色应用到位图图象和矢量对象。
网页设计与制作 27
选择颜色
网页设计与制作 28
使用颜色样本
? 添加颜色
? 删除颜色
? 保存样本
?, 选项, 菜单
网页设计与制作 29
使用混色器
网页设计与制作 30
填充
? 实心填充
? 图案填充
? 渐变填充
网页设计与制作 31
4.6 使用文本
文本在网页中有两种存在形式，一种
是纯文本，一种是图形文字。图形文字实
际上就是图像，它构成了图像的一部分。
Fireworks中输入的文字是作为单独的
文本对象存储在文档中的，而不是直接作
为象素保存起来，因此，即使对文字应用
笔触、填充、特效后仍然可以编辑文本。
网页设计与制作 32
输入文本
网页设计与制作 33
编辑文本
网页设计与制作 34
对文本应用不同效果
? 将笔触、填充和效果应用到文本
? 将文本附加到路径
? 变形文本
网页设计与制作 35
网页设计与制作 36
4.7 特殊效果
Fireworks提供了许多处理图像得到特殊效果
的工具，来丰富图像的显示效果。很多工具在处
理图形、图像显示效果方面起着至关重要的作用，
如动态效果、滤镜、样式等。
? 动态效果
? 层
? 蒙版
? 样式
网页设计与制作 37
动态效果
网页设计与制作 38
层面板
网页设计与制作 39
蒙版
网页设计与制作 40
利用文本创建蒙版
? 编辑好文字并选中该文字，调整边缘、填充
等属性
? 选择“编辑”菜单下的“剪切”
? 打开一位图图片
? 选择“编辑”菜单下的“粘贴为蒙版”
网页设计与制作 41
样式
? 应用样式
? 创建样式
? 删除样式
? 编辑样式
网页设计与制作 42
4.8 GIF动画
网页设计与制作 43
4.9 图像的切片与导出
切片技术就是将一个大的图像分割成若干色
深较浅的小的图像，即切片，每一个切片都是一
个独立的文件。每个切片对于大图来说都是一个
对象，我们可以像操作其他对象一样对切片进行
相应的操作，可分别对每个切片进行优化操作，
每一个切片下载到用户浏览器端后的拼接是通过
HTML代码实现的。
切片可以赋于图像交互性和替换局部图像。
网页设计与制作 44
使用切片
? 绘制矩形切片
? 多边形切片
? 编辑切片
? 使切片交互
? 使用热点
? 命名切片
网页设计与制作 45
优化图像
网页设计与制作 46
预览结果
网页设计与制作 47
选择合适的图像格式
? GIF格式
? JPEG格式
? PNG格式
? WBMP格式
网页设计与制作 48
导出图像
网页设计与制作 49
网页设计与制作 50
快速导出
《网页设计与制作》
网页设计与制作 2
? 4.1 Fireworks MX简介
? 4.2 Fireworks MX文档的基本操作
? 4.3 矢量图和位图
? 4.4 选择和编辑对象
? 4.5 颜色和填充
? 4.6 使用文本
? 4.7 特殊效果
? 4.8 GIF动画
? 4.9 图像的切片与导出
网页设计与制作 3
4.1 Fireworks MX简介
Fireworks MX是 Macromedia 公司推出的最
新专业化的 Web图像处理软件，它在原有版本的
基础上功能更为增强，用户界面更为友好。
使用 Fireworks,您可以在一个专业化的
环境中创建和编辑网页图形、对其进行动画处理、
添加高级交互功能以及优化图像。在 Fireworks
中，可以在单个应用程序中创建和编辑位图和矢
量两种图形。一切都可以随时进行编辑。除此之
外，工作流可以实现自动化，从而满足耗费时间
的更新和更改要求
网页设计与制作 4
Fireworks MX的 功能特点
? 良好的的用户界面
? 无模式位图和矢量编辑
? 切片表布局控件
? 实例级按钮元件编辑
? 快速导出
? 开放的工作流程特性
网页设计与制作 5
Fireworks MX工作界面
网页设计与制作 6
4.2 Fireworks MX文档的基本操作
? 新建与导入文档
? 文档的保存
? 浏览文档
? 设置文档属性
网页设计与制作 7
新建与导入文档
?, 文件, 菜单下的, 新建,
? 通过剪贴板创建文档
? 打开或导入文档
浏览文档
使用标尺、网格线、引导线等
网页设计与制作 9
设置文档属性
? 图像大小
– 选择, 修改 /画布 /图象大小,
? 画布大小
– 选择, 修改 /画布 /画布大小,
? 画布颜色
– 选择, 修改 /画布 /画布颜色 …,
? 旋转
– 选择, 修改 /画布 /旋转 ……,
网页设计与制作 10
4.3 矢量图和位图
? 矢量图和位图的概念
? 创建位图对象
? 绘制矢量对象
网页设计与制作 11
位图
局部放大时会产生较为严重的失真
网页设计与制作 12
矢量图
矢量图是以点和路径构成的，矢量图所记录的是
图像中每一个位置的坐标以及这些坐标之间的相互关
系。一般而言，对矢量图进行任意尺度的放大时都不
会有失真现象。
网页设计与制作 13
创建位图对象
? 创建新位图对象
– 使用 Fireworks MX的位图绘制和绘画工具，即可创
建位图图形对象。
? 创建空位图对象
– 单击, 层, 面板中的, 新建位图图象, 按钮，或者
选择, 编辑 /插入 /空位图, 菜单命令
? 用剪切或复制的方法
? 矢量对象转换成位图
– 选中矢量对象后，使用, 修改 /平面化所选, 菜单命
令即可转化成位图图像
网页设计与制作 14
绘制矢量对象
,工具, 面板的, 矢量, 部分的工具
即是对矢量进行编辑操作的工具，默认情
况下有, 线条,,, 钢笔,,, 矩形,,
,文本,,, 自由变形,,, 刀子, 工具
等。
网页设计与制作 15
4.4 选择和编辑对象
在 Macromedia Fireworks MX 中工作时，
将需要处理矢量对象、位图对象、文本块、
切片和热点以及象素区域。使用选择工具
和变形工具，可以移动、复制、删除、旋
转、缩放或倾斜对象。在具有多个对象的
文档中，可以通过对对象执行堆叠、组合
和对齐操作来组织它们。
网页设计与制作 16
选择对象
在画布上对任何对象执行任何操作之前，
必须首先选择该对象。
? 当“层”面板已打开并且层处于扩展状态时，
在该面板中单击一个对象即可选中该对象。
?, 工具, 面板, 选择, 部分中 有, 指针工具,,
,选择后方对象工具, 和, 部分选定工具, 可
进行选择对象。
? 选择, 选择, 菜单下的, 选择全部,,可将活
动文档窗口内的全部对象一起选中。
网页设计与制作 17
网页设计与制作 18
选择象素
? 创建选区选取框
网页设计与制作 19
? 调整选区选取框
– 向选区添加象素：按住 Shift键使用任何位图选择工
具绘制要添加到选区中的区域 。
– 从选区中去除象素：按住 Alt键并使用位图选择工具
绘制 不再属于选区的象素区域 。
– 通过交叉选取框创建选取框：使用任何位图选择工
具创建一选取框，再按住 Alt+Shift键创建重叠原选
取框的新选取框，则只有两个选取框的交叉区域内
的象素被选定。
– 羽化象素选区
– 创建和移动浮动象素选区
网页设计与制作 20
变形和扭曲
? 缩放对象
? 旋转对象
? 翻转对象
? 倾斜对象
? 扭曲对象
网页设计与制作 21
网页设计与制作 22
网页设计与制作 23
组织对象
网页设计与制作 24
修饰位图
? 克隆象素
? 模糊和锐化象素
? 减淡和加深象素
? 调整位图亮度和对比度
? 调整色相和饱和度
? 裁剪所选位图
网页设计与制作 25
编辑矢量对象路径
? 通过矢量路径上的点来编辑路径
? 拉伸或推动所选路径
? 扭曲路径
? 将路径剪切为多个对象
? 合并路径对象
? 删除路径对象的部分
? 收缩或扩展路径
网页设计与制作 26
4.5 颜色和填充
颜色也是网页设计及制作中需要着重
考虑的因素之一，可以说颜色应用得好坏
将直接影响到最终的网站。
? 真彩色
? 网页安全色
Macromedia Fireworks MX 包含各种面
板、工具和选项，用于组织和选择颜色并
将颜色应用到位图图象和矢量对象。
网页设计与制作 27
选择颜色
网页设计与制作 28
使用颜色样本
? 添加颜色
? 删除颜色
? 保存样本
?, 选项, 菜单
网页设计与制作 29
使用混色器
网页设计与制作 30
填充
? 实心填充
? 图案填充
? 渐变填充
网页设计与制作 31
4.6 使用文本
文本在网页中有两种存在形式，一种
是纯文本，一种是图形文字。图形文字实
际上就是图像，它构成了图像的一部分。
Fireworks中输入的文字是作为单独的
文本对象存储在文档中的，而不是直接作
为象素保存起来，因此，即使对文字应用
笔触、填充、特效后仍然可以编辑文本。
网页设计与制作 32
输入文本
网页设计与制作 33
编辑文本
网页设计与制作 34
对文本应用不同效果
? 将笔触、填充和效果应用到文本
? 将文本附加到路径
? 变形文本
网页设计与制作 35
网页设计与制作 36
4.7 特殊效果
Fireworks提供了许多处理图像得到特殊效果
的工具，来丰富图像的显示效果。很多工具在处
理图形、图像显示效果方面起着至关重要的作用，
如动态效果、滤镜、样式等。
? 动态效果
? 层
? 蒙版
? 样式
网页设计与制作 37
动态效果
网页设计与制作 38
层面板
网页设计与制作 39
蒙版
网页设计与制作 40
利用文本创建蒙版
? 编辑好文字并选中该文字，调整边缘、填充
等属性
? 选择“编辑”菜单下的“剪切”
? 打开一位图图片
? 选择“编辑”菜单下的“粘贴为蒙版”
网页设计与制作 41
样式
? 应用样式
? 创建样式
? 删除样式
? 编辑样式
网页设计与制作 42
4.8 GIF动画
网页设计与制作 43
4.9 图像的切片与导出
切片技术就是将一个大的图像分割成若干色
深较浅的小的图像，即切片，每一个切片都是一
个独立的文件。每个切片对于大图来说都是一个
对象，我们可以像操作其他对象一样对切片进行
相应的操作，可分别对每个切片进行优化操作，
每一个切片下载到用户浏览器端后的拼接是通过
HTML代码实现的。
切片可以赋于图像交互性和替换局部图像。
网页设计与制作 44
使用切片
? 绘制矩形切片
? 多边形切片
? 编辑切片
? 使切片交互
? 使用热点
? 命名切片
网页设计与制作 45
优化图像
网页设计与制作 46
预览结果
网页设计与制作 47
选择合适的图像格式
? GIF格式
? JPEG格式
? PNG格式
? WBMP格式
网页设计与制作 48
导出图像
网页设计与制作 49
网页设计与制作 50
快速导出
