法学网页图像处理

法学网页图像处理第1页/共119页一、网页图像处理概述网页的设计少不了对图形图像的制作和处理。图形图像设计与处理软件层出不穷，如Adobe公司推出的Photoshop、Firework软件、Corel公司推出的CorelDRAW等。本教程介绍的是目前使用最广泛的图形图像设计与制作软件Photoshop。第2页/共119页位图与矢量图

1．位图位图也称为点阵图或像素图，计算机屏幕上的图像是由屏幕上的发光点构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于矩阵。多个像素的色彩组合就形成了图像，称之为位图。2．矢量图矢量图也称为向量图，是用一系列计算机指令来描述和记录的一幅图，一幅图可分解为一系列由点、线、面等组成的子图，矢量图记录的是对象的几何形状、线条粗细和色彩等，因此生成的文件存储容量很小。

第3页/共119页图像分辨率分辨率是指单位长度上像素的多少，单位长度上像素越多，图像就越清晰。例如，72dpi表示图像中每英寸包含72个像素或点。位图矢量图第4页/共119页PhotoshopCS工作界面第5页/共119页PhotoshopCS工作界面PhotoshopCS的窗口是由标题栏、菜单栏、工具选项栏、工具箱、工作区和控制面板6大部分组成。（1）标题栏（2）菜单栏（3）工具选项栏第6页/共119页PhotoshopCS工作界面（4）工具箱：Photoshop软件的所有工具（绘图、选择工具、调整工具等）都置于工具箱中，用户需要使用什么工具，只要在工具箱中选择即可。（5）控制面板：控制面板是Photoshop软件中非常重要的辅助作图工具，其总是浮动在活动窗口中最前面，供用户随时访问。（6）工作区：工作区是图像编辑区，显示了当前正在编辑的图像内容。第7页/共119页Photoshop工具箱工具箱上的工具大致分为以下四大类：（1）选项区工具。包括选区工具组、套索工具组、魔术棒工具。（2）绘制工具。包括画笔工具组、历史画笔工具组、橡皮擦工具组、渐变工具组、吸管工具。（3）编辑工具。包括印章工具组、亮化工具组、模糊工具组、钢笔工具组。（4）辅助工具。包括移动工具、裁剪工具、手形工具、缩放工具、注释工具组等。第8页/共119页图层控制面板图层控制面板如下图所示，主要用来对图层进行管理和操作，包括添加图层、删除图层、合并图层等。第9页/共119页图层基本概念图层概念：我们可以把图层想像成是一张一张叠起来的透明胶片，每张透明胶片上都有不同的画面，改变图层的顺序和属性可以改变图像的最后效果。通过对图层的操作，使用它的特殊功能可以创建很多复杂的图像效果。图层面板：图层面板上显示了图像中的所有图层、图层组和图层效果，我们可以使用图层面板上的各种功能来完成一些图像编辑任务，例如创建、隐藏、复制和删除图层等。

图层类型：1.背景图层2.一般图层3.图层组第10页/共119页图层操作1.新建图层2.复制图层3.颜色标识4.删格化图层5.合并图层6.盖印图层7.图层叠加模式第11页/共119页图层管理

1.选择图层

2.隐藏、显示图层内容

3.更改图层顺序

4.链接图层

5.调整图层内容（对齐、分布）

6.锁定图层

7.从图层取样第12页/共119页Photoshop颜色模式（1）常见的颜色模式有：RGB、CMYK、Lab、HSB以及灰度模式等。1．RGB模式RGB模式是在Photoshop中处理图像时接触最多的颜色模式，RGB颜色是由红、绿、蓝三原色构成。2．CMYK模式CMYK颜色模式是一种专门用来印刷的颜色，CMYK颜色是由青色、品红、黄色、黑色四种印刷颜色组成。

第13页/共119页Photoshop颜色模式（2）3．灰度模式灰度模式采用了256级不同强度的灰度来描述图像。其值为0%时，表示为黑色，值为100%时，表示为白色。

4．Lab模式Lab模式是国际照明委员会（CIE）于1976年公布的一种色彩模式。L表示亮度，范围在0~100之间。a和b则表示颜色过渡的变化值。

