Photoshop网页美工设计
上QQ阅读APP看书,第一时间看更新

2.4 网页图片修复

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

2.4.1 修图的必要性

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

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

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

2.图片中的大面积瑕疵

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

3.图片中的光影缺陷

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

2.4.2 图片的简单修复

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

1.污点修复画笔工具

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

图2-131 污点修复画笔工具选项栏

下面对各选项进行说明。

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

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

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

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

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

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

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

图2-132 案例效果

图2-133 案例素材

【主要知识点】

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

【操作过程】

1)启动Photoshop软件,打开素材217.jpg。

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

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

2.修复画笔工具

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

图2-134 修复画笔工具选项栏

下面对各选项进行说明。

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

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

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

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

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

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

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

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

图2-135 案例效果

图2-136 案例素材

【主要知识点】

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

【操作过程】

1)启动Photoshop软件,打开素材218.jpg。

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

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

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

3.修补工具

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

图2-137 修补工具选项栏

下面对各选项进行说明。

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

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

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

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

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

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

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

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

图2-138 案例效果

图2-139 案例素材

【主要知识点】

利用修补工具修复图片。

【操作过程】

1)启动Photoshop软件,打开素材219.jpg。

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

图2-140 用修补工具创建选区

图2-141 修复后效果

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

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

4.内容感知移动工具

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

图2-142 内容感知移动工具选项栏

下面对各选项进行说明。

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

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

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

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

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

图2-143 案例效果

图2-144 案例素材

【主要知识点】

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

【操作过程】

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

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

图2-145 用裁剪工具延伸图片宽度

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

图2-146 用矩形选框工具建立背景选区

图2-147 拉伸出背景

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

图2-148 建立商品图片选区

图2-149 移动并复制商品图片

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

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

5.仿制图章工具

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

图2-150 仿制图章工具选项栏

下面对各选项进行说明。

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

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

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

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

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

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

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

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

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

图2-151 案例效果

图2-152 案例素材

【主要知识点】

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

【操作过程】

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

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

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

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