商品图片处理

第四章　商品图片处理

本章以农产品图片为例完成该网店所用图片素材的处理，来展示一般网店图片处理美化的流程。处理完成后的效果如图4－1所示。

图4－1　“乡村地瓜干”图片处理效果图

第一节　如何使用图片处理工具Photoshop？

从归档记录中找到拍摄图片文件中盒装300g乡村地瓜干的相关文件夹。从拍摄的图片中挑选满足网店需求的图片进行处理美化准备。按一般网店需求，商品图片分为上传用的缩略图（网站对尺寸一般会有相关规定）和在商品具体描述页面中起修饰补充作用的描述图。

打开Photoshop CS 3后，工作界面如图4－2所示。

图4－2　Photoshop CS3工作界面

点击菜单栏的“文件—打开”命令，进入打开标签的对话框面板，在面板中选择路径，找到对应的文件夹里需要处理的拍摄图片。可通过按住“Ctrl”键依次选择，在对话框的预览图中检查正确无误后，点击“打开”按钮，这样所选择图片就在Photoshop CS 3的工作界面中打开了（见图4－3）。点击菜单栏的“窗口”图标，在出现的列表中单击“排列”进入选择不同排列方式，对打开的拍摄图片进行排列管理。

一、拍摄图片图像调整

选取图片“＿IGP1541．jpg”作为商品描述图中，包装上显示商品内容简介的说明图，然后对其进行图像调整。

图4－3　在Photoshop CS3的工作界面中打开处理图片

1．调整方向

本图方向和缩略图所需方向一致，不需要调整。

2．调整明暗

本图曝光有点过亮，可进行减光调整。通过如图4－4所示的操作进入“调整—色阶”调整。在“色阶”对话框中，通过移动图4－5所选的滑块分别调整“阴影输入色阶”“中间调输入色阶”“高光输入色阶”，将图片的明暗调整恰当。

3．调整颜色

对一些拍摄图片的颜色饱和度、偏色等情况进行调整。本图颜色基本正常，可通过图4－6所示，进行“自动颜色”微调。

图4－4　色阶调整

图4－5　色阶调整对话框

图4－6　“自动颜色”微调

4．调整锐化

调整锐化可一定程度提高图片的清晰度。本图需要展示文字内容，所以更需要锐化。一般可使用USM锐化滤镜来实现，如图4－7所示。单击USM锐化后，可打开USM锐化对话框，再按图4－8所圈的移动滑块进行调整，并通过预览窗口查看锐化效果。

二、保存调整结果

单击菜单栏“文件—存储”或者“文件—存储为”命令进行保存。在“存储为”对话框中，选择保存的路径、保存的格式、新的名字进行存储，同时不覆盖原始文件，如图4－9所示。保存后，点击菜单栏右侧的最小化按钮或者关闭按钮，完成对该图的初步调整。

图4－7　锐化滤镜

图4－8　USM锐化对话框

图4－9　“最小化、还原、关闭”文件按钮

选取图片文件“＿IGP1542．jpg”作为商品缩略图进行图片处理，具体步骤如下。

第一，重复以上步骤流程。调整方向，本图采用竖排，因此需要调整方向，如图4－10所示。调整明暗，本图曝光不足，颜色偏暗需要调亮。通过右侧浮动面板“导航器”中“缩小放大”滑块放大工作区中的图片，能更清楚了解调整效果。

第二，通过菜单栏中的“图像—调整”命令，在“调整”列表中选择“亮度／对比度”，在“亮度／对比度”对话框中，如图4－11所圈，进行滑块调整，增加图片亮度和对比度。还可以继续通过“调整”列表中的“曲线”进行微调。单击“调整”列表中的“曲线”，打开“曲线”调整对话框，在对话框中用鼠标提升原图高亮部曲线从而带动全图曲线向亮部色阶偏移，如图4－12所示，完成微调。

图4－10　调整方向

图4－11　亮度／对比度调整

图4－12　曲线调整

第三，颜色调整，若觉得本图颜色过艳，可以做降低饱和度的调整。打开“色相／饱和度”调整对话框，如图4－13所圈进行滑块调整，降低颜色饱和度，完成调整。锐化调整，一般均使用USM锐化。最后保存调整好的图片。

图4－13　商品曲线调整

第二节　如何调整商品图片？