第14页/共119页Photoshop颜色模式（3）5．HSB模式HSB模式是一种可以调整图像颜色效果的色彩值，Photoshop图像不能直接保存为HSB模式，执行“图像”→“调整”→“色相/饱和度”命令后，才能对图像进行HSB模式调整。

6．Bitmap模式Bitmap模式又称为位图模式，它是使用黑、白两种颜色来描述图像的一种方式，因为位置模式的图像也称作黑白图像。7．索引颜色模式索引颜色模式也称作映射颜色。在这种模式下，只能存储一个8bit色彩深度的文件，即最多256种颜色，而且颜色都是预先定义好的。第15页/共119页合成图像--调整图像大小改变当前编辑的图像大小，其常用方法是“图像”→“图像大小”命令，打开如下图所示的对话框。用户在像素大小或文档大小中调整“宽度”和“高度”值。若勾选对话框底部的“约束比例”复选框，会在宽度和高度间建立等比例效果。单击“好”按钮后，图像将按新的宽度和高度对整个图像进行缩放，从而改变图像的尺寸大小。

第16页/共119页合成图像--调整图像色调调整图像色调，其最直观方法是“图像”→“调整”→“色彩平衡”命令，打开下图所示对话框。用户可根据图像最终效果进行调整和设置。单击“好”按钮后，图像将按新的色调整生成效果图。

第17页/共119页色彩调整实例制作“感受中国”页面图像，效果如下图所示

具体要求：1、加强图像绿色调；2、调整图像“宽度”值为“698像素”、“高度”值为“179像素”。第18页/共119页色彩调整实例步骤“感受中国”页面图像制作步骤如下：（1）执行“文件”→“打开”命令，打开原始图像。（2）执行“图像”→“调整”→“色彩平衡”命令，在弹出的“色彩平衡”调整对话框中将绿色中间值设置为“+80”，点击“好”按钮。（3）执行“图像”→“图像大小”命令，在弹出“图像大小”调整对话框中取消“约束比例”复选框，设置“宽度”值为“698”、“高度”值为“179”，点击“好”按钮。（4）执行“文件”→“存储为”命令来存储效果图，选择JPG或PNG格式。第19页/共119页使用选择工具中文版PhotoshopCS提供的选取工具分为两大类，一类是规则选取工具也称为框选工具，另一类是建立不规则选区的工具也称为套索类工具。

1．规则的框选工具在使用时，只需在图像中拖动鼠标指针或单击鼠标左键，即可出一个选择区域。。

2．套索选择工具可用于徒手画的方式描绘出不规则形状的选取区域。被选定的图像区域边界上会显示出一条流动的虚线，对虚线以内的选定区域可以进行任意操作。第20页/共119页三、Photoshop合成图像选择工具组面板

框选工具组套索工具组第21页/共119页三、Photoshop合成图像选区的操作（1）增加选区(按住键盘上Shift键

)（2）减少选区(按住键盘上Alt键

)（3）填充选区(前景颜色填充（Alt+Delete）或背景颜色填充（Ctrl+Delete）

)（4）描边选区（5）移动选区（6）平滑选区（7）羽化选区（8）反向选择第22页/共119页第23页/共119页合成图像实例

合成照片，效果如下图所示

最终效果图素材一素材二第24页/共119页图像格式（1）

Photoshop保存文件过程中，有多种图像格式可供用户选择，不同的格式图像的色彩品质、容量大小都有一程度的差异。不同的文件格式可以用扩展名来区分，如PSD、JPG、GIF、PNG等。

1．PSD（.PSD）格式

PSD图像文件是Photoshop软件自身格式，也称为原文件格式，是惟一能支持全部图像色彩模式的格式。以PSD格式保存的图像可以包含图层、通道及色彩模式。

2．JPEG(.JPG；.JPE)格式

JPEG图像文件格式主要用于图像浏览及超文本文档，如HTML文档等。支持多种色彩模式。使用JPEG格式保存的图像经过高倍率的压缩，可使图像文件容量变得较小，但在压缩过程中会丢失部分数据。

第25页/共119页图像格式（2）3．GIF（.GIF）格式它在压缩过程中，图像的像素资料不会被丢失，然而丢失的却是图像的色彩。GIF格式最多只能储存256色，所以通常用来显示简单图形及文字。4．PND（.PNG）格式

PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNGfilesignature)域和按照特定结构组织的3个以上的数据块(chunk)组成。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。另外PNG也被称为专业网页图像格式，其最大的优点就是能储存透明背景的图像。

