网页设计与制作-综合实例运用-(5)[283页].ppt

1、第4章 Photoshop CS在网页设计中的应用4.1 Photoshop CS简介 4.2 利用工具绘制网页图像4.3 网页图像的处理4.4 使用文字工具制作网页特效文字本章小结4.1 Photoshop CS简介简介Photoshop CS是Adobe公司推出的图像处理软件，它功能强大且操作简便，被广泛地应用于图像处理和网页设计等领域。4.1.1 Photoshop CS 的工作界面的工作界面Photoshop CS的工作界面是编辑、处理图像的操作平台，它主要由菜单栏、工具栏、面板、文档窗口和工具选项栏等组成，如图4-1所示。1菜单栏菜单栏Photoshop CS提供了9个菜单，参见图4

2、-1，利用 Photoshop菜单可以进行所有的图像处理操作。图4-1 Photoshop CS的工作界面2工具箱工具箱在Photoshop提供的工具栏中，每种工具均有其指定的用途，用户编辑和处理图像时，只要用鼠标单击某一工具，就可使用该工具。按照工具的作用分组，最上方是选框、裁切工具，接下来是绘图、编辑工具，然后是文字路径工具，最后是吸管、注释及看图工具。当启动Photoshop时，工具箱出现在工作界面的左侧，工具箱中所包含的工具不仅有默认的工具，而且在工具图标的右下角有一个三角形按钮，用鼠标右键单击此按钮会弹出更多的隐藏工具，如图4-2所示。这些工具可用于创建文字、选区、绘图、取样、编辑、

3、移动、注释和查看图像，还允许更改前景色和背景色、使用不同的模式等。图4-2 工具栏3面板面板通常面板是浮动在Photoshop 界面上，而且常放在界面的右边，也可以将它拖放在界面的任何位置。默认情况下，浮动面板以组合的方式堆叠在一起，可以利用下列技巧重新排列浮动面板，使其更符合自己的操作习惯。(1)如果要让某个面板显示在所属群组的最前面，单击浮动面板的标签，或在“窗口”菜单中选择浮动面板名即可。(2)如果要移动整个浮动的面板组，只需将鼠标指针移动到浮动面板最上面的蓝色条上，按住左键并拖曳，即可将其放到屏幕所需的位置。(3)如果要重新排列或分离浮动面板组，只需拖曳浮动面板的标签，将其拖曳到现有的

4、群组之外，就会建立新的群组。(4)如果要将浮动面板移动到另一个群组中，只需将浮动面板的标签拖曳到另一个群组中即可。(5)如果要显示浮动面板菜单，只需将鼠标指针放在浮动面板右上角的三角形上并单击，从弹出的菜单中选择即可。(6)如果要更改浮动面板大小，则拖曳浮动面板的任何角点，或拖曳浮动面板右下角的小方框即可实现。但并不是所有浮动面板的大小都是可以调整的。(7)如果要将面板缩小到只剩下标题，单击“最小化/最大化”按钮，或是单击两下浮动面板索引标签即可。4工具选项栏工具选项栏大部分工具的属性显示在工具选项栏内。选项栏与图像内容相关，并且随工具的不同而变化。选项栏可放在工作区域内的任何位置。如图4-3

5、所示是矩形选框工具选项栏。图4-3 矩形选框工具选项栏4.1.2 Photoshop CS的新增功能的新增功能Photoshop具有界面友好、易学易用等优点，目前已被应用于印刷、广告设计、封面制作、网页图像制作和照片编辑等领域。在Photoshop CS版本中，主要增加了以下新功能和新特性。(1)匹配颜色命令：通过立即匹配一幅图像与另一幅图像的色彩模式，使包装照片、时装照片及更多照片之间达到外观一致。(2)柱状图调色板：随时根据对图像的调整更新柱状图调色板。(3)阴影/高光校正：使用阴影/高光校正功能，可快速改进图像曝光过度或高光不足区域的对比度，同时保持照片的整体平衡。(4)路径文本：Pho

6、toshop CS对文字的处理功能更上一层楼，字绕路径排列可以直接在Photoshop中实现。(5)改进的文件浏览器：新版本的“文件浏览器”新增了图片的管理功能。快速预览标记和排序图像，搜索和编辑元数据及关键字，以及从改进的文件浏览器自动共享成批文件。(6)集成数码相机原始文件支持：通过来自大多数主要数码相机型号的完整原始数据文件，获得更为真实、更高质量的输出。(7)全面的16位支持：升级后的软件将可以为16位颜色的图像提供更好的支持，同时无论是Macromedia还是Windows用的版本都对代码进行了优化和简化设计，借助核心功能对16位图像的扩展支持，执行更为精确的编辑和润色操作。(8)图

