![Photoshop网页美工设计](https://wfqqreader-1252317822.image.myqcloud.com/cover/629/33643629/b_33643629.jpg)
2.4 网页图片修复
网页中的图片素材来源众多,因此图片素材中往往存在许多问题,这就要求网页设计师在应用图片时,必须解决这些问题,以保证网页的质量。
2.4.1 修图的必要性
在前面的章节中讲解了图片的选择、抠图的方法。由于图片素材或多或少都会存在一些瑕疵和缺陷,从而影响网页的整体效果。下面就将网页图片中的常见问题进行归纳与总结。
1.图片中的污点、小面积瑕疵
污点和小面积瑕疵是很多图片中都会出现的问题,如灰尘、杂质等污点,人物面部的痘痘,商品上的划痕、缺陷等。
2.图片中的大面积瑕疵
网页中的素材图片有一部分是从其他图片中提取的,如抠图,通常需要将抠取的图片合成在一起,常会出现相互之间格格不入的情况。
3.图片中的光影缺陷
图片中的光影是影响网页整体效果的重要因素,常见的光影缺陷有曝光过度、过暗或显灰、红眼现象等。
2.4.2 图片的简单修复
修复可以弥补由各种原因导致的图片缺陷,在Photoshop中提供了相关工具,如污点修复画笔工具、修复画笔工具、修补工具、内容感知移动工具、仿制图章工具等。
1.污点修复画笔工具
污点修复画笔工具可以轻松去除图片中的点状瑕疵等,适合于修复面积较小的瑕疵。单击工具箱中的“污点修复画笔工具”按钮,打开污点修复画笔工具选项栏,如图2-131所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/53_01.jpg?sign=1739050794-HQNCaHcWL54pek16SS5pqM7X9kj66G9X-0-4b30ac7e25f836fe37152634c2639e80)
图2-131 污点修复画笔工具选项栏
下面对各选项进行说明。
1)近似匹配。对笔触边缘的像素进行取样修复。
2)创建纹理。对笔触中的像素进行取样修复。
3)内容识别。自动识别相近内容进行修复。
4)对所有图层取样。选中该复选框可对所有可见图层中的像素进行取样。
案例1 用污点修复画笔工具去掉瑕疵
【案例效果】第2章\A217.jpg,如图2-132所示。
【素材文件】第2章\217.jpg,如图2-133所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/53_03.jpg?sign=1739050794-UTZcTANeasMtkwVGCLyGujgfIurXaoTy-0-12556fd80abf86a013b3f218e5a4c52e)
图2-132 案例效果
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/53_04.jpg?sign=1739050794-c5LsYBX1zmQbIWxh8b81MHlo5ufjjb1E-0-cc5b171e2c57f14bbd88bb2c1adaf296)
图2-133 案例素材
【主要知识点】
利用污点修复画笔工具进行小面积修复。
【操作过程】
1)启动Photoshop软件,打开素材217.jpg。
2)单击工具箱中的“污点修复画笔工具”按钮,在图片中的文字区域进行涂抹。最终效果如图2-132所示。
3)执行“文件”→“存储为”菜单命令,弹出“存储为”对话框,将文件保存为A217.jpg。
2.修复画笔工具
修复画笔工具与污点修复画笔工具类似,可将样本的纹理、透明度和阴影等与所修复的像素匹配,修复后痕迹不明显,能与周围区域完全融合。单击工具箱中的“修复画笔工具”按钮,打开修复画笔工具选项栏,如图2-134所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/53_06.jpg?sign=1739050794-iTQOc2Y0k6PctYzBu20jmcIdjyAPnwGT-0-7728017c385337c4f61887e2958e492c)
图2-134 修复画笔工具选项栏
下面对各选项进行说明。
1)模式。该项用于设置混合模式。“替换”模式用于使用柔边画笔时,保留画笔边缘的杂色、胶片颗粒和纹理。
2)取样。该项用于选择修复所需要的样本。按住〈Alt〉键,光标变为圆形十字形,在图片上单击进行取样,在要修复的位置按住鼠标左键不放并拖动,可复制出取样点及周围的像素。
3)图案。用“图案”面板中选择的图案来填充图片。
4)对齐。可连续对像素进行取样。
5)样本。从指定的图层进行取样,可选择“当前图层”“当前和下方图层”“所有图层”。
案例2 用修复画笔工具修复缺陷
【案例效果】第2章\A218.jpg,如图2-135所示。
【素材文件】第2章\218.jpg,如图2-136所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/54_02.jpg?sign=1739050794-zuwSXoLE2YDQZ9BtxZlQHYjpRGGYpgbn-0-9b40aeecb1084210f3a717c2ce24a1b4)
图2-135 案例效果
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/54_03.jpg?sign=1739050794-M5ad92DYJxSZRqJ7tyOiaj86iZIUrgXS-0-29f6dbfceffbae2808445229e1a006ce)
图2-136 案例素材
【主要知识点】
利用修复画笔工具进行小面积修复。
【操作过程】
1)启动Photoshop软件,打开素材218.jpg。
2)在包图片素材中,第三个包带有多余的挂钩,将其去除。单击工具箱中的“修复画笔工具”按钮,按住〈Alt〉键在白色背景上单击取样,然后在挂钩位置涂抹。
3)不断重复到步骤2,直到挂钩被清除为止。最终效果如图2-135所示。
4)执行“文件”→“存储为”菜单命令,弹出“存储为”对话框,将文件保存为A218.jpg。
3.修补工具
修补工具利用其他区域内容或图案来修补当前选中的区域,并能将样式的纹理、光照和阴影等与源图片进行匹配。单击工具箱中的“修补工具”按钮,打开修补工具选项栏,如图2-137所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/54_05.jpg?sign=1739050794-fPzOtUhIpEpOTYZOVgy8xong0Ayu1pG4-0-4464f416cad51333745717d7fc35f30c)
图2-137 修补工具选项栏
下面对各选项进行说明。
1)选区方式。该项用于选择要修补的图片区域,其功能与前面所讲的选区工具相同。
2)修补。该项用于设置修补图片的模式。“正常”模式,对修补区域进行修补;“内容识别”模式,在修补时自动识别区域周围效果并融入。
3)源。用目标区域修补选中的区域。
4)目标。用选中的区域修补目标区域。
5)使用图案。用图案来修补选中的区域。
案例3 用修补工具修复缺陷
【案例效果】第2章\A219.jpg,如图2-138所示。
【素材文件】第2章\219.jpg,如图2-139所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/55_02.jpg?sign=1739050794-ds7IFYI4AEmD6Km4Hw0J83D1t8F6KezA-0-ff9e0b9c7cd5a88e1e1f7a83f473969c)
图2-138 案例效果
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/55_03.jpg?sign=1739050794-Wmlbf6Wvz8bABf3795mZ0T8rxd0vmtSs-0-fea9eab4b727575b596d744d75b44096)
图2-139 案例素材
【主要知识点】
利用修补工具修复图片。
【操作过程】
1)启动Photoshop软件,打开素材219.jpg。
2)单击工具箱中的“修补工具”按钮,围着湖中雕像建立选区,如图2-140所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/55_05.jpg?sign=1739050794-0JJ59hPxXbNphz0YqwkhRCYKaupTilpJ-0-92ed93f9243328520ee4c812fb46b6b2)
图2-140 用修补工具创建选区
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/55_06.jpg?sign=1739050794-MT2YW4ib5XMvxpZnvEvQjPCozmdLbbW3-0-e8fbe3c534c91ed3516b06b1ac0109e8)
图2-141 修复后效果
3)将修补模式设置为“内容识别”,向右拖动选区到湖面区域后松开鼠标,如图2-141所示。按〈Ctrl+D〉组合键取消选区,最终效果如图2-138所示。
4)执行“文件”→“存储为”菜单命令,弹出“存储为”对话框,将文件保存为A219.jpg。
4.内容感知移动工具
内容感知移动工具用于混合被选区域内的图片,并自动匹配区域周围效果,单击工具箱中的“内容感知移动工具”按钮,打开内容感知移动工具选项栏,如图2-142所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/55_07.jpg?sign=1739050794-yHIE00uUdcmBOXo7zJWFOHB5fN8qq6PA-0-2fe41e5e2907ae4c1397b5155aeb5b28)
图2-142 内容感知移动工具选项栏
下面对各选项进行说明。
1)模式。该项用于确定是移动还是复制。建立选区后有两种操作模式:“移动”模式下拖动选区实现位置变化;“扩展”模式下拖动选区实现选区复制。
2)适应。该项用于确定移动选区内图片的混合适应模式,包括“非常严格”“严格”“中”“松散”“非常松散”5种模式。
案例4 用内容感知移动工具修复缺陷
【案例效果】第2章\A220.jpg,如图2-143所示。
【素材文件】第2章\220.jpg,如图2-144所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/56_02.jpg?sign=1739050794-aFTr4Um7dm7z1BQT8ZOz0uEsVa1sFTpZ-0-df2d937b5b65e4d29fe8c4feff8315ec)
图2-143 案例效果
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/56_03.jpg?sign=1739050794-uV3cYFhEDmfgPTEM8awrdULSx8k8vJxx-0-5693693bf5de558325e31d2ec03c5505)
图2-144 案例素材
【主要知识点】
利用内容感知移动工具制作商品列表。
【操作过程】
1)启动Photoshop软件,打开素材220.jpg,双击背景图层将其变为普通图层。
2)单击工具箱中的“裁剪工具”按钮,将光标移至图片左侧边缘时,光标变为双向箭头形状,向左拖动,距离为一个商品图片位置,如图2-145所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/56_05.jpg?sign=1739050794-PHOyKUqB5LbcyGFDWQjVE9wjfTn4H2VJ-0-eaed1d03ea855c30f9f630a43c5cc501)
图2-145 用裁剪工具延伸图片宽度
3)在左侧商品图片的左侧建立一个小的矩形选区,如图2-146所示。按〈Ctrl+T〉组合键变换选区,向左侧拖动可实现商品背景的复制,见图2-147所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/56_06.jpg?sign=1739050794-gTsUbNiGxmw7z4Vx7rKChDFt0aEpG9S1-0-0e541e92c777b07263877a8703f8b4fa)
图2-146 用矩形选框工具建立背景选区
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/56_07.jpg?sign=1739050794-cIVPzmxmKIB6odnl2GjnY7kdCvjm59ja-0-a7b99b01cb0d299c53f581d3390da5a0)
图2-147 拉伸出背景
4)利用矩形选框工具选择左侧商品图片,如图2-148所示。在工具箱中单击“内容感知移动工具”按钮,选择“扩展”模式,将商品图片拖动到左侧空白处,如图2-149所示。5)对新生成的商品图片进行抠图,去掉主体图片。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/57_01.jpg?sign=1739050794-TQTO64Xdd59falNywrLDKyF83awpCxfE-0-1c70c0abd37dcfc09eb66716c095c42c)
图2-148 建立商品图片选区
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/57_02.jpg?sign=1739050794-R0zEG9kumDLvfSzdOnKtyTZstuBynfTG-0-757a21f976ac09018a15557295e3e568)
图2-149 移动并复制商品图片
6)置入新文件A221.jpg,并栅格化该图层,去掉图片的背景,移动图片到最左侧的商品图片中。最终效果如图2-149所示。
7)执行“文件”→“存储为”菜单命令,弹出“存储为”对话框,将文件保存为A220.jpg。
5.仿制图章工具
仿制图章工具指定像素点为复制基准点(对图片取样),将其复制到新的区域,与修复画笔工具类似,其操作要经过取样、复制两个环节。单击工具箱中的“仿制图章工具”按钮,打开仿制图章工具选项栏,如图2-150所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/57_03.jpg?sign=1739050794-Q2eMExOo5qj2P9JYvW2DKkI7sf2VAMi3-0-2d84c1f2dd69eeef4bdd65d0c7424c78)
图2-150 仿制图章工具选项栏
下面对各选项进行说明。
1)切换画笔面板。单击该按钮会打开“画笔”面板,可对画笔的笔触、大小等进行调整。
2)切换仿制源面板。单击该按钮会打开“仿制源”面板,可对取样点进行更多的操作。
3)不透明度。该项用于设置复制图片的不透明度。
4)流量。该项用于调整画笔涂抹时的数量。
5)对齐。勾选该复选框后,可连续对图片进行取样,否则始终采用初始取样点的样本。
6)样本。该项用于选择进行数据取样的图层,有“当前和下方图层”“当前图层”“所有图层”3种模式。
案例5 用仿制图章工具修复缺陷
【案例效果】第2章\A221.jpg,如图2-151所示。
【素材文件】第2章\221.jpg,如图2-152所示。
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/57_05.jpg?sign=1739050794-FjfebZtqJBcKAceNrFsLUKZZ4JofxR9L-0-15ca2fe28223ad34d35185189748a6a6)
图2-151 案例效果
![](https://epubservercos.yuewen.com/CA522A/17977544908661506/epubprivate/OEBPS/Images/57_06.jpg?sign=1739050794-N6jgQwaUryxJ3rimqcWTHLlTYazRRKc7-0-0f4a170c83ccc8f664deceace02f15f7)
图2-152 案例素材
【主要知识点】
利用仿制图章工具修复图片。
【操作过程】
1)启动Photoshop软件,打开素材221.jpg,发现果盘边缘不完整。
2)按〈Ctrl++〉组合键,放大图片,单击工具箱中的“仿制图章工具”按钮,按住〈Alt〉键在果盘有缺陷的附近单击取样,然后在缺陷位置涂抹。
3)不断重复步骤2,直到果盘边缘完整为止。最终效果如图2-151所示。
4)执行“文件”→“存储为”菜单命令,弹出“存储为”对话框,将文件保存为A221.jpg。