带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之三:商品图像的修复与修饰

简介: 本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。

点击查看第零章
点击查看第一章

第2章 商品图像的修复与修饰

拍摄的商品照片中,总会有不尽如人意的地方,如包装上的污迹、商品细节的瑕疵、影响商品展示的多余物件等。如果将这些有瑕疵的照片直接用于网店装修,会大大影响买家正确判断商品的品质。Photoshop提供了大量用于修复与修饰图像的工具,应用这些工具除了能去除图像中的瑕疵,还能对图像进行适当的美化,提升商品的形象。

image.png

步骤 01
打开01.jpg素材图像,复制“背景”图层,得到“背景 拷贝”图层。

image.png

步骤 02
选择工具箱中的“污点修复画笔工具”,调整画笔至合适的大小,将鼠标指针移到包装盒上的污迹位置。

image.png

步骤 03
单击鼠标,即可去除单击处的污迹图像,继续使用画笔单击并涂抹污迹。

image.png

步骤 04
在单击并涂抹的时候,可以按下键盘中的[或]键,调整画笔笔触大小,直到去除包装盒上的所有污迹。

image.png

步骤 05
新建“曲线1”调整图层,打开“属性”面板,在面板中单击并拖动曲线,调整曲线形状,更改图像的明暗效果,使包装盒图像呈现出更干净的状态。

image.png

image.png

步骤 01
打开02.jpg素材图像,按下快捷键Ctrl+J,复制图层,生成“图层1”图层。

image.png

步骤 02
选择“仿制图章工具”,在选项栏中设置“不透明度”和“流量”,按住Alt键在裂缝旁边位置单击取样。

image.png

步骤 03
将鼠标指针移到裂缝所在位置,单击并涂抹,修复图像。再次按住Alt键在另一位置单击,取样图像。

image.png

步骤 04
继续在珠子的裂缝位置单击并涂抹,修复图像。通过重复使用“仿制图章工具”修复更多的瑕疵,得到完美的商品图像。

image.png

image.png

步骤 01
打开03.jpg素材图像,按下快捷键Ctrl+J,复制图像,生成“图层1”图层,使用“磁性套索工具”在包带内侧位置单击并拖动,创建选区。

image.png

步骤 02
选择工具箱中的“仿制图章工具”,在选项栏中设置“不透明度”和“流量”,按住Alt键单击以取样图像,然后在选区中的挂钩图像上单击以仿制图像。

image.png

步骤 03
继续使用“仿制图章工具”涂抹,去除选区中的挂钩图像。使用“套索工具”在包带外侧的位置单击并拖动,创建选区。

image.png

步骤 04
选择“仿制图章工具”,按住Alt键不放,在干净的背景位置单击以取样图像,然后在挂钩图像上涂抹,应用取样的图像遮盖住挂钩图像。

image.png

image.png

步骤 01
打开04.jpg素材图像,选择“背景”图层,将其拖动到“创建新图层”按钮上,释放鼠标,复制图层,得到“背景 拷贝”图层。

image.png

步骤 02
选择工具箱中的“修补工具”,在画面右侧的摄影棚图像周围单击并拖动,创建选区。

image.png

步骤 03
将选区中的图像向左拖动到干净的背景图像上,释放鼠标,应用干净的背景图像替换选区中的图像。

image.png

步骤 04
使用“修补工具”在画面左上角的摄影棚图像周围单击并拖动,创建选区。

image.png

步骤 05
将选区中的图像拖动到画面右侧干净的背景图像上,去除摄影棚痕迹。

image.png

步骤 06
继续使用“修补工具”修补图像,去除所有的摄影棚痕迹,在图像窗口中查看图像效果。

image.png

步骤 07
新建“色阶1”调整图层,打开“属性”面板,设置色阶为0、1.31、255,调整图像的亮度。

image.png
image.png

image.png

步骤 01
打开05.jpg素材图像,复制“背景”图层,生成“背景 拷贝”图层。

image.png

步骤 02
选择工具箱中的“修补工具”,在画面中的日期文字周围单击并拖动,创建选区,将选区拖动到干净的背景区域上。

image.png

步骤 03
使用“修补工具”继续在画面中创建新的选区,然后将选区拖动至干净的背景上,遮盖日期文字。

image.png

步骤 04
选择“仿制图章工具”,按住Alt键在干净的背景区域单击以取样图像,然后在日期文字上拖动鼠标,将其覆盖。

