网页制作教程第16课photosh.ppt

《网页制作教程第16课photosh.ppt》由会员分享，可在线阅读，更多相关《网页制作教程第16课photosh.ppt（105页珍藏版）》请在三一办公上搜索。

1、第16章 Photoshop路径、色彩和通道在网页设计中的应用,学习目标 本章要点上机练习 习 题,学习目标,Photoshop中的路径、色彩和色调的调整以及通道功能在网页设计中非常有用，如制作形状独特的文字就需要用到路径；对图像的色彩进行调整，就需要掌握色彩模式的应用、对图像色调的调整以及对整体图像效果的调整等；要制作具有特殊效果的图像，就必须掌握通道的基本操作及专色通道的建立。只有掌握了路径、色彩和通道在网页设计中的应用，才能将Photoshop与网页制作真正地结合起来。本章将讲解Photoshop中路径、色彩和通道等相关知识及应用方法。,本章要点,创建路径调整图像色彩和色调通道的应用,创

2、 建 路 径,绘制图形、选择图像以及制作随路径变化的文字时需要用到路径，创建路径之前必须先了解路径的概念以及路径的一些相关术语。路径的概念路径工具的使用 编辑路径 应用实例绘制网站LOGO,路径的概念,路径就是用一系列点连接起来的曲线或线段，它可以是直线也可以是曲线，可以是封闭图形也可以是开放图形。Photoshop是处理位图的专业软件，它引入路径这个概念是为了弥补位图的不足。锚点、控制点和控制线是路径的基本构成要素。锚点：曲线上空心的方框就叫做锚点，它标记组成路径各线段的端点。在曲线线段上，每个锚点都带有12个控制线。,绘制路径,路径的概念,控制点：鼠标正在控制着的锚点，叫做控制点。控制线：

3、由锚点引出的曲线的切线叫控制线。其倾斜度控制曲线的弯曲方向，长度则控制曲线的弯曲幅度。在绘制路径时，还涉及闭合路径和开放路径。它们的具体含义如下：闭合路径：路径的起点和终点重合，即没有明显的起点和终点。开放路径：路径的起点和终点未重合。,路径工具的使用,路径工具的使用,钢笔工具 自由钢笔工具 添加锚点和删除锚点工具 转换点工具 形状工具,钢笔工具,钢笔工具属性栏,钢笔工具,钢笔工具,用钢笔工具绘制曲线时，用鼠标单击确定第一个锚点，然后再次单击确定第二个锚点，同时拖动鼠标，得到一个曲线段。重复刚才的操作即可完成曲线的绘制。,钢笔工具,自由钢笔工具,属性栏和创建不规则路径,添加锚点和删除锚点工具,

4、转换点工具,形状工具,形状工具,形状工具,不同多边形效果,形状工具,预置形状和自定形状,编辑路径,使用路径工具创建路径后，还需要对路径进行编辑，包括创建新路径、保存路径、复制路径和删除路径等。创建新路径 保存路径 复制路径 删除路径,创建新路径,创建新路径和“新建路径”对话框,保存路径,下拉菜单和“存储路径”对话框,复制路径,复制路径可以为路径制作副本，复制的路径自动在路径名称的后面加上“副本”两字。在要复制的路径上右击，在弹出的快捷菜单中选择“复制路径”命令，或在“路径”面板菜单中选择“复制路径”命令。复制后的“路径”面板。,快捷菜单、面板菜单和“路径”面板,删除路径,应用实例绘制网站LOG

5、O,LOGO在网页设计中很重要，它与平面设计中的LOGO效果一样，都以简洁明了的图形和强烈的视觉效果来准确地表达企业的寓意，给人留下深刻的印象，以达到宣传企业的目的。本例制作的网站LOGO最终效果（光盘:源文件第16章LOGO.psd）。,最终效果,调整图像色彩和色调,对图像色彩和色调进行调整也是网页制作中经常涉及的操作，下面分别讲解如何调整图像色彩和色调。调整图像的色彩 调整图像的色调 应用实例校正网页中的偏色图片,调整图像的色彩,通过Photoshop的“调整”命令可以对图像的色彩进行调整，包括“亮度/对比度”、“色阶”、“自动色阶”、“自动对比度”、“自动颜色”和“变化”命令等。下面介绍

6、在网页设计中常用的几个命令。亮度/对比度色阶 变化,亮度/对比度,通过“亮度/对比度”命令可以调整图像的亮度和对比度。选择“图像/调整/亮度/对比度”命令，打开“亮度/对比度”对话框。其中各参数的含义分别如下：,亮度/对比度,“亮度”文本框：调整图像的亮度。当输入的数值为正时，将增加图像的亮度；当输入的数值为负时，将降低图像的亮度；当输入的数值为0时，图像无变化。“对比度”文本框：调整图像的对比度。当输入的数值为正时，将增加图像的对比度；当输入的数值为负时，将降低图像的对比度；当输入的数值为0时，图像无变化。调整图像“亮度/对比度”前后的对比效果。,调整“亮度/对比度”前后的对比效果,色阶,“

