网页设计与网站建设(CS6中文版)标准教程(光盘内容另行下载，地址见书封底)(txt+pdf+epub+mobi电子书下载)

作者：倪宝童,汤莉

出版社：清华大学出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

网页设计与网站建设(CS6中文版)标准教程(光盘内容另行下载，地址见书封底)试读：

前言

目前，Internet随着计算机技术的普及迅速走进了各企事业单位和千家万户，越来越多的企事业单位和个人开始建设网站，以Internet为平台走向世界。网站作为面向世界的窗口，其设计和制作包含多种技术，例如平面设计技术、动画制作技术、CSS技术、XHTML技术等。

本书以Adobe Dreamweaver CS6、Photoshop CS6和Flash CS6等为基本工具，详细介绍了如何通过Photoshop设计网站的界面和图形、通过Flash制作网站的动画，以及通过Dreamweaver编写网页代码的方法。除此之外，本书还介绍了CSS样式表的相关知识。

本书主要内容：

本书共分为9章，通过大量的实例全面介绍了网页设计与制作过程中使用的各种专业技术，以及用户可能遇到的各种问题。全书共分为9章，各章的内容概括如下：

第1章介绍了网页制作基础知识，包括网页的构成、网页布局、网站策划、网页的艺术表现与风格设计、网页配色和网页元素的应用等内容。

第2章介绍了Photoshop CS6界面与基本操作，包括Photoshop CS6概述、获取图像和图像处理等内容。

第3章介绍了Photoshop CS6的图像处理，包括图层使用、绘图与图像编辑工具的使用、处理文本和使用路径等内容。

第4章介绍了Flash CS6基础知识，包括Flash CS6的工作界面、新增功能、文件的创建与保存、图形对象的绘制与填充和对象的基本操作等内容。

第5章介绍了Flash CS6的交互动画设计，包括文本工具的使用、滤镜和补间动画等内容。

第6章介绍了Dreamweaver CS6入门基础，包括了解Dreamweaver CS6、文本应用和插入列表文本等内容。

第7章介绍了创建网页对象，包括图像、链接和多媒体网页对象的创建等内容。

第8章介绍了网页的布局与交互，包括创建表格、编辑表格、插入表单元素和Spry表单验证等内容。

第9章介绍了CSS样式表的使用，包括CSS基础、CSS样式管理和滤镜等内容。

本书特色：

本书结合办公用户的需求，详细介绍了网页设计与网站制作的应用知识，具有以下特色。□ 丰富实例　本书每章以实例形式演示网页设计与网站制作的操作应用知识，便于读者学习操作，同时方便教师组织授课。□ 彩色插图　本书提供了大量精美的实例，在彩色插图中读者可以感受逼真的实例效果，从而迅速掌握网页设计与网站制作的操作知识。□ 思考与练习　扩展练习测试读者对本章所介绍内容的掌握程度；上机练习理论结合实际，引导学生提高上机操作能力。□ 配书光盘　本书精心制作了功能完善的配书光盘。在光盘中完整地提供了本书实例效果和大量全程配音视频文件，便于读者学习使用。

适合读者对象：

本书定位于各大中专院校、职业院校和各类培训学校讲授网页设计与网站制作的教材，并适用于不同层次的公务员、文秘和各行各业的办公用户的自学参考书。

除了封面署名人员之外，参与本书编写的人员还有李海庆、王咏梅、康显丽、王黎、赵俊昌、方宁、郭晓俊、杨宁宁、王健、连彩霞、丁国庆、牛红惠、石磊、王慧、李卫平、张丽莉、王丹花、王超英、王新伟等。在编写过程中难免会有漏洞，欢迎读者通过清华大学出版社网站www.tup.tsinghua.edu.cn与我们联系，以帮助我们改正提高。

第1章 网页制作基础知识

1.1 网页的构成

网页是由各种版块构成的，Internet中的网页内容各异。然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容版块、版尾和版权等。

□ Logo图标

Logo是企业或网站的标志，是徽标或者商标的英文，对徽标拥有公司的识别和推广有着重要作用，通过形象的Logo可以让消费者记住公司主体和品牌文化。网络中的Logo主要是各个网站用来与其他网站链接的图形标志，代表一个网站或网站的一个板块。例如，新浪网的Logo图标，如图1-1所示。图1-1　Logo图标

□ 导航条

导航条是网站的重要组成标签。合理安排导航条可以帮助浏览者迅速查找需要的信息。例如，新浪网的导航条，如图1-2所示。图1-2　导航条

□ Banner

Banner的中文直译为旗帜、网幅或横幅；意译则为网页中的广告。多数Banner都是以JavaScript技术或Flash技术为基础来制作的。Banner通过应用动画效果来展示更多的内容，以吸引浏览者，如图1-3所示。图1-3　Banner

□ 内容版块

网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等，如图1-4所示。图1-4　内容版块

□ 版尾版块

版尾是网页页面的底端版块，内容包括网站的联系方式、友情链接和版权信息等内容，如图1-5所示。图1-5　版尾

1.2 网页布局

网页布局是指对网页中的文字、图形等内容，也就是网页中的元素进行统筹计划与安排。无论是在纸上布局，还是通过软件进行布局，都需要了解网页中最基本的布局方式。

□ “国”字型网页布局“国”字型也称为“同”字型，适合大型网站的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等内容。这种结构是最常见的一种结构类型，如图1-6所示。图1-6　标准的“国”字型网页

□ 拐角型网页布局

拐角型结构与国字型很相近，只有形式上的区别。即上面是标题及广告横幅，左侧或者右侧是一窄列链接等，正文在很宽的区域中，下面有一些网站的辅助信息，如图1-7所示。

□ 左右框架型网页布局

这是一种左右分别为两页的框架结构，一般左面是导航链接，有的最上面会有一个小的标题或标志，右侧是正文。用户见到的大部分的大型论坛都是这种结构的，一些企业的网站也喜欢采用该结构。因为这种类型的网站结构非常清晰，一目了然，如图1-8所示。图1-7　拐角型网页图1-8　左右框架型网页

□ 封面型网页布局

这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型的网站大部分出现在企业网站和个人主页中，如果处理得好，会给人带来赏心悦目的感觉，如图1-9所示。图1-9　封面型网页

1.3 网站策划

网站策划是指应用科学的思维方法，进行情报收集与分析，对网站设计、建设、推广和运营等各方面问题进行整体策划，并提供完善解决方案的过程。

1.3.1 网站开发流程

为了加快网站建设的速度并减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。通过使用制作流程确定制作步骤，以确保每一步顺利完成。好的制作流程能帮助设计者解决策划网站的繁琐性，减小项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页，最后是上传和维护网站阶段。每个阶段都有独特的步骤，但相连的各图1-10　网站制作流程图阶段之间的边界并不明显。每一阶段并不总是有一个固定的目标，有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，总体制作流程如图1-10所示。

1.3.2 需求分析

提出目标是非常简单的事情，但重要的是如何使目标陈述得简明并可以实现。在很多Web网站项目中，目标有包容一切的倾向。实际上，一个网站不可能满足所有人的需求，对设计者来说，网站一定要有特定的用户和特定的任务。为了确定目标，开发小组必须要集体讨论，讨论的目的是让每一个成员都尽可能提出对网站的想法和建议。通常，集体讨论可以集中大家感兴趣的问题，通过讨论可以确定网站的设计方案以及如何避免网站太慢或难以使用的问题。

在对某个网站进行升级或全面重新设计时，注意不要召开集体会议来讨论已有网站中出现的问题；而防止项目偏离的方法，是让网站原设计者谈谈自己的设计思想和对问题的考虑点。在集体会议中，要点是挖掘各种各样的“期望清单”。“期望清单”就是描述各种不考虑价格、可行性、可应用性的有关网站的想法。

通过集体讨论的设计方案，能够兼顾到各方的实际需求和设计开发的技术问题，能够为成功开发Web网站打下良好的基础。

1.3.3 网页制作

网页制作包括网站的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等。

1. 网站定位

在网页设计前，首先要给网站一个准确的定位，是属于宣传自己产品的一个窗口，还是用来提供商务服务或者提供资讯服务性质的网站，从而确定主题与设计风格，名称要切题，题材要专而精，并且要兼顾商家和客户的利益。在主页中标题起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的标题必须具有概括性、简短、有特色且容易记的特点，还要符合自己主页的主题和风格，如图1-11所示。图1-11　企业网站与娱乐网站

2. 网站规划

在设计之前，需先画出网站结构图，内容包括网站栏目、结构层次、链接内容等。首页中的各功能按钮、内容要点、友情链接等都要体现出来，一定要切题，并突出重点，同时在首页上应把大段的文字换成标题性的、吸引人的文字，将单项内容交给分支页面去表达，这样才显得页面精练。也就是说，让浏览者一眼就能了解这个网站都能提供什么信息，使浏览者有一个基本的认识，并且保持继续看下去的兴趣。并且要细心周全，不要遗漏内容，还要为扩容留出空间。分支页面内容要相对独立，切忌重复，导航功能要好。网页文件命名开头不能使用运算符、中文字等，分支页面的文件存放于自己单独的文件夹中，图形文件存放于单独的图形文件夹中，汉语拼音、英文缩写、英文原义均可用来命名网页文件。在使用英文字母时，要区分文件的大小写，建议在构建的站点中，全部使用小写的文件名称，如图1-12所示。图1-12　网站首页与分页