7、层组合：允许用户对图像进行非破坏性的编辑和操作，类似Adobe公司的After Effects软件的层调整功能。通过将同一文件的不同图层组合另存为“图层组合”，可更有效地为客户创建不同设计。(9)Macromedia Flash文件导出：使用ImageReady CS创建SWF动画，并带有矢量艺术作品和可变文本。(10)可自定义的键盘快捷方式：自定义、保存并打印理想键盘快捷方式摘要，可以方便地使用最常用的功能。4.1.3 创建简单的网页图像创建简单的网页图像下面通过完成如图4-4所示的首页图像的制作来熟悉Photoshop CS的基本功能。图4-4 首页图像1新建文件新建文件启动Photosh

8、op后，如果要在一个新的图像中进行创作，则需要先建立一个新的图像。具体操作步骤如下：步骤1 选择“文件”“新建”命令，弹出如图4-5所示的对话框，这里设置“宽度”为800像素，“高”为600像素，“背景内容”选择白色。图4-5 “新建”对话框步骤2 在“图层”面板中单击“创建新的图层”图标，新建一个图层“图层1”，如图4-6所示。图4-6 新建图层步骤3 选择“编辑”“填充”命令，在弹出的“填充”对话框中选择用“前景色”填充，效果如图4-7所示。图4-7 填充效果2导入图像导入图像导入图像的操作步骤如下：步骤 1 选择“文件”“打开”命令，打开要导入的3幅图片，如图4-8图4-10所示。图4-

9、8 打开图片1 图4-9 打开图片2 图4-10 打开图片3 步骤2 对图4-8所示的图片用工具箱中的矩形选框工具进行适当选取，如图4-11所示。选择“选择”“羽化”命令，弹出如图4-12所示的“羽化选区”对话框,设置“羽化半径”为5,然后选择“编辑”“拷贝”命令复制选区。图4-11 选择区域 图4-12 设定“羽化半径”步骤3 将图4-7所示的图像作为当前编辑窗口，选择“编辑”“粘贴”命令，效果如图4-13所示。步骤4 用同样的方法对图4-9和图4-10进行选取和羽化，然后粘贴到图4-7中，适当地调整位置后，效果如图4-14所示。图4-13 粘贴图片 图4-14 粘贴3幅图片并调整位置 3添

10、加文字和应用样式添加文字和应用样式文字是信息的基本载体，是网页图像处理中最重要的一环，下面就讲述图像中文字的应用。具体步骤如下：步骤1 单击工具箱中的“设置前景色”，设置前景色为白色，在工具箱中选择“横排文字”工具，将鼠标指针置于图像窗口中，在图像上想要输入文本处用鼠标拖出文本框，在文本框内输入文字“健康自然山庄”。步骤2 输入文字后可使用“字符”面板对文字进行更多地调整,如图4-15所示,调整后的效果如图4-16所示。图4-15 “字符”面板 图4-16 输入文字 步骤3 对“健康自然山庄”文字图层选择“图层”“图层样式”“描边”命令，弹出如图4-17所示的“图层样式”对话框，设置填充颜色为

11、紫色。选择“投影”选项，设置“投影颜色”为黑色，效果如图4-18所示。图4-17 设置文字图层样式 图4-18 对文字添加样式后的效果 步骤4 使用同样的方法，输入其他文字并设置文字样式，选择“图层”“合并图层”命令合并图层。步骤5 在工具箱中选择“切片工具”，然后在图像上方的文字部分绘制矩形区域，并调整大小。同样对图像中其他图片绘制切片。效果如图4-19所示。图4-19 切割图片4保存输出图像保存输出图像“存储为Web所用格式”是Photoshop CS中最重要的功能之一，它可以用来设置图片大小和下载时间，还可以进行图像的优化等设置。保存输出图像的步骤如下：步骤1 处理完图片后，选择“文件”

12、“存储为Web所用格式”命令，弹出如图4-20所示的“存储为Web格式”对话框，对话框左上角有4个标签，通过它们，可以选择4种不同的视图，即原稿、优化、双联和四联。图4-20 “存储为Web所用格式”对话框步骤2 单击“存储”按钮，弹出如图4-21所示的“将优化结果存储为”对话框。在“保存类型”下拉菜单中选择“HTML和图像”格式。步骤3 单击“保存”按钮。至此，页面制作和图像优化完毕，网页最终效果如图4-22所示。图4-21 “将优化结果存储为”对话框 图4-22 网页效果 4.2 利用工具绘制网页图像利用工具绘制网页图像 4.2.1 创建选择区域创建选择区域在Photoshop中选择所需内

13、容有多种途径，可以先试一下位于工具箱中的几种选择工具：若所需内容的颜色比较单一或相近，可用“魔棒”工具快速选取；若内容与其他部分颜色区别较大，即边界比较好勾勒，可用“套索”工具选取；若所需内容是矩形或圆形等比较规则的图形，可使用“矩形”选框工具或“椭圆”选框工具。1选框工具选框工具选框工具位于工具箱的左上角，它包括矩形选框工具、椭圆选框工具、单行选框工具和单列选框工具。要选取它可以直接单击，或者按M快捷键，如图4-23所示。图4-23 选框工具1)矩形选框工具矩形选框工具可以建立矩形选取范围。在使用矩形选框工具之前通常先在工具选项栏中进行必要的设置，如图4-24所示。图4-24 矩形选框工具选