除了在商品具体描述里引用外链的图片外，一般网店对提交上传的缩略图片都要对大小和宽高比例进行限制。这里以淘宝网的要求为例进行处理，商品缩略图要求为310×310像素，是宽高比例为1∶1的正方形图。

一、裁剪

以调整处理过的“乡村地瓜干”搜索缩略大图为例来调整大小。首先，单击左侧工具箱的裁剪工具，对图片进行裁剪，通过裁剪线的8个控点，调整裁剪范围，裁去主题包装盒外部分，如图4－14所示。在裁剪图中央双击或者单击图4－14中所选的打钩处，完成裁剪。

图4－14　对图片裁剪

二、新建图像文件

单击菜单栏“文件—新建”命令，在打开的新建对话框中，如图4－15所示进行设置后，点击“确定”按钮。

图4－15　新建对话框

三、复制源图片

切换回裁剪后的包装盒图片，单击菜单栏“选择—全部”命令，如图4－16所示。单击菜单栏“编辑—拷贝”命令，或者用键盘快捷键“Ctrl＋A”和“Ctrl＋C”完成操作。

四、粘贴

1．编辑／粘贴

切换回新建文件“300g盒装乡村地瓜干＿缩略图”，单击菜单栏“编辑—粘贴”命令，如图4－17所示。粘贴的图像将独立存在于新图层“图层1”上。由于源图像文件2592×2959的像素和新建文件310×310的像素之间差距巨大，所以在“图层1”上看到的是一片白色（是源图像的一角）。

图4－16　全选图片

图4－17　粘贴所复制的“乡村地瓜干”图片

2．编辑／自由变换

单击菜单栏的“编辑—自由变换”命令，再通过导航器的缩小滑块缩小图像，如图4－18所示。工作区中白色的即为“300g盒装乡村地瓜干＿搜索缩略图”310×310像素的文件大小，灰色带8个控点内的范围为所复制图的实际大小。

图4－18　自由变换

3．缩小源文件图

按住Shift键（按原始比例）缩小粘贴过来的源文件图，再通过导航器调整视图，鼠标单击8个控点中央并通过移动不断调整位置，若不是水平可在8个控点的4个角外用鼠标来调整，直到大小与位置适中，如图4－19所示。最后使用和裁剪确认同样的方法确认“自由变换”完成。单击左侧工具箱的“橡皮擦”工具，通过导航器放大图片，再从“橡皮擦工具”属性栏中调整画笔大小擦去包装盒边缘的灰色部分，如图4－20所示。最后使其和背景图层白色大致一致，阴影不明显。

图4－19　通过自由变换调整大小位置

图4－20　橡皮擦修饰图片

第三节　如何制作图片水印边框？

一、选择图片

打开已有水印文件“水印（白色）．psd”，按住Ctrl键，鼠标单击“图层缩览图”，如图4－21所示完成水印图。

图4－21　载入选区

二、载入选区

载入选区操作，然后使用“Ctrl＋C”复制选区。切换到“300g盒装乡村地瓜干＿缩略图”，使用“Ctrl＋V”粘贴，再进行“自由变换”，调整到合适位置。选中该水印所在图层“图层2”，将该图层“不透明度”调整到合适比例，完成水印制作，如图4－22所示。

图4－22　加水印

三、保存图片

按前面的调整流程完成余下的3张缩略图，并命名保存。保存时由于对应的图像文件有多个图层，所以直接点“存储”将保存为“．psd”。为了在网上能正常显示右键点击“存储为”，格式选择“JPEG”。在弹出的“JPEG”选项对话框中，品质选“最佳”，最后“确定”保存完毕，如图4－23所示。

由于一般缩略图要求是白底无边框，缩略图不增加边框。商品描述图为了美观并和描述文字配合，有时会添加边框。在本任务中只以加简易的单色边框为例来说明，具体流程如下。

（1）选出“＿IGP1531．jpg”进行图像调整，裁剪后如图4－24所示。

图4－23　JPEG选项

图4－24　图像调整后的＿IGP1531．jpg

（2）新建文件，如图4－25所示进行设置。将裁剪后的“＿IGP1531．jpg”复制粘贴后，“自由变换”调整完毕，加上水印，如图4－26所示。

图4－25　“预设”新建文件

图4－26　加上水印后的效果

（3）单击菜单栏“图像／画布大小”命令，在“画布大小”对话框中，如图4－27所示进行设置。

图4－27　画布大小设置

（4）完成后“存储为”文件“300g盒装乡村地瓜干＿描述图边框．jpg”，效果如图4－28所示。