7、色阶”命令用于调整图像的明暗程度，它通过使用高光中间调和暗调3个变量进行图像色调调整。通过该命令不仅可以对整个图像的色调进行调整，还可以只对图像的某一选取范围、某一图层图像，或某一个颜色通道进行调整。选择“图像/调整/色阶”命令，打开“色阶”对话框。其中各参数含义分别如下：,“色阶”对话框,色阶,“通道”下拉列表框：选择需要调整的颜色通道。“输入色阶”文本框：其中第一个文本框用来设置图像的暗部色调，低于该值的像素将变为黑色，取值范围为0253；第二个文本框用来设置图像的中间色调，取值范围为0.109.99；第三个文本框用来设置图像的亮部色调，高于该值的像素将变为白色，取值范围为1255。,色阶

8、,色阶,色阶,调整“色阶”前后的对比效果。,变化,使用“变化”命令可让用户直观地调整图像或选区中图像的色彩平衡、对比度和饱和度。选择“图像/调整/变化”命令，打开“变化”对话框。其中各项含义如下：,“变化”对话框,变化,变化,使用“变化”命令的前后对比效果,调整图像的色调,使用“色彩平衡”、“色相/饱和度”、“匹配颜色”、“替换颜色”、“可选颜色”和“通道混合器”等命令可以对图像的色调进行调整，下面分别进行讲解。色彩平衡色相/饱和度 替换颜色 可选颜色 通道混合器,色彩平衡,使用“色彩平衡”命令可以调整图像整体的色彩平衡。选择“图像/调整/色彩平衡”命令，打开“色彩平衡”对话框。,色彩平衡,其

9、中各参数的含义分别如下：,色彩平衡,调整“色彩平衡”的前后对比效果。,色相/饱和度,使用“色相/饱和度”命令可以调整图像中单个颜色的色相、饱和度和亮度，还可以给像素指定新的色相和饱和度，从而给灰度图像添加颜色。选择“图像/调整/色相/饱和度”命令，打开“色相/饱和度”对话框。,“色相/饱和度”对话框,色相/饱和度,其中各参数含义分别如下：“编辑”下拉列表框：在该下拉列表框中可选择编辑范围。如果选择“全图”选项将对图像中所有颜色像素进行调整，其余选项表示对某一颜色像素进行调整。“色相”文本框：色相即颜色。在文本框中输入数值或拖动下方的滑块可改变图像的颜色。“饱和度”文本框：即颜色的鲜艳程度。在文

10、本框中输入数值或拖动下方的滑块可改变图像的饱和度。当饱和度为0时，为灰度图像。,色相/饱和度,给图像着色,替换颜色,“替换颜色”对话框,“替换颜色”对话框,替换颜色前后的对比效果,可选颜色,“可选颜色”命令可对选择的颜色范围进行有针对性的调整，调整图像中指定颜色而不影响其他颜色。选择“图像/调整/可选颜色”命令，打开“可选颜色”对话框。,可选颜色,其中各参数的含义分别如下：,可选颜色,将图中花的颜色从紫色变成洋红色的效果。,通道混合器,使用“通道混和器”命令，可以通过颜色通道的混合来调整颜色通道，产生图像合成的效果。选择“图像/调整/通道混和器”命令，打开“通道混合器”对话框。其中各参数的含义

11、分别如下：,通道混合器,“输出通道”下拉列表框：在该下拉列表框中可以选择要调整的颜色通道。若打开的是RGB色彩模式的图像，则其中的选项为“红”、“绿”和“蓝”三原色通道；若打开的是CMYK色彩模式的图像，则其中的选项为“青色”、“洋红”、“黄色”和“黑色”4种颜色通道。“源通道”栏：拖动滑块或直接在文本框中输入数值可调整源通道在输出通道中所占的百分比，其取值范围在-200%200%之间。,通道混合器,使用“通道混合器”命令的前后对比效果,使用“通道混和器”命令前后的对比效果。,应用实例校正网页中的偏色图片,在网页设计中会使用很多图片，有时图片会因为光线、拍摄技巧等因素而出现偏色问题。在Phot

12、oshop中可以对偏色的图片进行校正，使图片恢复正常的颜色。本例将选择一张偏色的照片来讲解怎样对图片颜色进行校正（光盘:源文件第16章偏色照片调整后的效果.jpg）。,校正偏色图片的对比效果,通 道,在Photoshop中，打开图像文件后即会自动创建颜色通道。如果图像有多个图层，则每个图层都有各自的一套颜色通道。通道的概念 通道的操作 专色通道 应用实例对网页中的图片进行处理,通道的概念,通道是存储不同类型信息的灰度图像，可分为原色通道、Alpha通道和专色通道。各通道作用如下：,通道的概念,原色通道：在打开新图像时自动创建。由图像的色彩模式决定所创建颜色通道的数目。如RGB色彩模式时，图像有

