Photoshop教程：Web图形处理

Photoshop CC中文版图像处理,第十三章 Web图形处理,13.1 了解Web安全色,颜色是网页设计的重要内容，然而，我们在计算机屏幕上看到的颜色却不一定都能够在其他系统上的Web浏览器中以同样的效果显示。为了使Web图形的颜色能够在所有的显示器上看起来一模一样，在制作网页时，就需要使用Web安全颜色。Web安全色是指能够在不同操作系统和不同浏览器中同时正常显示的颜色。,13.1 了解Web安全色,在【拾色器】中勾选【只有Web安全色】复选框，可以始终在Web安全色下工作，如图所示。,13.2 创建与编辑切片,13.2.1 什么是切片 13.2.2 使用切片工具创建切片 13.2.3 基于参考线创建切片 13.2.4 基于图层创建切片 13.2.5 选择、移动调整与删除切片 13.2.6 划分切片,13.2.1 什么是切片,在Photoshop中存在两种切片，分别是“用户切片”和“基于图层的切片”。“用户切片”是使用切片工具创建的切片；而“基于图层的切片”是通过图层创建的切片。“用户切片”和“基于图层切片”由实线定义，而自动切片则由虚线定义。创建新的切片时会生成附加的自动切片来占据图像的区域，自动切片可以填充图像中用户切片或基于图层的切片未定义的空间。每一次添加或编辑切片时，都会重新生成自动切片。,13.2.2 使用切片工具创建切片,打开图像文件，1. 在工具箱中单击【切片工具】按钮，2. 单击并拖动鼠标创建一个矩形选框。 释放鼠标，通过以上步骤即可完成使用切片工具创建切片的操作。,13.2.3 基于参考线创建切片,在Photoshop CC中打开图像文件，按下【Ctrl】+【R】组合键显示出标尺，分别从水平标尺和垂直标尺上拖曳出参考线。 在工具箱中，1. 单击【切片工具】按钮，2. 在工具选项栏中单击【基于参考线的切片】按钮。 通过上述操作即可完成基于参考线创建切片的操作。,13.2.4 基于图层创建切片,在Photoshop CC中打开图像文件，在图层面板中选中图层1。 在菜单栏中，1. 单击【图层】主菜单，2. 在弹出的菜单中选择【基于图层创建切片】菜单项。 通过上述操作即可完成基于图层创建切片的操作。,13.2.5 选择、移动调整与删除切片,在图像中创建切片，1. 单击工具箱中的【切片选择工具】按钮，2. 在图片中单击选择一个切片。 如果要移动切片，拖曳选中的切片刀指定位置即可。 选中准备删除的切片，1. 在菜单栏中单击【视图】按钮，2. 在弹出的菜单中选择【清除切片】菜单项即可删除切片。 完成删除切片的操作。,13.2.6 划分切片,单击工具箱中的【切片选择工具】按钮，在该工具的选项栏中单击【划分】按钮，可以在打开的【划分切片】对话框中设置切片的划分方式，如图所示。,13.3 优化与输出图像,13.3.1 优化图像 13.3.2 输出Web图形,13.3.1 优化图像,单击Photoshop CC菜单栏中的【文件】主菜单，在弹出的菜单中选择【存储为Web所用格式】菜单项，在弹出的【存储为Web所用格式】对话框中可以对图像进行优化和输出，如图所示。,13.3.2 输出Web图形,优化Web图形后，还可以编辑输出设置，单击【存储为Web和设备所用格式】对话框右上角的【优化菜单】按钮，在弹出的快捷菜单中选择【编辑输出设置】菜单项即可弹出【输出设置】对话框。在【输出设置】对话框中可以控制如何设置HTML文件的格式、如何命名文件和切片，以及在存储优化图像时如何处理背景图像等，如图所示。,13.4 专题课堂图形优化,13.4.1 优化为GIF和PNG-8格式 13.4.2 优化为JPEG格式 13.4.3 优化为PNG-24格式,13.4.1 优化为GIF和PNG-8格式,GIF适用于压缩具有单调颜色和清晰细节的图像的标准格式，它是一种无损的压缩格式。PNG-8格式与GIF格式一样，也可以有效地压缩纯色区域，同时保留清晰的细节。这两种格式都支持8位颜色，因此可以显示256种颜色。在【存储为Web所用格式】对话框中的【文件格式】下拉列表可以选中这两种格式，如图所示。,13.4.2 优化为JPEG格式,JPEG是用于压缩连续色调图像的标准格式。将图像优化为JPEG格式时采用的是有损压缩，它会有选择性地扔掉数据以减小文件大小，如图所示。,13.4.3 优化为PNG-24格式,PGN-24适合于压缩连续色调图像，其优点是可在图像中保留多大256个透明度级别，但声称的文件要比JPEG格式生成的文件要大得多，如图所示为PGN-24优化选项。,