网页素材制作之Fireworks

1、网页设计与制作（第二版）第二篇 素材篇人民邮电出版社第3章 图像处理软件Fireworks 3.1 Fireworks 8基本操作3.2 矢量图和位图 3.3 选择和编辑对象3.4 使用文本 3.5 特殊效果 3.6 图像的切片与导出 第3章 图像处理软件Fireworks2022/8/93网页设计与制作（第二版）3.1 Fireworks 8基本操作新建与导入文档 文档的保存 浏览文档 设置文档属性 2022/8/94网页设计与制作（第二版）Fireworks 8 简介Fireworks 8是Macromedia 公司推出的最新专业化的Web图像处理软件，它在原有版本的基础上功能更为增强，用

2、户界面更为友好。使用 Fireworks，可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。在 Fireworks 中，可以在单个应用程序中创建和编辑位图和矢量两种图形。一切都可以随时进行编辑。除此之外，工作流可以实现自动化，从而满足耗费时间的更新和更改要求。2022/8/95网页设计与制作（第二版）Fireworks 8 工作界面 2022/8/96网页设计与制作（第二版）新建与导入文档有三种方式：“文件”菜单下的“新建” 通过剪贴板创建文档 打开或导入文档 2022/8/97网页设计与制作（第二版） 浏览文档 使用标尺、网格线、引导线等 选择“视图

3、”菜单下的“标尺”、“网格线”、“引导线”等即可进入左图所示状态。2022/8/98网页设计与制作（第二版）设置文档属性 图像大小选择“修改/画布/图象大小” 画布大小 选择“修改/画布/画布大小” 画布颜色 选择“修改/画布/画布颜色” 旋转 选择“修改/画布/旋转” 2022/8/99网页设计与制作（第二版）3.2 矢量图和位图 矢量图和位图的概念创建位图对象 绘制矢量对象 2022/8/910网页设计与制作（第二版）位图局部放大时会产生较为严重的失真2022/8/911网页设计与制作（第二版）矢量图矢量图是以点和路径构成的，矢量图所记录的是图像中每一个位置的坐标以及这些坐标之间的相互关系

4、。一般而言，对矢量图进行任意尺度的放大时都不会有失真现象。 2022/8/912网页设计与制作（第二版）创建位图对象 创建新位图对象 使用Fireworks MX的位图绘制和绘画工具，即可创建位图图形对象。 创建空位图对象 单击“层”面板中的“新建位图图象”按钮，或者选择“编辑/插入/空位图”菜单命令 用剪切或复制的方法 矢量对象转换成位图 选中矢量对象后，使用“修改/平面化所选”菜单命令即可转化成位图图像 2022/8/913网页设计与制作（第二版）绘制矢量对象 “工具”面板的“矢量”部分的工具即是对矢量进行编辑操作的工具，默认情况下有“线条”、“钢笔”、“矩形”、“文本”、“自由变形”、“

5、刀子”工具等。 2022/8/914网页设计与制作（第二版）3.3 选择和编辑对象 在 Macromedia Fireworks 8中工作时，将需要处理矢量对象、位图对象、文本块、切片和热点以及象素区域。使用选择工具和变形工具，可以移动、复制、删除、旋转、缩放或倾斜对象。在具有多个对象的文档中，可以通过对对象执行堆叠、组合和对齐操作来组织它们。2022/8/915网页设计与制作（第二版）选择对象 在画布上对任何对象执行任何操作之前，必须首先选择该对象。 当“层”面板已打开并且层处于扩展状态时，在该面板中单击一个对象即可选中该对象。“工具”面板“选择”部分中有“指针工具”、“选择后方对象工具”和

6、“部分选定工具”可进行选择对象。 选择“选择”菜单下的“选择全部”，可将活动文档窗口内的全部对象一起选中。 2022/8/916网页设计与制作（第二版）2022/8/917网页设计与制作（第二版）选择象素 创建选区选取框 2022/8/918网页设计与制作（第二版）调整选区选取框 向选区添加象素：按住Shift键使用任何位图选择工具绘制要添加到选区中的区域。从选区中去除象素：按住Alt键并使用位图选择工具绘制不再属于选区的象素区域。通过交叉选取框创建选取框：使用任何位图选择工具创建一选取框，再按住Alt+Shift键创建重叠原选取框的新选取框，则只有两个选取框的交叉区域内的象素被选定。羽化象素

7、选区 创建和移动浮动象素选区 2022/8/919网页设计与制作（第二版）变形和扭曲 缩放对象旋转对象 翻转对象 倾斜对象 扭曲对象 2022/8/920网页设计与制作（第二版）拖动变形手柄旋转轴中心点2022/8/921网页设计与制作（第二版）2022/8/922网页设计与制作（第二版）组织对象 2022/8/923网页设计与制作（第二版）修饰位图 克隆象素 模糊和锐化象素 减淡和加深象素 调整位图亮度和对比度 调整色相和饱和度 裁剪所选位图2022/8/924网页设计与制作（第二版）克隆象素选择“工具”面板“位图”部分的“橡皮图章”工具，单击飞机中间指定为源（即要克隆的区域），这时取样指针

