《网页色彩搭配》.

Presentation on theme: "《网页色彩搭配》."— Presentation transcript:

1 《网页色彩搭配》

2 第九章 Firework图像处理 图像基础及色彩应用 静态图像的制作 动画图像制作 动态交互图像的制作 网站首页的设计 9.1 9.2
9.3 动画图像制作 9.4 动态交互图像的制作 9.5 网站首页的设计

3 本章初步介绍了图像的设计基础以及色彩的应用，详细介绍了如何利用Fireworks进行图像处理和页面设计。
【本章学习目的】 在本章中，通过多个实例的介绍，重点讲解了Fireworks软件的应用基础和应用技巧，通过本章的学习，读者应了解设计中页面配色方案，掌握利用Fireworks软件设计出美观大方的网页。

4 9.1 图像基础及色彩应用 在进行网页设计之前，首先要掌握色彩的应用和图像基础。因此本节内容是通过实例围绕这两个方面展开的。

5 9.1.1认识色彩 为了能更好地应用色彩来设计网页，我们还是先来了解一下色彩的一些基本概念。自然界中有很多种色彩，比如玫瑰是红色的，大海是蓝色的，桔子是橙色的等等，但是最基本的有三种（红，绿，蓝），其它的色彩都可以由这三种色彩调和而成，我们称这三种色彩为“三原色”。 现实生活中的色彩可以分为彩色和非彩色。其中黑、白、灰色属于非彩色系列，其它的色彩都属于彩色，如图所示。

6

7 下面介绍两种常用的色彩模式。 1. HSB 任何一种彩色具备三个特征：色相（H），纯度（S）和明度(B)，把这三个要素做成立体坐标，就构成色立体，其中非彩色只有明度属性。 2. RGB RGB色彩模式是工业界的一种颜色标准，表示红色、绿色、蓝色，又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，它们相互之间的叠加来得到各种颜色。 通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255，共256级。按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256＝ ，通常也被简称为1600万色或千万色，也称为24位色(2的24次方)。

8 对于单独的R或G或B而言，当数值为0时，代表这种颜色不发光；如果为255，则该颜色为最高亮度。因此当RGB三种色光都发到最强的亮度，纯白的RGB值就为255,255,255。屏幕上黑的RGB值是0,0,0。R，意味着只有红色存在，且亮度最强，G和B都不发光。因此最红色的数值是255,0,0。同理，最绿色就是0,255,0；而最蓝色就是0,0,255。黄色较特殊，是由红色加绿色而得就是255，255，0。 RGB模式是显示器的物理色彩模式。这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以RGB方式出现。

9 色彩的作用 色彩使宇宙万物充满情感，生机勃勃。色彩作为一种最普遍的审美形式，存在于人们日常生活的各个方面，人们的衣、食、住、行、用无不与色彩发生着密切的关系。 色彩的冷暖 红、橙、黄等颜色使用联想到阳光、烈火，故称为“暖色”，绿、青、蓝等颜色与黑夜、寒冷相连，故称为“冷色”。 色彩的轻重 各种色彩给人的轻重感不同，从色彩得到的重量感，是质感与色感的复合感觉。浅色密度小，给人质量轻的感觉；深色密度大，给人分量重的感觉。 色彩的前进与后退 如果等距离地观察两种颜色，可以给人不同的远近感。暖色比冷色更富有前进的特性。两色之间，亮度偏高的色彩呈前进性，饱和度偏高的色彩的也呈前进性。 色彩的艳丽与素雅 如果是单色，饱和度越高，则色彩越艳丽。饱和度越低，则色彩越素雅。除了饱和度，亮度也有一定的关系。不论什么颜色，亮度高时，即使饱和度低也给人艳丽的感觉

10 9.1.3 色彩的配色应用方案实例 红色让人联想到玫瑰，联想到喜庆，联想到兴奋。白色联想到纯洁，干净，简洁；紫色象征着女性化，高雅，浪漫；蓝色象征高科技，稳重，理智；橙色代表了欢快，甜美，收获；绿色代表了充满青春的活力，舒适，希望等等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种色彩可以代表不同的含义。更多的色彩知识可参考专业的色彩理论与应用书籍，这里仅介绍几种常用的网页色彩配色实例。