14、项栏矩形选框工具选项栏分为3部分：修改选择方式、“羽化”与“消除锯齿”、“样式”。(1)修改选择方式分为4种：“新选区”、“添加到选区”、“从选区减去”和“与选区交叉”。新选区：就是去掉原来的选择区域重新选择区域。添加到选区：在原来的选择区域基础上增加新的选择区域，从而形成最终的选择区域，最终的选择区域为两次选择区域的并集，如图4-25图4-27所示。图4-25 原选区 图4-26 增加选区 图4-27 最终的选择区域 从选区减去：在原来的选择区域中减去新的选择区域与原来的选择区域相交的部分，形成最终的选择区域，如图4-28图4-30所示。图4-28 原选区 图4-29 减去的选择区域 图4-

15、30 最终的选择区域 从选区交叉：新的选择区域与原来的选择区域相交的部分为最终的选择区域，如图4-31图4-33所示。图4-31 原选区 图4-32 选择交集 图4-33 最终的选择区域(2)羽化：即通过建立选区和选区周围像素之间的转换来模糊边缘，丢失选区边缘的一些细节。因此，羽化可以消除选择区域的正常硬边界，也就是使区域边界产生一个过渡。可以通过输入羽化值来控制选区羽化效果，如图4-34图4-36所示。“消除锯齿”通过软化边缘像素和背景像素之间的颜色转换，使选区的锯齿边缘平滑，因为只是更改了边缘像素，所以没有细节丢失。图4-34 羽化=0 图4-35 羽化=5 图4-36 羽化=10(3)样

16、式：规定了绘制的矩形选框的形状。“样式”下拉列表框中有3个选项，其含义如下：正常：该选项是默认的选择方式，也是最常用的选框样式，在这种方式下，可以绘制任意大小的矩形，如图4-37、图4-38所示。图4-37 “样式”设置为“正常”图4-38 用正常选择方式选择图片 固定长宽比：在这种样式下可以任意设定矩形的宽度和高度比，如图4-39所示，只需在其文本框中输入相应的数字即可，系统默认的比例是1 1，如图4-40所示。图4-39 固定长宽比 宽 高=1 1 图4-40 用固定长宽比选择方式选择图片 固定大小：在这种方式下，可以通过输入宽度和高度的数值来确定矩形的大小，如图4-41和图4-42所示，

17、宽和高分别为65像素和66像素。图4-41 固定大小：宽=65像素，高=66像素 图4-42 用固定大小选择方式选择图片 2)椭圆选框工具要选取椭圆选框工具，需要单击并按住工具箱的矩形选框工具，再从弹出菜单中选择椭圆选框工具，然后释放鼠标即可。其工具选项栏的内容与用法和矩形选框工具选项栏大致相同，如图4-43所示。这里介绍“消除锯齿”复选框。Photoshop中的图像是由像素组成的，而像素实际上是正方形的色块，因此当进行圆形选取或其他不规则选取时就会产生锯齿边缘。“消除锯齿”的原理就是在锯齿之间填入中间色调，这样就从视觉上消除了锯齿现象，如图4-44和图4-45所示为两种不同的视觉效果。图4-

18、43 椭圆选框工具选项栏图4-44 没有消除锯齿效果 图4-45 消除锯齿效果 2套索工具套索工具如果所要选取的图形不规则，这时就可以选用套索工具。与选框工具一样，套索工具及其快捷键也是很有用的。套索工具如图4-46所示，可用来绘制直线、线段或徒手描绘外框的选取范围，它包含套索工具、多边形套索工具和磁性套索工具。1)套索工具选中套索工具后，将鼠标指针移到图像上后即可拖动鼠标选取所需要的范围，如图4-47所示。图4-46 套索工具 图4-47 用套索工具选取图形 2)多边形套索工具多边形套索工具与套索工具的使用方法有很多相似的地方，所不同的是它的选取区域是不规则的多边形。由于多边形套索工具比较容

19、易控制，所以使用它来选取图像细节部分是很方便的。使用多边形套索工具时，不用像使用套索工具那样连续地拖动选取框的线，而是单击多边形套索来设置选取点。Photoshop会在点与点之间插入直线来构成选取框，可以根据需要设置任意多个点，点与点之间的距离既可以很近也可以很远。如图4-48所示为多边形套索工具选项栏，使用多边形套索工具可进行如图4-49所示的选择。图4-48 多边形套索工具选项栏 图4-49 用多边形套索工具选取图形 3)磁性套索工具磁性套索工具是一种具有可识别边缘功能的套索工具，可在图像中选取不规则、但图形颜色和背景颜色反差较大的图形。使用该工具时，选框线会自动被吸到对象的边界线上，如图

