2.4 网页图片修复

网页中的图片素材来源众多，因此图片素材中往往存在许多问题，这就要求网页设计师在应用图片时，必须解决这些问题，以保证网页的质量。

2.4.1 修图的必要性

在前面的章节中讲解了图片的选择、抠图的方法。由于图片素材或多或少都会存在一些瑕疵和缺陷，从而影响网页的整体效果。下面就将网页图片中的常见问题进行归纳与总结。

1．图片中的污点、小面积瑕疵

污点和小面积瑕疵是很多图片中都会出现的问题，如灰尘、杂质等污点，人物面部的痘痘，商品上的划痕、缺陷等。

2．图片中的大面积瑕疵

网页中的素材图片有一部分是从其他图片中提取的，如抠图，通常需要将抠取的图片合成在一起，常会出现相互之间格格不入的情况。

3．图片中的光影缺陷

图片中的光影是影响网页整体效果的重要因素，常见的光影缺陷有曝光过度、过暗或显灰、红眼现象等。

2.4.2 图片的简单修复

修复可以弥补由各种原因导致的图片缺陷，在Photoshop中提供了相关工具，如污点修复画笔工具、修复画笔工具、修补工具、内容感知移动工具、仿制图章工具等。

1．污点修复画笔工具

污点修复画笔工具可以轻松去除图片中的点状瑕疵等，适合于修复面积较小的瑕疵。单击工具箱中的“污点修复画笔工具”按钮，打开污点修复画笔工具选项栏，如图2-131所示。

下面对各选项进行说明。

1）近似匹配。对笔触边缘的像素进行取样修复。

2）创建纹理。对笔触中的像素进行取样修复。

3）内容识别。自动识别相近内容进行修复。

4）对所有图层取样。选中该复选框可对所有可见图层中的像素进行取样。

案例1 用污点修复画笔工具去掉瑕疵

【案例效果】第2章\A217.jpg，如图2-132所示。

【素材文件】第2章\217.jpg，如图2-133所示。

【主要知识点】

利用污点修复画笔工具进行小面积修复。

【操作过程】

1）启动Photoshop软件，打开素材217.jpg。

2）单击工具箱中的“污点修复画笔工具”按钮，在图片中的文字区域进行涂抹。最终效果如图2-132所示。

3）执行“文件”→“存储为”菜单命令，弹出“存储为”对话框，将文件保存为A217.jpg。

2．修复画笔工具

修复画笔工具与污点修复画笔工具类似，可将样本的纹理、透明度和阴影等与所修复的像素匹配，修复后痕迹不明显，能与周围区域完全融合。单击工具箱中的“修复画笔工具”按钮，打开修复画笔工具选项栏，如图2-134所示。

下面对各选项进行说明。

1）模式。该项用于设置混合模式。“替换”模式用于使用柔边画笔时，保留画笔边缘的杂色、胶片颗粒和纹理。

2）取样。该项用于选择修复所需要的样本。按住〈Alt〉键，光标变为圆形十字形，在图片上单击进行取样，在要修复的位置按住鼠标左键不放并拖动，可复制出取样点及周围的像素。

3）图案。用“图案”面板中选择的图案来填充图片。

4）对齐。可连续对像素进行取样。

5）样本。从指定的图层进行取样，可选择“当前图层”“当前和下方图层”“所有图层”。

案例2 用修复画笔工具修复缺陷

【案例效果】第2章\A218.jpg，如图2-135所示。

【素材文件】第2章\218.jpg，如图2-136所示。

【主要知识点】

利用修复画笔工具进行小面积修复。

【操作过程】

1）启动Photoshop软件，打开素材218.jpg。

2）在包图片素材中，第三个包带有多余的挂钩，将其去除。单击工具箱中的“修复画笔工具”按钮，按住〈Alt〉键在白色背景上单击取样，然后在挂钩位置涂抹。

3）不断重复到步骤2，直到挂钩被清除为止。最终效果如图2-135所示。

4）执行“文件”→“存储为”菜单命令，弹出“存储为”对话框，将文件保存为A218.jpg。

3．修补工具

修补工具利用其他区域内容或图案来修补当前选中的区域，并能将样式的纹理、光照和阴影等与源图片进行匹配。单击工具箱中的“修补工具”按钮，打开修补工具选项栏，如图2-137所示。

下面对各选项进行说明。

1）选区方式。该项用于选择要修补的图片区域，其功能与前面所讲的选区工具相同。