3. 内容的采集

采集内容必须与标题相符，在采集内容的过程中，应注重特色。主页中的特色应该突出自己的个性，并把内容按类别进行分类和设置栏目，让人一目了然，栏目不要设置太多，最好不要超过10个，层次上最好少于5层，而重点栏目最好能直接从首页到达，保证用户通过不同的浏览器都能看到主页最好的效果，如图1-13所示。图1-13　网站导航

4. 主页设计

主页设计包括创意设计、结构设计、色彩调配和布局设计。创意设计来自设计者的灵感和平时经验的积累；结构设计源自网站结构图。在主页设计时应考虑到：“标题”要有概括性和特色，应符合自己设计时的主题和风格；“文字”的组织应有自己的特色，努力把自己的思想体现出来；“图片”适当地插入网页中可以起到画龙点睛的作用；“文字”与“背景”的合理搭配，可以使文字更加醒目和突出，使浏览者更加乐于阅读和浏览。整个页面的色彩在选择上一定要统一，特别是在背景色调的搭配上一定不能有强烈的对比，背景的作用主要在于统一整个页面的风格，对视觉的主体起一定的衬托和协调作用，如图1-14所示。图1-14　主色调与文字颜色的搭配

5. 添加图片

主页不能只有文字，而是必须在主页上适当地添加一些图片，增加可看性，当然处理得不好的以及无关紧要的图片最好不要放上去，否则让人觉得是累赘，同时也影响网页的传输速度。一般来说，图片颜色较少、色调平板均匀以及颜色在256色以内的最好把它处理成gif图像格式；如果是一些色彩比较丰富的图片，如扫描的照片，最好把它处理成jpg图像格式，因为gif和jpg图像格式各有各的压缩优势，设计者应根据具体的图片来选择压缩比，如图1-15所示。另外，网页中最好对图片添加注解，当图片的下载速度较慢，在没有显示出来时，图片的注解有助于让浏览者知道这是关于什么的图片，是否需要等待，是否可以单击，这样便于浏览者浏览。图1-15　网页中的图片提示图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小（即字节数），因为图片的大小影响网页的传输速度。小图片（100×40）一般可以控制在6KB以内，动画控制在15KB以内，较大的图片可以“分割”成小图片。

6. 网页排版

设计者需灵活运用表格、层、帧、CSS样式表来设置网页的版面。网页页面整体的排版设计是不可忽略的，它很重要的一个原则是合理地运用空间，让自己的网页疏密有致，井井有条，留下必要的空白，让人觉得很轻松。不要把整个网页都填得密密实实，没有一点空隙，这样会给人一种压抑感，如图1-16所示。图1-16　网页中的排版注意为保持网站的整体风格，开始制作时千万不要将许多页面一起制作。许多新手会急不可待地将收集到的各种资料导入各个页面。当首页制作完成后，还想要修改一些页面元素时，却发现一页一页改得好辛苦。建议先制作有代表性的一页，将页面的结构、图片的位置、链接的方式均设计周全，这样制作主页，不但速度快，而且整体性强。

7. 设置背景

网页的背景并不一定要用白色，选用的背景应该和整套页面的色调相协调。合理地应用色彩是非常关键的，根据心理学家的研究，色彩最能引起人们奇特的想象，最能拨动感情的琴弦。比如说做的主页是属于感情类的，那最好选用一些玫瑰色、紫色之类的比较淡雅的色彩，而不要用黑色、深蓝色这类比较灰暗的色彩，如图1-17所示。黑色是所有色彩的集合体，黑色比较深沉，它能压抑其他色彩，在图案设计中黑色经常用来勾边或点缀最深沉的部位，黑色在运用时必须小心，否则会使图案因“黑色太重”而显得沉闷阴暗。图1-17　网页背景颜色

8. 其他工作

如果想让网页更有特色，可适当地运用一些网页制作的技巧，诸如声音、动态网页、Java、Applet等，当然这些小技巧最好不要运用太多，它会影响网页的下载速度。另外可考虑主页站点的速度和稳定性，不妨考虑建立一两个镜像站点，这样不仅能照顾到不同地区网友对速度的要求，还能做好备份，以防万一。等主页做得差不多了，可在上面添加一个留言板、一个计数器。前者能让你及时获得浏览者的意见和建议，及时得到网友反馈的信息，最好能做到有问必答，用行动去赢得更多的浏览者；后者能让你知道主页浏览者的统计数据，你可以及时调整你的设计，以适应不同的浏览器和浏览者的需求。

1.3.4 网站维护

在完成网站的前台界面设计和后台程序开发后，还应对网站进行测试、发布和维护等工作，进一步地完善网站的内容。

□ 网站测试

严格的网站测试可以尽可能地避免网站在运营时出现种种问题。这些测试包括测试网站页面链接的有效性，网站文档的完整性、正确性以及后台程序和数据库的稳定性等项目。

□ 网站发布

在完成测试后，即可通过FTP、SFTP或SSH等文件传输方式，将制作完成的网站上传到服务器中，并开通服务器的网络，使其能够进行各种对外服务。

网站的发布还包括网站的宣传和推广等工作。使用各种搜索引擎优化工具对网站的内容进行优化，可以提高网站被用户检索的几率，提高网站的访问量。对于绝大多数商业网站而言，访问量就是生命线。

□ 网站维护

网站的维护是一项长期而艰巨的工作，包括对服务器的软件、硬件维护，系统升级，数据库优化和更新网站内容等。

用户往往不希望访问更新缓慢的网站，因此网站的内容要不断地更新。定期对网站界面进行改版也是一种维系用户忠诚度的办法。让用户看得到网站的新内容，可以吸引用户继续对网站保持信任和关注。

1.4 网页的艺术表现与风格设计

网页设计属于平面设计的范畴，所以网页效果同样包含色彩与布局这两种元素。网页设计虽然具有其自身的结构布局方式，但是平面设计中的构成原理和艺术表现形式也适用于网页设计。并且当两者成功结合时，制作的网页才会受到浏览者喜爱。

1.4.1 网页形式的艺术表现

平面构成的原理已经广泛应用于不同的设计领域，网页设计也不例外。在设计网页时，平面构成原理的运用能够使网页效果更加丰富。

1. 分割构成

在平面构成中，把整体分成部分，叫做分割。在日常生活中这种现象随时可见，如房屋的吊顶、地板等。下面介绍几种常用的分割方法。

□ 等形分割

该分割方法要求形状完全一样，如果分割后再把分隔界线加以取舍，则会产生良好的效果，如图1-18所示。图1-18　等形分割

□ 自由分割

自由分割就是不规则地将画面自由分割的方法。它不同于数学上的规则分割所产生的整齐效果，但它的随意性分割给人以活泼不受约束的感觉，如图1-19所示。图1-19　自由分割

□ 比例与数列

利用比例完成的构图通常具有秩序、明朗的特性，给人以清新之感。比例与数列分割方法有一定的法则，如黄金分割法、数列等，如图1-20所示。图1-20　比例分割

2. 对称构成

对称具有较强的秩序感。可是仅仅局限于上下、左右或者反射等几种对称形式，感觉单调乏味。所以，在设计时须在几种基本形式的基础上灵活加以应用。以下是网页中常用的几种基本对称形式。

□ 左右对称

左右对称是平面构成中最为常见的对称方式，该方式能够将对立的元素平衡地放置在同一个平面中。如图1-21所示为某网站的进站首页。该页面通过左右对称结构，将黑白两种完全不同的色调融入同一个画面。图1-21　左右对称构成

□ 中转对称

中轴对称布局比较简单，所以在修饰方面也要采用简单大方的元素，如图1-22所示。图1-22　中轴对称

□ 回转对称

回转对称构成给人一种对称平衡的感觉。使用该方式布局网页，不仅打破了导航菜单一贯长条制作的方法，又从美学角度平衡了网页页面，如图1-23所示。图1-23　回转对称提示回转是指在反射或移动的基础上，将基本形体进行一定角度的转动，以增强形象的变化。这种构成形式主要表现为垂直与倾斜或水平的对比，但效果上须适度平衡。

3. 平衡构成

在造型的时候，平衡的感觉是非常重要的，由于平衡造成的视觉满足，使人们能够在浏览网页时产生一种平衡、安稳的感受。平衡构成一般分为两种：一是对称平衡，如人、蝴蝶，以及以中轴线为中心左右对称的形状；另一种是非对称平衡，虽然没有中轴线，却有很端正的平衡美感。

□ 对称平衡

对称是最常见、最自然的平衡手段。在网页中以局部或者整体彩页对称平衡的方式进行布局，能够得到视觉上的平衡效果。如图1-24所示的就是在网页的中间区域采用了对称平衡构成，使网页保持了平稳的效果。

□ 非对称平衡

非对称其实并不是真正的“不对称”，而是一种层次更高的“对称”，使用这种平衡方法如果把握不好，页面就会显得乱，因此使用起来要慎重，不可滥用。如图1-25所示，通过左上角浅色图案堆积与右下角深色填充的非对称设计，形成非对称平衡结构。图1-24　对称平衡图1-25　非对称平衡

1.4.2 网页构成的艺术表现