20、4-50所示。通常情况下，使用磁性套索工具很少能一次就建立精确选区，因为某些选区的边缘和背景颜色很接近，套索很难分辨，此时就需要其他工具协助才能完成选区的创建。图4-50 用磁性套索工具选取图形 3魔棒工具魔棒工具魔棒工具是一种独特的选取工具，前面介绍的选取工具都是根据在图或照片中的位置选取像素的，而魔棒工具选择像素的方式却有些不同，它是根据颜色值来选取像素，是以图像中相近的色素来建立选取范围的。魔棒工具可以用来选择颜色相同或相近的整片色块，如图4-51和图4-52所示。当用魔棒工具单击某个点时，与该点颜色相似和相近的区域将被选中。另外，通过设定魔棒工具选项栏，还可以控制其颜色的相似程度。魔棒

21、工具选项栏如图4-53所示，主要选项的含义如下。图4-51 魔棒工具 图4-52 用魔棒工具选取区域 图4-53 魔棒工具选项栏 修改选择方式：包括“新选区”、“添加到选区”、“从选区减去”和“与选区交叉”4种方式，与矩形选框工具的修改选择方式相同。容差：数值越小选取的颜色范围越接近，数值越大选取的颜色范围越大。其中可输入0255之间的数值，系统默认为32，如图4-54和图4-55所示为容差值不同时的效果。用于所有图层：如果选中该复选框，则颜色选取范围可跨所有可见图层，如果不选择该复选框，魔棒工具只能在当前图层起作用。图4-54 容差=25的效果 图4-55 容差=100的效果 4利用魔棒工具

22、抠取透明图像利用魔棒工具抠取透明图像在Photoshop中抠取透明图像，最原始的做法是用魔棒工具将背景中颜色相近的区域选出来并删掉，然后用橡皮擦工具仔细擦去背景中剩余的一些图片。步骤1 选择“文件”“打开”命令，打开一幅如图4-56所示的图。步骤2 从工具箱中选择魔棒工具，单击图像上的绿色处，选择如图4-57所示的区域。图4-56 打开图像 图4-57 用魔棒工具选择区域 步骤3 在图4-57中可以看到右上角和右下角的绿色区域没有被选中，按住Shift键，继续使用魔棒工具在没有被选中的绿色区域单击，增加选择区域，效果如图4-58所示。步骤4 按Delete键删除绿色背景，效果如图4-59所示。

23、图4-58 增加选择区域 图4-59 透明效果 5羽化图像羽化图像羽化通过建立选区和选区周围像素之间的转换边界来模糊边缘，羽化在处理图像中应用广泛。创建羽化效果的具体操作步骤如下。步骤1 打开如图4-60所示的图片，单击工具箱中的矩形选框工具，如图4-61所示。图4-60 打开图片 图4-61 矩形选框工具 步骤2 选择图片中的部分区域，如图4-62所示。在矩形选框工具选项栏的“羽化”文本框中输入5像素，如图4-63所示。图4-62 选择部分区域 图4-63 调整“羽化”值 步骤3 选择“选择”“反选”命令，反选效果如图4-64所示。步骤4 按Delete键删除，羽化后的效果如图4-65所示。

24、图4-64 反选效果 图4-65 羽化后的效果 4.2.2 基本绘图工具基本绘图工具在处理网页图像过程中，绘制图像是最基本的操作。Photoshop CS提供了非常便捷的绘图功能。下面介绍Photoshop中的画笔、铅笔、图章、油漆桶和渐变等绘图工具的使用。1画笔工具画笔工具画笔工具位于工具箱的中部，如图4-66所示。另外，也可以按快捷键B切换到画笔工具，在画笔工具选项栏选择画笔样式，如图4-67所示。图4-68所示为利用画笔工具对图像进行处理后的效果。图4-66 画笔工具 图4-67 画笔样式 图4-68 画笔制作效果2铅笔工具铅笔工具铅笔工具的工作原理和实际的铅笔相似，绘制的曲线是硬的、有

25、棱角的，工作方式与画笔相同，如图4-69所示为铅笔工具。使用铅笔工具，可在图像或选区内绘制所需的线条，铅笔线条的粗细可通过“画笔预设”选取器来选择，如图4-70所示。图4-69 铅笔工具 图4-70 铅笔预设选取器 铅笔工具选项栏中的“自动抹掉”是铅笔的特殊功能，其被选中后，在用铅笔绘画过程中，当图像的颜色与前景色相同时，铅笔会自动擦除前景色而填入背景色，如图4-71和图4-72所示。图4-71 起画点与前景色不同时的效果 图4-72 起画点与前景色相同时的效果 3仿制图章工具和图案图章工具仿制图章工具和图案图章工具仿制图章工具和图案图章工具虽然都称为图章工具，但其功能截然不同。仿制图章工具是