11 1.红色色系 红色是最鲜明生动的、最热烈的颜色，因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。在主要由红色成分构成的色彩中，粉红色象征了浪漫、温馨，暗红色象征了神秘、深沉，桃红色象征了时尚、明亮，下面研究的是红色的配色规律。 高亮度的红色通过与灰色、黑色等非彩色搭配使用，可以得到现代且激进的感觉。 低亮度的红色具有冷静沉重的感觉，可以营造古典的氛围。 红色如果与亮度、饱和度较强的冷色（如蓝色、绿色）相配，中间最好能有一些过渡性的颜色，如纯红与纯蓝相配时，中间插入面积适中的白色，大红与大绿相配时，中间可以用棕色或黑色间隔，如图所示。

12

13 2. 蓝色色系 蓝色是色彩中比较沉静的颜色，它是现代商务领域常用的流行色。蓝色与绿色、白色的搭配在现实生活中随处可见。
主色调选择明亮的蓝色，配以白色的背景和灰亮的辅助色，可以使站点干净而整洁，给人庄重、充实的印象。 蓝色、青绿色、白色的搭配可以使页面看起来非常干净清澈，如图所示。

14

15 9.1.4 矢量图形和位图图像 1. 矢量图 矢量图形是用线条和填充色等数学信息来描述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有Freehand、CorelDraw、AutoCAD等。 2. 位图 位图图像是用像素点描述图像的，在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，显示品质下降，因此放大图像的尺寸，会改变图像的显示品质，如图所示。制作位图图像的软件常有：Photoshop、Fireworks、ImageReady等。

16

17 9.1.5 网页图像的处理流程 在图像插入到网页之前，一般需要将图像进行处理。在Fireworks中处理图像一般遵循以下流程：创建图形和图像→创建Web对象→优化图像→导出图像。

18 9.2 静态图像的制作 Fireworks 8.0是一个强大的网页图形设计工具，使用它创建和编辑位图、矢量图形，还可非常轻松的做出各种网页设计中常见的效果，比如动画、翻转图像、导航条、下拉菜单等，设计完成以后，如果在网页设计中使用，可将它输出为HTML文件，还能输出在Photoshop,Illustrator和Flash等软件中编辑的格式。

19 9.2.1 Fireworks 8.0的工作界面 Fireworks 8.0的工作界面由4个部分组成：“文档”窗口、“工具箱”面板、“属性”面板、集成工作面板，如图所示。

20

21 9.2.2 位图图像处理 在网页中大部分使用的是位图图像，下面根据图所示，通过位图效果的处理过程来介绍位图对象的相关操作。
9.2.2 位图图像处理 在网页中大部分使用的是位图图像，下面根据图所示，通过位图效果的处理过程来介绍位图对象的相关操作。 Fireworks的工具箱提供了丰富的处理位图图像的工具，能够实现选取、裁剪、绘制、变形、修饰位图图像的功能。

22 9.2.3 绘制和编辑矢量对象 矢量绘图是基于路径的绘画。与使用一行行像素来构成马赛克式图像的位图不同，矢量对象使用线条，可以说是对线条的描述。 1. 矢量工具的使用 （1） 绘制基本图形 “直线”工具，按下shift键，可以绘制水平、垂直或45°夹角的直线。 “矩形”工具或“椭圆”工具，按下Shift键拖动鼠标可以绘制正方形或圆形，按下Alt键，圆心在光标所在点开始绘制矩形或椭圆，Shift和Alt键可组合使用。 “多边形”工具，形状可分为多边形和星形，在“属性”面板中可设置多边形形状、边数及角度设置项。 “钢笔”工具，直接单击可绘制由直线组成的折线，在下一个测绘点单击并按下鼠标左键拖动，可绘制贝赛尔曲线，用“部分选取”工具调节曲线上的控制杆的方向和长度来调节曲线的曲率，如图9.26所示。 （2） 绘制自动形状图形 Fireworks中提供了一组自动形状工具，可以绘制更为复杂的几何图形。

23 2. “形状”面板 选择“窗口”菜单｜“自动形状”命令，打开“形状”面板，“形状”面板中有一些预设的图形，按住鼠标左键拖动到画布上，通过单击或拖动控制点来调节图形的相关属性，如图所示。