重复、渐变以及空间构成都是色彩构成的方式，它们同样也适用于网页。运用这些形式可以使网页具有充实、厚重、整体、稳定、丰富网页的视觉效果，尤其是空间构成的运用，能够产生三维的空间，可以增强网页的深度感以及立体感。

1. 重复构成

重复是指在同一画面上，同样的造型重复出现的构成方式。重复无疑会加深印象，使主题得以强化，也是最富秩序的统一观感的手法。在网站构成中使用重复可以分成背景和图像两种形态，在背景设计中，形状、大小、色彩、肌理是可以完全重复的，如图1-26所示。图1-26　重复构成

2. 渐变构成

渐变是骨骼或者基本形在循序渐进的变化过程中，呈现出阶段性秩序的构成形式，其反映的是运动变化的规律。例如按形状、大小、方向、位置、疏密、虚实、色彩等关系进行渐次变化排列的构成形式，如图1-27所示。图1-27　渐变构成

3. 空间构成

我们一般所说的空间，指的是二维空间。在日常生活中用户可以看见，物体在空间给人的感觉总是近大远小。例如在火车站，月台上的柱子近的高，远的低，铁轨是近的宽，远的窄。对这些特性加以研究探索，分析立体形态元素之间的构成法则，可提高在平面中创建三维形态的能力。

□ 平行线的方向

改变排列平行线的方向，会产生三次元的幻象。如图1-28所示为具有空间感的网页效果。图1-28　三维空间

□ 折叠表现

在平面上一个形状折叠在另一个形状之上，会有前后、上下的感觉，产生空间感，如图1-29所示。图1-29　折叠空间

□ 阴影表现

阴影的区分会使物体具有立体的感觉和物体的凹凸感。如图1-30所示为通过阴影得到的立方体效果的网页。图1-30　立体空间效果

1.4.3 网页纹理的艺术表现

纹理即色彩，它是网页的重要视觉特征。在网页设计时，使用不同的纹理，配以适当的内容，能够让浏览者记忆深刻，尤其当运用牛皮纸、木纹等图案时，在网页中具有了更强的真实感。此外，发射与密集构成的图案，能够增强网页的空间感，将浏览者的思维转换到三维空间，充分发挥其想象力。

1. 肌理构成

肌理又称质感，由于物体的材料不同，表面的排列、组织、构造上不同，因此产生的粗糙感、光滑、软硬感也不同。在设计中，为达到预期的设计目的，强化肌理表现和更新视觉效应，必须研究创造更新更美的视觉效果。

现代计算机、摄影和印刷技术的发展更加扩大了肌理、材质的表现性，成为现代设计的重要手段。抽象主义和其他现代艺术流派创造的各种表现技法，是艺术设计师必须研习的课题。肌理即形象表面的纹理特征，用户可以通过多种方法创建不同的肌理。

□ 纸类肌理

各种不同的纸张，由于加工的材料不同，因此在粗细、纹理、结构上也不同，如人为的折皱，就是通过揉搓而产生的特殊肌理效果。

物体表面的编排样式不仅反映其外在的造型特征，还反映其内在的材质属性，如图1-31所示的就是以布料肌理为背景的网页。图1-31　布料肌理

□ 利用喷绘

使用喷笔、金属网、牙刷将溶解的颜料刷下去后，颜料如雾状地喷在纸上，也可以创造出个性的肌理。如图1-32所示为毛笔纹理的网页。图1-33所示为喷绘纹理的网页。

□ 渲染

这种方法是在具有吸水性强的材料表面，通过液体颜料进行渲染、浸染，颜料会在表面自然散开，产生自然优美的肌理效果，如图1-34所示。图1-32　毛笔纹理图1-33　喷绘纹理

□ 自然界元素

因为网站要给人一种整体效果，所以设计者对网站背景的设计越来越重视。如图1-35所示为木纹与绿叶肌理形成的网页背景。图1-34　渲染肌理图1-35　木纹肌理

2. 发射构成

发射的现象在自然界中广泛存在，如太阳的光芒、盛开的花朵、贝壳、螺纹和蜘蛛网等。可以说发射是一种特殊的重复和渐变，其基本形和骨骼线均环绕着一个或者几个中心。发射能引起视觉上的错觉，形成令人炫目的、有节奏的、变化不定的强烈的视觉效果。

□ 中心点式发射构成

该构成是由中心向外或由外向中心集中的发射方式。发射图案具有多方的对称性，有非常强烈的焦点，而焦点形成的视觉中心能产生视觉的光效应，使所有形象犹如光芒从中心向四面散射的效果，如图1-36所示。图1-36　发射图案

□ 螺旋式发射

它是以旋绕的排列方式进行的，旋绕的基本形逐渐扩大从而形成螺旋式的发射，如图1-37所示。图1-37　螺旋式发射

□ 同心式发射

同心式发射是以焦点为中心，层层环绕的发射方式。如图1-38所示为同心式发射网页背景效果。

3. 密集构成

密集构成在设计中是一种常用的组图手法。基本形在整个构图中可自由散布，有疏有密。最疏松或者最紧密的地方常常成为整个设计的视觉焦点。在画面中形成一种视觉上的张力，像磁场一样，具有节奏感。密集也是利用基本形数量排列的多少，从而产生疏密、虚实、松紧的对比效果。如图1-39所示为双色圆环图案的网页背景。图1-38　同心式发射图1-39　密集构成

1.4.4 网页设计风格类型

随着人们审美要求的提高，网页视觉效果越来越被重视。由于网页设计隶属于平面设计，所以平面设计中的绘画风格同样能够应用于网页设计。

1. 平面风格

平面风格是通过色块或者位图等元素形成二维的效果。这种效果最常出现在网页设计中，如图1-40所示。图1-40　平面风格的网页效果

2. 矢量风格

矢量风格的网页是通过矢量图像组合而成，这种风格的网页图像效果可以任意地放大与缩小，而不会影响查看效果，所以经常应用于动画网站中，如图1-41所示。图1-41　矢量风格的网页效果

3. 像素风格

像素画也属于点阵式图像，但它是一种图标风格的图像，更强调清晰的轮廓、明快的色彩，几乎不用混叠方法来绘制光滑的线条，所以常常采用gif格式，同时它的造型比较卡通，得到了很多用户的喜爱。如图1-42所示的网页中，就是采用了像素画与真实人物相结合的方式制作而成的。图1-42　像素风格的网页效果

4. 三维风格

三维是指在平面二维系中又加入了一个方向向量构成的空间系。在网页中运用三维风格中的三维空间效果，能够使网页效果无限延伸，如图1-43所示。

在网页中应用三维风格中的三维对象，能够在显示立体空间的同时，突出其主题，如图1-44所示。图1-43　三维空间的网页效果图1-44　三维对象的网页效果

1.5 网页配色

在网页设计中，好的色彩搭配能够使网页内容重点突出，网站风格统一，更易于浏览者浏览。而网页设计中任何一种色彩的运用都不是任意的，而是某一思想观念的准确解释，或者情感的传达，可塑性不可限量。色彩作为网页视觉元素的一种，不仅情感丰富，其形式的美感也使浏览者得到视觉和心理的享受。将色彩成功地运用在网页创意中，可以强化网页的视觉张力。

1.5.1 色彩的基础概念

色彩是网站最重要的一个部分，在学习如何为网站进行色彩搭配之前，首先要来认识颜色。

1. 色彩与视觉原理

色彩的变化是变幻莫测的，这是因为物体本身除了其自身的颜色外，有时也会因为周围的颜色，以及光源的颜色而有所改变。

□ 光与色

光在物理学上是电磁波的一部分，其波长为400～700nm，在此范围称为可视光线。当把光线引入三棱镜时，光线被分离为红、橙、黄、绿、青、蓝、图1-45　可见光与光谱紫，因而得出的自然光是七色光的混合，这种现象称作光的分解或光谱，七色光谱的颜色分布是按光的波长排列的，如图1-45所示，可以看出红色的波长最长，紫色的波长最短。

光是以波动的形式进行直线传播的，具有波长和振幅两个因素。不同的波长长短产生色相差别。不同的振幅强弱产生同一色相的明暗差别。光在传播时有直射、反射、透射、漫射、折射等多种形式。

光直射时直接传入人眼，视觉感受到的是光源色。当光源照射物体时，光从物体表面反射出来，人眼感受到的是物体表面的色彩。当光照射时，如遇玻璃之类的透明物体，人眼看到的是透过物体的穿透色。光在传播过程中，受到物体的干涉时，则产生漫射，对物体的表面色有一定影响。光通过不同物体时如果产生方向变化，称为折射，反映至人眼的色光与物体色相同。

□ 物体色

自然界的物体五花八门、变化万千，它们本身虽然大都不会发光，但都具有选择性地吸收、反射、透射色光的特性。当然，任何物体对色光不可能全部吸收或反射，因此，实际上不存在绝对的黑色或白色。

物体对色光的吸收、反射或透射能力，受物体表面肌理状态的影响。物体对色光的吸收与反射能力虽是固定不变的，但物体的表面色却会随着光源色的不同而改变，有时甚至失去其原有的色相感觉。所谓的物体“固有色”，实际上不过是常光下人们对此的习惯而已。例如在闪烁、强烈的各色霓虹灯光下，所有建筑几乎都失去了原有本色而显得奇幻莫测，如图1-46所示。图1-46　夜晚的城市