26、一种复制图像工具。在使用图案图章工具时，首先是要定义图案，然后将图案复制到图像中。图章工具如图4-73所示，使用仿制图章工具可将局部的图像复制到其他地方或另一个文件中。仿制图章工具选项栏如图4-74所示。图4-73 图章工具图4-74 仿制图章工具选项栏仿制图章工具选项栏中有一项与众不同的是对齐复选框，选中此复选框后，不管停笔后再画多少次，每次复制都保持其连续性。这种功能对于用多种画笔复制一幅图像是很有用的，这样在重复使用仿制图章工具时，可以使粘贴多次的图像重合。如果取消此复选框，则每次停笔后再画时，都从原先的起点画起，此时适用于多次复制同一图像。多次使用该工具在原粘贴点粘贴图像后，将出现重影

27、，故可以据此制作出重影的特殊效果。如图4-75所示的图案图章工具选项栏中比仿制图章工具选项栏多了“图案”一项，单击其右侧下拉按钮，则会出现图案拾色器，里面储存着定义过的图案，如图4-76所示。图4-75 图案图章工具选项栏图4-76 图案拾色器4橡皮擦工具橡皮擦工具橡皮工具是擦除颜色的工具，橡皮擦工具包括以下3种：橡皮擦工具、背景色橡皮擦工具和魔术橡皮擦工具，如图4-77所示。图4-77 “橡皮擦”工具橡皮擦工具使用方法很简单，像使用画笔一样，只需选中橡皮擦工具后，按住鼠标左键在图像上拖动即可。当作用于图层为背景层图片时，相当于使用背景颜色的画笔，当作用于“图层”时，擦除后变为透明，如图4-7

28、8和图4-79所示为使用橡皮擦前后的对比图。图4-78 原图 图4-79 使用橡皮擦后的效果 橡皮擦工具选项栏如图4-80所示，其中包括“画笔”、“模式”、“不透明度”、“流量”和“抹到历史记录”选项。图4-80 橡皮擦工具选项栏5油漆桶工具和渐变工具油漆桶工具和渐变工具油漆桶工具和渐变工具都是颜色填充工具，但其填充方式不同。1)油漆桶工具油漆桶工具用于向颜色相近并相连的区域填充前景色或指定图案。具体操作步骤如下：步骤1 打开如图4-81所示的图片。步骤2 在工具箱中选择魔棒工具，如图4-82所示，单击图像，选择人物衣服区域，如果没有选择完全，还可以按Shift键增加选择区域，选择效果如图4-

29、83所示。图4-81 打开图片 图4-82 选择魔棒工具 图4-83 使用魔棒工具选择区域 步骤3 选择工具箱中的油漆桶工具，选择前景色为红色，然后单击图像中的选择区域，使用前景色填充选区，效果如图4-84所示。图4-84 填充后效果2)渐变工具使用渐变工具可以创建出两种以上颜色的渐变效果。渐变方式既可以选择系统默认值，也可以自定义。渐变方向有线性渐变、径向渐变、角度渐变、对称渐变和菱形渐变5种。如果不选择填充区域，将对整个图像进行渐变填充。使用时，首先选择好渐变方式和渐变颜色，用鼠标在图像上单击起点，拖曳后再单击终点，即可进行渐变填充。可以用拖曳线段的长度和方向来控制渐变效果。使用渐变工具的

30、具体操作步骤如下：步骤1 打开如图4-85所示的图像。图4-85 打开图像步骤2 从工具箱中选择渐变工具，选择前景色为蓝色，在其工具选项栏中设置透明渐变，“不透明度”设置为55%，如图4-86所示。图4-86 设置渐变属性步骤3 用鼠标在图像上单击并拖曳，即可进行渐变填充，效果如图4-87所示。图4-87 渐变填充 6图形工具图形工具图形工具包括矩形工具、圆角矩形工具、椭圆工具、多边形工具、直线工具和自定义形状工具。用图形工具可以绘制出丰富多彩的图形效果。使用矩形工具绘制矩形，只需选中矩形工具后，在图像上单击并拖动即可绘出矩形。绘制矩形的具体操作步骤如下：步骤1 打开如图4-88所示的图像。步

31、骤2 从工具箱中选择矩形工具，如图4-89所示。此时会出现如图4-90所示的矩形工具选项栏，包括“形状图层”、“路径”、“填充像素”和选择多边形工具种类等。图4-88 打开图像 图4-89 选择矩形工具 图4-90 矩形工具选项栏步骤3 使用矩形工具在图像上单击并拖动即可绘制矩形，如图4-91所示。图4-91 绘制矩形步骤4 从矩形工具选项栏中的“样式”下拉列表中选择样式，此时效果如图4-92所示。图4-92 对矩形应用样式4.2.3 利用基本绘图工具制作大众汽车标志利用基本绘图工具制作大众汽车标志一个精美的标志在一定程度上可以辅助公司树立形象，下面将制作如图4-93所示的大众汽车标志。步骤1