8、变成十字型指针。再将指针移到其他位置并拖动指针，这时可以看到两个指针，第一个是克隆源，为一十字型。不断在目标区域拖动即可克隆出一架飞机。 2022/8/925网页设计与制作（第二版）编辑矢量对象路径 通过矢量路径上的点来编辑路径 拉伸或推动所选路径 扭曲路径 将路径剪切为多个对象 合并路径对象删除路径对象的部分收缩或扩展路径2022/8/926网页设计与制作（第二版）通过矢量路径上的点来编辑路径 2022/8/927网页设计与制作（第二版）推动路径 2022/8/928网页设计与制作（第二版）扭曲路径 2022/8/929网页设计与制作（第二版）颜色和填充 颜色也是网页设计及制作中需要着重考虑

9、的因素之一，可以说颜色应用得好坏将直接影响到最终的网站。真彩色网页安全色 Macromedia Fireworks MX 包含各种面板、工具和选项，用于组织和选择颜色并将颜色应用到位图图象和矢量对象。2022/8/930网页设计与制作（第二版）选择颜色 2022/8/931网页设计与制作（第二版）使用颜色样本 添加颜色 删除颜色 保存样本 “选项”菜单 2022/8/932网页设计与制作（第二版）使用混色器 2022/8/933网页设计与制作（第二版）填充 实心填充 图案填充 渐变填充 2022/8/934网页设计与制作（第二版）填充属性选中“工具”面板中的“油漆桶”工具后，可在属性面板设置填

10、充属性 2022/8/935网页设计与制作（第二版）渐变填充2022/8/936网页设计与制作（第二版）3.4 使用文本文本在网页中有两种存在形式，一种是纯文本，一种是图形文字。图形文字实际上就是图像，它构成了图像的一部分。 Fireworks中输入的文字是作为单独的文本对象存储在文档中的，而不是直接作为象素保存起来，因此，即使对文字应用笔触、填充、特效后仍然可以编辑文本。 2022/8/937网页设计与制作（第二版）输入文本 2022/8/938网页设计与制作（第二版）编辑文本2022/8/939网页设计与制作（第二版）对文本应用不同效果 将笔触、填充和效果应用到文本 将文本附加到路径 变形

11、文本 2022/8/940网页设计与制作（第二版）2022/8/941网页设计与制作（第二版）3.5 特殊效果 Fireworks提供了许多处理图像得到特殊效果的工具，来丰富图像的显示效果。很多工具在处理图形、图像显示效果方面起着至关重要的作用，如动态效果、滤镜、样式等。 动态效果层蒙版 样式2022/8/942网页设计与制作（第二版）动态效果 2022/8/943网页设计与制作（第二版）层面板2022/8/944网页设计与制作（第二版）蒙版 2022/8/945网页设计与制作（第二版）利用文本创建蒙版 编辑好文字并选中该文字，调整边缘、填充等属性选择“编辑”菜单下的“剪切”打开一位图图片选择

12、“编辑”菜单下的“粘贴为蒙版”2022/8/946网页设计与制作（第二版）样式 应用样式 创建样式 删除样式 编辑样式 2022/8/947网页设计与制作（第二版）GIF动画 2022/8/948网页设计与制作（第二版）3.6 图像的切片与导出 切片技术就是将一个大的图像分割成若干色深较浅的小的图像，即切片，每一个切片都是一个独立的文件。每个切片对于大图来说都是一个对象，我们可以像操作其他对象一样对切片进行相应的操作，可分别对每个切片进行优化操作，每一个切片下载到用户浏览器端后的拼接是通过HTML代码实现的。 切片可以赋于图像交互性和替换局部图像。 2022/8/949网页设计与制作（第二版）

13、使用切片 绘制矩形切片 多边形切片 编辑切片 使切片交互 使用热点命名切片 2022/8/950网页设计与制作（第二版）优化图像 2022/8/951网页设计与制作（第二版）预览结果 2022/8/952网页设计与制作（第二版）选择合适的图像格式 GIF格式 JPEG格式 PNG格式 WBMP格式 2022/8/953网页设计与制作（第二版）GIF格式GIF格式图像是目前网络中应用最为广泛的图像压缩格式，采用LZW无损失压缩算法，不会出现图像效果的失真。GIF格式的图像最多只能显示256种颜色。对于包含颜色数目较少的图像，可选用GIF格式，如卡通、徽标、包含透明区域的图形以及动画等。2022/

14、8/954网页设计与制作（第二版）JPEG格式JPEG是联合图像专家组开发出来的一种图形标准，通过减少像素的方法进行压缩图像，是一种有损压缩算法，但压缩程度是可控制的。JPEG支持24位真彩色，因此JPEG格式显示图像色彩丰富。对于使用的颜色数较多，含有大量过渡颜色区域，而且追求图像质量的图像应选用JPEG格式，如扫描的照片、使用纹理的图像和任何需要256种以上颜色的图像等。2022/8/955网页设计与制作（第二版）PNG格式PNG格式采用的也是一种无损压缩算法，能真实再现图像原貌，最多可以支持32位的颜色，因此它同时具有GIF格式和JPEG格式的优点。PNG格式的图像在不同的计算机平台上可以显示完全相同的效果，避免了不少网页测试时的繁复的工作。PNG格式是Fireworks的默认标准格式，对于网页上传后发现的图像错误、不妥