2）修补。该项用于设置修补图片的模式。“正常”模式，对修补区域进行修补；“内容识别”模式，在修补时自动识别区域周围效果并融入。

3）源。用目标区域修补选中的区域。

4）目标。用选中的区域修补目标区域。

5）使用图案。用图案来修补选中的区域。

案例3 用修补工具修复缺陷

【案例效果】第2章\A219.jpg，如图2-138所示。

【素材文件】第2章\219.jpg，如图2-139所示。

【主要知识点】

利用修补工具修复图片。

【操作过程】

1）启动Photoshop软件，打开素材219.jpg。

2）单击工具箱中的“修补工具”按钮，围着湖中雕像建立选区，如图2-140所示。

3）将修补模式设置为“内容识别”，向右拖动选区到湖面区域后松开鼠标，如图2-141所示。按〈Ctrl+D〉组合键取消选区，最终效果如图2-138所示。

4）执行“文件”→“存储为”菜单命令，弹出“存储为”对话框，将文件保存为A219.jpg。

4．内容感知移动工具

内容感知移动工具用于混合被选区域内的图片，并自动匹配区域周围效果，单击工具箱中的“内容感知移动工具”按钮，打开内容感知移动工具选项栏，如图2-142所示。

下面对各选项进行说明。

1）模式。该项用于确定是移动还是复制。建立选区后有两种操作模式：“移动”模式下拖动选区实现位置变化；“扩展”模式下拖动选区实现选区复制。

2）适应。该项用于确定移动选区内图片的混合适应模式，包括“非常严格”“严格”“中”“松散”“非常松散”5种模式。

案例4 用内容感知移动工具修复缺陷

【案例效果】第2章\A220.jpg，如图2-143所示。

【素材文件】第2章\220.jpg，如图2-144所示。

【主要知识点】

利用内容感知移动工具制作商品列表。

【操作过程】

1）启动Photoshop软件，打开素材220.jpg，双击背景图层将其变为普通图层。

2）单击工具箱中的“裁剪工具”按钮，将光标移至图片左侧边缘时，光标变为双向箭头形状，向左拖动，距离为一个商品图片位置，如图2-145所示。

3）在左侧商品图片的左侧建立一个小的矩形选区，如图2-146所示。按〈Ctrl+T〉组合键变换选区，向左侧拖动可实现商品背景的复制，见图2-147所示。

4）利用矩形选框工具选择左侧商品图片，如图2-148所示。在工具箱中单击“内容感知移动工具”按钮，选择“扩展”模式，将商品图片拖动到左侧空白处，如图2-149所示。5）对新生成的商品图片进行抠图，去掉主体图片。

6）置入新文件A221.jpg，并栅格化该图层，去掉图片的背景，移动图片到最左侧的商品图片中。最终效果如图2-149所示。

7）执行“文件”→“存储为”菜单命令，弹出“存储为”对话框，将文件保存为A220.jpg。

5．仿制图章工具

仿制图章工具指定像素点为复制基准点（对图片取样），将其复制到新的区域，与修复画笔工具类似，其操作要经过取样、复制两个环节。单击工具箱中的“仿制图章工具”按钮，打开仿制图章工具选项栏，如图2-150所示。

下面对各选项进行说明。

1）切换画笔面板。单击该按钮会打开“画笔”面板，可对画笔的笔触、大小等进行调整。

2）切换仿制源面板。单击该按钮会打开“仿制源”面板，可对取样点进行更多的操作。

3）不透明度。该项用于设置复制图片的不透明度。

4）流量。该项用于调整画笔涂抹时的数量。

5）对齐。勾选该复选框后，可连续对图片进行取样，否则始终采用初始取样点的样本。

6）样本。该项用于选择进行数据取样的图层，有“当前和下方图层”“当前图层”“所有图层”3种模式。

案例5 用仿制图章工具修复缺陷

【案例效果】第2章\A221.jpg，如图2-151所示。

【素材文件】第2章\221.jpg，如图2-152所示。

【主要知识点】

利用仿制图章工具修复图片。

【操作过程】

1）启动Photoshop软件，打开素材221.jpg，发现果盘边缘不完整。

2）按〈Ctrl++〉组合键，放大图片，单击工具箱中的“仿制图章工具”按钮，按住〈Alt〉键在果盘有缺陷的附近单击取样，然后在缺陷位置涂抹。

3）不断重复步骤2，直到果盘边缘完整为止。最终效果如图2-151所示。

4）执行“文件”→“存储为”菜单命令，弹出“存储为”对话框，将文件保存为A221.jpg。