24 3. 编辑路径 已绘制好的路径可以进行修改，例如：修改曲率、增删节点或切割路径等。 “部分选取”工具 单击“部分选取”工具，拖动路径的节点，改变节点的位置和路径的曲率，单击某一控制点，按Del键删除该点。 “钢笔”工具 单击“钢笔”工具，靠近当前选中的路径时增加或删除节点，当“钢笔”工具置于路径上，指针旁出现一个“十”号的标志，单击鼠标左键，增加节点；当指针置于节点上，出现“－”号的标志，单击鼠标左键，删除该节点。 “刀子”工具 单击“刀子”工具切割路径。用“刀子”工具画一条穿过路径的线，使用“部分选取”工具选择其中的一条路径并移动，就会发现原先的路径已经被切割。

25 4. 组合和组合路径 组合：选择“修改”菜单｜“组合”命令，多个矢量对象将组合为一个矢量对象，每个矢量对象保持原有属性，选择“取消组合”命令，恢复为多个矢量对象。 组合路径：对多个矢量图形路径采用逻辑运算方法组合为一个复杂的路径。选择“修改”菜单｜“组合路径”组中的某一项命令。 接合：将多个矢量对象合并为一个路径，将其中重合的路径部分不填充，透明处理。 联合：将多个矢量对象合并为一个对象，将其中重合的路径部分完全融合，只剩下最外部的轮廓。 交集：将多个矢量对象的共同区域（即相交部分）保留下来，形成一个新的路径。 打孔：删除上方所选对象与下方所选对象重叠部分。 裁切：使用最上面的路径去修剪下面的路径，新的路径应用下面的对象属性。

26 5. 笔触、填充和样式 （1）笔触 选中矢量对象，在“属性”面板中设置笔触属性，“属性”面板中包括了所有笔触属性的设置，如笔触类别、名称、颜色、笔尖形状、粗细、边缘柔和度以及纹理填充等，如图所示。 （2）填充 Fireworks中的填充包括：实心、渐变色、图案填充等。选中矢量对象，在“属性”面板中设置填充类别、边缘、纹理等。

27 （3）样式 样式是笔触、填充、效果和文本属性的综合。“样式”面板中包含了一些预定义的样式。用户也可创建自己的样式。选择“窗口”菜单｜“样式”命令，打开“样式”面板，选中要应用样式的对象，单击“样式”面板中的某个样式，此样式即应用于当前操作对象。

28 9.2.4 文本应用 在网页中，千篇一律的文本使人感到很乏味。对于徽标、特殊标题以及其它装饰性内容，常常将文本做成图形，起到了画龙点睛的作用，如图所示。

29 1. 输入文本 单击“文本”工具，在“属性”面板中，设置文本的属性：如字体、字号、颜色、样式、字间距、行间距、水平缩放、基线调整、文本的对齐方式、消除锯齿级别等，在画布上单击鼠标左键，输入文本。 2. 设置效果 文本和普通的矢量对象一样，可进行笔触和填充的设置，在“属性”面板中，单击“笔触”或“填充”选择框，在弹出的调色板上选择颜色，在调色板中，单击“填充选项”或“笔触选项”按钮，可设置更为复杂的填充效果或笔触效果。

30 9.2.5 层 一个Fireworks文档中可以包含多个层，一个层又可以包含许多对象。文档中的每一个对象都属于某个特定的层。用户可以创建层、复制层、删除层、激活层、共享层。还对层或包含在层内的对象可进行如下操作：显示／隐藏／锁定层或某个对象，直接单击“层”面板下方的某个按钮，或单击“层”面板右侧“选项”按钮 ，在弹出菜单中选择某项命令，如图所示。

31 9.2.6 蒙板 蒙版能够隐藏或显示图像的某些部分，实现各种特殊效果。 可以创建蒙板，位图蒙板，还可以使用多个对象组合来创建蒙板。

32 1. 文字蒙版 文字蒙版其实就是将图像和文字组合在一起，使文字中包含图像的内容。如上图中第一幅图像。 2. 矢量蒙版 矢量蒙版分为“路径轮廓”和“灰度外观”两种类型。 “路径轮廓”将按照蒙版对象的路径区域进行显示被遮盖的对象。而“灰度外观”则是取决于蒙版对象和背景色之间的明度关系。蒙版对象上明亮的像素点显示，较暗的像素点显示背景色。 3.位图蒙版 以蒙版对象中的像素来影响被蒙版所遮盖的对象的可视区域，与photoshop中的图层蒙版类似。

