1、一、网页图像处理概述v网页的设计少不了对图形图像的制作和处理。图形图像设计与处理软件层出不穷，如Adobe公司推出的Photoshop、Firework软件、Corel公司推出的CorelDRAW等。本教程介绍的是目前使用最广泛的图形图像设计与制作软件Photoshop。位图与矢量图位图与矢量图 1位图 位图也称为点阵图或像素图，计算机屏幕上的图像是由屏幕上的发光点构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于矩阵。多个像素的色彩组合就形成了图像，称之为位图。2矢量图 矢量图也称为向量图，是用一系列计算机指令来描述和记录的一幅图，一幅图可分解为一系列由点、线、面等组
2、成的子图，矢量图记录的是对象的几何形状、线条粗细和色彩等，因此生成的文件存储容量很小。图像分辨率图像分辨率 分辨率是指单位长度上像素的多少，单位长度上像素越多，图像就越清晰。例如，72dpi表示图像中每英寸包含72个像素或点。位 图矢量图Photoshop CS工作界面Photoshop CS工作界面v Photoshop CS的窗口是由标题栏、菜单栏、工具选项栏、工具箱、工作区和控制面板6大部分组成。（1）标题栏（2）菜单栏（3）工具选项栏Photoshop CS工作界面（4）工具箱：Photoshop软件的所有工具（绘图、选择工具、调整工具等）都置于工具箱中，用户需要使用什么工具，只要在工
3、具箱中选择即可。（5）控制面板：控制面板是Photoshop软件中非常重要的辅助作图工具，其总是浮动在活动窗口中最前面，供用户随时访问。（6）工作区：工作区是图像编辑区，显示了当前正在编辑的图像内容。Photoshop工具箱v 工具箱上的工具大致分为以下四大类：（1）选项区工具。包括选区工具组、套索工具组、魔术棒工具。（2）绘制工具。包括画笔工具组、历史画笔工具组、橡皮擦工具组、渐变工具组、吸管工具。（3）编辑工具。包括印章工具组、亮化工具组、模糊工具组、钢笔工具组。（4）辅助工具。包括移动工具、裁剪工具、手形工具、缩放工具、注释工具组等。图层控制面板v 图层控制面板如下图所示，主要用来对图层
4、进行管理和操作，包括添加图层、删除图层、合并图层等。图层基本概念 v图层概念：我们可以把图层想像成是一张一张叠起图层概念：我们可以把图层想像成是一张一张叠起来的透明胶片，每张透明胶片上都有不同的画面，来的透明胶片，每张透明胶片上都有不同的画面，改变图层的顺序和属性可以改变图像的最后效果。改变图层的顺序和属性可以改变图像的最后效果。通过对图层的操作，使用它的特殊功能可以创建很通过对图层的操作，使用它的特殊功能可以创建很多复杂的图像效果。多复杂的图像效果。v图层面板：图层面板上显示了图像中的所有图层、图层面板：图层面板上显示了图像中的所有图层、图层组和图层效果，我们可以使用图层面板上的各图层组和图
5、层效果，我们可以使用图层面板上的各种功能来完成一些图像编辑任务，例如创建、隐藏、种功能来完成一些图像编辑任务，例如创建、隐藏、复制和删除图层等。复制和删除图层等。v图层类型：图层类型：1.背景图层背景图层 2.一般图层一般图层 3.图层组图层组图层操作v1.新建图层新建图层v2.复制图层复制图层v3.颜色标识颜色标识v4.删格化图层删格化图层v5.合并图层合并图层v6.盖印图层盖印图层v7.图层叠加模式图层叠加模式 图层管理v1.选择图层选择图层 v2.隐藏、显示图层内容隐藏、显示图层内容 v3.更改图层顺序更改图层顺序 v4.链接图层链接图层v5.调整图层内容（对齐、分布）调整图层内容（对齐
6、、分布）v6.锁定图层锁定图层 v7.从图层取样从图层取样 Photoshop颜色模式（1）v常见的颜色模式有：RGB、CMYK、Lab、HSB以及灰度模式等。1RGB模式 RGB模式是在Photoshop中处理图像时接触最多的颜色模式，RGB颜色是由红、绿、蓝三原色构成。2CMYK模式 CMYK颜色模式是一种专门用来印刷的颜色，CMYK颜色是由青色、品红、黄色、黑色四种印刷颜色组成。Photoshop颜色模式（2）3灰度模式 灰度模式采用了256级不同强度的灰度来描述图像。其值为0%时，表示为黑色，值为100%时，表示为白色。4Lab模式 Lab模式是国际照明委员会（CIE）于1976年公布
7、的一种色彩模式。L表示亮度，范围在0100之间。a和b则表示颜色过渡的变化值。Photoshop颜色模式（3）5HSB模式 HSB模式是一种可以调整图像颜色效果的色彩值，Photoshop图像不能直接保存为HSB模式，执行“图像”“调整”“色相/饱和度”命令后，才能对图像进行HSB模式调整。v 6Bitmap模式 Bitmap模式又称为位图模式，它是使用黑、白两种颜色来描述图像的一种方式，因为位置模式的图像也称作黑白图像。7索引颜色模式 索引颜色模式也称作映射颜色。在这种模式下，只能存储一个8bit色彩深度的文件，即最多256种颜色，而且颜色都是预先定义好的。合成图像-调整图像大小v 改变当前
8、编辑的图像大小，其常用方法是“图像”“图像大小”命令，打开如下图所示的对话框。用户在像素大小或文档大小中调整“宽度”和“高度”值。若勾选对话框底部的“约束比例”复选框，会在宽度和高度间建立等比例效果。单击“好”按钮后，图像将按新的宽度和高度对整个图像进行缩放，从而改变图像的尺寸大小。合成图像-调整图像色调v 调整图像色调，其最直观方法是“图像”“调整”“色彩平衡”命令，打开下图所示对话框。用户可根据图像最终效果进行调整和设置。单击“好”按钮后，图像将按新的色调整生成效果图。选择钢笔工具,选择目标对象替换页面上其他位置的图层内容。扭曲文字，效果如下图所示GIF格式最多只能储存256色，所以通常用
9、来显示简单图形及文字。Photoshop蒙版原理可运用不同滤镜，以产生一些意想不到的特效；（6）单击工具箱中文字工具，在选文字工具选项栏上设置字体为“黑体”、大小为“22点”、文字颜色为“白色”。ImageReady CS 介绍图层样式可以创建出投影、发光、浮雕、描边等特殊效果。Photoshop:窗口-工作区-复位调板位置逐帧显示文字，效果如下图所示。3、在图层2当中画星会闪的星星闪烁的星光效果，如下图所示。翻转(ImageReady)Photoshop CS工作界面使用“径向模糊”滤镜功能制作“秀我风采”文字的喷发光芒效果，效果如图：综合实例二：企业标志制作2、输入文字，然后栅格化“火焰字
10、”文字图层，并且复制该图层它是基于色彩模式这一基础上衍生出的简化操作工具。JPEG图像文件格式主要用于图像浏览及超文本文档，如HTML文档等。色彩调整实例v制作制作“感受中国感受中国”页面图像，效果如下图所页面图像，效果如下图所示示 具体要求：1、加强图像绿色调；2、调整图像“宽度”值为“698像素”、“高度”值为“179像素”。色彩调整实例步骤 v“感受中国感受中国”页面图像制作步骤如下：页面图像制作步骤如下：（1）执行“文件”“打开”命令，打开原始图像。（2）执行“图像”“调整”“色彩平衡”命令，在弹出的“色彩平衡”调整对话框中将绿色中间值设置为“+80”，点击“好”按钮。（3）执行“图像
11、”“图像大小”命令，在弹出“图像大小”调整对话框中取消“约束比例”复选框，设置“宽度”值为“698”、“高度”值为“179”，点击“好”按钮。（4）执行“文件”“存储为”命令来存储效果图，选择JPG或PNG格式。使用选择工具 v中文版Photoshop CS提供的选取工具分为两大类，一类是规则选取工具也称为框选工具，另一类是建立不规则选区的工具也称为套索类工具。1规则的框选工具在使用时，只需在图像中拖动鼠标指针或单击鼠标左键，即可出一个选择区域。2套索选择工具可用于徒手画的方式描绘出不规则形状的选取区域。被选定的图像区域边界上会显示出一条流动的虚线，对虚线以内的选定区域可以进行任意操作。三、P
12、hotoshop合成图像 v选择工具组面板选择工具组面板 框选工具组套索工具组三、Photoshop合成图像 v选区的操作选区的操作（1）增加选区(按住键盘上Shift键)（2）减少选区(按住键盘上Alt键)（3）填充选区(前景颜色填充（Alt+Delete）或背景颜色填充（Ctrl+Delete）)（4）描边选区（5）移动选区（6）平滑选区（7）羽化选区（8）反向选择合成图像实例 v合成照片，效果如下图所示合成照片，效果如下图所示 最终效果图素材一素材二图像格式（1）v Photoshop保存文件过程中，有多种图像格式可供用户选择，不同的格式图像的色彩品质、容量大小都有一程度的差异。不同的文
13、件格式可以用扩展名来区分，如PSD、JPG、GIF、PNG等。1PSD（.PSD）格式PSD图像文件是Photoshop软件自身格式，也称为原文件格式，是惟一能支持全部图像色彩模式的格式。以PSD格式保存的图像可以包含图层、通道及色彩模式。2JPEG(.JPG；.JPE)格式JPEG图像文件格式主要用于图像浏览及超文本文档，如HTML文档等。支持多种色彩模式。使用JPEG格式保存的图像经过高倍率的压缩，可使图像文件容量变得较小，但在压缩过程中会丢失部分数据。图像格式（2）3GIF（.GIF）格式它在压缩过程中，图像的像素资料不会被丢失，然而丢失的却是图像的色彩。GIF格式最多只能储存256色，
14、所以通常用来显示简单图形及文字。4PND（.PNG）格式PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的通道数据。另外PNG也被称为专业网页图像格式，其最大的优点就是能储存透明背景的图像。图像格式（3）5BMP（.BMP）格式BMP图像文件格式是一种标准的点阵式图像格式，支持RGB、灰度和位图色彩模式，但不支持Alpha通道。6TIFF（.TIF）格式TIFF图
15、像文件格式可以在许多不同的平台和应用软件间交换信息，其应用相当广泛。该格式支持RGB、CMYK、位图、灰度等色彩模式。而且在RGB、CMYK，以及灰度等模式支持Alpha通道的使用。可运用不同滤镜，以产生一些意想不到的特效；做图的边缘淡化效果；包括移动工具、裁剪工具、手形工具、缩放工具、注释工具组等。（3）背景图案：一般体积很小，通常用于填充网页和表格。ImageReady界面5、选择火苗区域（按住键盘上Ctrl键和Alt键）复习：Photoshop合成图像闪烁的星光效果，如下图所示。（1）增加选区(按住键盘上Shift键)将优化结果存储为：可将当前文件保存为HTML文件格式。PSD图像文件是
16、Photoshop软件自身格式，也称为原文件格式，是惟一能支持全部图像色彩模式的格式。（6）工作区：工作区是图像编辑区，显示了当前正在编辑的图像内容。索引颜色模式也称作映射颜色。可以使用 ImageReady 中的“Web 内容”调板来跟踪切片及其翻转状态。最后一定要“应用蒙版”才可以使更改生效。替换页面上其他位置的图层内容。（3）然后在对话框中设置相应的参数后，点“好”按钮即可。单击“好”按钮后，图像将按新的宽度和高度对整个图像进行缩放，从而改变图像的尺寸大小。（1）创建图像文件，在“新建”对话框中设置图像宽度为400像素，高度为100像素。（3）然后在对话框中设置相应的参数后，点“好”按钮
17、即可。编辑文本 v在Photoshop中可以制作出多种特殊效果的文字，常出现在各种广告、招牌中。在设计网页过程中，文字工具可以创作出网页标题、导航文本、网站LOGO等项目。文本工具的使用v单击工具箱中的按钮，系统弹出文字工具选项栏，如下图所示。用户可以在其中设置出各式各样的字体和字形。用鼠标左键在工作区中的任意位置单击，可出现输入文字的闪烁光标提示，即可开始输入所需文字。调整文本格式v选择需要调整格式的文本，单击文字工具选项栏右端按钮，系统弹出字符调整面板，如下图所示，用户可根据要求自行设置。编辑文本实例v制作文字标题，效果如下图所示制作文字标题，效果如下图所示 编辑文本操作步骤（1）创建图像
18、文件，在“新建”对话框中设置图像宽度为442像素，高度为51像素。（2）设置前景颜色RGB值分别为（153、204、1），通过按Alt+Delele键用前景颜色填充画布。（3）单击图层面板上的新建图层按钮，创建新的空白图层1。（4）单击工具箱中的矩形框选按钮，在适当位置绘制矩形选区并以白色填充。（5）单击工具箱中文字工具，在选文字工具选项栏上设置字体为“黑体”、大小为“20点”、文字颜色为“白色”。在工作区域内输入“The New Impression”。单独选择“The New”文本，将其颜色设置为“黑色。（6）单击工具箱中文字工具，在选文字工具选项栏上设置字体为“黑体”、大小为“22点”、
19、文字颜色为“白色”。在工作区域内输入“最新印象”。单独选择“印象”文本，将其颜色设置为“黑色”大小设置为“30点”。（7）执行“文件”“存储”命令，保存图像，文件格式按要求设定。创建变形文本v单击文本选项栏上创建变形文本按钮，弹出变形文字对话框，单击变形文字对话框中的“样式”下拉列表，系统弹出变形效果列表项，如下图所示。变形效果列表项变形文字对话框栅格化文本v 栅格化文本图层功能是将文本图层转换成图形化图层。被栅格化的文本内容不能再进行文本格式调整，比如字体就无法再进行设置。方法：在图层控制面板中用鼠标右键单文本图层，在弹出的下拉菜单中选择“栅格化图层”命令即可，如下图所示。制作渐变文字效果实
20、例v制作渐变文字效果如下图所示。制作渐变文字效果如下图所示。操作步骤操作步骤：（1）创建图像文件，在“新建”对话框中设置图像宽度为400像素，高度为100像素。（2）点击工具箱中的文本按钮，输入“渐变文字效果”文本内容，设置相应格式。（3）栅格化文本图层。（4）按住键盘上Ctrl键并同时在“渐变文字效果”图层上单击鼠标左键，可载入图层选区。（5）点击工具箱中的（渐变填充）按钮，在渐变选项栏上选择“黑色，白色”渐变，用鼠标左键在选区内部拖动创建渐变效果。（6）执行“选择”“取消选择”命令即可完成效果图。综合实例：网站制作v综合实例一：网站制作综合实例一：网站制作 重点要求：重点要求：图像宽度为2
21、34像素，高度为97像素。综合实例：网站制作v综合实例二：企业标志制作综合实例二：企业标志制作 Photoshop颜色模式（3）Photoshop蒙版原理在这种模式下，只能存储一个8bit色彩深度的文件，即最多256种颜色，而且颜色都是预先定义好的。（1）图片：一般无法分割的图片（原图大小）。制作闪电，效果如下图所示方法：在图层控制面板中用鼠标右键单文本图层，在弹出的下拉菜单中选择“栅格化图层”命令即可，如下图所示。设计Web页-页面设计切片目的：尽可能小的减少网页文件的体积Photoshop颜色模式（2）添加帧以创建翻转动画。GIF格式最多只能储存256色，所以通常用来显示简单图形及文字。做
22、图的边缘淡化效果；（3）填充选区(前景颜色填充（Alt+Delete）或背景颜色填充（Ctrl+Delete）)3、打开”动画“调板，创建新帧CMYK颜色模式是一种专门用来印刷的颜色，CMYK颜色是由青色、品红、黄色、黑色四种印刷颜色组成。（2）背景色：通过网页代码可以实现的颜色。图像映射将图像区域链接到 URL。为了使人的肉眼感觉不到图像的切换，一秒钟至少要显示24帧。（5）单击工具箱中文字工具，在选文字工具选项栏上设置字体为“黑体”、大小为“20点”、文字颜色为“白色”。L表示亮度，范围在0100之间。内容概要（2）合成图像 2图层样式 3蒙版5使用路径4图像格式1图像格式（1）v Pho
23、toshop保存文件过程中，有多种图像格式可供用户选择，不同的格式图像的色彩品质、容量大小都有一程度的差异。不同的文件格式可以用扩展名来区分，如PSD、JPG、GIF、PNG等。1PSD（.PSD）格式PSD图像文件是Photoshop软件自身格式，也称为原文件格式，是惟一能支持全部图像色彩模式的格式。以PSD格式保存的图像可以包含图层、通道及色彩模式。2JPEG(.JPG；.JPE)格式JPEG图像文件格式主要用于图像浏览及超文本文档，如HTML文档等。支持多种色彩模式。使用JPEG格式保存的图像经过高倍率的压缩，可使图像文件容量变得较小，但在压缩过程中会丢失部分数据。图像格式（2）3GIF
24、（.GIF）格式它在压缩过程中，图像的像素资料不会被丢失，然而丢失的却是图像的色彩。GIF格式最多只能储存256色，所以通常用来显示简单图形及文字。4PND（.PNG）格式PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的通道数据。另外PNG也被称为专业网页图像格式，其最大的优点就是能储存透明背景的图像。图像格式（3）5BMP（.BMP）格式BMP图像文件格式是一
25、种标准的点阵式图像格式，支持RGB、灰度和位图色彩模式，但不支持Alpha通道。6TIFF（.TIF）格式TIFF图像文件格式可以在许多不同的平台和应用软件间交换信息，其应用相当广泛。该格式支持RGB、CMYK、位图、灰度等色彩模式。而且在RGB、CMYK，以及灰度等模式支持Alpha通道的使用。演示：编辑文本实例v制作文字标题，效果如下图所示制作文字标题，效果如下图所示 注意最后保存的文件格式演示：制作渐变文字效果实例v制作渐变文字效果如下图所示。制作渐变文字效果如下图所示。操作步骤操作步骤：（1）创建图像文件，在“新建”对话框中设置图像宽度为400像素，高度为100像素。（2）点击工具箱中
26、的文本按钮，输入“渐变文字效果”文本内容，设置相应格式。（3）栅格化文本图层。（4）按住键盘上Ctrl键并同时在“渐变文字效果”图层上单击鼠标左键，可载入图层选区。（5）点击工具箱中的（渐变填充）按钮，在渐变选项栏上选择“黑色，白色”渐变，用鼠标左键在选区内部拖动创建渐变效果。（6）执行“选择”“取消选择”命令即可完成效果图。复习：图层基本概念 v图层概念：我们可以把图层想像成是一张一张叠起图层概念：我们可以把图层想像成是一张一张叠起来的透明胶片，每张透明胶片上都有不同的画面，来的透明胶片，每张透明胶片上都有不同的画面，改变图层的顺序和属性可以改变图像的最后效果。改变图层的顺序和属性可以改变图
27、像的最后效果。通过对图层的操作，使用它的特殊功能可以创建很通过对图层的操作，使用它的特殊功能可以创建很多复杂的图像效果。多复杂的图像效果。v图层面板：图层面板上显示了图像中的所有图层、图层面板：图层面板上显示了图像中的所有图层、图层组和图层效果，我们可以使用图层面板上的各图层组和图层效果，我们可以使用图层面板上的各种功能来完成一些图像编辑任务，例如创建、隐藏、种功能来完成一些图像编辑任务，例如创建、隐藏、复制和删除图层等。复制和删除图层等。v图层类型：图层类型：1.背景图层背景图层 2.一般图层一般图层 3.图层组图层组图层样式（图层特效）v图层样式可以创建出投影、发光、浮雕、描边等图层样式可
28、以创建出投影、发光、浮雕、描边等特殊效果。特殊效果。v在图层面板中，单击在图层面板中，单击“添加图层样式添加图层样式”按钮按钮 或或者执行者执行“图层图层”“图层样式图层样式”命令，设置图层命令，设置图层样式。样式。图层不透明度设置v图层不透明度设置：图层的不透明度决定它遮蔽或图层不透明度设置：图层的不透明度决定它遮蔽或显示它的下一个图层的程度，如果不透明度为显示它的下一个图层的程度，如果不透明度为 1%的图层显得几乎是透明的，而透明度为的图层显得几乎是透明的，而透明度为 100%的图层显得完全不透明。的图层显得完全不透明。演示图层各种样式演示：图层式样实例v给图片制作边框给图片制作边框说白了
29、就是FrontPage当中的图片热区合成图像-调整图像大小常见的颜色模式有：RGB、CMYK、Lab、HSB以及灰度模式等。您可以在一个图像中设置多个链接区域（名为图像映射区域），链接到其他 Web 页或多媒体文件。蒙版可以控制图层区域内部分内容可隐藏或是显示。不同的文件格式可以用扩展名来区分，如PSD、JPG、GIF、PNG等。复习：Photoshop合成图像Photoshop CS工作界面复习：Photoshop合成图像可运用不同滤镜，以产生一些意想不到的特效；每一帧较前一帧有轻微的变化，当连续、快速地显示这些帧时就创造出运动效果。路径由定位点和连接定位点的线段(曲线)构成；2、添加一个空
30、白覆盖层以PSD格式保存的图像可以包含图层、通道及色彩模式。如果页面编排已准备就绪，可以输出到 Web，您可以使用 Photoshop 和 ImageReady 中提供的切片工具，将页面版式或复杂图形划分为多个区域，并指定独立的压缩设置（从而获得较小的文件大小）。为了使人的肉眼感觉不到图像的切换，一秒钟至少要显示24帧。Photoshop CS工作界面（3）栅格化文本图层。Photoshop颜色模式（3）蒙版是Photoshop中的一个重要概念，使用蒙版可保护部分图层，该图层不能被编辑。复习：Photoshop合成图像 v选择工具组面板选择工具组面板 框选工具组套索工具组复习：Photosho
31、p合成图像 v选区的操作选区的操作（1）增加选区(按住键盘上Shift键)（2）减少选区(按住键盘上Alt键)（3）填充选区(前景颜色填充（Alt+Delete）或背景颜色填充（Ctrl+Delete）)（4）描边选区（5）移动选区（6）平滑选区（7）羽化选区（8）反向选择合成图像实例 v合成照片，效果如下图所示合成照片，效果如下图所示 最终效果图素材一素材二使用路径 v路径是定义和编辑图像区域的最佳方法之一，其路径是定义和编辑图像区域的最佳方法之一，其能用来精确定义具体区域，并保存这些结果以便能用来精确定义具体区域，并保存这些结果以便以后重复使用。当使用正确时，路径几乎不给文以后重复使用。当
32、使用正确时，路径几乎不给文件增加额外长度，并且能在文件之间共享，甚至件增加额外长度，并且能在文件之间共享，甚至能在文件与其他应用程序之间共享。它是由多个能在文件与其他应用程序之间共享。它是由多个节点的矢量线条构成的图像，而不是图层的本身节点的矢量线条构成的图像，而不是图层的本身像素，所以路径易于修整、重新选择或移动等操像素，所以路径易于修整、重新选择或移动等操作，可以保存在图像文件中，也可以单独输出。作，可以保存在图像文件中，也可以单独输出。路径路径(Path)v所谓路径(Path),在屏幕上表现为一些不可打印、不活动的矢量形状。路径使用钢笔工具创建，使用钢笔工具的同级其它工具进行修改。路径由
33、定位点和连接定位点的线段(曲线)构成；每一个定位点还包含了两个句柄，用以精确调整定位点及前后线段的曲度，从而匹配想要选择的边界。“路径”在PHOTOSHOP中是使用贝赛尔曲线所构成的一段闭合或者开放的曲线段。使用钢笔抠图v 选择钢笔工具选择钢笔工具,选择目标对象选择目标对象v 使用使用“路径面板路径面板”载入选区或者载入选区或者（Ctrl+Enter)路径实例1路径实例2-邮票制作 图层蒙版v蒙版也是蒙版也是Photoshop图层中的一个重要概图层中的一个重要概念，使用蒙版可保护部分图层，该图层不能念，使用蒙版可保护部分图层，该图层不能被编辑。蒙版可以控制图层区域内部分内容被编辑。蒙版可以控制
34、图层区域内部分内容可隐藏或是显示。更改蒙版可以对图层应用可隐藏或是显示。更改蒙版可以对图层应用各种效果，不会影响该图层上的图像。最后各种效果，不会影响该图层上的图像。最后一定要一定要“应用蒙版应用蒙版”才可以使更改生效。才可以使更改生效。Photoshop蒙版原理vPhotoshop蒙板是将不同灰度色值转化为不同蒙板是将不同灰度色值转化为不同的透明度，并作用到它所在的图层，使图层不同的透明度，并作用到它所在的图层，使图层不同部位透明度产生相应的变化。黑色为完全透明，部位透明度产生相应的变化。黑色为完全透明，白色为完全不透明。白色为完全不透明。原理：只是将上面一个图层的透明度降低,慢慢地看到下面
35、一个图层的颜色。（1）打开待处理的图像文件后，对需处理的部分加以选择。将优化结果存储为：可将当前文件保存为HTML文件格式。2套索选择工具可用于徒手画的方式描绘出不规则形状的选取区域。要试验不同的页面编排或导出页面的不同形式，请使用“图层复合”调板。Photoshop保存文件过程中，有多种图像格式可供用户选择，不同的格式图像的色彩品质、容量大小都有一程度的差异。用户在像素大小或文档大小中调整“宽度”和“高度”值。演示：制作渐变文字效果实例Photoshop蒙版的优点在设计网页过程中，文字工具可以创作出网页标题、导航文本、网站LOGO等项目。（1）图片：一般无法分割的图片（原图大小）。本教程介绍
36、的是目前使用最广泛的图形图像设计与制作软件Photoshop。Photoshop CS工作界面通道实际上可以理解为是选择区域的映射。可运用不同滤镜，以产生一些意想不到的特效；Photoshop CS工作界面蒙版可以控制图层区域内部分内容可隐藏或是显示。滤镜只能用于当前正在编辑的、可见的图层的选定区域，如果没有选定区域，系统会将整个图像视为当前选定区域。Photoshop蒙版原理“感受中国”页面图像制作步骤如下：Photoshop蒙版的优点v1.修改方便，不会因为使用橡皮擦或剪切删除而造修改方便，不会因为使用橡皮擦或剪切删除而造成不可返回的遗憾成不可返回的遗憾;v2.可运用不同滤镜，以产生一些意
37、想不到的特效；可运用不同滤镜，以产生一些意想不到的特效；v3.任何一张灰度图都可用来用为蒙板。任何一张灰度图都可用来用为蒙板。Photoshop蒙版的主要作用v1.抠图；抠图；v2.做图的边缘淡化效果；做图的边缘淡化效果；v3.图层间的溶合。图层间的溶合。v按住按住Ctrl 键键载入选区载入选区v按住按住Alt键键切换到蒙版切换到蒙版蒙版实例综合实例海报设计综合实例金属文字制作内容概要（3）通道 2滤镜3特效文字4蒙版1网页效果设计5切片、导出6图层蒙版v蒙版是蒙版是Photoshop中的一个重要概念，使用蒙版中的一个重要概念，使用蒙版可保护部分图层，该图层不能被编辑。蒙版可以控可保护部分图层
38、，该图层不能被编辑。蒙版可以控制图层区域内部分内容可隐藏或是显示。更改蒙版制图层区域内部分内容可隐藏或是显示。更改蒙版可以对图层应用各种效果，不会影响该图层上的图可以对图层应用各种效果，不会影响该图层上的图像。像。Photoshop蒙版原理vPhotoshop蒙板是将不同灰度色值转化为不同蒙板是将不同灰度色值转化为不同的透明度，并作用到它所在的图层，使图层不同的透明度，并作用到它所在的图层，使图层不同部位透明度产生相应的变化。黑色为完全透明，部位透明度产生相应的变化。黑色为完全透明，白色为完全不透明。白色为完全不透明。Photoshop蒙版的主要作用v1.抠图抠图v2.做图的边缘淡化效果做图的
39、边缘淡化效果v3.图层间的溶合图层间的溶合蒙版实例通道的概念v 通道这一概念在通道这一概念在Photoshop中是非常独特的，它不象层那中是非常独特的，它不象层那样容易上手，其中的奥妙也要远远多于层等。它是基于色样容易上手，其中的奥妙也要远远多于层等。它是基于色彩模式这一基础上衍生出的简化操作工具。彩模式这一基础上衍生出的简化操作工具。v 譬如说，一幅譬如说，一幅RGB三原色图有三个默认通道：三原色图有三个默认通道：Red（红）、（红）、Green（绿）、（绿）、Blue（蓝）。但如果是一幅（蓝）。但如果是一幅CMYK图像，图像，就有了四个默认通道：就有了四个默认通道：Cyan（蓝绿）、（蓝绿
40、）、Magenta（紫（紫红）、红）、Yellow（黄）、（黄）、Black（黑）。（黑）。v 由此看出，每一个通道其实就是一幅图像中的某一种基本由此看出，每一个通道其实就是一幅图像中的某一种基本颜色的单独通道。也就是说，通道是利用图像的色彩值进颜色的单独通道。也就是说，通道是利用图像的色彩值进行图像的修改的，我们可以把通道看作摄像机的中的滤光行图像的修改的，我们可以把通道看作摄像机的中的滤光镜。镜。通道的效果通道与图层的区别v一个通道层同一个图像层之间最根本的区别在于：一个通道层同一个图像层之间最根本的区别在于：图层的各个象素点的属性是以红绿蓝三原色的数值图层的各个象素点的属性是以红绿蓝三原
41、色的数值来表示的，而通道层中的象素颜色是由一组原色的来表示的，而通道层中的象素颜色是由一组原色的亮度值组成的。再说通俗点：通道中只有一种颜色亮度值组成的。再说通俗点：通道中只有一种颜色的不同亮度，是一种灰度图像。通道实际上可以理的不同亮度，是一种灰度图像。通道实际上可以理解为是选择区域的映射。解为是选择区域的映射。通道抠图范例滤镜概述滤镜概述v在主单菜单上单击“滤镜”命令，将打开滤镜菜单，其分为4个部分。v顶部为最后一次使用过的滤镜；v中间分别是Photoshop CS版新增滤镜v老版中的13类滤镜；v底部为外挂滤镜，只有安装了外挂式滤镜之后，才会显示在其菜单中。通过使用滤镜，可以为图像加入各
42、种特效，让平谈无奇的图片出现神奇的效果。滤镜使用说明滤镜使用说明滤镜只能用于当前正在编辑的、可见的图层的选定区域，如果没有选定区域，系统会将整个图像视为当前选定区域。滤镜以像素为单位进行处理，滤镜的处理效果与图像的分辨率有关。滤镜不能应用于索引模式和16位通道模式。滤镜的基本操作滤镜的基本操作v在Photoshop CS中尽管有风格各异、用途不同的滤镜，但它们通常的使用步骤如下：（1）打开待处理的图像文件后，对需处理的部分加以选择。（2）从“滤镜”菜单中选取相应的滤镜组，并选择其下一级子菜单中的一个滤镜。（3）然后在对话框中设置相应的参数后，点“好”按钮即可。在点击“好”按钮后，系统将滤镜效果
43、应用于图像，这将花费一些时间，如要中断滤镜的应用，按下键盘上Esc键。滤镜效果实例-闪电闪电v制作闪电，效果如下图所示 闪电制作方法v1、从工作区右上角向工作区左下角的渐变、从工作区右上角向工作区左下角的渐变v2、执行、执行“滤镜滤镜”“渲染渲染”“分层云彩分层云彩”命令命令 v3、执行、执行“图像图像”“调整调整”“曲线调整曲线调整”命命令令，调整亮度，调整亮度v4、执行、执行“图像图像”“反相反相”命令命令v5、执行、执行“图像图像”“调整调整”“亮度亮度/对比度对比度”命令命令 v6、执行、执行“图像图像”“调整调整”“色相色相/饱和度饱和度”命令命令 滤镜效果实例-扭曲文字扭曲文字v扭
44、曲文字，效果如下图所示 要点提示：对栅格后的文本进行旋转扭曲操作2、添加一个空白覆盖层图层面板：图层面板上显示了图像中的所有图层、图层组和图层效果，我们可以使用图层面板上的各种功能来完成一些图像编辑任务，例如创建、隐藏、复制和删除图层等。例如，72dpi表示图像中每英寸包含72个像素或点。若勾选对话框底部的“约束比例”复选框，会在宽度和高度间建立等比例效果。复习：Photoshop合成图像Photoshop蒙板是将不同灰度色值转化为不同的透明度，并作用到它所在的图层，使图层不同部位透明度产生相应的变化。Photoshop蒙版原理Photoshop颜色模式（2）路径由定位点和连接定位点的线段(曲
45、线)构成；可运用不同滤镜，以产生一些意想不到的特效；中文版Photoshop CS提供的选取工具分为两大类，一类是规则选取工具也称为框选工具，另一类是建立不规则选区的工具也称为套索类工具。（1）打开待处理的图像文件后，对需处理的部分加以选择。Photoshop:窗口-工作区-复位调板位置黑色为完全透明，白色为完全不透明。在图层面板中，单击“添加图层样式”按钮 或者执行“图层”“图层样式”命令，设置图层样式。BMP图像文件格式是一种标准的点阵式图像格式，支持RGB、灰度和位图色彩模式，但不支持Alpha通道。蒙版可以控制图层区域内部分内容可隐藏或是显示。替换页面上其他位置的图层内容。闪烁的星光效
46、果，如下图所示。路径是定义和编辑图像区域的最佳方法之一，其能用来精确定义具体区域，并保存这些结果以便以后重复使用。滤镜效果实例-火焰字火焰字v制作火焰字，效果如图下图所示 火焰字制作方法v1、新建图片，并色彩模式设置为、新建图片，并色彩模式设置为“灰度模式灰度模式”v2、输入文字，然后栅格化、输入文字，然后栅格化“火焰字火焰字”文字图层，文字图层，并且复制该图层并且复制该图层 v3、选择、选择“火焰字火焰字”副本图层，执行副本图层，执行“滤滤镜镜”“模糊模糊”“高斯模糊高斯模糊”命令，半径为命令，半径为2v4、执行、执行“滤镜滤镜”“风格化风格化”“风风”命令命令 v5、选择火苗区域（按住键盘
47、上、选择火苗区域（按住键盘上Ctrl键和键和Alt键键）v6、执行、执行“滤镜滤镜”“扭曲扭曲”“波纹波纹”命令命令 v7、执行、执行“图像图像”“模式模式”“索引颜色索引颜色”命令命令 v8、执行、执行“图像图像”“模式模式”“颜色表颜色表”命令命令 滤镜效果实例发光文字文字v使用使用“径向模糊径向模糊”滤镜功能制作滤镜功能制作“秀我风采秀我风采”文文字的喷发光芒效果，效果如图：字的喷发光芒效果，效果如图：网页效果设计v在网站设计与制作过程当中，经常先使用在网站设计与制作过程当中，经常先使用Photoshop制作网页的可视化效果。制作网页的可视化效果。v在完成页面效果的制作之后，使用切片工具
48、制作在完成页面效果的制作之后，使用切片工具制作网页所需要的素材。网页所需要的素材。网页效果设计实例（1）v 网站首页图片的设计网站首页图片的设计网页效果设计实例（2）v 网站首页图片的设计网站首页图片的设计网页切片v切片目的：尽可能小的减少网页文件的体积切片目的：尽可能小的减少网页文件的体积v切片网页图片分为：切片网页图片分为：v（1）图片：一般无法分割的图片（原图大小）。）图片：一般无法分割的图片（原图大小）。v（2）背景色：通过网页代码可以实现的颜色。）背景色：通过网页代码可以实现的颜色。v（3）背景图案：一般体积很小，通常用于填充网）背景图案：一般体积很小，通常用于填充网页和表格。页和表
49、格。切片v切片切片 是图像的一块矩形区域。是图像的一块矩形区域。通过将图像划分为通过将图像划分为切片，将能够更好地控制图像的功能和文件大小。切片，将能够更好地控制图像的功能和文件大小。v可以使用切片将源图像分成许多的功能区域。可以使用切片将源图像分成许多的功能区域。在在您存储图像和您存储图像和 HTML 文件时，每个切片都会作文件时，每个切片都会作为独立文件存储，并具有其自己的设置和颜色调为独立文件存储，并具有其自己的设置和颜色调板，而且会保留正确的链接、翻转效果以及动画板，而且会保留正确的链接、翻转效果以及动画效果。效果。图像切片实例内容概要（4）ImageReady CS 介绍1动画图片制
50、作(实例)2设计 Web 页3ImageReady CSImageReady是集成在Adobe Photoshop中的一个应用程序，是一个网页GIF动画编辑工具。ImageReady功能简单易学，其卓越的网络图像处理制作能力和动画制作能力受到大都用户的喜爱。认识认识ImageReady CS认识ImageReady CS 要启动ImageReady CS，在Photoshop中执行“文件”“在ImageReady CS中进行编辑”命令，或者单击工具箱下端的按钮，系统弹出ImageReady CS工作界面。ImageReady CS是Photoshop家庭成员，其工作界面和Photoshop非常