第26页/共119页图像格式（3）

5．BMP（.BMP）格式

BMP图像文件格式是一种标准的点阵式图像格式，支持RGB、灰度和位图色彩模式，但不支持Alpha通道。

6．TIFF（.TIF）格式

TIFF图像文件格式可以在许多不同的平台和应用软件间交换信息，其应用相当广泛。该格式支持RGB、CMYK、位图、灰度等色彩模式。而且在RGB、CMYK，以及灰度等模式支持Alpha通道的使用。

第27页/共119页编辑文本在Photoshop中可以制作出多种特殊效果的文字，常出现在各种广告、招牌中。在设计网页过程中，文字工具可以创作出网页标题、导航文本、网站LOGO等项目。第28页/共119页文本工具的使用单击工具箱中的按钮，系统弹出文字工具选项栏，如下图所示。用户可以在其中设置出各式各样的字体和字形。用鼠标左键在工作区中的任意位置单击，可出现输入文字的闪烁光标提示，即可开始输入所需文字。第29页/共119页调整文本格式

选择需要调整格式的文本，单击文字工具选项栏右端按钮，系统弹出字符调整面板，如下图所示，用户可根据要求自行设置。第30页/共119页编辑文本实例

制作文字标题，效果如下图所示

第31页/共119页编辑文本操作步骤

（1）创建图像文件，在“新建”对话框中设置图像宽度为442像素，高度为51像素。（2）设置前景颜色RGB值分别为（153、204、1），通过按Alt+Delele键用前景颜色填充画布。（3）单击图层面板上的新建图层按钮，创建新的空白图层1。（4）单击工具箱中的矩形框选按钮，在适当位置绘制矩形选区并以白色填充。（5）单击工具箱中文字工具，在选文字工具选项栏上设置字体为“黑体”、大小为“20点”、文字颜色为“白色”。在工作区域内输入“TheNewImpression”。单独选择“TheNew”文本，将其颜色设置为“黑色。（6）单击工具箱中文字工具，在选文字工具选项栏上设置字体为“黑体”、大小为“22点”、文字颜色为“白色”。在工作区域内输入“最新印象”。单独选择“印象”文本，将其颜色设置为“黑色”大小设置为“30点”。（7）执行“文件”→“存储”命令，保存图像，文件格式按要求设定。第32页/共119页创建变形文本单击文本选项栏上创建变形文本按钮，弹出变形文字对话框，单击变形文字对话框中的“样式”下拉列表，系统弹出变形效果列表项，如下图所示。变形效果列表项变形文字对话框第33页/共119页栅格化文本栅格化文本图层功能是将文本图层转换成图形化图层。被栅格化的文本内容不能再进行文本格式调整，比如字体就无法再进行设置。方法：在图层控制面板中用鼠标右键单文本图层，在弹出的下拉菜单中选择“栅格化图层”命令即可，如下图所示。第34页/共119页制作渐变文字效果实例

制作渐变文字效果如下图所示。

操作步骤：（1）创建图像文件，在“新建”对话框中设置图像宽度为400像素，高度为100像素。（2）点击工具箱中的文本按钮，输入“渐变文字效果”文本内容，设置相应格式。（3）栅格化文本图层。（4）按住键盘上Ctrl键并同时在“渐变文字效果”图层上单击鼠标左键，可载入图层选区。（5）点击工具箱中的（渐变填充）按钮，在渐变选项栏上选择“黑色，白色”渐变，用鼠标左键在选区内部拖动创建渐变效果。（6）执行“选择”→“取消选择”命令即可完成效果图。第35页/共119页综合实例：网站ＬＯＧＯ制作

综合实例一：网站ＬＯＧＯ制作

重点要求：图像宽度为234像素，高度为97像素。第36页/共119页综合实例：网站ＬＯＧＯ制作

综合实例二：企业标志制作

第37页/共119页内容概要（2）合成图像

2图层样式

3蒙版5使用路径4图像格式1第38页/共119页图像格式（1）

Photoshop保存文件过程中，有多种图像格式可供用户选择，不同的格式图像的色彩品质、容量大小都有一程度的差异。不同的文件格式可以用扩展名来区分，如PSD、JPG、GIF、PNG等。

1．PSD（.PSD）格式

