第13章-网页图像调色、切片和优化.pptVIP

* * * 第13章 网页图像调色、切片与优化 凤凰高新教育 * 第13章 网页图像调色、切片与优化 ? 如何调整图像的颜色和色调？ ? 怎样创建切片？ ? 如何修改切片？ ? 怎样将图像存储为网页所用格式并进行优化？ 色调指的是一幅图像画面色彩的总体倾向,是大的色彩效果，下面就来介绍调整图像色调的方法与技巧。 13.1 调整色调 13.1.1自动色调/对比度/颜色 在【图像】菜单下，有一部分命令可以快速调整图像的色彩，这些命令包含【自动色调】【自动对比度】【自动颜色】【亮度/对比度】【色彩平衡】【自然饱和度】【照片滤镜】【变化】【去色】和【色彩均化】命令。 【自动色调】【自动对比度】和【自动颜色】命令没有对话框，它们可以根据图像的色调、对比度和颜色来进行快速调整，但只能进行简单的调整，并且调整效果不是很明显。 使用【亮度/对比度】命令可以对图像的色调范围进行简单的调整。执行【图像】→【调整】→【亮度/对比度】命令，打开【亮度/对比度】对话框。 13.1.2 亮度/对比度 13.1.3自然饱和度 使用【自然饱和度】命令可以快速调整图像的饱和度，并且可以在增加图像饱和度的同时有效地控制颜色过于饱和而出现溢色现象。执行【图像】→【调整】→【自然饱和度】命令，打开【自然饱和度】对话框。 13.1.4色彩平衡 对于普通的色彩校正，【色彩平衡】命令可以更改图像总体颜色的混合程度。执行【图像】→【调整】→【色彩平衡】命令或按【Ctrl+B】快捷键，打开【色彩平衡】对话框。 13.1.5照片滤镜 使用【照片滤镜】命令可以模仿在相机镜头前面添加彩色滤镜的效果，以便调整通过镜头传输的光的色彩平衡、色温和胶片曝光。【照片滤镜】允许选取一种颜色将色相调整应用到图像中。执行【图像】→【调整】→【照片滤镜】命令，打开【照片滤镜】对话框。 13.1.6变化 【变化】命令是一个非常简单直观的调色命令，只需要单击它的缩略图即可调整图像的色彩、饱和度和明度，同时还可以预览调色的整个过程。 13.1.7去色 使用【去色】命令（该命令没有对话框）可以去掉图像中的颜色，使其成为灰度图像。 13.1.8色调均化 使用【色调均化】命令可以重新分布图像中像素的亮度值，以便它们更均匀地呈现所有范围的亮度级（即0~255）。在使用该命令时，图像中最亮的值将变成白色，最暗的值将变成黑色，中间的值将分布在整个灰度范围内。 13.1.9色阶 【色阶】命令是一个非常强大的颜色与色调调整工具，它可以对图像的阴影、中间调和高光强度级别进行调整，从而校正图像的色调范围和色彩平衡。另外，【色阶】命令还可以分别对各个通道进行调整，以校正图像的色彩。执行【图像】→【调整】→【色阶】命令或按【Ctrl+L】快捷键，打开【色阶】对话框。 13.1.10曲线 【曲线】命令是最重要、最强大的调整命令，也是实际工作中使用频率最高的调整命令之一，它具备了【亮度/对比度】、【阈值】和【色阶】等命令的功能，通过调整曲线的形状，可以对图像的色调进行非常精确的调整。执行【曲线】→【调整】→【曲线】命令或按【Ctrl+M】快捷键，打开【曲线】对话框。 13.1.11色相/饱和度 使用【色相/饱和度】命令可以调整整个图像或选区内的图像的色相、饱和度和明度，同时也可以对单个通道进行调整，该命令也是实际工作使用频率最高的调整命令之一。执行【图像】→【调整】→【色相/饱和度】命令或按【Ctrl+U】快捷键，打开【色相/饱和度】对话框。 13.1.12曝光度 【曝光度】命令专门用于调整HDR图像的曝光效果，它是通过在线性颜色空间（而不是当前颜色空间）执行计算而得出的曝光效果。执行【图像】→【调整】→【曝光度】命令，打开【曝光度】对话框。 13.2 创建切片 在网页上的图片较大的时候，浏览器下载整个图片的话需要花很长的时间，切片的使用使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，能够节约很多时间。 13.2.1切片简介 在Photoshop中，可以使用【文件】→【储存为Web和设备所用格式】命令来导出和优化切片图像。Photoshop会将每个切片储存为单独的文件并生成显示切片所需的HTML或CSS代码，如图所示为使用【切片工具】 切分图像后的效果。 13.2.2切片类型 在Photoshop中，使用【切片工具】 创建的切片称为用户切片，而通过图层创建的切片称为基于图层的切片。当创建新的用户切片或基于图层的切片时，会生成附加的自动切片来占据图像的区域，自动切片可以填充图像中用户切片或基于图层的切片未定义的空间。每一次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。用户切片和基于图层切片由实线定义，而自动切片则由虚线定义。 13.2.2切片类型 在Photoshop中，使用【切片工