图4－28　简易边框效果图

第四节　如何处理图层与像素？

一、图层与像素

“图层”的概念在Photoshop中非常重要，它是构成图像的重要组成单位，许多效果可以通过对图层的直接操作来得到，Photoshop中图像由图层组成。

1．图层

每一个图层都是由许多像素组成的，而图层又通过上下叠加的方式组成整个图像。打个比喻，每一个图层就像一块透明的“玻璃”，图层内容就画在这些“玻璃”上，无论在上一层“玻璃”上如何涂画都不会影响到下一层的“玻璃”。如果“玻璃”上什么都没有，这就是完全透明的空图层，当各“玻璃”都有图像时，上面的“玻璃”会遮挡住下面“玻璃”上的图像，并可移动各“玻璃”上图像的相对位置。最后，自上而下俯视所有图层时，各图层上的图像会重叠或显示从而形成图像显示效果。

2．像素

一个像素通常被视为图像的最小的完整采样，图像由许多像素组成。像素是一个带有特定的位置和颜色值的正方形小块。像素是以行和列的方式排列，若将位图图像某一区域放大后，所看的这些正方形小块就是像素，如图4－29所示。一个图像文件，所含像素越多，则图像的品质越高，文件也就越大。

图4－29　像素

二、分辨率

Photoshop中分辨率是指图像的分辨率，图像的大小与质量取决于像素和分辨率。常用单位为像素／英寸（ppi），即每英寸包含的像素点数。例如，300ppi表示每英寸包含300个点。相同打印尺寸的图像，分辨率越高，所包含的像素点也就越多，色彩信息也就越丰富。

三、前景色与背景色

前景色在使用当前所选的绘图工具时，如“画笔”工具、“铅笔”工具以及使用“油漆桶”工具填充选区时，将被应用。背景色可以设置图像的底色，以及使用“橡皮擦”工具应用到“背景”图层中出现的颜色。前景色和背景色可在工具箱中分别设置，也可以互相切换，恢复默认值时，前景色为黑色，背景色为白色。设置前景色或背景色时，可以点击工具箱中的设置前景色或设置背景色的图标，在弹出的“拾色器”对话框中设置，如图4－30所示。

图4－30　设置前景色或背景色

四、色阶

色阶表示图像亮度强弱的指数标准，和颜色无关，也就是我们说的色彩指数，图像的色彩丰满度和精细度是由色阶决定的。一个颜色从最亮的白色到最不亮的黑色，共256个色阶，由0～255来表示。

五、吸管工具

在设置前景色和背景色时，可通过吸管直接对当前图像区域进行取色。点击工具箱“吸管”工具可对图像区域中的颜色进行平均取样，并将取样颜色运用于前景色。在吸管工具属性栏中可设置相关参数。取样点：表示取样点范围1像素。3×3平均：表示取样点范围为9个像素的色彩平均值。5×5平均：表示取样点范围为25个像素的色彩平均值，其他参数选项类似。

六、旋转画布

旋转画布针对整个图像的旋转，无论是否选择了选区，旋转范围依然是整个画布。任意角度，指按输入的指定角度旋转图像。水平翻转或垂直翻转，是指整个图像沿垂直轴线水平翻转或沿水平轴线垂直翻转。

七、色阶

使用色阶可以调整图像的明暗度，色阶不仅可以对整个图像进行也可以对被选中选区、被选中的图层、被选中的颜色通道进行调整，色阶调整在色阶对话框中设置（见图4－31）。

图4－31　色阶对话框

1．通道

默认对图像全部通道进行调整，可选其中某个颜色通道。

2．输入色阶

通过设置阴影、中间调和高光的色调来调整图像的色调和对比度，也是色阶调整的主要调整部分。其中阴影值（黑色滑块下方对应文本框）越大，图像越暗；高光的色调值（白色滑块下方对应文本框）越小，图像越亮。文本框中值在0～255中波动，以图中阴影值8为例，阴影值为8表示色调值为8的像素最暗，则原图像中色调值在0～8范围内的像素都是黑色。现将阴影值改为52，或者通过黑色滑块右移，表示除了原先0～8的范围，现在多了8～52的范围也变成纯黑，显然整体图像黑色的区域增加了，图像也由此变暗了。中间调值（灰色滑块下方对应文本框），表示阴影和高光之间的分布比例，在0．10～9．99之间。比1小表示增加对比度，比1大表示减小对比度。中间调的灰色滑块位置会随着左右阴影和高光的改变而滑动，保持原图的对比度。