PSD图像文件是Photoshop软件自身格式，也称为原文件格式，是惟一能支持全部图像色彩模式的格式。以PSD格式保存的图像可以包含图层、通道及色彩模式。

2．JPEG(.JPG；.JPE)格式

JPEG图像文件格式主要用于图像浏览及超文本文档，如HTML文档等。支持多种色彩模式。使用JPEG格式保存的图像经过高倍率的压缩，可使图像文件容量变得较小，但在压缩过程中会丢失部分数据。

第39页/共119页图像格式（2）3．GIF（.GIF）格式它在压缩过程中，图像的像素资料不会被丢失，然而丢失的却是图像的色彩。GIF格式最多只能储存256色，所以通常用来显示简单图形及文字。4．PND（.PNG）格式

PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNGfilesignature)域和按照特定结构组织的3个以上的数据块(chunk)组成。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。另外PNG也被称为专业网页图像格式，其最大的优点就是能储存透明背景的图像。

第40页/共119页图像格式（3）

5．BMP（.BMP）格式

BMP图像文件格式是一种标准的点阵式图像格式，支持RGB、灰度和位图色彩模式，但不支持Alpha通道。

6．TIFF（.TIF）格式

TIFF图像文件格式可以在许多不同的平台和应用软件间交换信息，其应用相当广泛。该格式支持RGB、CMYK、位图、灰度等色彩模式。而且在RGB、CMYK，以及灰度等模式支持Alpha通道的使用。

第41页/共119页演示：编辑文本实例

制作文字标题，效果如下图所示

注意最后保存的文件格式第42页/共119页演示：制作渐变文字效果实例

制作渐变文字效果如下图所示。

操作步骤：（1）创建图像文件，在“新建”对话框中设置图像宽度为400像素，高度为100像素。（2）点击工具箱中的文本按钮，输入“渐变文字效果”文本内容，设置相应格式。（3）栅格化文本图层。（4）按住键盘上Ctrl键并同时在“渐变文字效果”图层上单击鼠标左键，可载入图层选区。（5）点击工具箱中的（渐变填充）按钮，在渐变选项栏上选择“黑色，白色”渐变，用鼠标左键在选区内部拖动创建渐变效果。（6）执行“选择”→“取消选择”命令即可完成效果图。第43页/共119页复习：图层基本概念图层概念：我们可以把图层想像成是一张一张叠起来的透明胶片，每张透明胶片上都有不同的画面，改变图层的顺序和属性可以改变图像的最后效果。通过对图层的操作，使用它的特殊功能可以创建很多复杂的图像效果。图层面板：图层面板上显示了图像中的所有图层、图层组和图层效果，我们可以使用图层面板上的各种功能来完成一些图像编辑任务，例如创建、隐藏、复制和删除图层等。

图层类型：1.背景图层2.一般图层3.图层组第44页/共119页图层样式（图层特效）图层样式可以创建出投影、发光、浮雕、描边等特殊效果。在图层面板中，单击“添加图层样式”按钮或者执行“图层”→“图层样式”命令，设置图层样式。第45页/共119页图层不透明度设置图层不透明度设置：图层的不透明度决定它遮蔽或显示它的下一个图层的程度，如果不透明度为1%的图层显得几乎是透明的，而透明度为100%的图层显得完全不透明。演示图层各种样式第46页/共119页演示：图层式样实例给图片制作边框第47页/共119页复习：Photoshop合成图像选择工具组面板

框选工具组套索工具组第48页/共119页复习：Photoshop合成图像选区的操作（1）增加选区(按住键盘上Shift键

)（2）减少选区(按住键盘上Alt键

)（3）填充选区(前景颜色填充（Alt+Delete）或背景颜色填充（Ctrl+Delete）

)（4）描边选区（5）移动选区（6）平滑选区（7）羽化选区（8）反向选择第49页/共119页合成图像实例

合成照片，效果如下图所示

最终效果图素材一素材二第50页/共119页使用路径路径是定义和编辑图像区域的最佳方法之一，其能用来精确定义具体区域，并保存这些结果以便以后重复使用。当使用正确时，路径几乎不给文件增加额外长度，并且能在文件之间共享，甚至能在文件与其他应用程序之间共享。它是由多个节点的矢量线条构成的图像，而不是图层的本身像素，所以路径易于修整、重新选择或移动等操作，可以保存在图像文件中，也可以单独输出。第51页/共119页路径(Path)