image.png

步骤 05
继续结合“修补工具”和“仿制图章工具”去除更多的日期文字,在图像窗口中查看去除后的图像效果。

image.png

image.png

步骤 01
打开06.jpg素材图像,按下快捷键Ctrl++,放大显示图像,可以看到人物皮肤上明显的斑点。

image.png

步骤 02
新建“图层1”图层,选择“污点修复画笔工具”,勾选“对所有图层取样”复选框,在斑点位置单击。

image.png

步骤 03
使用“污点修复画笔工具”在人物眼睛下方的头发丝位置单击并拖动,去除皮肤上多余的头发丝。

image.png

步骤 04
继续使用相同的方法,在人物皮肤上的其他瑕疵位置单击并拖动,去除更多的瑕疵,得到更干净的皮肤效果。

image.png

技巧提示 修复皮肤上的大面积瑕疵
当模特皮肤的斑点瑕疵问题较严重且覆盖面积太大时,虽然也可以使用常规修复工具去除,但是去除的过程非常烦琐,处理进度慢且效果不好,这时可以使用高反差保留滤镜加计算法,选取皮肤上有瑕疵的区域,再通过曲线调亮加以修复。
在“通道”面板中选择并复制对比反差较大的一个颜色通道,如下左图所示。然后执行“滤镜>其他>高反差保留”菜单命令,应用默认设置处理图像,将瑕疵与面部的其他区域分开,如下右图所示。

image.png

接下来执行“图像>计算”菜单命令,在打开的对话框中设置选项,如下左图所示,加大瑕疵与面部其他区域的明暗反差对比。经过重复计算后,可以看到人物皮肤上较明显的瑕疵部分,如下中图所示。载入通道选区,选择图像,如下右图所示。

image.png

按下快捷键Ctrl+Shift+I,反选选区,即可选中皮肤上的瑕疵部分,应用“曲线”提亮这部分图像,就能得到干净、细腻的皮肤效果,如下图所示。

image.png

image.png

步骤 01
打开07.jpg素材图像,复制“背景”图层,生成“背景 拷贝”图层。

image.png

步骤 02
执行“滤镜>模糊>表面模糊”菜单命令,在打开的对话框中设置“半径”为9像素、“阈值”为9色阶,模糊图像。

image.png

步骤 03
为“背景 拷贝”图层添加图层蒙版,并将蒙版填充为黑色,选择“画笔工具”,设置前景色为白色,设置“不透明度”和“流量”,涂抹皮肤位置。

image.png
image.png

步骤 04
按下键盘中的[或]键,调整画笔笔触大小,继续涂抹皮肤位置,对人物进行磨皮,得到光滑的皮肤效果。

image.png

步骤 05
新建“曲线1”调整图层,在“属性”面板中单击并向上拖动曲线,选择“蓝”选项,然后单击并向上拖动曲线。

image.png

步骤 06
选中“曲线1”图层蒙版,在工具箱中设置前景色为黑色,使用“画笔工具”涂抹不需要调整的区域。

image.png
image.png

image.png

步骤 01
打开08.jpg素材图像,复制“背景”图层,生成“背景 拷贝”图层,执行“滤镜>液化”菜单命令。

image.png
image.png

步骤 02
打开“液化”对话框,单击工具栏中的“褶皱工具”按钮,在“画笔工具选项”下设置画笔“大小”为600,在模特的肚子位置单击,收缩图像。

image.png
image.png

步骤 03
单击工具栏中的“向前变形工具”按钮,在“画笔工具选项”下设置画笔“大小”为200,在模特的肚子位置单击并向内侧拖动,收细腰部曲线。

image.png
image.png

步骤 04
单击“膨胀工具”按钮,在“画笔工具选项”下设置画笔“大小”为400,在胸部位置单击,制作丰胸效果。

image.png
image.png

步骤 05
继续使用“液化”对话框中的工具修饰模特的身形,完成后在图像窗口中查看编辑后的效果。

image.png

技巧提示 人物五官的修饰
应用“液化”滤镜不但可以修饰人物的身形,还可以修饰人物的脸形和五官。“液化”滤镜提供的高级人脸识别功能,可自动识别眼睛、鼻子、嘴唇和其他面部特征,我们只需要在相应的选项组中设置参数,就能轻松地对其进行调整,如下图所示。但使用此功能需要先在Photoshop 首选项中启用图形处理器。