2. 色彩三要素

自然界的色彩虽然各不相同，但任何色彩都具有色相、亮度、饱和度三个基本属性。这三种基本属性也被称作色彩的三要素。

□ 色相

色相指色彩的相貌，是区别色彩种类的名称。根据该色的光波长划分，即若色彩的波长相同，色相就相同；若波长不同，则产生的色相也不同。红、橙、黄、绿、蓝、紫等每个字都代表一类具体的色相，它们之间的差别就属于色相差别。当用户称呼其中某一色的名称时，就会有一个特定的色彩印象，这就是色相的概念。正是由于色彩具有这种具体相貌特征，用户才能感受到五彩缤纷的世界。如果说亮度是色彩隐秘的骨骼，那么色相就像色彩外表华美的肌肤。色相体现着色彩外向的性格，是色彩的灵魂，如图1-47所示。图1-47　色相

如果把光谱的红、橙、黄、绿、蓝、紫诸色带首尾相连，制作一个圆环，在红和紫之间插入半幅，构成环形的色相关系，便称为色相环。在这六种基本色相各色中间加插一个中间色，其图1-48　色相环首尾色相按光谱顺序为：红、橙红、橙、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、红紫，构成了十二基本色相，这十二色相的彩调变化，在光谱色感上是均匀的。如果进一步再找出其中间色，便可以得到二十四个色相，如图1-48所示。

□ 饱和度

饱和度是指色彩的纯净程度。可见光辐射，有波长相当单一的，有波长相当混杂的，也有处在两者之间的，黑、白、灰等无彩色就是由于波长最为混杂，纯度、色相感消失造成的。光谱中红、橙、黄、绿、蓝、紫等色光都是最纯的高纯度的色光。提示纯色是饱和度最高的一级。光谱中红、橙、黄、绿、蓝、紫等色光是最纯的高饱和度的光；色料中红色的饱和度最高，橙、黄、紫等饱和度较高，蓝、绿色饱和度最低。

饱和度取决于该色中含色成分和消色成分（黑、白、灰）的比例，含色成分越大，饱和度越大；消色成分越大，饱和度越小，也就是说，向任何一种色彩中加入黑、白、灰都会降低它的饱和度，加得越多就降得越低。

如图1-49所示，当在蓝色中混入了白色时，虽然仍旧具有蓝色相的特征，但它的鲜艳度降低了，亮度提高了，成为淡蓝色；当混入黑色时，鲜艳度降低了，亮度变暗了，成为暗蓝色；当混入与蓝色亮度相似的中性灰时，它的亮度没有改变，饱和度降低了，成为灰蓝色。采用这种方法有十分明显的效果，就是从纯色加灰渐变为无饱和度灰色的色彩饱和度序列。图1-49　不同的饱和度

黑白网页与彩色网页之间存在着非常大的差异。大多数情况下，黑白网页给浏览者的视觉冲击力不如彩色网页效果强烈，同时对作品网页的风格也有着一些局限性。而色彩的选择不仅仅决定了作品的风格，同时也决定了作品是否饱满、富有魅力，如图1-50所示。图1-50　彩色与灰色网页

□ 亮度

亮度是色彩赖于形成空间感与色彩体量感的主要依据，起着“骨架”的作用。在无彩色中，亮度最高的色为白色，亮度最低的色为黑色，中间存在一个从亮到暗的灰色系列，如图1-51所示。图1-51　不同亮度

亮度在三要素中具有较强的独立性，它可以不带任何色相的特征而仅通过黑白灰的关系单独呈现出来。

色相与饱和度则必须依赖一定的明暗才能显现，色彩一旦发生，明暗关系就会同时出现，在用户进行素描的过程中，需要把对象的彩色关系抽象为明暗色调，这就需要有对明暗的敏锐判断力。用户可以把这种抽象出来的亮度关系看作色彩的骨骼，它是色彩结构的关键，如图1-52所示。图1-52　亮度与饱和度之间的关系

3. 色彩的混合

客观世界中的事物绚丽多彩，调色板上色彩变化无限，但如果将其归纳分类，基本上就是两大类：一类是原色，即红、黄、蓝；另一类就是混合色。而使用间色再调配混合的颜色，称为复色。从理论上讲，所有的间色、复色都是由三原色调和而成。

在构成网页的色彩布局时，原色是强烈的，混合色较温和，复色在明度上和纯度上较弱，各类间色与复色的补充组合，形成丰富多彩的画面效果。

□ 原色理论

所谓三原色，就是指这三种色中的任意一色都不能由另外两种原色混合产生，而其他颜色可以由这三原色按照一定的比例混合出来，色彩学上将这三个独立的颜色称为三原色。

□ 混色理论

将两种或多种色彩进行混合，造成与原有色不同的新色彩称为色彩的混合。它们可归纳成加色法混合、减色法混合和空间混合等三种类型。

加色法混合是指色光混合，也称第一混合，当不同的色光同时照射在一起时，能产生另外一种新的色光，并随着不同色混合量的增加，混色光的明度会逐渐提高。将红（橙）、绿、蓝（紫）三种色光分别作适当比例的混合，可以得到其他不同的色光，如图1-53所示。反之，其他色光无法混出这三种色光来，故称为色光的三原色，它们相加后可得白光。图1-53　加色法混合

减色法混合即色料混合，也称第二混合。在光源不变的情况下，两种或多种色料混合后产生新色料，其反射光相当于白光减去各种色料的吸收光，反射能力会降低。故与加色法混合相反，混合后的色料色彩不但色相发生变化，而且明度和纯度都会降低。所以混合的颜色种类越多，色彩就越暗越混浊，最后近似于黑灰的状态，如图1-54所示。图1-54　减色法混合

空间混合法亦称中性混合、第三混合。将两种或多种颜色穿插、并置在一起，于一定的视觉空间之外，能在人眼中造成混合的效果，故称空间混合。其实颜色本身并没有真正混合，它们不是发光体，而是反射光的混合。因此，与减色法相比，增加了一定的光刺激值，其明度等于参加混合色光的明度平均值，既不减也不加。

实际上，由于空间混合法比减色法混合明度要高，因此色彩效果显得丰富、明亮，有一种空间的颤动感。用这种混合法表现自然和物体的光感，更为闪耀。

1.5.2 色彩的模式

简单地讲，颜色模式是一种用来确定显示和打印电子图像色彩的模型，即一幅电子图像用什么样的方式在计算机中显示或者打印输出。Photoshop中包含了多种颜色模式，每种模式的图像描述和重现色彩的原理及所能显示的颜色数量各不相同。常见的有如下四种模式。

1. RGB色彩模式

RGB色彩模式是工业界的一种颜色标准，是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，RGB即代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一，如图1-55所示。其中每两种颜色的等量或者非等量相加所产生的颜色如表1-1所示。图1-55　RGB色彩模式分析图表1-1　每两种不同量度相加所产生的颜色

对RGB三基色分别进行8位编码，这三种基色中的每一种都有一个从0（黑）～255（白色）的亮度值范围。当不同亮度的基色混合后，便会产生出256×256×256种颜色，约为1670万种，这就是用户常听说的“真彩色”。电视机和计算机的显示器都是基于RGB颜色模式来创建其颜色的。

2. CMYK颜色模式

CMYK颜色模式是一种印刷模式。其中四个字母分别指青（Cyan）、洋红（Magenta）、黄（Yellow）、黑（Black），在印刷中代表四种颜色的油墨。CMYK基于减色模式，由光线照到有不同比例C、M、Y、K油墨的纸上，部分光谱被吸收后，反射到人眼的光产生颜色。图1-56　CMYK颜色模式分析图在混合成色时，随着C、M、Y、K四种成分的增多，反射到人眼的光会越来越少，光线的亮度会越来越低，如图1-56所示。

3. HSB颜色模式

HSB即色泽（Hue）、饱和度（Saturation）和明亮度（Brightness）。它不是将色彩数字化成不同的数值，而是基于人对颜色的感觉，让人觉得更加直观一些。其中色泽（Hue）是基于从某个物体反射回的光波，或者是透射过某个物体的光波；饱和度（Saturation），也被称作Chroma，是某种颜色中所含灰色的数量多少，含灰色越多，饱和度越小；明亮度（Brightness）是对一个颜色中光的强度的衡量。明亮度越大，则色彩越鲜艳，如图1-57所示。技巧在HSB模式中，所有的颜色都用色相、饱和度、亮度三个特性来描述。它由底与底对接的两个圆锥体的立体模型形象地表示出来。其中轴向表示亮度，自上而下由白变黑；径向表示色饱和度，自内向外逐渐变高；而圆周方向，则表示色调的变化，形成色环。图1-57　HSB颜色模式分析图

4. Lab颜色模式

Lab色彩模式以数学方式来表示颜色，所以不依赖于特定的设备，这样确保输出设备经校正后所代表的颜色能保持其一致性。其中L指的是亮度，a由绿至红，b由蓝至黄，如图1-58所示。图1-58　Lab色彩模式分析图

1.5.3 网页自定义颜色