33 9.3 动画图像的制作 网页中不仅包含大量的静态图像，而且越来越多的动画及动态图像效果也为网页增色不少，本节着重介绍利用Fireworks软件制作动画。

34 9.3.1 逐帧动画 逐帧动画实际上就是图片以连续帧的顺序替换从而造成视觉上的变化。
9.3.1 逐帧动画 逐帧动画实际上就是图片以连续帧的顺序替换从而造成视觉上的变化。 【例9.12】逐帧变化的荷花动画特效，如上图动画实例中第一个动画图像和第二个动画所示。

35 9.3.2 使用动画元件创建动画 在Fireworks中，为了提高动画制作效率，用户不必逐帧修改画布上的实例，而只需要设计动画变化的前后两帧，中间的过渡变化可以由Fireworks自动设置，此时会用到元件。 Fireworks包括有3种元件类型，即图形、动画和按钮。 【例9.14】大树底下好乘凉的动画特效，如上图中第三个动画图像所示。

36 9.3.3 制作精品banner 在网页中的广告横幅Banner常常采用的gif动画，Fireworks的动画制作功能完全能设计出精美的banner。 【例9.15】精美的banner动画特效：利用矢量图、位图的操作技巧，结合动画的制作方法制作精美的banner动画。

37 9.4 动态交互图像的制作 在网页中，浏览者通常看到的图像有两种：初始状态的图像和与之发生交互行为的图像，比如：按钮、导航条、弹出菜单、翻转图等动态效果，本节主要介绍利用Fireworks制作动态交互图像。

38 9.4.1 切片和热点的应用 1. 使用切片 为了获取较高的下载速度，通常将网页中存在的较大图像切分成多个图片，即切片，在下载网页时对整幅图像的下载变为对多幅小图片的下载，虽然图像大小没有改变，但图像的下载速度会明显加快。同时切片还是建立交互响应的基础，利用切片可以制作动态交互图像。切片的形状有：矩形、多边形两种。 2. 使用热点 热点通常用来建立图像映射，所谓图像映射，就是在一幅图像中创建多个链接区域，通过单击不同的链接区域，可以跳转到不同的URL地址。热点的形状有矩形、椭圆形、多边形三种。

39 9.4.2 创建按钮、导航栏及弹出式菜单 为了使网页更加生动、美观，常常在网页中添加按钮、导航条及弹出式菜单，比如：当鼠标经过按钮时，按钮图像会改变颜色、形状、甚至发出声音吸引访客的点击。 1. 创建按钮 Fireworks中的按钮，是元件中的一种，利用按钮元件不但可以做出式样新颖的按钮外，并且可直接为按钮加上热点区域，设置在网页上的超级链接功能。按钮有“释放”、“滑过”、“按下”和“按下时滑过”4个状态。

40 2. 创建导航条 导航条是指一组分别指向不同链接地址的按钮，通常这些按钮在外观上保持一致，通过复制按钮的方法快速制作导航条，然后选择各个按钮设置不同的文本、超级链接等，如图所示。

41 　　3.创建弹出式菜单 弹出菜单主要应用于导航条中栏目存在子栏目的情况。当鼠标指向导航条中某个按钮或热区时，会出现相应的弹出菜单，显示子栏目的内容，在弹出菜单中，单击相应的子栏目，即可直接链接到子栏目所在的页面。 单击“显示切片和热点”工具 （“隐藏切片和热点”工具 ），单击某个按钮实例，比如单击“产品介绍”按钮，单击按钮上的“行为”柄，在弹出菜单中，选择“添加弹出菜单”命令，弹出“弹出菜单编辑器”的对话框，包含了四个选项卡：内容、外观、高级、位置。进行相应参数的设置。

42

43 制作交换图像 一、为了使网页丰富多彩，网页设计者采用各种手段来增强网页本身动态效果和人机交互的特性，翻转图像是最常用的一种手段。所谓“翻转图像”，是指当用户浏览网页时，鼠标移动到图像上，该图像产生变化。这里主要讲二种翻转效果：“简单翻转图像”、“不相交翻转图像”。