image.png

image.png

步骤 01
打开09.jpg素材图像,按下快捷键Ctrl+J,复制图层,得到“图层1”图层。

image.png

步骤 02
选择“减淡工具”,在选项栏中选择“高光”范围,设置“曝光度”为5%,在水晶上涂抹。

image.png

步骤 03
按下快捷键Ctrl+J,复制图层,选择“加深工具”,在选项栏中选择“阴影”范围,设置“曝光度”为10%,在水晶上涂抹。

image.png
image.png

步骤 04
创建“亮度/对比度1”调整图层,打开“属性”面板,在面板中设置“亮度”为20、“对比度”为10,调整图像,加强对比。

image.pngimage.png

image.png

步骤 01
打开10.jpg素材图像,选择“套索工具”,设置“羽化”值为100像素,在图像中创建选区。

image.png

步骤 02
按下快捷键Ctrl+J,复制选区中的图像,在“图层”面板中得到“图层1”图层,执行“滤镜>锐化>智能锐化”菜单命令。

image.png

步骤 03
打开“智能锐化”对话框,在对话框中设置“数量”为220%、“半径”为5像素、“减少杂色”为10%,输入阴影“渐隐量”为10%,输入高光“渐隐量”为10%。

image.png

步骤 04
确认设置,在图像窗口中查看应用滤镜锐化后的图像,可以看到包包表面的纹理更加清晰了。单击“添加图层蒙版”按钮,为“图层1”图层添加蒙版。

image.png

步骤 05
选择“画笔工具”,在工具箱中设置前景色为黑色,在选项栏调整“不透明度”和“流量”,使用“画笔工具”在锐化过度的位置涂抹。

image.png

步骤 06
继续使用“画笔工具”在其他锐化过度的区域涂抹,还原涂抹区域的清晰度,在图像窗口中查看编辑后的效果。

image.png

知识扩展 淘宝平台上传图片的要求
在淘宝平台上传商品展示图片时,图片大小不能超过120KB,并且图像格式必须为JPG或GIF。如果图片大小超过120KB,可以在Photoshop中执行“存储为Web所用格式”命令,再通过设置“品质”选项,将图片大小调整至120KB以内。

image.png

步骤 01
打开11.jpg素材图像,复制“背景”图层,得到“背景 拷贝”图层,执行“滤镜>模糊画廊>光圈模糊”菜单命令。

image.png
image.png

步骤 02
在图像窗口中可以看到光圈中的商品图像保持原本的清晰度,而光圈外的图像显示出逐渐模糊的效果。

image.png

步骤 03
单击并拖动调整模糊光圈的大小和位置,然后在“模糊工具”面板中设置“模糊”值为18像素。

image.png

步骤 04
设置完成后单击“确定”按钮,确认设置,应用“光圈模糊”滤镜模糊图像,突出画面中间的钱包图像。

image.png

知识扩展 景深效果在商品详情页的应用
景深效果在网店装修中主要应用于商品详情页中的商品场景展示和细节展示,通过对图像进行适当的模糊,弱化不需要表现的部分,强化需要重点表现的部分。一些网店在装修时,可能为了节约时间,并未对商品图像应用景深效果,而是直接将拍摄的商品照片应用到页面中,这样容易给买家留下不专业的印象,甚至可能让买家弄不清楚要表现的商品及其卖点。下左图所示为未经过模糊处理应用到详情页中的商品展示效果,墙面背景及旁边的搭配灯光等都被显示在画面中,给人感觉有些凌乱;而下右图则是对图像进行过模糊处理的商品实拍展示,可以看到,画面中的背景和一只鞋子被进行了适当的模糊处理,突出了另一只鞋子,画面主次分明,更有层次感。

image.png

相关文章
|
存储 编解码
带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之二:商品图像的快速调整
本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。
带你读《Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版》之一:写在处理之前
本书是一本从网店装修实际需求出发编写的实例型教程,以Photoshop和Dreamweaver为软件环境,详细讲解了它们在网店装修中的应用,帮助读者快速掌握网店图像处理和页面排版的核心技能。本书内容实用,图文并茂,可操作性强,适合网店店长、网店美工等希望快速掌握网店装修和推广技术的读者阅读和学习,也可作为大专院校相关专业或电商培训机构的教学参考书。