《网页制作》课程教学资源（讲义）第九章.doc_大学文库

第9章Fireworks图像处理本章初步介绍了图像的设计基础以及色彩的应用，详细介绍了如何利用Fireworks进行图像处理和页面设计。【本章学习目的】在本章中，通过多个实例的介绍，重点讲解了Fireworks软件的应用基础和应用技巧通过本章的学习，读者应了解设计中页面配色方案，掌握利用Fir©woks软件设计出美观大方的网页。一、图像基础及色彩应用在进行网页设计之前，首先要掌握色彩的应用和图像基础。因此本节内容是通过实例围绕这两个方面展开的。 1、认识色影为了能更好地应用色彩来设计网页，我们还是先来了解一下色彩的一些基本概念。自然界中有很多种色彩，比如政瑰是红色的，大海是蓝色的，枯子是橙色的等等，但是最基本的有三种（红，绿，蓝），其它的色彩都可以由这三种色彩调和而成，我们称这三种色彩为“三原色下面介绍两种常用的色彩模式 ·HSB 任何一种彩色具备三个特征：色相(H),纯度(S)和明度B),把这三个要素做成立体坐标，就构成色立体，其中非彩色只有明度属性。 ·RGB颜色 RGB色彩模式是工业界的一种颜色标准，表示红色、绿色、蓝色，又称为三原色光，英文为R(Red)、G(Green)、B(Blue),它们相互之间的叠加来得到各种颜色。 GB模式是显示器的物理色彩模式。这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以RGB方式出现。 2、色彩的作用色彩使宇宙万物充满情感，生机勃勃。色彩作为一种最普遍的审美形式，存在于人们日常生活的各个方面，人们的衣、食、住、行、用无不与色彩发生者密切的关系。。色彩的冷暖红、橙、黄等颜色使用联想到阳光、烈火，故称为“暖色”，绿、青、蓝等颜色与黑夜寒冷相连，故称为“冷色 ·色彩的轻重各种色彩给人的轻重感不同，从色彩得到的重量感，是质感与色感的复合感觉。浅色密度小，给人质量经的感觉：深色密度大，给人分量重的感觉。 ●色彩的前进与后退如果等距离地观察两种颜色，可以给人不同的远近感。暖色比冷色更富有前进的特性两色之间，亮度偏高的色彩呈前进性，饱和度偏高的色彩的也呈前进性。 ●色彩的艳丽与素雅如果是单色，饱和度越高，则色彩越艳丽。饱和度越低，则色彩越素雅。除了饱和度，亮度也有一定的关系。不论什么颜色，亮度高时，即使饱和度低也给人艳丽的感觉