所谓路径(Path),在屏幕上表现为一些不可打印、不活动的矢量形状。路径使用钢笔工具创建，使用钢笔工具的同级其它工具进行修改。路径由定位点和连接定位点的线段(曲线)构成；每一个定位点还包含了两个句柄，用以精确调整定位点及前后线段的曲度，从而匹配想要选择的边界。

“路径”在PHOTOSHOP中是使用贝赛尔曲线所构成的一段闭合或者开放的曲线段。第52页/共119页使用钢笔抠图选择钢笔工具,选择目标对象使用“路径面板”载入选区或者（Ctrl+Enter)第53页/共119页路径实例1第54页/共119页路径实例2--邮票制作第55页/共119页图层蒙版蒙版也是Photoshop图层中的一个重要概念，使用蒙版可保护部分图层，该图层不能被编辑。蒙版可以控制图层区域内部分内容可隐藏或是显示。更改蒙版可以对图层应用各种效果，不会影响该图层上的图像。最后一定要“应用蒙版”才可以使更改生效。

第56页/共119页Photoshop蒙版原理Photoshop蒙板是将不同灰度色值转化为不同的透明度，并作用到它所在的图层，使图层不同部位透明度产生相应的变化。黑色为完全透明，白色为完全不透明。第57页/共119页Photoshop蒙版的优点1.修改方便，不会因为使用橡皮擦或剪切删除而造成不可返回的遗憾;2.可运用不同滤镜，以产生一些意想不到的特效；3.任何一张灰度图都可用来用为蒙板。

第58页/共119页Photoshop蒙版的主要作用1.抠图；2.做图的边缘淡化效果；3.图层间的溶合。按住Ctrl键—载入选区按住Alt键—切换到蒙版第59页/共119页蒙版实例第60页/共119页综合实例—海报设计第61页/共119页综合实例—金属文字制作第62页/共119页内容概要（3）通道

2滤镜3特效文字4蒙版1网页效果设计5切片、导出6第63页/共119页图层蒙版蒙版是Photoshop中的一个重要概念，使用蒙版可保护部分图层，该图层不能被编辑。蒙版可以控制图层区域内部分内容可隐藏或是显示。更改蒙版可以对图层应用各种效果，不会影响该图层上的图像。第64页/共119页Photoshop蒙版原理Photoshop蒙板是将不同灰度色值转化为不同的透明度，并作用到它所在的图层，使图层不同部位透明度产生相应的变化。黑色为完全透明，白色为完全不透明。第65页/共119页Photoshop蒙版的主要作用1.抠图2.做图的边缘淡化效果3.图层间的溶合第66页/共119页蒙版实例第67页/共119页通道的概念通道这一概念在Photoshop中是非常独特的，它不象层那样容易上手，其中的奥妙也要远远多于层等。它是基于色彩模式这一基础上衍生出的简化操作工具。譬如说，一幅RGB三原色图有三个默认通道：Red（红）、Green（绿）、Blue（蓝）。但如果是一幅CMYK图像，就有了四个默认通道：Cyan（蓝绿）、Magenta（紫红）、Yellow（黄）、Black（黑）。由此看出，每一个通道其实就是一幅图像中的某一种基本颜色的单独通道。也就是说，通道是利用图像的色彩值进行图像的修改的，我们可以把通道看作摄像机的中的滤光镜。第68页/共119页通道的效果第69页/共119页通道与图层的区别一个通道层同一个图像层之间最根本的区别在于：图层的各个象素点的属性是以红绿蓝三原色的数值来表示的，而通道层中的象素颜色是由一组原色的亮度值组成的。再说通俗点：通道中只有一种颜色的不同亮度，是一种灰度图像。通道实际上可以理解为是选择区域的映射。