一般情况下，访问者的浏览器会选择网页的文本和背景的颜色，使所有的网页都显示这样的颜色。但是，网页的设计者经常为了视觉效果而选择了自定义颜色。自定义颜色是一些为背景和文本选取的颜色，它们不影响图片或者图片背景的颜色，图片一般都以它们自身的颜色显示。自定义颜色可以为下列网页元素独自分配颜色：□ 背景：网页的整个背景区域可以是一种纯粹的自定义颜色。背景色总是在网页的文本或者图片的后面。□ 普通文本：网页中除了链接之外的所有文本。□ 超级链接文本：网页中的所有文本链接。□ 已被访问过的链接文本：访问者已经在浏览器中使用过的链接。访问过的文本链接以不同的颜色显示。□ 当前链接文本：当一个链接被访问者单击后，它便转换了颜色以表明它已经被激活了。

对于制作网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，会发现它们更多运用的是白色、蓝色、黄色等，使网页显得典雅、大方和温馨，如图1-59所示网页中，主要由白色背景和蓝色、黄色、粉红色以及黑色笔触组成，这种色彩的构成能够加快浏览者打开网页的速度。图1-59　色彩简单的网页

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。如表1-2所示为经常用到的网页背景颜色列表。表1-2　网页背景颜色与文字色彩搭配

此表只是起一个“抛砖引玉”的作用，设计者可以发挥想象力，设计出更有新意、更醒目的色彩搭配，使网页更具有吸引力。

1.5.4 色彩推移

色彩推移是按照一定规律有秩序地排列、组合色彩的一种方式。为了使画面丰富多彩、变化有序，通常可采用色相推移、明度推移、纯度推移、互补推移、综合推移等推移方式来组合网页色彩。

1. 色相推移

色相推移是指将一组色彩按色相环的顺序，由冷到暖或者由暖到冷进行排列、组合的一种色相渐变的方式，可以选用纯色系或者灰色系进行色相推移。如图1-60所示为多种颜色渐变的网页效果。

2. 明度推移

明度推移是指将一组色彩按明度等差级数的顺序，由浅到深或者由深到浅进行排列、组合的一种明度渐变的方式。此种方式一般都选用单色系列组合，也可以选用两组色彩的明度系列按明度等差级数的顺序交叉组合，如图1-61所示。图1-60　黄色-洋红-紫色渐变的网页效果示意图1-61　浅褐色到白色渐变

3. 纯度推移

纯度推移是指将一组色彩按纯度等差级数或者比差级数的顺序，由纯色到灰色或者由灰色到纯色进行排列组合的一种渐变方式，如图1-62所示。

4. 综合推移

综合推移是指将一组或者多组色彩按色相、明度、纯度推移进行综合排列、组合的渐变形式。由于色彩三要素的同时加入，其效果比单项推移复杂、丰富得多，如图1-63所示。图1-62　蓝绿色纯度网页效果图1-63　色相与明度推移效果

1.6 网页元素的应用

网页设计运用了平面设计的基本视觉元素来达到信息传达和审美的目的。这些视觉元素包括文字、图像、版面和色彩等。在本节中，将介绍网页的几种常用元素在网页中的作用。

1.6.1 导航Banner在网页中的应用

Banner是一种表现形式，是以GIF、JPG、SWF等格式建立的静态或者动态的图像文件。定位在网页中，大多用来表现网络广告内容，同时还可以使用Java等语言使其产生交互性，用Flash等动画制作工具来增强效果的表现力，如图1-64所示。图1-64　网页Banner效果

Banner广告有多种表现规格和形式，最开始使用的是488×60像素的标准标识广告。由于这种规格曾处于支配地位，在早期有关网络广告的文章中，如果没有特别指明，通常都是指标准标识广告。这种尺寸的Banner在如今网络中已经非常少见，几乎连门户网站上都看不见它的身影，取而代之的是与网页形成整体配比的尺寸，如图1-65所示。

而导航Banner主要出现在门户网站以外的其他网站中，导航Banner是导航菜单与Banner的结合，主要展示与网站相关的图片及文字信息。其中导航菜单与Banner既可以单独显示，也可以整体显示，如图1-66所示。

随着网页制作技术的提高，以及平面元素越来越多的介入，导航Banner的形状越来越多样化。而导航Banner的形状与尺寸并不是随意设置的，而是根据所在网页的主题与风格来决定的，如图1-67所示。图1-65　不同形式与尺寸的广告Banner图1-66　单独与整体导航Banner图1-67　不规则导航Banner

1.6.2 图标在网页中的应用

网页图标就是用图案的方式来标识一个栏目、功能或命令等，类似用取名字的方式来表示某人一样。例如，在网上看到一个日记本的图标，浏览者很容易就能辨别出这个栏目与日记或留言有关，这时就不需要再标注一长串文字了，也避免了各个国家之间语言不通所带来的麻烦，如图1-68所示。

在网页设计中，设计者会根据不同的需要来设计不同类型的网页图标。最常见到的是用于导航菜单的导航图标，以及用于链接其他网站的友情Logo图标，如图1-69所示。图1-68　网页图标的优势图1-69　导航图标与链接Logo图标

导航按钮是网页用来链接内部或者外部网页的纽带，其效果既要与所在网页的风格统一，又要使效果突出，这样才能够吸引浏览者。特效按钮不仅包括立体、材质等特殊的效果，还包括图标图1-70　网站主题链接图标形式，如图1-70所示。

1.6.3 文字在网页中的应用

网络信息通常通过文本、图像、Flash动画等呈现，其中文本是网页中最为重要的设计元素，而特效文字在网页中占有重要的地位，相对于图形来说是网页信息传递最直接的方式。在网站进站导航首页中，经常会以特效文字作为网站名称和进站链接。

如图1-71所示的网站，就是在首页中应用了金属特效文字作为该网站的名称，该特效文字在处理颜色和质感上与网页相统一，并且以立体的方式显示在网站中。

图1-72所示的网站则是以文字的纹理特效作为该网页的链接导航。在白色背景中，使用红色与黑色的暗花底纹特效，给人以很跳跃、醒目的视觉效应。

如图1-73所示的绿色立体文字，在该网页中起着吸引浏览者视觉焦点和阅读兴趣的作用。

在网页Banner中，网站名称或者以文字设计的网站标志突显，为了配合网页的整体效果，会以相应的特效文字显示在网页中，以突出网站名称，如图1-74所示的就是蓝色与灰色结合的金属塑料字作为网站名称的网页示意。图1-71　文字的金属立体特效图1-72　文字的纹理特效图1-73　立体字效图1-74　金属塑料特效文字

如图1-75所示为渐变文字作为网站的名称。文字色彩是由褐色到红色到紫色再到蓝色组合而成的，与左侧的色彩相呼应。图1-75　渐变文字特效提示在网页制作中，只要是想突出内容都可以制作成特效文字。在Photoshop中，可以通过图层样式功能、滤镜命令以及通道功能来制作特效文字，而且较简单。

在网络广告中为了突出广告语，或者是优惠活动，使浏览者可以在第一时间看到，通常会使用特效文字，如图1-76所示。网络广告中的渐变特效文字将广告中的网站名称和广告作用表达得较为醒目、独特。

1.6.4 广告在网页中的应用

网络广告的页面视觉元素在遵循着传统的平面设计的视觉传达方式的同时，也在原有的基础上赋予了平面元素新的特点。

1. 网络广告形式

最初的网络广告就是网页本身。当越来越多的商业网站出现后，怎么让消费者知道自己的网站就成为一个问题，广告主急需一种可以吸引浏览者到自己网站图1-76　网络广告中的特效文字上来的方法，而网络媒体也需要依靠它来赢利。

其中一种网络广告形式就是横幅广告——Banner，它将体现商家广告内容的图片放置在广告商的页面上，是互联网广告中最基本的广告形式，如图1-77所示。图1-77　横幅广告

随着网络日趋成熟，仅横幅广告已经无法满足广告主和浏览者的要求，网络广告界发展出了多种更能吸引浏览者的网络广告形式。比如全屏广告、撕页广告、弹出窗口广告、对联广告、流媒体按钮、鼠标响应移动图标、鼠标响应按钮和浮动图标等。如图1-78所示为弹出式全屏广告。

全屏广告一般出现在门户网站的首页。当打开一个门户网站时，有时会暂时显示屏幕大小的广告，此广告可以是静态的，也可以是动画的，几秒钟后自动消失；一般情况下显示门户网站的内容。该广告的显示方式，在第一时间内抓住了浏览者的视线，如图1-79所示为全屏动画广告。图1-78　弹出式全屏广告图1-79　全屏动画广告

漂移广告是商家常用的广告表现形式，大小多为80mm×80mm的方形，始终处于浏览者能看到的一个屏幕之内，最初的一些漂移广告在页面内做着无规则的慢慢漂移运动，有时会影响页面的整体效果，因此这类漂移广告现已改成了始终位于屏幕底部，当拉动滚动条时，广告将沿垂直方向向下移动，如图1-80所示。图1-80　漂移广告

漂移广告还有是以扩展的形式出现的，也就是鼠标响应漂移式广告。这种广告在鼠标移过时会出现一个更大的响应广告，在移去鼠标时响应广告又会马上消失或者缩小，如图1-81所示。响应广告包含了更多的内容，效果比普通漂移式要好。图1-81　鼠标响应漂移式广告

