1、第1章 网页设计概论本章要点本章要点 网页设计基础知识 与网页设计相关的多媒体技术 HTML语言基础目 录1.1 网页设计基础知识网页设计基础知识1.2 多媒体素材基础多媒体素材基础1.3 HTML基础基础1.1 网页设计基础知识网页设计基础知识1.1.1 Internet与与Web1.1.2 网页、网站与主页网页、网站与主页1.1.3 网站分类与赏析网站分类与赏析1.1.4 网页色彩与布局网页色彩与布局1.1.1 Internet与与Web Internet 又称国际互联网，是一个把分布于世界各地不同结构的计算机网络通过各种传输介质互相连接起来的网络。Internet上的信息资源极为丰富，分
2、为信息资源和服务资源两类。它的主要功能包括：网上信息查询、网上交流、电子邮件、文件传输和远程登录。World Wide Web 简称WWW或Web，也称万维网。是Internet提供的最主要的信息服务。是以超文本标记语言（Hypertext Markup Language,HTML）与超文本传输协议（Hypertext Transfer Protocol，HTTP）为基础，能够以十分友好的接口提供Internet信息查询服务的浏览系统。1.1.2 网页、网站与主页（网页、网站与主页（1/3）网页（网页（Web Page）也称为Web页，是用户通过浏览器在Internet中看到的页面，网页分为静
3、态网页和动态网页。从文件角度讲，网页通常是一种由HTML语言语言编写的文本文件，网页文件又称HTML文件，其扩展名为.html或或htm。在浏览器的菜单栏中选择【查看】【源文件】命令，可打开一个网页文件并看到网页的源代码。网页作为一种文本文件，可以用任意文本编辑器编辑。提示提示：网页起初都是用HTML编写的，许多网页文件的扩展名为.html或.htm，但现在很多网页的扩展名为.jsp、.asp、.aspx、.php、.phpx等，这些网页是有区别的，它们表示是使用不同的网页编程技术编写的。1.1.2 网页、网站与主页（网页、网站与主页（2/3）网站（网站（Website）又称为站点或Web站点
4、，是指根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。网站总是由一个主页和其他具有超链接文件的页面构成。主页主页 是网站中的一个特殊页面，是进入网站的门户，是整个网站的第一页。一般命名为index.html。1.1.2 网页、网站与主页（网页、网站与主页（3/3）网页基本元素网页基本元素 文本 图像 超链接 动画1.1.3 网站分类与赏析网站分类与赏析 门户类网站 企业信息类网站 教育类网站 产品信息类网站 1.1.4 网页色彩与布局（网页色彩与布局（1/2）色彩基础知识 三原色、颜色分类、饱和度、透明度、色系 色彩搭配技巧 网页色彩的应用分析“中国瓷器”网站（htt
5、p:/）“北美工艺品展”网站（http:/）“多媒体设计”网站（http:/）1.1.4 网页色彩与布局（网页色彩与布局（2/2）页面尺寸 网页的尺寸和显示器大小及分辨率有关，分辨率越高，页面的尺寸越大。页面布局类型 国字形、拐角形、三字形、川字形、封面形、Flash形 1.2 多媒体素材基础多媒体素材基础 1.2.1 颜色的基本概念颜色的基本概念 1.2.2 图像的色彩模式图像的色彩模式 1.2.3 图像的基本属性图像的基本属性 1.2.4 图像文件的格式图像文件的格式 1.2.5 计算机动画概述计算机动画概述 1.2.6 音频与视频基础音频与视频基础 1.2.7 常用多媒体素材与网页制作工
6、具介绍常用多媒体素材与网页制作工具介绍1.2.1 颜色的基本概念颜色的基本概念(1/2)颜色的三要素颜色的三要素 亮度亮度 颜色的明暗程度 色相色相(色调色调)颜色的相貌 饱和度饱和度 纯度或彩度 色相、饱和度统称为色度，表示颜色的类别和深浅程度。1.2.1 颜色的基本概念颜色的基本概念(2/2)三基色三基色 是这样的三种颜色，它们相互独立，其中任意色均不能由其他两色混合产生。自然界常见的各种彩色光，都可由三种颜色相互独立的光组成，有两种基色系统，一种是加色系统，其三基色是红（Red）、绿（Green）、蓝（Blue），另一种是减色系统，其三基色是青色（Cyan）、品红（Magenta）和黄色
7、（Yellow）。红色红色+绿色绿色=黄色黄色红色红色+蓝色蓝色=品红品红绿色绿色+蓝色青色蓝色青色红色红色+绿色绿色+蓝色白色蓝色白色1.2.2 图像的色彩模式图像的色彩模式 色彩模式色彩模式 是指在计算机上打印或显示图像时表示颜色的数字方法。通常在不同的应用环境采用不同的色彩模式。灰度模式 RGB模式 CMY模式 HSB模式 Lab模式 安全色1.2.3 图像的基本属性（图像的基本属性（1/3）数字图像的种类有两种：图形图形和图像图像。它们也是构成动画或视频的基础。图形图形 又称矢量图形、几何图形或矢量图，是经过计算机运算而形成的抽象化结果，由具有方向和长度的矢量线段构成。图像图像 又称点
8、阵图像或位图图像，是指在空间和亮度上已离散化的图像。图形与图像的区别1.2.3 图像的基本属性（图像的基本属性（2/3）分辨率分辨率 是用于度量图像单位长度数据量的参数，其高低直接影响图像的质量。分辨率通常表示为ppi（pixel per inch，像素/英寸）和dpi（dot per inch，点/每英寸）。计算机显示领域用ppi度量分辨率，而dpi用于打印、印刷领域等。显示分辨率 扫描分辨率 打印分辨率1.2.3 图像的基本属性（图像的基本属性（3/3）颜色深度颜色深度 是指记录每个像素所使用的二进制位数。颜色深度决定图像可以使用的最多颜色数目或亮度级别数目。颜色深度值越大，显示的图像色彩
9、越丰富，画面越自然、逼真，但数据量也随之激增。颜色深度颜色深度/bit/bit数值数值颜色数量颜色数量颜色评价颜色评价1212二值图像42416简单色图像828256基本色图像1621665536增强色图像2422416777216真彩色图像322324294967296真彩色图像6426468719476736真彩色图像图像文件的字节数图像分辨率颜色深度81.2.4 图像文件的格式图像文件的格式 常用的图像文件格式有几下几种 BMP格式 GIF格式 JPEG格式 TIF格式 PNG格式 PSD格式1.2.5 计算机动画概述计算机动画概述 动画动画 是一种通过连续画面来显示运动和变化的技术，通
10、过一定速度播放画面以达到连续的动态效果。计算机动画计算机动画 是指借助于计算机生成一系列连续图像画面，并可动态实时播放的计算机技术。按性质和运动方式 逐帧动画（帧动画）实时动画（算法动画）矢量动画 计算机动画分类计算机动画分类 按表现形式 二维动画 三维动画 变形动画1.2.6 音频与视频基础（音频与视频基础（1/2）模拟音频模拟音频 声音是由物体的振动产生的。这种声音的震动通过话筒的转换。可以形成声音波形的电信号，这就是模拟音频信号构成。数字音频数字音频 是由许多0和1组成的二进制数，可以以声音文件（WAV或MIDI格式）的形式存储在磁盘中。使用音频卡（声卡）的A/D转换器（模拟/数字转换器
11、）将模拟音频信号进行采样和量化处理，即可获得相应的数字音频信号。声音文件分为两大类：WAV格式的波形音频文件（.wav）；MIDI格式的乐器数字化接口文件（.mid）。1.2.6 音频与视频基础（音频与视频基础（2/2）视频视频 是一组连续地随时间变化的图像，与加载的同步声音共同呈现动态的视觉和听觉效果。常见的视频信号有电影和电视。视频文件可分为两大类：影像文件和流式视频文件，常见的文件格式有：AVI、MOV、MPEG、DAT、RM、ASF、WMV等 1.2.7 常用多媒体素材及网页制作工具常用多媒体素材及网页制作工具 图像处理工具 Photoshop、Fireworks 媒体处理工具 Fla
12、sh、Audition、GoldWave、Premiere、After Effect 网页编辑工具 HTML编辑器 “所见即所得”编辑器（Dreamweaver、Frontpage）1.3 HTML基础基础1.3.1 HTML文档基本结构文档基本结构 1.3.2 HTML的基本结构标记的基本结构标记 1.3.3 文字与段落排版标记文字与段落排版标记 1.3.4 多媒体标记多媒体标记 1.3.5 超链接标记超链接标记 1.3.6 框架标记框架标记 1.3.1 HTML文档基本结构（文档基本结构（1/2）HTML 是Hypertext Markup Language（超文本标记语言）的缩写，它是构
13、成Web页面的符号标记语言。通过HTML将所需要表达的信息按某种规则写成HTML文件，并将这些HTML文件翻译成可以识别的信息，就是所见到的网页。【案例1.1】用HTML制作一个简单的网页。效果图效果图1.3.1 HTML文档基本结构（文档基本结构（2/2）HTMLHTML标记格式为标记格式为：受标记影响的内容说明说明【案例1.2】标记属性说明。设置标记属性的格式为设置标记属性的格式为：受标记影响的内容说明说明 标记属性示例标记属性示例 Hello!Hello!网页设计学习从网页设计学习从HTMLHTML开始！开始！HTML HTML语言是建立网页的规范语言是建立网页的规范 1.3.2 HTM
14、L基本结构标记基本结构标记常用标记常用标记 常用属性：Bgcolor、Background、text、link属性 使用格式：网页的内容 注释标记 使用格式：，或者1.3.3 文字与段落排版标记（文字与段落排版标记（1/5）常用标记常用标记 常用属性：face、size、color 使用格式：文本内容【案例1.3】font常用属性应用示例。1.3.3 文字与段落排版标记（文字与段落排版标记（2/5）控制字体特殊效果标记控制字体特殊效果标记标记名称标记名称标记作用标记作用标记格式标记格式b b文字加粗文字加粗文字文字i i文字斜体文字斜体文字文字u u文字加下画线文字加下画线文字文字strike
15、strike文字加删除线文字加删除线文字文字supsup文字为上标文字为上标文字文字SubSub文字为下标文字为下标文字文字1.3.3 文字与段落排版标记（文字与段落排版标记（3/5）段落排版标记段落排版标记 标题标记 使用格式：标题文字【案例1.4】标题标记应用示例。【案例1.5】换行、段落标记标记应用示例。换行和段落标记 、1.3.3 文字与段落排版标记（文字与段落排版标记（4/5）其他标记其他标记 水平线标记 有序列表标记 列表项标记 表项1 表项2 【案例1.6】有序列表标记应用示例。1.3.3 文字与段落排版标记（文字与段落排版标记（5/5）无序列表标记 表项1 表项2 【案例1.7
16、】制作一个介绍诺贝尔奖的页面。示例1.3.4 多媒体标记（多媒体标记（1/2）图像标记 使用格式:背景音乐标记 使用格式:1.3.4 多媒体标记（多媒体标记（2/2）音频和视频标记 使用格式：Flash标记 使用格式：【案例1.8】图文混排及多媒体标记综合实例（修改案例1.7）。1.3.5 超链接标记超链接标记 建立链接标记 使用格式：链接标识 链接到Email 使用格式：链接标识 用图像建立链接 使用格式：【案例1.9】使用a标记创建超链接示例。1.3.6 框架标记（框架标记（1/2）框架标记 使用格式：框架组标记 使用格式：1.3.6 框架标记（框架标记（1/2）【案例1.10】一个简单的
17、框架应用示例。【案例1.11】框架建的链接应用示例。top.html代码main.html代码left.html代码作业作业 图形与图像的构成原理不同。图形的数据量相对较小，图像的数据量相对较大。图像的像素点之间没有内在联系，在放大与缩小时，图像的清晰度受影响，而图形由运算关系支配，放大与缩小不会影响图形的各种特征。图像的层次和色彩丰富，表现力较强，适于表现自然的、细节的景物，图形则适于表示变化的曲线、简单的图案和运算的结果等。图形与图像的区别图形与图像的区别 任何标记都用“”括起来，如，以表示这是HTML代码而非普通文本。注意，“”与标记名之间不能留有空格或其他字符。HTML的多数标记都是成
18、对出现的，分别称为开始和结束标记，结束标记需在标记名前加上符号“/”，也有不用结束的，称为单标记，如、。任何标记的大小写都是等价的，建议用小写形式。标记可以嵌套使用，嵌套时注意不要发生交叉嵌套。下面的嵌套是正确的：摄影动态说明说明 属性只可加于开始标记中，并非所有的标记都有属性，如换行标记就没有属性。根据需要可以使用某标记的所有属性，也可以只使用其中的几个属性。在使用时属性之间没有顺序要求。属性和标记一样，不区分大小写，但建议使用小写字母表示。任何标记的属性都有默认值，当使用默认值时属性描述可省略。说明说明【案例1.1】效果图标库第2章 图像基本编辑本章要点本章要点 Photoshop CS3
19、的操作界面和基本操作方法 图像的缩放、裁剪和倾斜矫正 图像的曝光补偿与色彩校正，图像的美化和修饰目 录2.1 Photoshop CS3界面界面 2.2 文件操作与画布调整文件操作与画布调整 2.3 屏幕显示控制屏幕显示控制 2.4 图像的缩放、裁剪与倾斜图像的缩放、裁剪与倾斜 2.5 色调调整与图像修饰色调调整与图像修饰 2.1 Photoshop CS3界面界面 2.1.1 窗口布局窗口布局2.1.2 工具箱工具箱2.1.3 面板面板2.1.1 窗口布局窗口布局默认软件界面默认软件界面2.1.2 工具箱工具箱 工具箱位于Photoshop CS3窗口的左侧，其中包含几十个用于图像处理的工具
20、按钮。为了方便选取，功能相近的工具被分组。选择好工具后，可以通过窗口顶部、菜单栏下方的工具属性栏调整该工具的选项。2.1.3 面板面板 Photoshop CS3右侧有一组面板，如“导航器”、“直方图”、“颜色”、“图层”等都是不同的面板窗口。这些面板可以折叠和展开。2.2 文件操作与画布调整文件操作与画布调整 2.2.1 文件操作文件操作 2.2.2 画布调整画布调整 2.2.1 文件操作文件操作 文件的创建文件的创建 创建文件的方法是单击【文件】【新建】，之后会弹出如图2.7所示“新建”对话框。2.2.1 文件操作文件操作文件格式文件格式说明说明PSD/PDD Photoshop默认格式，
21、可以存储成RGB或CMYK模式，可以保存Photoshop的层、通道、路径等信息，是目前惟一能够支持全部图像色彩模式的格式，缺点是存储文件占用磁盘空间大，在一些图形程序中没有得到很好支持。GIF 用于显示HTML文档中的索引颜色图形和图像。GIF采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件，但最多只支持8位（256色）图像。JPEG 用于显示HTML文档中的照片和其它连续色调图像。与GIF 格式不同，JPEG保留RGB图像中的所有颜色信息，但其采用的有损压缩会丢失部分数据，并影响图像品质。PNG 作为GIF的替代品开发，用于无损压缩和在Web上显示图像。与GIF不同，PNG支
22、持24位图像。PNG保留图像中的透明度，可使图像中某些部分不显示出来，用来创建一些有特色的图像。BMP Windows操作系统中的标准图像文件格式，能够被Windows应用程序广泛支持，其包含的图像信息较丰富，几乎不进行压缩，但占用磁盘空间过大。保存时常用的文件格式保存时常用的文件格式2.3 屏幕显示控制屏幕显示控制2.3.1 放大显示图像放大显示图像 2.3.2 缩小显示图像缩小显示图像 2.3.3 观察放大的图像观察放大的图像2.3.4 使用使用“导航器导航器”2.3.1 放大显示图像放大显示图像 使用缩放工具使用缩放工具 单击工具箱中的“缩放工具”，移动鼠标到图像中，鼠标指针变为“放大工
23、具”后单击。显示比例每次递增100%。使用快捷键使用快捷键 使用快捷键Ctrl+“+”（加号键）可以方便地逐级放大（每次递增100%）图像。提示提示：无论当前选用的是何种工具，按住Ctrl+Space（空格键），鼠标指针立即变为“放大工具”。2.3.2 缩小显示图像缩小显示图像 使用缩放工具使用缩放工具 单击工具箱中的“缩放工具”，移动鼠标到图像中，如果鼠标指针变为“放大工具”，在工具属性栏中单击“缩小工具”按钮后单击。显示比例依次递减。使用快捷键使用快捷键 使用快捷键Ctrl+“-”（减号键）可以方便地逐级缩小图像。提示提示：按住Alt键可改变当前的缩放功能。若当前工具为“缩小工具”，按住A
24、lt键可变为“放大工具”，而当前为“放大工具”时，按住Alt键则可转换为“缩小工具”。2.3.3 观察放大的图像观察放大的图像 放大后的图像，在窗口中看到的往往只是其局部，要想查看图像的其余部分，可以利用图像编辑窗口的滚动条滚动条、“抓手工具抓手工具”和“导导航器航器”面板。提示提示：无论当前选用的是何种工具，按住Space（空格键），鼠标立即切换为“抓手工具”。2.3.4 使用使用“导航器导航器”“导航器导航器”面板面板 可用来控制图像的缩放显示，在需要观察放大显示的图像时，还可用来移动需要查看的区域。提示提示：在图片窗口和“导航器”面板的左下角均有当前图像的显示比例，可在此处直接输入一个数
25、字。2.4 图像的缩放、裁剪与倾斜图像的缩放、裁剪与倾斜2.4.1 缩放图像缩放图像 2.4.2 裁剪图像裁剪图像 2.4.3 度量度量矫正倾斜的图像矫正倾斜的图像2.4.4 改变倾斜透视改变倾斜透视2.4.5 拼接图片拼接图片2.4.1 缩放图像缩放图像【案例2.1】将教学资源中的文件“ch02素材e0201.jpg”（1024768像素，1013KB），缩小为400300像素，大小不超过100KB。缩放图像缩放图像 在网页设计中经常要根据版面大小改变图片的尺寸，缩小一张图片，不会影响其图像质量，而放大图片会使得图像模糊，从而影响视觉效果。2.4.2 裁剪图像裁剪图像【案例2.2】按照构图，
26、裁剪出一张可用于网页标题的图片。裁剪图像裁剪图像 在照片的后期处理中，适当进行裁剪，通过二次构图，能使主体更加突出，画面的构成更趋合理，从而使照片焕发出新的活力。【案例2.3】将图片旋转裁剪，要求裁剪的长宽比为5:4。素材与效果图素材与效果图素材与效果图素材与效果图2.4.3 度量矫正倾斜的图像度量矫正倾斜的图像【案例2.4】度量矫正画面倾斜的图片，矫正后再按9:6的宽屏比例裁剪。度量矫正倾斜图像度量矫正倾斜图像 利用“标尺工具”，在图片上画出一条参考线，可以精确测量出参考线与屏幕水平线之间的倾斜角度，并获得理想的矫正效果。素材与效果图素材与效果图2.4.4 改变倾斜透视改变倾斜透视【案例2.
27、5】矫正图片中的倾斜透视。倾斜透视倾斜透视 图片上的倾斜透视有两类，一是物体自身存在倾斜面，如楼梯、房顶、斜坡等，二是因视点太高或太低，产生俯视倾斜透视或仰视倾斜透视。素材与效果图素材与效果图2.4.5 拼接图片拼接图片【案例2.6】风景图片的无缝拼接。倾斜透视倾斜透视 在拍摄一些宽大场面时，为了获取广阔的视角效果，采用分段拍摄、后期拼接的方法，最终效果完全能达到甚至超过广角镜头的表现能力。素材与效果图素材与效果图2.5 色调调整与图像修饰色调调整与图像修饰2.5.1 调整曝光调整曝光 2.5.2 校正偏色校正偏色 2.5.3 渲染色彩渲染色彩2.5.4 修饰图像修饰图像2.5.1 调整曝光调
28、整曝光调整曝光的工具调整曝光的工具 直方图与色阶调整、曲线调整、阴影/高光、正片叠底。【案例2.7】利用色阶调整图像的明暗。素材与效果图素材与效果图【案例2.7】利用色阶调整图像的明暗。素材与效果图素材与效果图【案例2.8】调整曝光过度的水仙花。素材与效果图素材与效果图【案例2.9】调整逆光拍摄的风景。素材与效果图素材与效果图【案例2.10】调整曝光过度的图片。素材与效果图素材与效果图2.5.2 校正偏色校正偏色【案例2.11】利用“色阶工具”矫正偏色。偏色偏色 物质原本是黑白灰色的，在正常白光照射下，反射的RGB三个颜色分量相等。当眼睛（或拍摄器材）出了问题，或在数字化（如扫描）过程中使用了
29、错误的设置，或是在不同色温的复杂光源照射下，得到的照片中物体的RGB值就不相等了，这就是偏色。素材与效果图素材与效果图说明：说明：本案例的重点及难点都在灰场取样，仅调整黑场和白场是不能校正偏色的，必须同时确定正确的灰场。2.5.3 渲染色彩渲染色彩渲染色彩渲染色彩 可以将普通的图像再加工、艺术化。艺术化可以基于现有的图像，也可以从无到有进行原创。常用工具有色相/饱和度、曲线调整、滤镜。【案例2.12】红花变蓝花。素材与效果图素材与效果图【案例2.13】多云的白昼变艳丽的黄昏。素材与效果图素材与效果图【案例2.14】创造木头材质效果。素材与效果图素材与效果图【案例2.15】模拟彩色滤镜。素材与效
30、果图素材与效果图2.5.4 修饰图像修饰图像修饰图像修饰图像 包括消除红眼、修复污点、抹除多余景物等。【案例2.16】修复红眼。素材与效果图素材与效果图【案例2.17】修复脸上的污点。素材与效果图素材与效果图【案例2.18】抹除照片右侧人物，并将主体人物平移。素材与效果图素材与效果图作业作业【案例2.2】素材【案例2.2】裁剪后效果【案例2.3】素材【案例2.3】裁剪后效果【案例2.4】素材【案例2.4】矫正后效果【案例2.5】素材【案例2.5】矫正后效果【案例2.6】素材【案例2.6】拼接效果【案例2.7】素材【案例2.7】调整后效果【案例2.8】素材【案例2.8】调整后效果【案例2.9】素
31、材【案例2.9】调整后效果【案例2.10】原始素材【案例2.10】调整后效果【案例2.11】原始素材【案例2.11】调整后效果【案例2.12】原始素材【案例2.11】调整后效果【案例2.13】原始素材【案例2.13】调整后效果【案例2.14】效果【案例2.15】原始素材【案例2.15】调整后效果【案例2.16】原始素材【案例2.16】修复后效果【案例2.17】原始素材【案例2.17】修复后效果【案例2.18】原始素材【案例2.18】调整后效果图标库第3章 图像综合处理本章要点本章要点 图层的概念、操作方法，图层样式与混合模式，图层的填充与调整 抠图工具与抠图方法，图像合成技术 蒙板、路径与通道
32、的概念与应用 Photoshop中的文字处理方法目 录3.1 图层的概念与操作图层的概念与操作3.2 抠图与合成抠图与合成3.3 使用蒙版使用蒙版3.4 使用路径使用路径3.5 使用通道使用通道3.6 文字处理文字处理3.1 图层的概念与操作图层的概念与操作3.1.1 图层基本概念图层基本概念3.1.2 图层操作方法图层操作方法3.1.3 图层样式及混合模式图层样式及混合模式3.1.4 填充图层和调整图层填充图层和调整图层3.1.1 图层基本概念图层基本概念 图层图层 是制作复杂图像效果所必需的处理手段。图层就像玻璃纸，当在每张玻璃纸上分别画上不同的图案，并将他们叠放在一起，就会看到组合出的新
33、的图案，去除或修改某张玻璃纸上的内容会产生不同的结果，且并不影响其余玻璃纸上的内容。Photoshop中的图层背景图层普通图层提示提示：按住Alt键并双击“背景”图层，可快速将“背景”图层变成普通图层。3.1.2 图层操作方法图层操作方法 图层面板是Photoshop中非常重要的面板窗口，专门用于图层的操作和管理。【案例【案例3.13.1】分层绘制RGB三原色。3.1.3 图层样式及混合模式图层样式及混合模式图层样式图层样式 是针对单个图层加入的特殊效果【案例3.2】利用酒瓶与天空合成新的效果图。素材与效果图素材与效果图混合模式混合模式 是两个或多个图层之间对应像素颜色的运算方式【案例3.3】
34、加色原理与减色原理。【案例3.4】合成人物与风景。素材与效果图素材与效果图3.1.4 填充图层和调整图层填充图层和调整图层 填充图层填充图层 是具有实色、渐变或图案等填充效果的层，可以通过混合模式、不透明度及填充不透明度等方式影响其下面的图层。调整图层调整图层 是包含图像调整信息（如色阶、曲线等）的层，可以像图像调整工具（如色阶、曲线等）那样调整其下面的图层。素材与效果图素材与效果图【案例3.5】利用填充图层制作淡出风格的雪景。【案例3.6】利用填充图层及调整图层制作玉贝壳。素材与效果图素材与效果图3.2 抠图与合成抠图与合成 3.2.1 选区的概念选区的概念 3.2.2 套索抠图套索抠图 3
35、.2.3 魔棒抠图魔棒抠图 3.2.4 快速选择工具快速选择工具 3.2.5 橡皮擦抠图橡皮擦抠图 3.2.6 滤镜抠图与合成滤镜抠图与合成 3.2.1 选区的概念选区的概念 选区选区 在编辑和处理图像时，可以根据需要创建一个可编辑区域，称为选区。建立选区后，所有操作只对选区内的图像起作用，这样，就不会影响选区外的图像。创建规则选区：创建规则选区：矩形选框工具、椭圆选框工具创建不规则选区：创建不规则选区：套索工具、魔棒工具、快速选择工具，还可以将通道、路径等转换为选区建立选区后，单击菜单【选择】，可以选用多种命令对选区进行操作 3.2.2 套索抠图套索抠图套索工具组套索工具组 套索、多边形套索
36、、磁性套索【案例3.7】使用“多边形套索工具”抠图。素材与效果图素材与效果图【案例3.8】使用“磁性套索工具”抠图。素材与效果图素材与效果图3.2.3 魔棒抠图魔棒抠图 魔棒工具魔棒工具 适合选择颜色较一致的区域，而不必像使用套索工具那样跟踪物体的轮廓。【案例3.9】使用“魔棒工具”抠图。素材与效果图素材与效果图【案例3.10】使用“魔棒工具”抠图，并合成一张更换天空的图片。素材与效果图素材与效果图3.2.4 快速选择工具快速选择工具 快速选择工具快速选择工具 是对魔棒的升级，可以拖动“快速选择工具”绘制出一个选区。【案例3.11】使用“快速选择工具”抠图。素材与效果图素材与效果图3.2.5
37、橡皮擦抠图橡皮擦抠图橡皮擦工具组橡皮擦工具组 橡皮擦、背景橡皮擦、魔术橡皮擦【案例3.12】使用“橡皮擦工具”抠图并合成图像。素材与效果图素材与效果图【案例3.13】使用“背景橡皮擦工具”抠图并合成。素材与效果图素材与效果图【案例3.14】使用“魔术橡皮擦工具”抠图并合成。素材与效果图素材与效果图3.2.6 滤镜抠图与合成滤镜抠图与合成【案例3.15】使用“抽出”滤镜抠图。素材与效果图素材与效果图【案例3.16】使用“消失点”滤镜合成图像。素材与效果图素材与效果图3.3 使用蒙板使用蒙板 蒙版蒙版 类似一张覆盖在图层上的玻璃纸，可任意在玻璃纸上涂抹而不会破坏图像本身。使用蒙版可以隐藏图层中的局
38、部区域，也可使局部或整体产生半透明的效果，结合图层混合模式会产生更多的图像效果。蒙版中只能绘制黑色、白色和灰色三类颜色，黑色区表示屏蔽区，白色区表示非屏蔽区，灰色区表示具有一定不透明度的区域。Photoshop中的蒙版有图层蒙版、矢量蒙版和剪贴蒙版三类。3.3 使用蒙板使用蒙板【案例3.17】狮王的守护。素材与效果图素材与效果图【案例3.18】草丛中的舞蹈精灵。素材与效果图素材与效果图【案例3.19】虎虎生威。素材与效果图素材与效果图3.4 使用路径使用路径【案例3.20】用路径抠图并合成。素材与效果图素材与效果图3.5 使用通道使用通道【案例3.21】利用通道抠图（苹果G3火焰字）。素材与效
39、果图素材与效果图通道通道 是Photoshop中非常重要的一部分内容，根据其保存信息的含意，通道可分为原色通道、专色通道和Alpha通道。无论是哪种类型的通道，都和蒙版类似，只能在其中看到黑色、白色和灰色三类颜色。3.6 文字处理文字处理【案例3.22】使用文字图层产生文字效果。素材与效果图素材与效果图添加文字图层可使用“横排文字工具”或“直排文字工具”，添加文字蒙版的方法是使用“横排文字蒙版工具”或“直排文字蒙版工具”【案例3.23】用路径引导文字。【案例3.24】制作金属质感的文字。效果图效果图【案例3.25】制作金属质感的文字。效果图效果图效果图效果图作业作业【案例3.2】素材【案例3.
40、2】合成效果【案例3.4】素材【案例3.4】合成效果【案例3.2】素材【案例3.2】合成效果【案例3.5】原始图片【案例3.5】效果【案例3.6】素材【案例3.6】合成效果【案例3.7】原始素材【案例3.7】抠图效果【案例3.8】原始素材【案例3.8】抠图效果【案例3.9】原始素材【案例3.9】抠图效果【案例3.10】原始素材【案例3.10】抠图后合成效果【案例3.11】原始素材【案例3.11】抠图后合成效果【案例3.12】原始素材【案例3.12】抠图后合成效果【案例3.13】原始素材【案例3.13】抠图后合成效果【案例3.14】原始素材【案例3.14】抠图后合成效果【案例3.15】原始素材【
41、案例3.15】抠图效果【案例3.16】原始素材【案例3.16】抠图后合成效果【案例3.17】原始素材【案例3.16】合成效果【案例3.18】原始素材【案例3.18】合成效果【案例3.19】原始素材【案例3.19】合成效果【案例3.20】原始素材【案例3.20】抠图后合成效果【案例3.21】原始素材【案例3.21】抠图后合成效果【案例3.22】原始素材【案例3.22】合成效果【案例3.23】效果图【案例3.24】效果图【案例3.25】效果图图标库第4章 Flash动画基础本章要点本章要点 Flash CS3的工作环境和基本操作 Flash绘图基础和绘图工具 帧、时间轴、图层与元件目 录4.1 F
42、lash CS3工作环境概述工作环境概述 4.2 Flash CS3绘图基础绘图基础 4.3 动画制作基础动画制作基础 4.4 元件的创建与编辑元件的创建与编辑 4.1 Flash CS3工作界面概述工作界面概述 4.1.1 工作环境简介工作环境简介4.1.2 面板面板4.1.3 Flash CS3文档的基本操作文档的基本操作4.1.1 工作环境简介工作环境简介欢迎屏幕欢迎屏幕工作窗口工作窗口4.1.2 面板面板 面板围绕在舞台的下面和右面，包括“帮助”面板、“动作”面板、“属性”面板、“滤镜”面板、“变形”面板、“对齐”面板、“颜色”面板、“库”面板、“场景”面板。4.1.3 Flash C
43、S3文档的基本操作文档的基本操作 Flash CS3文档的基本操作包括：新建文件、文档属性设定、保存文件、测试动画、打开文件、导入文件、发布动画等。选择菜单下的相应命令即可完成这些操作，也可以使用快捷键进行操作。4.2 Flash CS3绘图基础绘图基础 4.2.9 套索工具套索工具 4.2.10 任意（渐变）变形工具任意（渐变）变形工具 4.2.11 钢笔工具钢笔工具4.2.12 刷子工具刷子工具4.2.13 文本工具文本工具4.2.14 填充图形对象工具填充图形对象工具4.2.15 动画文档的基本操作动画文档的基本操作4.2.1 Flash绘图基础绘图基础 4.2.2 线条工具线条工具4.
44、2.3 铅笔工具铅笔工具4.2.4 矩形（基本矩形）工具矩形（基本矩形）工具4.2.5 椭圆（基本椭圆）工具椭圆（基本椭圆）工具4.2.6 多角星形工具多角星形工具4.2.7 选择工具选择工具4.2.8 部分选取工具部分选取工具4.2.1 Flash绘图基础绘图基础 Flash中绘制的是矢量图形，由笔触笔触和填充填充构成，在绘制各种图形时，在工具箱工具箱的“颜色”区 可以设置图形的笔触颜色、填充颜色以及笔触的粗细、样式等属性 。Flash提供了两种绘制模式，合并绘制模式合并绘制模式和对象对象绘制模式。绘制模式。4.2.2 线条工具线条工具线条工具线条工具 用于绘制各种笔触样式的矢量直线。通过“
45、属性”面板，可以设置线条的颜色、线型和粗细等。4.2.3 铅笔工具铅笔工具铅笔工具铅笔工具 用于绘制简单的矢量线条，其绘图方式与使用真实铅笔大致相同，“铅笔工具”提供了“直线化”、“平滑”和“墨水”三种绘图模式。4.2.4 矩形工具和基本矩形工具矩形工具和基本矩形工具Flash提供了两种绘制矩形的工具，即矩形工具矩形工具和基本基本矩形工具矩形工具，通过“属性”面板，可以设置矩形的笔触颜色、线型、粗细、填充颜色和矩形边角半径等。提示：提示：按住Shift键，即可绘制正方形。4.2.5 椭圆工具和基本椭圆工具椭圆工具和基本椭圆工具Flash提供了两种绘制椭圆的工具，即椭圆工具椭圆工具和基本基本椭圆
46、工具椭圆工具，通过“属性”面板，可以设置椭圆的笔触颜色、线型、粗细、填充颜色和起始、结束角度等。提示：提示：使用基本矩形工具和基本椭圆工具，只能用于对象绘制。4.2.6 多角星形工具多角星形工具“多角星形工具多角星形工具”用于绘制任意多边形和星形图形。可以通过“属性”面板的“选项”按钮、设置多边形或星形的样式、边数和星形顶点大小等 。4.2.7 选择工具选择工具“选择工具选择工具”用于抓取、选择、移动和改变图形形状，它是Flash中使用最多的工具。使用工具箱的“选项”区的“紧贴至对象”、“平滑”和“伸直”3个选项，可以完成“对齐”、“平滑”和“伸直”操作，使用此操作可以减少锚点。【案例4.1】
47、绘制中国银行标志。效果图效果图【案例4.2】绘制瓢虫。效果图效果图4.2.8 部分选取工具部分选取工具“选择工具选择工具”也可用于抓取、选择、移动和改变图形形状，但它主要用来更精细的调整图形形状。可以完成以下操作：l 移动路径点位置，可以改变对象的形状。l 拖动控制点，可以改变曲线的弧度。l 选中路径点后按Delete键，可以删除路径点。l 按住Alt键，可以改变路径点类型。l 按住Ctrl键，可以对路径进行缩放、变形等 4.2.9 套索工具套索工具“套索工具套索工具”主要用于选取图形中不规则的形状区域。“套索工具”选中后，在工具箱的“选项”区会出现3个选项：l 魔术棒 用于选取相近颜色区域，
48、操作对象为位图图像。l 魔术棒设置 用于设置魔术棒的阈值和平滑。l 多边形模式 用于用直线精确地绘制出对象的轮廓 4.2.10 任意变形与渐变变形工具任意变形与渐变变形工具“任意变形工具任意变形工具”用于改变工作区中对象的形状。“渐变变形工具渐变变形工具”用于更改渐变的方式。【案例4.3】绘制花朵。效果图效果图4.2.11 钢笔工具钢笔工具“钢笔工具钢笔工具”是一个工具组，在绘制过程中，与组中的其余三个工具（添加锚点工具、删除锚点工具及转换锚点工具）结合使用，通过对路径锚点进行相应的调整，绘制出精确的路径。【案例4.4】绘制中国心。效果图效果图4.2.12 刷子工具刷子工具“刷子工具刷子工具”
49、用于绘制自由形状的矢量填充，其绘图如同毛笔绘画一般。“刷子工具”选中后，可以在工具箱的“选项”区设置“刷子模式”、“刷子大小”和“刷子形状”。以下是5种刷子模式的绘图效果。4.2.13 文本工具文本工具“文本工具文本工具”用于输入或编辑文本。在创建文本后，选择【修改】【分离】命令可以将多字符文本的每一个文本都放置在单独的文本框中。再次执行【修改】【分离】命令可以将文本转换为图形对象，从而使文本可以像图形一样被编辑。以下是对文本执行1次和2次分离后的效果。提示：提示：执行分离操作时也可以使用快捷键Ctrl+B。4.2.14 填充图形对象工具填充图形对象工具Flash工具箱中提供了“墨水瓶工具墨水
50、瓶工具”、“颜料桶颜料桶工具工具”、“滴管工具滴管工具”和“橡皮擦工具橡皮擦工具”等用于填充图形对象的工具。4.2.15 动画文档的基本操作动画文档的基本操作【案例4.5】制作标语。4.3 动画制作基础动画制作基础4.3.1 帧帧 4.3.2 时间轴与图层时间轴与图层 4.3.1 帧帧 帧帧 电影是由一格一格的胶片按照先后顺序播放出来的，由于人眼有视觉暂留现象，这一格一格的胶片按照一定速度播放出来，我们看起来就“动”了。动画制作采用的也是这一原理，而这一格一格的胶片，就是 Flash 中的“帧”。Flash CS3中的帧包括：空白帧、关键帧、空白关键空白帧、关键帧、空白关键帧、过渡帧、普通帧。