第70页/共119页通道抠图范例第71页/共119页滤镜概述在主单菜单上单击“滤镜”命令，将打开滤镜菜单，其分为4个部分。顶部为最后一次使用过的滤镜；中间分别是PhotoshopCS版新增滤镜老版中的13类滤镜；底部为外挂滤镜，只有安装了外挂式滤镜之后，才会显示在其菜单中。通过使用滤镜，可以为图像加入各种特效，让平谈无奇的图片出现神奇的效果。第72页/共119页滤镜使用说明滤镜只能用于当前正在编辑的、可见的图层的选定区域，如果没有选定区域，系统会将整个图像视为当前选定区域。滤镜以像素为单位进行处理，滤镜的处理效果与图像的分辨率有关。滤镜不能应用于索引模式和16位通道模式。第73页/共119页滤镜的基本操作在PhotoshopCS中尽管有风格各异、用途不同的滤镜，但它们通常的使用步骤如下：★（1）打开待处理的图像文件后，对需处理的部分加以选择。★（2）从“滤镜”菜单中选取相应的滤镜组，并选择其下一级子菜单中的一个滤镜。★（3）然后在对话框中设置相应的参数后，点“好”按钮即可。在点击“好”按钮后，系统将滤镜效果应用于图像，这将花费一些时间，如要中断滤镜的应用，按下键盘上Esc键。第74页/共119页滤镜效果实例--闪电制作闪电，效果如下图所示

第75页/共119页闪电制作方法1、从工作区右上角向工作区左下角的渐变2、执行“滤镜”→“渲染”→“分层云彩”命令3、执行“图像”→“调整”→“曲线调整”命令，调整亮度4、执行“图像”→“反相”命令5、执行“图像”→“调整”→“亮度/对比度”命令6、执行“图像”→“调整”→“色相/饱和度”命令第76页/共119页滤镜效果实例--扭曲文字扭曲文字，效果如下图所示

要点提示：对栅格后的文本进行旋转扭曲操作第77页/共119页滤镜效果实例--火焰字制作火焰字，效果如图下图所示

第78页/共119页火焰字制作方法1、新建图片，并色彩模式设置为“灰度模式”2、输入文字，然后栅格化“火焰字”文字图层，并且复制该图层3、选择“火焰字”副本图层，执行“滤镜”→“模糊”→“高斯模糊”命令，半径为24、执行“滤镜”→“风格化”→“风”命令5、选择火苗区域（按住键盘上Ctrl键和Alt键）6、执行“滤镜”→“扭曲”→“波纹”命令7、执行“图像”→“模式”→“索引颜色”命令8、执行“图像”→“模式”→“颜色表”命令第79页/共119页滤镜效果实例—发光文字使用“径向模糊”滤镜功能制作“秀我风采”文字的喷发光芒效果，效果如图：第80页/共119页网页效果设计在网站设计与制作过程当中，经常先使用Photoshop制作网页的可视化效果。在完成页面效果的制作之后，使用切片工具制作网页所需要的素材。第81页/共119页网页效果设计实例（1）网站首页图片的设计第82页/共119页网页效果设计实例（2）网站首页图片的设计第83页/共119页网页切片切片目的：尽可能小的减少网页文件的体积切片网页图片分为：（1）图片：一般无法分割的图片（原图大小）。（2）背景色：通过网页代码可以实现的颜色。（3）背景图案：一般体积很小，通常用于填充网页和表格。第84页/共119页切片切片是图像的一块矩形区域。通过将图像划分为切片，将能够更好地控制图像的功能和文件大小。可以使用切片将源图像分成许多的功能区域。在您存储图像和HTML文件时，每个切片都会作为独立文件存储，并具有其自己的设置和颜色调板，而且会保留正确的链接、翻转效果以及动画效果。第85页/共119页图像切片实例第86页/共119页内容概要（4）ImageReadyCS介绍1动画图片制作(实例)2设计Web页3第87页/共119页ImageReadyCSImageReady是集成在AdobePhotoshop中的一个应用程序，是一个网页GIF动画编辑工具。ImageReady功能简单易学，其卓越的网络图像处理制作能力和动画制作能力受到大都用户的喜爱。第88页/共119页认识ImageReadyCS认识ImageReadyCS

要启动ImageReadyCS，在Photoshop中执行“文件”→“在ImageReadyCS中进行编辑”命令，或者单击工具箱下端的按钮，系统弹出ImageReadyCS工作界面。

ImageReadyCS是Photoshop家庭成员，其工作界面和Photoshop非常相似，各种工具、控制面板、浏览窗口都一样，ImageReadyCS只多了一项动画控制面板。