右下方的三个“吸管”工具，分别用在图像中的取样来设置黑场：将取样的颜色设为图像最暗处色调值，比它暗的像素都将被设为黑色；设置灰场：将取样的颜色设为图像中间调范围的平均亮度；设置白场：取样的颜色设为图像最亮处色调值，比它亮的像素都将被设为白色。

3．选项

单击弹出如图4－32所示的对话框。

该选项为自动颜色、自动色阶、自动对比度的校正选项。3种算法是指，增强单色对比度：等同于自动对比度的效果；增强每通道的对比度：等同于自动色阶的效果；查找深色与浅色：再勾选“对齐中性中间调”选项，就等同于自动颜色的效果。下面的目标颜色和剪贴为自动时的处理比例，可供校正。

图4－32　自动选项

4．输出色阶

用于设置输出时阴影和高光色阶，以便将图像色调压缩为0 ～255的范围。用于打印图像时，使用该调整功能保留阴影和高光部分的细节，设置正好相反。例如，将第一个文本框值设为30，则表示输出图像中色调值为30的像素的暗度为整个图像最低的，所以图像将会变亮；将第二个文本框值设为225，则表示输出图像中色调值为225的像素的亮度为整个图像最高的，所以图像将会变暗。

八、曲线

除了“色阶”外，“曲线”也能调整图像的整个色调范围。从“曲线”对话框中可最多调整14个不同的点来控制图像从阴影到高光的色调。而“色阶”调整只能控制3个：阴影、中间调和高光。“曲线”对话框也可对图像中的个别颜色通道进行精确调整。“曲线”对话框如图4－33所示。

图4－33　曲线调整

“曲线图标”表示通过添加点来调整曲线。

“铅笔图标”表示使用铅笔来绘制曲线。与“曲线图标”二选一，“曲线图标”是默认选项。

竖坐标表示“减暗加亮”，横坐标表示图像的0～255亮度范围，对应阴影到高光的过渡。

输出文本框内值为当前所选点的改变后强度，输入文本框内值为当前所选点的原强度。

“吸管”工具对应的是在图像中取样设置黑场、灰场和白场，和“色阶”调整对话框内的“吸管”工具一样。

显示修剪是显示图像中发生修剪的位置。

九、色相／饱和度

色相／饱和度对话框如图4－34所示。

1．饱和度

饱和度是控制图像色彩程度的，即鲜艳度。调至最低的时候图像就变为灰度图像了，对灰度图像改变色相是没有作用的。

2．明度

明度，即亮度。如果将明度调至最低会得到黑色，调至最高会得到白色。对黑色和白色改变色相或饱和度都没有效果。

图4－34　色相／饱和度对话框

3．色相

色相，可改变色相光谱的对应关系。图中两条光谱中上方的色谱是固定的，下方的色谱会随着色相滑杆的移动而改变。这两个色相光谱的对应关系说明了色相改变的结果，如图4－35所示。

图4－35　色相的改变

4．编辑

编辑指定了改变区间，这一区间可以是全图或者某一种颜色。若对某一种颜色改变色相，则会在下方的光谱给出被改变颜色范围，范围大小可通过“吸管”工具增加、减少和改变，如图4－36所示。

图4－36　编辑某一种颜色的色相改变

5．着色

着色的作用是将画面改为同一种颜色的效果。

十、锐化

USM锐化是一个常用的技术，简称USM，是用来锐化图像中的边缘清晰度。对于高分辨率的输出，通常锐化效果在屏幕上显示比印刷出来的更明显。

1．数量

数量用于调节锐化的程度。该值越大，锐化效果越明显。

2．半径

半径用于设置图像轮廓周围被锐化的范围，该值越大，锐化效果越明显。

3．阀值

阀值用于设置锐化相邻像素必须达到的最低差值。只有对比度差值高于此值的像素才会得到锐化处理。

十一、自由变换

可以通过自由旋转、按比例缩放和倾斜工具来变换对象，自由变换可通过自由变换工具选项设置，如图4－37所示。其中圈选部分，可单击切换至变形模式。

图4－37　自由变换工具选项

十二、约束比例

约束比例即保持长宽比，保持原图像宽度和高度的比例，改变宽度的同时高度也随之改变。当取消后，表示高度与宽度无关，即改变任一项的数值都不会影响另一项。