第9章 Fireworks 图像处理本章初步介绍了图像的设计基础以及色彩的应用，详细介绍了如何利用 Fireworks 进行图像处理和页面设计。【本章学习目的】在本章中，通过多个实例的介绍，重点讲解了 Fireworks 软件的应用基础和应用技巧，通过本章的学习，读者应了解设计中页面配色方案，掌握利用 Fireworks 软件设计出美观大方的网页。一、图像基础及色彩应用在进行网页设计之前，首先要掌握色彩的应用和图像基础。因此本节内容是通过实例围绕这两个方面展开的。 1、认识色彩为了能更好地应用色彩来设计网页，我们还是先来了解一下色彩的一些基本概念。自然界中有很多种色彩，比如玫瑰是红色的，大海是蓝色的，桔子是橙色的等等，但是最基本的有三种（红，绿，蓝），其它的色彩都可以由这三种色彩调和而成，我们称这三种色彩为“三原色”。下面介绍两种常用的色彩模式。 ⚫ HSB 任何一种彩色具备三个特征：色相（H），纯度（S）和明度(B)，把这三个要素做成立体坐标，就构成色立体，其中非彩色只有明度属性。 ⚫ RGB 颜色 RGB 色彩模式是工业界的一种颜色标准，表示红色、绿色、蓝色，又称为三原色光，英文为 R(Red)、G(Green)、B(Blue)，它们相互之间的叠加来得到各种颜色。 RGB 模式是显示器的物理色彩模式。这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以 RGB 方式出现。 2、色彩的作用色彩使宇宙万物充满情感，生机勃勃。色彩作为一种最普遍的审美形式，存在于人们日常生活的各个方面，人们的衣、食、住、行、用无不与色彩发生着密切的关系。 ⚫ 色彩的冷暖红、橙、黄等颜色使用联想到阳光、烈火，故称为“暖色”，绿、青、蓝等颜色与黑夜、寒冷相连，故称为“冷色”。 ⚫ 色彩的轻重各种色彩给人的轻重感不同，从色彩得到的重量感，是质感与色感的复合感觉。浅色密度小，给人质量轻的感觉；深色密度大，给人分量重的感觉。 ⚫ 色彩的前进与后退如果等距离地观察两种颜色，可以给人不同的远近感。暖色比冷色更富有前进的特性。两色之间，亮度偏高的色彩呈前进性，饱和度偏高的色彩的也呈前进性。 ⚫ 色彩的艳丽与素雅如果是单色，饱和度越高，则色彩越艳丽。饱和度越低，则色彩越素雅。除了饱和度，亮度也有一定的关系。不论什么颜色，亮度高时，即使饱和度低也给人艳丽的感觉

3、色彩的配色应用方案实例红色让人联想到玫瑰，联想到喜庆，联想到兴奋。白色联想到纯洁，干净，简洁：紫色象征着女性化高雅浪漫：蓝色象征高科技，稳里 :橙色代表甜美收获绿色代表了充满青春的活力，舒适，希望等等。当然不是说某种色彩定代表了什么合文在特定的场合下，同种色彩可以代表不同的含义。更多的色彩知识可参考专业的色彩理论与应用书籍，这里仅介绍几种常用的网页色彩配色实例。 ·红色色系 ·蓝色色系 ·其它色系 ·黑白灰色彩 4、矢量图形和位图图像 1.矢量图矢量图形是用线条和填充色等数学信息来描术图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有Frechand、CorelDraw、AutoCAD等 2.位图位图图像是用像素点描述图像的，在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素当图像放大显示时，图像变成马赛克状，显示品质下降，因此放大图像的尺寸会改变图像的显示品质。制作位图图像的软件常有：Photoshop、Fireworks、ImageRead小y等。 1、页图像的处理流程在图像插入到网页之前，一般需要将图像进行处理。在Fireworks中处理图像一般遵相以下流程：创建图形和图像一创建Wb对象一优化图像一导出图像。二、静态图像的制作 Fireworks8.0是一个强大的网页图形设计工具，使用它创建和编辑位图、矢量图形，还可非常轻松的做出各种网页设计中常见的效果，比如动画、翻转图像、导航条、下拉莱单等，设计完成以后，如果在网页设计中使用，可将它输出为HTL文件，还能输出在 Photoshop,ustrator和Flash等软件中编辑的格式。 1、Fireworks8.0的工作界面 Fireworks8.0的工作界面由4个部分组成：“文档”窗口、“工具箱”面板、“属性”面板、集成工作面板。 2、位图图像处理在网页中大部分使用的是位图图像 Fir©works的工具箱提供了丰富的处理位图图像的工具，能够实现选取、裁剪、绘制变形、修饰位图图像的功能。 3、绘制和编辑矢量对橡矢量绘图实例：标志集锦