第89页/共119页ImageReady界面动画调板第90页/共119页小技巧恢复默认界面Photoshop:窗口->工作区->复位调板位置ImageReady:窗口->工作区->默认调板位置第91页/共119页ImageReady工具箱第92页/共119页ImageReady专有工具第93页/共119页ImageReady中的图像映射图像映射将图像区域链接到URL。您可以在一个图像中设置多个链接区域（名为图像映射区域），链接到其他Web页或多媒体文件。

说白了就是FrontPage当中的图片热区第94页/共119页网页切片切片目的：尽可能小的减少网页文件的体积切片网页图片分为：（1）图片：一般无法分割的图片（原图大小）。（2）背景色：通过网页代码可以实现的颜色。（3）背景图案：一般体积很小，通常用于填充网页和表格。第95页/共119页切片切片是图像的一块矩形区域。通过将图像划分为切片，将能够更好地控制图像的功能和文件大小。可以使用切片将源图像分成许多的功能区域。在您存储图像和HTML文件时，每个切片都会作为独立文件存储，并具有其自己的设置和颜色调板，而且会保留正确的链接、翻转效果以及动画效果。第96页/共119页使用动画控制面板使用动画控制面板

第97页/共119页动画原理动画原理

“动画”就是多幅图像按一定的先后次序，在设定的时间内依次显示。在动画制作过程中将其中一幅图像称作“帧”，动画就是由这样多帧图像组成。每一帧较前一帧有轻微的变化，当连续、快速地显示这些帧时就创造出运动效果。为了使人的肉眼感觉不到图像的切换，一秒钟至少要显示24帧。在ImageReadyCS中，处理图层是创建动画的基础。通过将动画的每一帧置于其自身所在的图层上，在不同的帧上显示不同的图层就可完成动画的创作。

第98页/共119页动画效果实例（1）逐帧显示文字，效果如下图所示。动画效果描述：实现“欢迎您来到我的个人网站”文字内容，从左到右逐字显示效果。第99页/共119页关键步骤1、输入文字2、添加一个空白覆盖层3、创建10帧4、取消选择（取消虚线框）5、选择每一帧中的空白覆盖层移动一下位置6、设置延时0.2秒第100页/共119页保存文件为GIF等在ImageReadyCS软件中，文件有以下几种保存方式。存储：保存ImageReady自身文件格式，扩展名为PSD文件。存储为：将已经保存过的文件改名存储，或者改变文件存储位置。将优化结果存储为：可将当前文件保存为HTML文件格式。导出：可以导出GIF、SWF动画文件。第101页/共119页动画效果实例（2）闪烁的星光效果，如下图所示。动画效果描述：实现星光闪烁效果。第102页/共119页关键步骤1、打开图片，创建2个空层2、在图层1当中添加星（画笔工具，在工具栏当中载入“混合画笔”，选25）--不变的星星3、在图层2当中画星—会闪的星星4、创建新帧5、选择第1帧隐藏图层2（有星星的图层），选择第2帧隐藏图层3（空白层，没星星的）6、设置播放时间0.1秒第103页/共119页动画实例—文字颜色渐变实现文字从一种颜色渐渐的变成另一种颜色原理：只是将上面一个图层的透明度降低,慢慢地看到下面一个图层的颜色。第104页/共119页关键步骤1、输入文字，设置颜色（如：黄色）2、复制文字图层，修改文字颜色（如：绿色）3、打开”动画“调板，创建新帧4、选择新创建的帧，修改文字副本图层的透明度为05、选择第1帧，单击”过渡“实现过渡效果的创建第105页/共119页设计Web页Photoshop和ImageReady中的图形工具和功能简化了大多数Web设计任务。使用Photoshop和ImageReady进行Web页（网页）的设计类似于建筑师绘制建筑的效果图。网页设计员类似于建筑工人，他们制作的网页就需要达到效果图所需要的效果。第106页/共119页设计Web页--页面设计在ImageReady中，针对页面和横幅、网格、导向线和智能参考线的预设文档大小简化了页面版式。在Photoshop和ImageReady中，都可以使用文本、绘图和绘画工具向版面中添加内容。在ImageReady中，可以使用图层、图层组和编组的图层来排列和对齐内容。要试验不同的页面编排或导出页面的不同形式，请使用“图层复合”调板。第107页/共119页设计Web页--切片如果页面编排已准备就绪，可以输出到Web，您可以使用Photoshop和Ima