32、 选择“文件”“新建”命令，弹出如图4-94所示的“新建”对话框，将高和宽都设为250。图4-93 大众汽车标志 图4-94 “新建”对话框 步骤2 在“图层”面板中，双击“背景”图层，弹出“新图层”对话框，保持默认设置，如图4-95所示。步骤3 选择“图层”“新建”“图层”命令，新建一个“图层1”。按住Shift键用椭圆选框工具在新建文档的中间绘制一个正圆的选区，如图4-96所示。图4-95 “新图层”对话框 图4-96 绘制正圆 步骤4 设置“前景色”为#759DCD，“背景色”为#003366。选择渐变工具，在其工具选项栏选择“径向渐变”，渐变编辑器里的左边为前景色，右边为背景色。然后从

33、圆的左上部向右下部绘制径向渐变，如图4-97所示。步骤5 将“前景色”设置为白色，用减淡工具在淡蓝色的部分单击，以增加亮点，如图4-98所示。图4-97 绘制渐变效果 图4-98 增加亮点 步骤6 选中圆，在“图层”面板中单击“图层1”，选择“图层”“复制图层”命令复制图层，将此图层命名为“图层2”。双击“图层2”，弹出如图4-99所示的“图层样式”对话框，在“样式”列表中选择“描边”选项，然后设置“位置”为“外部”，“大小”为6像素，“颜色”为#999999，单击“确定”按钮，显示效果如图4-100所示。图4-99 设置描边 图4-100 描边效果 步骤7 选择“视图”“标尺”命令显示标尺，

34、然后在标尺上拖曳出一些辅助线，如图4-101所示。步骤8 在“图层”面板中单击“图层1”，选择“图层复制图层”命令复制图层，将此图层命名为“图层3”。双击“图层3”，弹出如图4-102所示的对话框，在“样式”列表中选择“描边”选项，然后设置“位置”为“外部”，“大小”为9像素，“颜色”为白色。图4-101 显示标尺 图4-102 “图层样式”对话框 步骤9 选中“图层3”，然后选择“编辑”“自由变换”命令来调整圆的尺寸和位置，此时要同时按住Shift+Alt键以保证它能够和原来的圆成为同心圆，如图4-103所示。步骤10 选择“横排文字”工具，在其工具选项栏中选择“Lucida sans un

35、icode”字体。先输入，按Ctrl+T键进行简单变形，然后输入文字，再进行简单自由变形，显示效果如图4-104所示。图4-103 变换大小 图4-104 大众标志 4.3 网页图像的处理网页图像的处理4.3.1 色彩模式色彩模式在Photoshop中，常见的色彩模式包括位图模式、灰度模式、双色调模式、HSB(表示色相、饱和度、亮度)模式、RGB(表示红、绿、蓝)模式、CMYK(表示青、洋红、黄、黑)模式、Lab模式、索引颜色模式、多通道模式以及8位通道和16位通道模式。每一种模式都有自己的优缺点和自己的适用范围，并且各个模式之间都可以进行转换。色彩模式除确定图像中能显示的颜色数之外，还会影响

36、图像的通道数和文件大小。这里提到的通道也是Photoshop中的一个重要概念，每个Photoshop图像都具有一个或多个通道，每个通道都存放着图像中颜色元素的信息。图像中默认的颜色通道数取决于其色彩模式。图像是由像素构成的，像素是位图图像的最小单位。将一幅图放大若干倍就会看到，图像其实是由很多小方块组成的。每1个小方块就是1个像素，它分配着1种颜色，相邻像素颜色彼此相近。像素所能分配的最大颜色数也叫颜色容量，单位是“位”。4.3.2 调整图像色彩调整图像色彩1利用色阶调整图像色彩利用色阶调整图像色彩“色阶”命令允许通过修改图像的阴影区、中间色调区和高光区的亮度水平来调整图像的色调范围和颜色平衡

37、，并可随时用吸管工具精确地读出各位置在变化前后的色调值。“明度”是指色彩的明亮程度，简单一点说，在电视机上，亮度调节按钮控制的就是明度。在非彩色中，明度最高的色为白色，最低的色为黑色。明度越高的图像对视觉的刺激就越大，看上去就越明亮。下面通过调整网页图像的高光与暗调讲述色阶的具体应用，具体操作步骤如下：步骤1 选择“文件”“打开”命令，将要调整的图像文件打开，如图4-105所示。步骤2 选择“图像”“调整”“色阶”命令，弹出如图4-106所示的“色阶”对话框。图4-105 打开图像 图4-106 “色阶”对话框 在“输入色阶”处有3个数值，即“暗调”、“中间调”和“高光”值。直接用鼠标拖曳色调