3、色彩的配色应用方案实例红色让人联想到玫瑰，联想到喜庆，联想到兴奋。白色联想到纯洁，干净，简洁；紫色象征着女性化，高雅，浪漫；蓝色象征高科技，稳重，理智；橙色代表了欢快，甜美，收获；绿色代表了充满青春的活力，舒适，希望等等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种色彩可以代表不同的含义。更多的色彩知识可参考专业的色彩理论与应用书籍，这里仅介绍几种常用的网页色彩配色实例。 ⚫ 红色色系 ⚫ 蓝色色系 ⚫ 其它色系 ⚫ 黑白灰色彩 4、矢量图形和位图图像 1. 矢量图矢量图形是用线条和填充色等数学信息来描述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有 Freehand、CorelDraw、AutoCAD 等。 2. 位图位图图像是用像素点描述图像的，在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，显示品质下降，因此放大图像的尺寸，会改变图像的显示品质。制作位图图像的软件常有：Photoshop、Fireworks、ImageReady 等。 1、页图像的处理流程在图像插入到网页之前，一般需要将图像进行处理。在 Fireworks 中处理图像一般遵循以下流程：创建图形和图像→创建 Web 对象→优化图像→导出图像。二、静态图像的制作 Fireworks 8.0 是一个强大的网页图形设计工具，使用它创建和编辑位图、矢量图形，还可非常轻松的做出各种网页设计中常见的效果，比如动画、翻转图像、导航条、下拉菜单等，设计完成以后，如果在网页设计中使用，可将它输出为 HTML 文件，还能输出在 Photoshop,Illustrator 和 Flash 等软件中编辑的格式。 1、Fireworks 8.0 的工作界面 Fireworks 8.0 的工作界面由 4 个部分组成：“文档”窗口、“工具箱”面板、“属性”面板、集成工作面板。 2、位图图像处理在网页中大部分使用的是位图图像。 Fireworks 的工具箱提供了丰富的处理位图图像的工具，能够实现选取、裁剪、绘制、变形、修饰位图图像的功能。 3、绘制和编辑矢量对象矢量绘图实例：标志集锦

矢量绘图是基于路径的绘画。与使用一行行像素来构成马赛克式图像的位图不同，矢量对象使用线条，可以说是对线条的描述。 ⚫ 矢量工具的使用 (1) 绘制基本图形绘制直线、矩形、椭圆、多边形、星形等。 (2) 绘制自动形状图形 ⚫ 编辑路径已绘制好的路径可以进行修改，例如：修改曲率、增删节点或切割路径等。 (1) “部分选取”工具 (2) “钢笔”工具 (3) “刀子”工具 ⚫ 组合和组合路径组合：选择“修改”菜单｜“组合”命令，多个矢量对象将组合为一个矢量对象，每个矢量对象保持原有属性，选择“取消组合”命令，恢复为多个矢量对象。组合路径：对多个矢量图形路径采用逻辑运算方法组合为一个复杂的路径。选择“修改”菜单｜“组合路径”组中的某一项命令。 ⚫ 笔触、填充和样式 (1) 笔触 (2) 填充 (3) 样式 4、文本应用在网页中，千篇一律的文本使人感到很乏味。对于徽标、特殊标题以及其它装饰性内容，常常将文本做成图形，起到了画龙点睛的作用。 ⚫ 输入文本单击“文本”工具，在“属性”面板中，设置文本的属性：如字体、字号、颜色、样式、字间距、行间距、水平缩放、基线调整、文本的对齐方式、消除锯齿级别等，在画布上单击鼠标左键，输入文本。 ⚫ 设置效果文本和普通的矢量对象一样，可进行笔触和填充的设置，在“属性”面板中，单击“笔触”或“填充”选择框，在弹出的调色板上选择颜色，在调色板中，单击“填充选项”或“笔触选项”按钮，可设置更为复杂的填充效果或笔触效果。 ⚫ 将文本转换为路径为了使文本的属性像矢量对象一样灵活多变，可将文本转换为路径。但此时文本不再具有文本的特性，不能作为文本进行编辑。 5、层一个 Fireworks 文档中可以包含多个层，一个层又可以包含许多对象。文档中的每一个对象都属于某个特定的层。用户可以创建层、复制层、删除层、激活层、共享层。还对层或