在网页中常见的广告形式有对联式广告，该广告在浏览页面完整呈现的同时，在页面两侧空白位置呈现对联形式广告，此种形式的广告因版面所限，仅表现于1024×768及以上分辨率的屏幕上，800×600分辨率下无法观看。其具有区隔广告版位，广告页面得以充分伸展，同时不干涉使用者浏览，注目焦点集中，提高网友吸引点阅，并有效传播广告相关讯息等特点，其尺寸以100×300像素为基准，如图1-82所示。

弹出窗口式广告既可以是图片，也可以是图文介绍。该形式是指在页面下载的同时弹出第二个迷你窗口的广告形式，如图1-83所示。图1-82　对联式广告图1-83　弹出窗口式广告

2. 网页广告色彩应用

一幅广告的色彩是倾向于冷色或者暖色，明朗鲜艳或者素雅质朴，这些色彩倾向所形成的不同色调给人们的印象就是广告色彩的总体效果。广告色彩的整体效果取决于广告主题的需要以及消费者对色彩的喜好，并以此为依据来决定色彩的选择与搭配。

例如，化妆品类商品常用柔和、脂粉的中性色彩，包含具有各种色彩倾向的紫色、粉红、亮灰等色，以表现女性高贵、温柔的性格特点，如图1-84所示。而男性化妆品则较多使用黑色、灰色或者单纯的色彩，这些色彩能够体现男性的庄重与大方，如图1-85所示。图1-84　女性化妆品广告图1-85　男性化妆品广告

药品广告的色彩大都是白色、蓝色、绿色等冷色，这是根据人们心理特点决定的。这样的总体色彩效果能给人一种安全、宁静的印象。使广告宣传的药品易于被人们接受，如图1-86所示。图1-86　药品广告

食品类广告常用鲜明、丰富的色调。红色、黄色和橙色可以强调食品的美味与营养，如图1-87所示。图1-87　食品类广告

儿童用品广告常用纯色和色相对比较鲜艳的和冷暖对比较强烈的色彩，以适应儿童天真、活泼的心理和爱好，如图1-88所示。图1-88　儿童用品广告

1.7 思考与练习

一、填空题

1. 网页由Logo、__________、Banner、__________、版尾和版权等六部分组成。

2. __________就是用图案的方式来标识一个栏目、功能或命令等，类似用取名字的方式来表示某人一样。

3. “国”字型也可以称为__________，适合大型网站，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些_______、_______、版权声明等内容。

4. __________又称质感，由于物体的材料不同以及表面的排列、组织、构造上不同，因此产生的粗糙感、光滑、软硬感也不同。

5. __________是企业或网站的标志，是徽标或者商标的英文说法，起到对徽标拥有公司的识别和推广的作用，通过形象的Logo可以让消费者记住公司主体和__________。

6. 当把光线引入三棱镜时，光线被分离为_______、橙、_______、绿、青、蓝、紫，因而得出的自然光是七色光的混合。

7. _______色彩模式是工业界的一种颜色标准，是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

二、选择题

1. 下面_______色彩模式色域最广？

A. HSB模式

B. RGB模式

C. CMYK模式

D. Lab模式

2. 光是以________的形式进行直线传播的，具有波长和振幅两个因素。

A. 振荡

B. 电

C. 波动

D. 无线波

3. 在完成测试后，即可通过FTP、SFTP或SSH等文件传输方式，将制作完成的网站上传到________中，并开通服务器的网络，使其能够进行各种对外服务。

A. 数据库

B. U盘

C. 表

D. 服务器

4. 网站________是一项长期而艰巨的工作，包括对服务器的软件、硬件维护，系统升级，数据库优化和更新网站内容等。

A. 维护

B. 测试

C. 制作

D. 开发

三、简答题1. 简单介绍网页的构成。2. 网页的结构布局有哪几种。3. 概述网站的开发流程。4. 概念色彩模式的分类及特点。5. 简单介绍图标在网页中的作用。

第2章 Photoshop CS6界面与基本操作

2.1 Photoshop CS6概述

Photoshop是一个功能强大的图像处理软件，可以实现对图像的各种处理操作，实现多种信息表达效果。而这些图像都可以通过Photoshop中的各种工具与命令来完成，下面介绍Photoshop CS6的界面与新增功能。

2.1.1 Photoshop CS6界面

在开始使用Photoshop处理和绘制图像之前，首先要了解该软件的界面构成，以帮助用户快速地进行操作。启动Photoshop后，将显示Photoshop CS6的操作界面，该软件的窗口由菜单栏、选项栏、工具箱、图像编辑窗口和控制面板等板块组成，如图2-1所示。图2-1　Photoshop CS6界面组成

当启动Photoshop CS6后，会发现该界面与之前的版本界面有所不同。在默认情况下，工具箱、工作区域与控制调板有其固定的位置，当然三者也可以成为浮动调板或者浮动窗口。主要组成部分介绍如下：

□ 菜单栏

Photoshop的菜单栏包括11项，分别是【文件】、【编辑】、【图像】、【图层】、【文字】、【选择】、【滤镜】、【3D】、【视图】、【窗口】和【帮助】。使用这些菜单选项可以执行大部分Photoshop中的操作。

□ 工具选项栏

选项栏是从Photoshop 6.0版本开始出现的，用于设置工具箱中当前工具的参数。不同的工具所对应的工具栏也有所不同。

□ 工具箱

工具箱是每一个设计者在编辑图像过程中必不可缺少的，工具箱在Photoshop界面的左侧，当单击并且拖动工具箱时，该工具箱呈半透明状。工具箱中列出了Photoshop常用的工具，单击工具按钮或者选择工具快捷键即可使用这些工具。对于存在子工具的工具组（在工具右下角有一个小三角标志说明该工具组有子工具）来说，只要在图标上右击鼠标或单击左键不放，就可以显示出该工具组中的所有工具。

在表2-1中列出了工具箱中所有工具的名称、快捷键以及功能介绍，以方便查看。图2-2显示了所有的工具。表2-1　工具箱中的各项工具与相应功能介绍图2-2　工具箱中的工具

工具箱中的每一个工具都具有相应的选项，激活某个工具后，该工具对应的选项将显示在工具选项栏中，用户可根据需要随时对选项进行设置和调整。图2-3显示了部分工具的选项栏设置。

□ 控制面板

Photoshop中的控制面板综合了Photoshop编辑图像时最常用的命令和功能，以按钮和快捷键菜单的形式集中在控制面板中。在Photoshop CS6中，所有控制面板以图标形式显示在界面右侧，并且将其分为9个面板组，如图2-4所示。图2-3　工具选项栏图2-4　控制面板图标显示

当单击其中一个面板图标后，则该面板显示；如果想打开另外一个面板组，那么单击其中一个面板图标后，显示该面板组，而原来显示的面板组将自动缩小为图标，如图2-5所示。提示要想隐藏打开的控制调板，可以再次单击该调板的图标，或者是单击调板组右上角的双三角。

□ 状态栏

状态栏中显示的是当前操作的提示和当前图像的相关信息。图2-5　打开或者隐藏面板

□ 标题栏

标题栏位于窗口的顶端。左侧显示Adobe Photoshop图标和字样。右侧有程序窗口控制按钮，从左到右依次是【最小化】按钮、【最大化】按钮、【关闭】按钮，这三个按钮是Windows共有的。

□ 图像窗口

在打开一幅图像的时候就会出现图像窗口，它是显示和编辑图像的区域。

2.1.2 Photoshop CS6新增功能

在Photoshop CS6中，除了常用的基本功能外，还增加了一系列的新功能。该软件使工作界面的改变、内容感知的修补和移动、全新的裁剪功能、矢量图层、模糊效果、图层搜索、自动恢复、油画滤镜等功能操作更加实用、简单、方便。

1. 全新的裁剪功能

在Photoshop CS6中，使用全新的非破坏性裁剪工具可以快速精确地裁剪图像，在画布上能够较好控制图像，如图2-6所示。图2-6　裁剪图像

2. 图层搜索

现在可以通过类型、名称、效果、模式、属性和颜色等图层搜索工具对图层进行搜索与排序。对那些有着众多图层的项目来说，这无疑是一个非常实用的新功能，如图2-7所示。图2-7　搜索图层

3. 内容感知移动

内容感知移动是CS6中的一个新工具，用户在移动图片中选中某物体时，能智能填充物体原来的位置。例如，先用选择工具选中湖上的小船，再点击内容感知移动工具，接着把小船拖放到湖面的另一个位置。在拖动小船的同时，软件就会自动根据周围环境情况填充空出的区域，如图2-8所示。

4. 油画滤镜

使用Mercury图形引擎支持的油画滤镜，可使作品快速地呈现出油画效果。控制画笔的样式以及光线的方向和亮度，也可以产生出油画效果，如图2-9所示。图2-8　内容感知移动图2-9　油画效果

5. 文字

菜单栏中专门设置了“文字”主菜单，给文字新增了“字符样式”和“段落样式”两个配套的调板，字符样式和段落样式本身没什么高深的技术含量，与Word中的字符样式和段落样式大同小异，但作为两个调板出现，它们同样不容小视，如图2-10所示。图2-10　字符样式与段落样式

2.2 Photoshop CS6基本操作

在使用Photoshop设计图像时，需要先对图像的一些基本属性进行调整，以设计出符合具体需求（例如Web图形、广告页、户外广告等）的图像。除此之外，擅用一些简单的基本操作，可以更高效地设计图像。本节将介绍一些Photoshop的基本操作，比如设计图像大小、画布大小及图像的复制、粘贴和清除等。