13、红、绿、蓝3个原色通道和1个RGB复合通道。Alpha通道：用于存储选择范围，可以通过添加Alpha通道来创建和存储蒙版，这些蒙版用于处理或保护图像的某些部分。专色通道：用于记录专色信息，指定用于专色油墨印刷的附加印版。,通道的操作,通道的操作一般都在“通道”面板中完成，主要包括新建通道、复制通道、删除通道、分离和合并通道等。要对通道进行操作，首先必须对“通道”面板有一个大致的了解。选择“窗口/通道”命令显示“通道”面板。前面的通道是RGB模式的，这里以CMYK色彩模式时的“通道”面板为例进行讲解。其中主要按钮的作用如下：,通道的操作,“通道”调板,通道的操作,通道的操作,新建通道 复制通道

14、删除通道 分离通道 合并通道,新建通道,复制通道,“复制通道”对话框,复制通道,“为”文本框：用来设置复制的新通道的名称。“文档”下拉列表框：在该下拉列表框中列出了所有打开的图像文件名，从中可以选择要复制到的目标文件。如果选择“新建”选项，则可创建一个新的图像文件，并将选择的通道复制到该文件中。,复制通道,删除通道,分离通道,分离通道,如将RGB图像文件进行通道分离操作，分离后的结果。可以看到原来的图像文件已被关闭，而原图中的3个原色通道各自生成为一个新的图像文件，并在图像名称后添加R、G或B进行区分。,分离后的通道,合并通道,合并通道是分离通道的逆操作，可以将多个灰度图像合并为一个图像的通道

15、。要合并的图像必须在灰度模式下，具有相同的像素尺寸并且处于打开状态。已打开的灰度图像的数量决定了合并通道时可用的颜色模式。如果打开了3个图像，可以将它们合并为一个RGB图像；如果打开了4个图像，则可以将它们合并为一个CMYK图像。【例16-1】利用合并通道操作，将打开的灰度图像合并为一个RGB色彩模式的图像。,专色通道,专色，即除了CMYK颜色以外的颜色。每个专色通道都有一个属于自己的印版，如果要印刷带有专色的图像，则需要创建存储此颜色的专色通道，专色通道会作为一张单独的胶片输出。创建专色通道 将Alpha通道转换为专色通道,创建专色通道,专色通道,“名称”文本框：在该文本框中可输入新建专色通

16、道的名称。“颜色”颜色框：单击该颜色框可以打开“拾色器”对话框，用于选择油墨的 颜色。“密度”文本框：用于在屏幕上模拟印刷后专色的密度。在该文本框中可以输入0%100%的数值来确定油墨密度，数值越大颜色越不透明。密度只用于在屏幕上显示模拟打印专色的密度，并不影响打印输出的效果。数值100%模拟完全覆盖下层的油墨；0%模拟完全显示下层油墨的透明油墨。用该选项也可查看其他透明专色的显示位置。,专色通道的效果,将Alpha通道转换为专色通道,“通道选项”对话框,应用实例对网页中的图片进行处理,在处理网页中的图片时，很多时候需要选择图片中的某些区域。当遇到很难选择的图像时（例如白云、头发和婚纱等），使

17、用通道可方便地完成选择。本例为了让网页中的图片效果更加真实，特意为没有云彩的图片添加上白云的效果，白云的选择是通过通道来完成的（光盘:源文件第16章添加白云效果.psd）。,最终效果,上 机 练 习,本次上机练习将制作网页中的Banner和网页背景。Banner和背景的制作几乎是每个网页设计都会涉及的，所以必须牢牢掌握。制作网页中的Banner 制作网页背景,制作网页中的Banner,本例将制作网页中的Banner，Banner一般都是位于网页的上面，在设计制作时要体现出整个网站的功能和特点。制作完毕的Banner最终效果（光盘:源文件 第16章Banner.psd）。,制作网页背景,在Photoshop中可以制作出眩目的背景效果，这对整个网页设计来讲也是非常重要的一部分。本例将制作一个网页背景，其最终效果（光盘:源文件第16章网页背景.psd）。,背景效果,习题,（1）绘制一个企业网站的LOGO，效果（光盘:源文件第16章企业LOGO.psd）。,习题,（2）改变图片中小孩衣服的颜色，主要练习调整图片局部的颜色，这在网页设计中也是很常用的。调整前后的对比效果（光盘:实例素材第16章159.jpg、光盘:源文件第16章更改衣服颜色.psd）。,调整衣服颜色前后的效果,习题,（3）使用习题（1）中制作好的企业LOGO，制作一个简单的企业网站页面。,