38、分布图下面中间的灰色小三角，可改变“中间调”的值，或直接在“输入色阶”的中间一项输入数据来调节，它的初始值为1，最大值为9.99，最小值是0.10。图4-107和图4-108所示分别是中间调为“0.5”和“1.7”的效果。图4-107 中间调为“0.5”的效果 图4-108 中间调为“1.7”的效果 步骤3 按Alt键再单击“重置”按钮，即可恢复成预设状态。步骤4 对图像色彩进行调整后，单击“好”按钮，效果如图4-109所示，即可看到原来较暗的图像已变得较艳丽而清楚了。图4-109 调整色阶后的效果2利用曲线调整图像色彩利用曲线调整图像色彩“曲线”命令是许多专业美术人员最喜欢使用的色调修正命令

39、。“曲线”命令将整体的色调范围分为16个小方块，可以调整0255范围内的任意点，同时保持其他15个值不变，还可以单独对一个颜色通道进行精确的调整。使用相对“色阶”命令，用户可以更精确地控制每个亮度层次光点的变化，不仅可以更有效地调整图像的色调，更可以制作出许多奇特的色彩效果。步骤1 打开一幅如图4-110所示的欲调整色彩的图像文件。步骤2 选择“图像”“调整”“曲线”命令，弹出如图4-111所示的“曲线”对话框。图4-110 打开图像文件 图4-111 “曲线”对话框 步骤3 色调过暗往往会导致图像细节的丢失，这时，可以在曲线中将阴影区曲线上扬，将阴暗区减少，这样调整的同时中间色调区曲线和高光

40、区曲线也会微微上扬，结果是图像的各色调区将按一定比例加亮，比直接整体加亮显得更有层次感，如图4-112和图4-113所示。图4-112 调整曲线按一定比例加亮 图4-113 加亮效果 3调整图像亮度与对比度调整图像亮度与对比度“亮度/对比度”命令能对整个图像进行亮度和对比度的调整。打开如图4-110所示的图像，选择“图像”“调整”“亮度/对比度”命令，弹出“亮度/对比度”对话框。在该对话框中，拖动对话框中的“亮度”滑块可以调整图像的明亮度；拖动“对比度”滑块可以调整图像的对比度，对话框中的“亮度”和“对比度”设置如图4-114所示，调整后的效果如图4-115所示。图4-114 “亮度/对比度”

41、对话框图4-115 调整“亮度/对比度”后的效果4使用色彩平衡调整图像色彩使用色彩平衡调整图像色彩打开如图4-110所示的图像，选择“图像”“调整”“色彩平衡”命令，弹出如图4-116所示的“色彩平衡”对话框。其中有3个标尺可以控制各主要色彩的增减，还有3个单选按钮可以选择调整暗调、中间调或高光，最下方有一个“保持亮度”的功能选项，可以让用户在不改变图像原有亮度的情况下修改图像的色彩。图4-116 “色彩平衡”对话框在“色彩平衡”对话框中主要有以下选项。色调平衡：选择需要调节色彩平衡的色调区，有“暗调”、“中间调”和“高光”3个选项。保持亮度：在改变色彩成分的过程中，保持图像的亮度值不变。此选

42、项仅适用于RGB图像。色彩平衡：调节色彩平衡很简单，就是调节图中的3个滑块或在文本框中输入-100100之间的数值即可，而且可以看到，同一滑块两侧的颜色正好为互补色。这是很自然的，因为在减少绿色的同时，必然会导致洋红色的增加，这也正是调节的原理所在，如果图像的绿色过重，就可以靠增加它的互补色洋红色来减少色调区的红色，如图4-117所示。调整后的图像如图4-118所示。图4-117 调整色彩平衡 图4-118 调整色彩平衡后的效果 5调整图像色相与饱和度调整图像色相与饱和度“色相/饱和度”命令能单独调整图像中一种颜色成分的色相、饱和度。所谓“色相”，即是在色谱上所能看到的红、橙、黄、绿、蓝、靛、

43、紫等不同的色彩特征。所谓“饱和度”，就是一种颜色的鲜艳程度，颜色越浓，饱和度越大；颜色越淡，饱和度越小。打开如图4-110所示的图像，选择“图像”“调整”“色相/饱和度”命令，弹出如图4-119所示的对话框。图4-119 “色相/饱和度”对话框“色相/饱和度”对话框主要包括以下选项。编辑：从中选择所要进行调整的颜色范围。选择“全图”，则会同时调整图像中的所有颜色。选择其他颜色，只调整所选颜色的色相、饱和度和亮度。色相：直接用鼠标拖动“色相”滑块，或直接在文本框中输入数据来调节，直到满意为止，它的初始值为0，最大值为+180，最小值为-180。文本框中的数值代表了在色轮图上沿着颜色轮从像素的原始

44、颜色处旋转到所需要颜色时的旋转度数，因此范围是-180180。正值意味着顺时针旋转，负值意味着逆时针旋转。其调节过程和效果如图4-120和图4-121所示。图4-120 调整“色相”图4-121 调整色相后的效果 饱和度：指的是色彩的清浊程度，在光谱上它决定于某一种颜色波长的单一程度。直接用鼠标拖动“饱和度”滑块，或直接在文本框中输入数据来调节饱和度，它的初始值为0，最大值为+100，最小值为-100。调节饱和度的操作即在色轮图上从颜色的起始饱和度处向着圆心或远离圆心移动，直到得到满意的饱和度为止。“饱和度”为50的效果如图4-122所示。图4-122 “饱和度”为50的效果4.3.3 网页图