44 简单翻转图像 原始状态图像 鼠标经过图像

45 不相交翻转图像：当鼠标经过某个图像时，改变了在页面中另一个区域的显示内容。

46 9.5 网站首页的设计 一般而言首页设计几乎等同于整个网站设计，因此网站首页设计非常重要。首页设计要考虑的问题：配色方案的确定（本章第一节已经叙述过）、版面布局、网站内容的填充等。 要制作首页，首先要对主页有一个规划。即首页的版面布局，这样才能合理安排网页的内容，如图9.62所示。 作为设计者来说，一般采用Fireworks或Photoshop之类的设计软件来绘制网页版面布局图，然后导出到网页编辑软件如Dreamweaver中进行编辑，这种方法可以使页面控制更加得心应手。

47

48 本 章 小 结 本章练习题 本章主要介绍了Fireworks使用方法和技巧，创建图形图像。 1．创建静态图形图像 2．动画的制作
3．动态交互图像效果的制作 4.　设计整幅Web页面 本章练习题 1. 选择题 （1）Fireworks具有以下（ ）的功能。 A．绘制矢量图 B．制作导航条 C．制作Gif动画 D．制作按钮 （2）在Fireworks中，要将鼠标拖动起始点作为圆心画正圆，正确的操作：（ ）。 A．拖动鼠标的同时，按下Shift键　　B．拖动鼠标的同时按下Shift+Ctrl组合键 C．在拖动鼠标的同时，按下Alt键 D．在拖动鼠标的同时，按下Shift+Alt键

49 （3）Fireworks图像文件的默认格式是（ ）。
A．JPG B．PNG C．GIF D．BMP （4）如果滤镜应用在矢量图像上，则（ ）。 A．无法进行 B．可以直接使用 C．先要把矢量图像转换为位图对象，然后再进行 D．矢量对象的路径和点信息不受影响 （5）要制作背景透明的卡通图片，则在图像优化输出时，最好要选用（ ）格式。 A．PNG B．GIF C．JPEG D．PSD （6）在Fireworks动画制中将一个对象转化为元件之后还可编辑（ ）属性。 A．设置笔触 B．设置透明度 C．设置填充与渐变 D．应用滤镜 （7）下面对切片说法正确的是（ ）。 A．切片技术的应用不能改变图像的下载时间 B．在导出的时候，只能对切片对象生成图像文件 C．能对切片对象进行自动命名 D．不能在切片对象上添加弹出菜单

50 2. 简答题 简述位图和矢量图的区别。 对待文本可以像对待矢量对象一样处理吗？ 在大图分隔成小图有什么优点？如何使用切片工具？ 导出Fireworks动画中，必须的设置是什么？ 在Fireworks中，一共有几种类型的元件？分别是什么？ 按钮的4种状态分别是什么？

51 上 机 实 训 1. 背景知识 　　根据本章所学的色彩应用的知识，再结合本章所学的Fireworks软件操作的知识，制作静态图像及动态图像的效果图，能够独立设计网页平面图。 2. 实训准备工作 　　将实训的样图及相应的图像及文本素材发送到学生主机，以供学生参考使用。 3. 实训要求 （1）处理一幅位图效果 要求：风景、汽车、人物有机融合在一起。 （2）制作苹果标志矢量图形 要求：利用矢量工具绘制苹果标志. （3）制作树叶落下的动画特效 要求：利用元件设置动画，重复使用元件，产生多片树叶从树上落下来。 （4）制作风景相册的翻转图像效果 要求： 利用Fireworks自带行为，制作分隔的翻转图像； 利用切片工具，切割图片； 最后导出为网页和图像。

52 （5）制作按钮和导航条 要求： 绘制一个矢量图形，并添加文本，转换为按钮元件； 按钮克隆后，水平或垂直排列，添加不同的链接路径和修改文本显示，即为导航条。 （6）制作弹出菜单 要求：利用Fireworks的自带行为，在导航栏的基础上，创建弹出式菜单。 （7）设计web页面 布局页面，规划网页内容； 绘制页面分区，填充网页内容，切割图片，导出网页。 4. 课时安排：8课时。