2.2.1 设置图像大小

执行【图像】∣【图像大小】命令（快捷键Ctrl＋Alt＋I），如图2-11所示。各个选项的功能如表2-2所示。图2-11　【图像大小】对话框表2-2　【图像大小】对话框各个选项功能

在【图像大小】对话框中单击【自动】按钮，弹出【自动分辨率】对话框，如图2-12所示，可以设置输出设备的网点频率。在【品质】选项组中可以设置印刷的品质：启用【草图】单选按钮时，产生的分辨率与网点频率相同（不低于每英寸72像素）；启用【好】单选按钮时，产生的分辨率是网点频率的1.5倍；启用【最好】单选按钮时，产生的分辨率是网点频率的2倍。图2-12　【自动分辨率】对话框

2.2.2 设置画布大小

对于平面设计工作，无论是原来的手工创作，还是现代的电脑数字创作，都脱离不开画布这个平台。在手工创作时，创作者将画布平铺在画板上；而电脑数字创作，设置了一个虚拟的背景层来作为画布，但二者的工作方式是一样的。

执行【图像】|【画布大小】命令（快捷键Ctrl＋Alt＋C），即可弹出【画布大小】对话框，如图2-13所示。图2-13　【画布大小】对话框

在该对话框中，无论是扩大还是缩小画布尺寸，不仅可以绝对或相对进行尺寸设置，还可以自定义画布中心位置。只要单击【定位】选项中的箭头按钮，即可得到不同的效果，如图2-14所示。图2-14　扩展画布效果

2.2.3 图像的复制与粘贴

复制与粘贴操作是图像处理过程中，经常要用到的编辑方法之一。有效地运用该命令，可以快速地创建出多个图像副本。在Photoshop中复制图像也分为局部复制与整体复制。

1. 整体复制

所谓整体复制，就是创建一个图像文件的副本。执行【图像】|【复制】命令，打开【复制图像】对话框。在该对话框的文本框中，可以输入图像副本的名称。另外，启用【仅复制合并的图层】复选框，所复制出的图像将自动合并所有图层；而禁用【仅复制合并的图层】复选框，所复制出的图像保留所有图层状态，如图2-15所示。图2-15　【复制图像】对话框

2. 局部复制

所谓的局部复制，就是复制选取范围内的图像。在复制局部图像中，可以在不破坏源文件的情况下移动，这种局部复制也被称作拷贝；也可以在破坏源文件的情况下移动，这叫做剪切。

□ 拷贝与粘贴

如果在不破坏源文件的情况下移动局部图像至另外一个文件内，那么首先要准备两个图像文档，并且其中一个文档中还要在要移动的图像中建立选区，如图2-16所示，按快捷键Ctrl＋C，执行【拷贝】命令。图2-16　源图像与目标图像

然后在目标图像中执行【编辑】｜【粘贴】命令（快捷键Ctrl＋V），这时局部图像将出现在该文档中，如图2-17所示。

□ 剪切图像

在Photoshop中进行剪切图像同【拷贝】命令一样简单，执行【编辑】｜【剪切】命令（快捷键Ctrl＋X）即可。但是需要注意的是，剪切是将选取范围内的图像剪切掉，并放入剪贴板中。所以剪切区域内图像会消失，并填入背景色颜色，如图2-18所示。图2-17　粘贴后的图像图2-18　图像剪切前后对比

2.2.4 图像清除

然后执行【编辑】｜【清除】命令，即可清除选取区域，如图2-20所示。其中，【清除】命令是删除选区中的图像，所以类似于【橡皮擦工具】。图2-19　建立选区图2-20　执行【清除】命令

2.3 选取图像

图像处理过程中，需要对许多图形进行局部编辑或修改，这时图像的选取操作就显得尤为重要。选取范围的优劣性、准确与否，都与图像编辑的成败有着密切的关系。因此，在最短时间内进行有效的、精确的范围选取，能够提高工作效率和图像质量，为以后的图像处理工作奠定基础。

2.3.1 使用选框工具

Photoshop中的选框工具包括【矩形选框工具】、【椭圆选框工具】、【单行选框工具】与【单列选框工具】，如图2-21所示。这四种工具的使用方法很简单，只需在画面中单击并拖曳鼠标拉出一个矩形或椭圆选框，松开鼠标即可创建选区。图2-21　选框工具

1. 矩形/椭圆选框工具

选框工具中的【矩形选框工具】与【椭圆选框工具】是Photoshop中最常用的选取工具。在工具箱中选择【矩形选框工具】，在画布上面单击并且图2-22　正常样式下的矩形选区拖动鼠标，绘制出一个矩形区域，释放创建鼠标后会看到区域四周有流动的虚线。在工具选项栏中包括3种样式：正常、约束长宽比与固定大小。在【正常】样式下，可以创建任何尺寸的矩形选区，如图2-22所示。

选择【矩形选框工具】后，在工具选项栏中设置【样式】为【约束长宽比】，默认参数值【宽度】与【高度】为1:1，这时创建的选区不限制尺寸，但是其宽度与高度比例相等为正方形；如果在文本框中输入其他数值，会得到其他比例的矩形选区，如图2-23所示。图2-23　创建固定比例的矩形选区

如果在工具选项栏中设置【样式】为【固定大小】，那么在【宽度】与【高度】文本框中输入想要创建选区的尺寸，在画布中单击即可创建固定尺寸的矩形选区，如图2-24所示。

选择工具箱中的【椭圆选框工具】，在工具选项栏中除了可以设置与矩形工具相同的选项外，还可以设置椭圆选区的【消除锯齿】选项，该选项是用于消除曲线边缘的马赛克效果，如图2-25所示为启用与禁用该选项得到的椭圆边缘效果。图2-24　创建固定大小的矩形选区图2-25　【消除锯齿】效果对比图

2. 单行/单列选框工具

工具箱中的【单行选框工具】与【单列选框工具】，可以选择一行像素或者一列像素，如图2-26所示。其工具选项栏与【矩形选框工具】相同，只是【样式】选项不可设置。图2-26　创建单行或者单列选区

2.3.2 使用套索工具

Photoshop中的套索工具组包括【套索工具】、【磁性套索工具】与【多边形套索工具】，使用这些工具可以创建比较随意的选区，在使用时，通过在窗口中单击并按住鼠标拖动绘制区域，在到达起点时松开鼠标即可创建一个封闭的选区。其中【套索工具】也可以称为曲线套索，使用该工具创建的选区是不精确且不规则的选区，如图2-27所示。图2-27　使用【套索工具】创建选区

在背景与主题色调对比强烈，并且主题边缘复杂的情况下，使用【磁性套索工具】可以方便、准确、快速地选取主体图像。只要在主体边缘单击即可沿其边缘自动添加节点，如图2-28所示。

选择【磁性套索工具】后，工具选项栏中的选项名称及功能如表2-3所示。如图2-29所示为默认选项数值前后选区的对比效果。可以发现调大参数值后，节点明显减少，而生成的选区也不够精确。图2-28　使用【磁性套索工具】创建选区图2-29　更改选项数值得到的选区表2-3　【磁性套索工具】选项及功能【多边形套索工具】通过鼠标的连续单击来创建多边形选区，比如五角星、六边形等形状区域，该工具选项栏与【套索工具】完全相似，在画布中的不同位置单击形成多边形，当指针带有小圆圈形状时单击，可以生成多边形选区，如图2-30所示。图2-30　使用【多边形套索工具】创建选区

2.3.3 使用魔棒工具

□ 【取样大小】

其中包括“取样点”、“3×3平均”、“5×5平均”、“11×11平均”、“31×31平均”、“51×51平均”和“101×101平均”选项。这些选项限制了读取所单击区域内指定数量像素的平均值。

□ 【容差】

设置选取颜色范围的误差值，取值范围在0～255之间，默认的容差数值为32。输入的数值越大，则选取的颜色范围越广，创建的选区就越大；反之，选区的范围越小，如图2-31所示。图2-31　不同容差值创建的连续选区

□ 【连续】

默认情况下启用该选项，表示能选中与单击处相连区域中的相同像素；如果禁用该选项，则能够选中整幅图像中符合该像素要求的所有区域，如图2-32所示。图2-32　不同容差值创建的不连续选区

□ 【对所有图层取样】

当图像中包含多个图层时，启用该选项后，可以选中所有图层中符合像素要求的区域；禁用该选项后，则只对当前作用图层有效。

2.3.4 选区基本操作

了解如何使用不同的工具选取不同的选区后，还必须了解关于选区的简单操作。比如除了上述工具与命令可以创建选区外，还有什么方法可以创建选区、如何移动选区或者是选区内的图像，以及如何保存与再次载入选区等操作。

1. 全选与反选

不同形状选区可以使用不同选取工具来创建，要是以整个图形或者画布区域建立选区，那么可以执行【选择】|【全选】命令（快捷键Ctrl＋A），如图2-33所示。图2-33　选择整个画布

当已经在图像中创建选区后，想要选择该选区以外的像素时，可以执行【选择】|【反向】命令（快捷键Ctrl＋Shift＋I）即可，如图2-34所示。该命令与【色彩范围】中的【反相】选项相似。图2-34　反向选区

2. 取消选择与重新选择

