《网页设计与制作 第二版 教学课件 ppt 作者 相万让 第03章》由会员分享，可在线阅读，更多相关《网页设计与制作 第二版 教学课件 ppt 作者 相万让 第03章（60页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作（第二版）,第二篇 素材篇,人民邮电出版社,第3章 图像处理软件Fireworks,2019/5/25,网页设计与制作（第二版）,3,3.1 Fireworks 8基本操作 3.2 矢量图和位图 3.3 选择和编辑对象 3.4 使用文本 3.5 特殊效果 3.6 图像的切片与导出,第3章 图像处理软件Fireworks,2019/5/25,网页设计与制作（第二版）,4,3.1 Fireworks 8基本操作,新建与导入文档 文档的保存 浏览文档 设置文档属性,2019/5/25,网页设计与制作（第二版）,5,Fireworks 8 简介,Fireworks 8是Macromedi
2、a 公司推出的最新专业化的Web图像处理软件，它在原有版本的基础上功能更为增强，用户界面更为友好。 使用 Fireworks，可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。在 Fireworks 中，可以在单个应用程序中创建和编辑位图和矢量两种图形。一切都可以随时进行编辑。除此之外，工作流可以实现自动化，从而满足耗费时间的更新和更改要求。,2019/5/25,网页设计与制作（第二版）,6,Fireworks 8 工作界面,2019/5/25,网页设计与制作（第二版）,7,新建与导入文档,有三种方式： “文件”菜单下的“新建” 通过剪贴板创建文档 打
3、开或导入文档,浏览文档,使用标尺、网格线、引导线等,选择“视图”菜单下的“标尺”、“网格线”、“引导线”等即可进入左图所示状态。,2019/5/25,网页设计与制作（第二版）,9,设置文档属性,图像大小 选择“修改/画布/图象大小” 画布大小 选择“修改/画布/画布大小” 画布颜色 选择“修改/画布/画布颜色” 旋转 选择“修改/画布/旋转”,2019/5/25,网页设计与制作（第二版）,10,3.2 矢量图和位图,矢量图和位图的概念 创建位图对象 绘制矢量对象,2019/5/25,网页设计与制作（第二版）,11,位图,局部放大时会产生较为严重的失真,2019/5/25,网页设计与制作（第二版
4、）,12,矢量图,矢量图是以点和路径构成的，矢量图所记录的是图像中每一个位置的坐标以及这些坐标之间的相互关系。一般而言，对矢量图进行任意尺度的放大时都不会有失真现象。,2019/5/25,网页设计与制作（第二版）,13,创建位图对象,创建新位图对象 使用Fireworks MX的位图绘制和绘画工具，即可创建位图图形对象。 创建空位图对象 单击“层”面板中的“新建位图图象”按钮，或者选择“编辑/插入/空位图”菜单命令 用剪切或复制的方法 矢量对象转换成位图 选中矢量对象后，使用“修改/平面化所选”菜单命令即可转化成位图图像,2019/5/25,网页设计与制作（第二版）,14,绘制矢量对象,“工具
5、”面板的“矢量”部分的工具即是对矢量进行编辑操作的工具，默认情况下有“线条”、“钢笔”、“矩形”、“文本”、“自由变形”、“刀子”工具等。,2019/5/25,网页设计与制作（第二版）,15,3.3 选择和编辑对象,在 Macromedia Fireworks 8中工作时，将需要处理矢量对象、位图对象、文本块、切片和热点以及象素区域。使用选择工具和变形工具，可以移动、复制、删除、旋转、缩放或倾斜对象。在具有多个对象的文档中，可以通过对对象执行堆叠、组合和对齐操作来组织它们。,2019/5/25,网页设计与制作（第二版）,16,选择对象,在画布上对任何对象执行任何操作之前，必须首先选择该对象。
6、当“层”面板已打开并且层处于扩展状态时，在该面板中单击一个对象即可选中该对象。 “工具”面板“选择”部分中有“指针工具”、“选择后方对象工具”和“部分选定工具”可进行选择对象。 选择“选择”菜单下的“选择全部”，可将活动文档窗口内的全部对象一起选中。,2019/5/25,网页设计与制作（第二版）,17,2019/5/25,网页设计与制作（第二版）,18,选择象素,创建选区选取框,2019/5/25,网页设计与制作（第二版）,19,调整选区选取框 向选区添加象素：按住Shift键使用任何位图选择工具绘制要添加到选区中的区域。 从选区中去除象素：按住Alt键并使用位图选择工具绘制不再属于选区的象素
7、区域。 通过交叉选取框创建选取框：使用任何位图选择工具创建一选取框，再按住Alt+Shift键创建重叠原选取框的新选取框，则只有两个选取框的交叉区域内的象素被选定。 羽化象素选区 创建和移动浮动象素选区,2019/5/25,网页设计与制作（第二版）,20,变形和扭曲,缩放对象 旋转对象 翻转对象 倾斜对象 扭曲对象,2019/5/25,网页设计与制作（第二版）,21,拖动变形手柄,旋转轴中心点,2019/5/25,网页设计与制作（第二版）,22,2019/5/25,网页设计与制作（第二版）,23,组织对象,2019/5/25,网页设计与制作（第二版）,24,修饰位图,克隆象素 模糊和锐化象素
8、减淡和加深象素 调整位图亮度和对比度 调整色相和饱和度 裁剪所选位图,2019/5/25,网页设计与制作（第二版）,25,克隆象素,选择“工具”面板“位图”部分的“橡皮图章”工具，单击飞机中间指定为源（即要克隆的区域），这时取样指针变成十字型指针。再将指针移到其他位置并拖动指针，这时可以看到两个指针，第一个是克隆源，为一十字型。不断在目标区域拖动即可克隆出一架飞机。,2019/5/25,网页设计与制作（第二版）,26,编辑矢量对象路径,通过矢量路径上的点来编辑路径 拉伸或推动所选路径 扭曲路径 将路径剪切为多个对象 合并路径对象 删除路径对象的部分 收缩或扩展路径,2019/5/25,网页设计
9、与制作（第二版）,27,通过矢量路径上的点来编辑路径,2019/5/25,网页设计与制作（第二版）,28,推动路径,2019/5/25,网页设计与制作（第二版）,29,扭曲路径,2019/5/25,网页设计与制作（第二版）,30,颜色和填充,颜色也是网页设计及制作中需要着重考虑的因素之一，可以说颜色应用得好坏将直接影响到最终的网站。 真彩色 网页安全色 Macromedia Fireworks MX 包含各种面板、工具和选项，用于组织和选择颜色并将颜色应用到位图图象和矢量对象。,2019/5/25,网页设计与制作（第二版）,31,选择颜色,2019/5/25,网页设计与制作（第二版）,32,使
10、用颜色样本,添加颜色 删除颜色 保存样本 “选项”菜单,2019/5/25,网页设计与制作（第二版）,33,使用混色器,2019/5/25,网页设计与制作（第二版）,34,填充,实心填充 图案填充 渐变填充,2019/5/25,网页设计与制作（第二版）,35,填充属性,选中“工具”面板中的“油漆桶”工具后，可在属性面板设置填充属性,2019/5/25,网页设计与制作（第二版）,36,渐变填充,2019/5/25,网页设计与制作（第二版）,37,3.4 使用文本,文本在网页中有两种存在形式，一种是纯文本，一种是图形文字。图形文字实际上就是图像，它构成了图像的一部分。 Fireworks中输入的文
11、字是作为单独的文本对象存储在文档中的，而不是直接作为象素保存起来，因此，即使对文字应用笔触、填充、特效后仍然可以编辑文本。,2019/5/25,网页设计与制作（第二版）,38,输入文本,2019/5/25,网页设计与制作（第二版）,39,编辑文本,2019/5/25,网页设计与制作（第二版）,40,对文本应用不同效果,将笔触、填充和效果应用到文本 将文本附加到路径 变形文本,2019/5/25,网页设计与制作（第二版）,41,2019/5/25,网页设计与制作（第二版）,42,3.5 特殊效果,Fireworks提供了许多处理图像得到特殊效果的工具，来丰富图像的显示效果。很多工具在处理图形、图
12、像显示效果方面起着至关重要的作用，如动态效果、滤镜、样式等。 动态效果 层 蒙版 样式,2019/5/25,网页设计与制作（第二版）,43,动态效果,2019/5/25,网页设计与制作（第二版）,44,层面板,2019/5/25,网页设计与制作（第二版）,45,蒙版,2019/5/25,网页设计与制作（第二版）,46,利用文本创建蒙版,编辑好文字并选中该文字，调整边缘、填充等属性 选择“编辑”菜单下的“剪切” 打开一位图图片 选择“编辑”菜单下的“粘贴为蒙版”,2019/5/25,网页设计与制作（第二版）,47,样式,应用样式 创建样式 删除样式 编辑样式,2019/5/25,网页设计与制作（
13、第二版）,48,GIF动画,2019/5/25,网页设计与制作（第二版）,49,3.6 图像的切片与导出,切片技术就是将一个大的图像分割成若干色深较浅的小的图像，即切片，每一个切片都是一个独立的文件。每个切片对于大图来说都是一个对象，我们可以像操作其他对象一样对切片进行相应的操作，可分别对每个切片进行优化操作，每一个切片下载到用户浏览器端后的拼接是通过HTML代码实现的。 切片可以赋于图像交互性和替换局部图像。,2019/5/25,网页设计与制作（第二版）,50,使用切片,绘制矩形切片 多边形切片 编辑切片 使切片交互 使用热点 命名切片,2019/5/25,网页设计与制作（第二版）,51,优
14、化图像,2019/5/25,网页设计与制作（第二版）,52,预览结果,2019/5/25,网页设计与制作（第二版）,53,选择合适的图像格式,GIF格式 JPEG格式 PNG格式 WBMP格式,2019/5/25,网页设计与制作（第二版）,54,GIF格式,GIF格式图像是目前网络中应用最为广泛的图像压缩格式，采用LZW无损失压缩算法，不会出现图像效果的失真。GIF格式的图像最多只能显示256种颜色。对于包含颜色数目较少的图像，可选用GIF格式，如卡通、徽标、包含透明区域的图形以及动画等。,2019/5/25,网页设计与制作（第二版）,55,JPEG格式,JPEG是联合图像专家组开发出来的一种
15、图形标准，通过减少像素的方法进行压缩图像，是一种有损压缩算法，但压缩程度是可控制的。JPEG支持24位真彩色，因此JPEG格式显示图像色彩丰富。对于使用的颜色数较多，含有大量过渡颜色区域，而且追求图像质量的图像应选用JPEG格式，如扫描的照片、使用纹理的图像和任何需要256种以上颜色的图像等。,2019/5/25,网页设计与制作（第二版）,56,PNG格式,PNG格式采用的也是一种无损压缩算法，能真实再现图像原貌，最多可以支持32位的颜色，因此它同时具有GIF格式和JPEG格式的优点。PNG格式的图像在不同的计算机平台上可以显示完全相同的效果，避免了不少网页测试时的繁复的工作。PNG格式是Fireworks的默认标准格式，对于网页上传后发现的图像错误、不妥之处，重新修改、编辑都非常方便。,2019/5/25,网页设计与制作（第二版）,57,WBMP格式,WBMP即“无线位图”，是一种为移动计算设备（如手机和PDA）创建的图形格式。此格式用在“无线应用协议”（WAP）网页上。WBMP是1位格式，只有黑与白两种颜色可见。,2019/5/25,网页设计与制作（第二版）,58,导出图像,2019/5/25,网页设计与制作（第二版）,59,2019/5/25,网页设计与制作（第二版）,60,快速导出,