45、像处理实例网页图像处理实例在网页制作过程中，经常遇到要处理产品图像或其他一些图像的情形，下面就通过实例讲述这些图像的处理。步骤1 打开如图4-123所示的原始图像。图4-123 原始图像步骤2 选择“图像”“图像大小”命令，弹出如图4-124所示的“图像大小”对话框，可以看到图像比较大，把“宽度”修改为400，选择“约束比例”复选框，则“高度”将自动调整。步骤3 设置完相关参数后，单击“好”按钮，调整图像大小后的效果如图4-125所示。图4-124 “图像大小”对话框 图4-125 调整图像大小后的效果 步骤4 如果感觉图像中的地面太多，可以从工具箱中选择裁切工具把图像中的地面部分裁切掉。如图

46、4-126所示为使用“裁切工具”裁切图像的效果。图4-126 裁切图像 步骤5 调整合适的裁切范围后，按Enter键，裁切后的效果如图4-127所示。图4-127 裁切后的效果步骤6 从图中可以看出图像色彩太暗，可以选择“图像”“调整”“色阶”命令，在弹出的“色阶”对话框中调整色彩。“色阶”对话框有关参数的设置如图4-128所示。设置完成后，单击“好”按钮即可，效果如图4-129所示。图4-128 “色阶”对话框图4-129 调整色阶后的效果现在，图像大小和色彩都调整好了，下面就把“背景”图层转换为普通图层，对图层应用内发光样式。步骤7 选择“窗口”“图层”命令，打开“图层”面板，如图4-13

47、0所示。双击“背景”图层，弹出如图4-131所示的对话框，将“背景”图层转换为普通图层。图4-130 “图层”面板 图4-131 将“背景”图层转换为普通图层 步骤8 选择“图层”“图层样式”“内发光”命令，弹出如图4-132所示“图层样式”对话框。步骤9 在对话框中设置相关参数后，单击“好”按钮，效果如图4-133所示。图4-132 “图层样式”对话框 图4-133 内发光效果 步骤10 选择“文件”“存储为Web所用格式”命令，弹出如图4-134所示的对话框。在对话框中，“优化的文件格式”项选择JPEG，“品质”设置为65，这里适当降低图像品质，压缩图像大小。图4-134 “存储为Web所

48、用格式”对话框步骤11 单击“存储”按钮，即可保存优化后的文件。4.4 使用文字工具制作网页特效文字使用文字工具制作网页特效文字4.4.1 创建文字创建文字文字工具位于工具箱的左上角，包括横排文字工具、直排文字工具、横排文字蒙版工具和直排文字蒙版工具。单击即可选取，也可以按T快捷键切换到文字工具，如图4-135所示。图4-135 文字工具1输入文字输入文字使用文字工具可以输入文字。在使用文字工具之前通常先在选项栏中进行必要的参数设定，如图4-136所示。图4-136 文字工具选项栏在图像中输入文字的具体操作步骤如下：步骤1 打开一幅图片，如图4-137所示。步骤2 选择横排文字工具，如图4-1

49、38所示。图4-137 打开图片 图4-138 选择横排文字工具 步骤3 在横排文字工具选项栏中设置“字体”为“华文新魏”，“大小”为18点，“清除锯齿”选择“浑厚”，“段落样式”选择“左对齐文本”，如图4-139所示。图4-139 设置文本属性步骤4 在图像上要输入文字处单击，出现输入光标，这就是输入文字的起始位置，如图4-140所示。图4-140 确定起始点步骤5 输入文字，如图4-141所示。输入的文字将生成一个新的文字图层。图4-141 输入文字2在文本框中输入文字在文本框中输入文字选择“文字”工具后，在图片上想要输入文本处拖曳出文本框，在文本框中将出现输入光标，这就是输入文本的起始点

50、，如图4-142所示。图4-142 拖曳出文本框输入所需的文本，如图4-143所示。如果需要，可以对文本框进行调整大小、旋转或拉伸等操作。图4-143 输入文本【提示】文本框可以拉伸或旋转，把鼠标指针放在文本框的顶点上就会出现拉伸的标志，如图4-144所示。把鼠标指针放在文本框外就会出现旋转的标志，这时可以旋转文本框，如图4-145所示。图4-144 拉伸文本框图4-145 旋转文本框4.4.2 文字的变形文字的变形使用“文字的变形”命令可以对文字进行多种变形，“变形文字”对话框如图4-146所示。“变形文字”对话框各参数含义如下。样式：选择要进行变形的风格，单击右侧的下拉按钮打开样式菜单，如