当在选区中完成操作后，可以将选区删除，这样才能在图像其他位置继续操作，执行【选择】|【取消选择】命令（快捷键Ctrl＋D）删除选区。

当删除选区后，要想再一次显示该选区，执行【选择】|【重新选择】命令（快捷键Ctrl＋Shift＋D）即可重新得到选区。

要想隐藏选区而不删除，可以执行【视图】|【显示额外内容】命令（快捷键Ctrl＋H），重新显示选区同样执行该命令即可。如果在编辑工作中，只能在局部绘制或者操作，是因为隐藏了选区而不是删除选区，如图2-35所示。图2-35　在隐藏选区的画布中绘制

3. 移动选区

当创建选区后，可以随意移动选区以调整选区位置，移动选区不会影响图像本身效果。使用鼠标移动选区是最常用的方法，确保当前选择了选取工具，将鼠标指向选区内，即可按下左键拖动即可，如图2-36所示。在创建选区的同时也可以移动选区，方法是按下空格键并且拖动鼠标。图2-36　移动选区

如果想在同一图层中移动部分图像，那么可以在创建选区后，选择工具箱中的【移动工具】，单击并且拖动选区即可同时移动选区和选区内的图像，如图2-37所示。图2-37　移动选区内的图像

4. 存储与载入选区

创建一个较为精确的选区往往需要花费很长时间才能完成，在创建选区后，可以将其保存起来，以便在需要时载入重新使用，提高工作效率。

□ 保存选区

使用选区工具或者命令创建选区后，执行【选择】|【存储选区】命令，弹出【存储选区】对话框，如图2-38所示，其中的选项及功能如表2-4所示。图2-38　【存储选区】对话框表2-4　【存储选区】对话框中的选项及功能

在该对话框中，选择新建通道保存选区后，【通道】面板中出现以对话框中命名的新通道，如图2-39所示。

□ 载入选区

将选区保存在通道后，可以将选区删除进行其他操作。当想要再次借助该选区进行其他操作时，执行【选择】|【载入选区】命令，打开如图2-40所示对话框，在【通道】选项中选择指定通道名称即可。该对话框中的选项及功能如表2-5所示。图2-39　选区保存在通道中图2-40　【载入选区】对话框表2-5　【载入选区】对话框中的选项及功能

当画布中已经存在一个选区时，在【载入选区】对话框的【操作】选项组中启用【添加到选区】选项，单击【确定】按钮后得到两个选区，如图2-41所示。图2-41　载入选区

2.4 图像处理

在Photoshop中，用户可以对图像进行变换和裁剪等操作。同时，也可以通过调整图像色阶、曲线和色相/饱和度的方法，来改变图像的颜色。

2.4.1 图像变换

在进行平面创作时，大量的工作是通过改变对象的形状和位置来产生图像效果的变化。因此，掌握Photoshop中的变换操作，是所有操作中很关键的基本技能。

1. 传统变换

打开一幅图像后，执行【编辑】|【变换】命令（快捷键Ctrl＋T），其中的变换命令能够进行各种样式的变形，如图2-42所示。图2-42　各种变换□ 缩放　缩放操作通过沿着水平和垂直方向拉伸，或挤压图像内的一个区域来修改该区域的大小。□ 旋转　旋转可以改变一个图层内容或一个选择区域来进行任意的方向旋转。其中菜单中还提供了【旋转180度】、【旋转90度（顺时针）】和【旋转90度（逆时针）】命令。□ 斜切　沿着单个轴，即水平或垂直轴，倾斜一个选择区域。斜切的大小将影响最终图像变得有多么倾斜。要想斜切一个选择区域，拖动边界框的那些节点即可。□ 扭曲　当扭曲一个选择区域时，可以沿着它的每个轴拉伸进行操作。和斜切不同的是，倾斜不再局限于每次一条边。拖动一个角，两条相邻边将沿着该角拉伸。□ 透视　透视变换是挤压或拉伸一个图层或选择区域的单条边，进而向内外倾斜两条相邻边。□ 变形　该命令可以对图像任意拉伸从而产生各种变换。□ 水平翻转　该命令是沿垂直轴水平翻转图像。□ 垂直翻转　该命令是沿水平轴垂直翻转图像。

2. 内容感知型变换

内容识别缩放功能可在不更改重要可视内容（如人物、建筑、动物等）的情况下调整图像大小，它可以通过对图像中的内容进行自动判断后决定如何缩放图像。虽然这种判断并不是百分百准确的，但确实是Photoshop通往智能化的一个标志。

打开一幅图像，并且进行图层复制。执行【编辑】|【内容识别比例】命令（快捷键Alt＋Ctrl＋Shift＋C），即可对图像进行有识别的变换。变换后的图像，主体人物不会进行很大变形，而大面积的天空或水面等，会智能地将其进行缩放，这点也是该项功能与普通变换工具的不同之处，如图2-43所示。图2-43　内容识别缩小

2.4.2 图像裁剪

在编辑图像过程中，时常需要将图像中不需要的部分裁去，因此裁切图像是不可避免的。Photoshop为用户提供了一个非常方便的工具——【裁剪工具】。

使用【裁剪工具】，可以通过手动的方式，快速达到裁切图像的目的。该工具可以自由控制裁剪的大小和位置，还可以在裁剪的同时，对图像进行旋转、变形，以及改变图像分辨率等操作。

在工具箱中单击【裁剪工具】按钮，启用此工具后，在工具选项栏中可以设置裁剪图像的尺寸，如图2-44所示。

在裁剪过程中需要对图像进行重新取样时，可以直接输入高度和宽度的图2-44　工具选项栏值。如果要裁剪图像而不重新取样（采用默认设置），可以指定使用默认设置进行裁剪。裁剪工具选项栏中的选项如下。□ 不受约束　选择不受约束按钮，是指在裁剪区域不受到画面的限制，如图2-45所示。图2-45　不受约束□ 纵向与横向旋转裁剪框　单击该按钮，可以旋转裁剪区域。□ 拉直　启用该按钮，通过在图像上画一条线来拉直该图像，如图2-46所示。图2-46　拉直图像□ 视图　选择该按钮，可以改变裁剪区域的视图，如图2-47所示。□ 设置其他裁剪选项　点击该按钮，可以修改裁剪区域的效果，如图2-48所示。□ 删除裁剪的像素　启用该按钮，可以删除裁剪的像素。

在工具箱中选择【透视裁剪工具】，在裁剪图像时用户可以将透视的图像进行校正，如图2-49所示。图2-47　改变视图图2-48　裁剪区域效果

2.4.3 调整色阶

色阶是Photoshop的常用工具，主要用来调整图片的明与暗，整体或局部，操作时色调变化直观，简单且实用。其主要通过高光、中间调和暗调3个变量进行图像色调调整。当图像偏亮或偏暗时，可使用此命令调整其中较亮和较暗的部分，对于暗色调图像，可将高光设置为一个较低的值，以避免太大的对比度。执行【图像】|【调整】|【色阶】命令（快捷键Ctrl＋L），打开【色阶】对话框，如图2-50所示。其中的各选项功能如表2-6所示。图2-49　透视裁剪图2-50　【色阶】对话框表2-6　【色阶】对话框中的选项及其功能

1. 输入色阶

在【色阶】对话框中，主要调整选项为【输入色阶】选项，该选项可以用来增加图像的对比度。它有两种调整方法，一种是通过拖动色阶的三角滑块进行调整；另外一种是直接在【输入色阶】文本框中输入数值。其中左侧的黑色三角滑块用于控制图像的暗调部分，取值范围为0～253。当该滑块向右拖动时，增大图像中暗调的对比度，使图像变暗，而相应的数值框也发生变化，如图2-51所示。图2-51　调整暗调区域

右侧的白色三角滑块用于控制图像的高光对比度，数值范围为2～255。当该滑块向左拖动时，将增大图像中的高光对比度，使图像变亮，而相应的数值框也发生变化，如图2-52所示。图2-52　调整高光区域

中间的黑色滑块是调整中间色调的对比度，可以控制在黑场和白场之间的分布比例，数值小于1.00图像变暗；大于1.00图像变亮。如果往暗调区域移动，图图2-53　调整中间调区域像将变亮，因为黑场到中间调的这段距离，比起中间调到高光的距离要短，这代表中间调偏向高光区域更多一些，因此图像变亮了；如果向右拖动会产生相反的效果，使图像变暗，如图2-53所示。

2. 输出色阶【输出色阶】选项可以降低图像的对比度，其中的黑色三角用来降低图像中暗部的对比度，向右拖动该滑块，可将最暗的像素变亮，感觉在其上方覆盖了一层半透明的白纱，其取值范围是0～255；白色三角用来降低图像中亮部的对比度，向左拖动滑块，可将最亮的像素变暗，图像整体色调变黑，其取值范围是255～0，如图2-54所示。图2-54　设置输出色阶

通常情况下，如果将【输出色阶】的滑块向左或向右拖动后，再将【输入色阶】滑块向右或向左拖动，图像色调变化的同时，感觉在其上方覆盖了一层半透明的白纱，这是在【输出色阶】选项中提高或降低了图像的整体对比度，以及在调整整体亮度或暗度的基础上操作【输入色阶】产生的效果。

3. 通道选项

该选项用于选择特定的颜色通道，以调整其色阶分布。【通道】

试读结束[说明：试读内容隐藏了图片]

下载完整电子书