中职 Photoshop CC网店视觉设计第九章教学课件

1、正版可修改PPT课件(中职） Photoshop CC网店视觉设计第九章教学课件第九章 网店商品详情图的视觉设计9.1 商品主图的设计 9.2 商品引导促销广告视觉设计9.3 商品规格参数图的视觉设计 9.4 商品色码属性图的视觉设计9.5 商品设计理念展示图的设计 9.6 商品卖点展示图的视觉设计返回下一页第九章 网店商品详情图的视觉设计9.7 商品主体多角度展示图的设计 9.8 商品使用状态展示图的设计 9.9 商品细节展示图的设计 9.10 商品功能展示图的设计9.11 商品售后、品牌、商家信息展示图的设计返回上一页9.1 商品主图的设计商品主图是首先进入消费者视角的第一组概略性商品图像

2、信息图，对商品的促销起到关键性的作用，目前的大部分网络销售平台中，商品主图一组一般为5 幅，不同的平台有不同的尺寸规定与要求，而淘宝平台规范不严格。一组商品主图中第一张图为首图，这张图非常重要。各类网络零售平台系统设定的，允许商家发布的主图最多是五幅，有些平台要求五幅图全部上传，有些没有严格的要求，但对于正规的商家来说，用于销售的商品的五幅主图一般是要做全的，除了首图以外，其他主图的作用与首图比相对要轻一些，但也是非常重要的。一般主图需要展现商品各个视角的外观，也可以用于展现同款但不同颜色的几个商品图。下一页返回9.1 商品主图的设计下面是一款鞋类商品的主图设计方法。（1）根据商品的颜色来设计

3、主图，主图的大小为800800 像素，具体如图9.1图9.5所示。（2）根据同一款商品的不同视角与细节设计主图。（3）根据不同颜色的组合进行主图的设计。上一页返回9.2 商品引导促销广告视觉设计商品引导促销广告图一般都是在商品详图前面，其作用是一步一步引导消费者对商品产生兴趣，引导消费者进一步去详细了解商品的属性与特征，所以在商品详情页上的商品引导促销广告图也是非常重要的。不同的商家对商品促销广告图的重视程度不一样，有些商家设计了多张商品引导促销广告图，有些商家就设计了一张商品引导促销广告图，有些甚至没有。当然商品引导促销广告图的设计要看商家的整体规划，而且对于不同品类的商品，不同用途的商品，

4、甚至不同的销售平台，其商品引导促销广告图的设计方式与风格也是不一样的，需要具体情况具体分析，要符合整体的设计与布局，下面为本款鞋类商品的促销引导设计具体方法。下一页返回9.2 商品引导促销广告视觉设计9.2.1 商品促销广告视觉设计（一）（1）在计算机中启动Photoshop 软件，执行Ctrl+N 命令或者在“文件”菜单中选择“新建”命令，创建一个新的图像文件，在弹出的对话框中设置图像文件的宽度为790 像素，高度为751 像素，分辨率为72 像素/英寸。颜色模式为RGB 颜色，具体如图9.16 所示。（2）在软件的工具箱中单击前景色按钮，在弹出的对话框中设置颜色，设置RGB 的数值为（0、

5、74、110）。（3） 在图层面板的底部，单击“创建新图层”按钮，创建一个新的图层，然后执行Alt+Delete 命令将上一步设置的前景色填充到新的图层中。上一页下一页返回9.2 商品引导促销广告视觉设计（4）在软件的工具箱中选择渐变填充工具，在工具属性栏中点取“径向渐变”的渐变方式，混合模式为“正常”，其他参数默认设置。（6）单击渐变工具选项上的渐变颜色设置选项，设置类型为“前景色到背景色”，设置前景色RGB 为（15、128、190），设置背景色RGB 为（39、244、250）。（7）在软件的图层面板，创建一个新图层，设置图层的不透明度为35%，运用前面几步设置好的渐变工具在新图层进行填

6、充。（8）打开“01 sucai 1.psd”素材图像文件，在Photoshop 软件的工具箱中选取移动工具，将素材图像文件中的“云纹”图像移到目标图像中，运用Ctrl+T 命令，对“云纹”图像的大小与位置进行调整。上一页下一页返回9.2 商品引导促销广告视觉设计（9）继续运用移动工具，将“01 sucai 1.psd”素材图像文件中的“运动的晶体”图像移到目标文件中，运用Ctrl+T 命令，对“运动的晶体”图像的大小与位置进行调整。（10）继续运用移动工具，将“01 sucai 1.psd”素材图像文件中的“运动的晶体”图像移到目标文件中，运用Ctrl+T 命令，对“运动的晶体”图像的大小与

7、位置进行调整，然后再选取部分图像进行调整。（11）在工具面板选取毛笔工具，设置笔刷大小为106 像素，硬度为0，模式为正常，流量为43%。上一页下一页返回9.2 商品引导促销广告视觉设计（12）将“01 sucai 1.psd”素材图像文件中的“运动的晶体”图像移到目标文件中，运用Ctrl+T 命令，对“运动的晶体”图像的大小与位置进行调整，然后在图层面板将这几个素材图像的图层分别添加图层蒙版效果，并运用上一步设置的画笔工具在图层蒙版上对素材图像的结构进行调整，（13）运用软件的移动工具，将素材文件中的“炫光”图像移到目标文件中来，调整大小与位置，并设置图层混合模式为“叠加”。（14）继续从素

8、材图像文件中移动“炫光”图像到目标文件中，调整位置与大小。上一页下一页返回9.2 商品引导促销广告视觉设计（15）打开素材图像文件“01 sycai 2”运动鞋图像文件，然后移动工具将运动鞋图像移到目标图像文件中，调整运动鞋的大小与位置。（16）选取工具箱中的文本工具，设置文本字体为“方正兰亭粗黑”，颜色为白色。（17）在目标图像文件的左上方输入“足够清爽”文字，如果“引号”因位置关系无法编辑，文字可以分开输入并调整好位置。（18）选取工具箱中的自定义形状工具，在图层面板创建一个新图层，选择自定义形状工具的“填充”选项，描边为“无”，宽度为3 个点，绘制一个圆形线条，然后用橡皮擦工具，擦除圆形

9、线条的上面一部分形成一个开放的圆环。上一页下一页返回9.2 商品引导促销广告视觉设计（19）继续运用自定义形状工具，在图层面板重新创建一个新图层，然后用自定义形成工具绘制一个三角形形状。（20）在绘制好上面的两个形状后，用移动工具进行调整，使箭头的位置放置恰当，并调整整体的大小与位置。（21）选取软件工具箱中的文本工具，设置字体为“楷体”，字体大小为42.06 点，颜色为白色，选择“加粗”选项。（22）在目标图像文件中输入“360”文字，用移动工具放置合适的位置。上一页下一页返回9.2 商品引导促销广告视觉设计（23）继续运用文字工具，设置字体均为“方正大黑简体”，文字颜色均为白色，设置字体大

10、小输入相关文字，其中文字要左对齐。（24）输入相关文字以后，最后的图像效果如图9.36 所示，并保存文件。上一页返回9.3 商品规格参数图的视觉设计在商品引导促销广告图之后，一般的情况下是接着向消费者展现商品的具体参数，通过主图、商品促销广告图的引导，消费者对商品的性能已经有初步的了解，接下来一般的消费者想了解的是商品的参数，所以很多商家特别是销售服装类与鞋类的商家，一般把商品的具体参数规格放在商品促销广告图之后。商品参数展示图主要是较为全面地描述商品的参数，一般包含商品的品牌、标识，本商品的型号、尺码大小，商品的材质，商品所具备的颜色系列，商品流行元素，商品的版型，等等，最重要的是要展现商品

11、的规格，即整体大小尺寸与部位大小尺寸。设计形式多样，但风格要符合整体设计规划。其中长宽高的标注可以用软件中的形状工具进行选型，也可以根据图像自行绘制，具体如下面所叙。下一页返回9.3 商品规格参数图的视觉设计（1）启动计算机运行Photoshop 软件，执行命令创建一个新的图像文件，设置图像大小宽度为790 像素，高度为579 像素，分辨率为72 像素/英寸，具体如图9.55 所示。（2）在软件的工具箱中单击前景色按钮，在弹出的拾色器面板中设置前景色，其RGB值为（42、70、89）。（3）在软件的工具箱中点选矩形选择工具，设置羽化值为0 像素。（4）在新建立的图像文件中执行Ctrl+R 命令

12、使图像边缘显示标尺，然后在图像的顶部区域创建一个长方形，在图层面板创建一个新图层，执行Ctrl+Delete 命令用前景色填充。上一页下一页返回9.3 商品规格参数图的视觉设计（5）在软件的工具箱中单击前景色按钮，在弹出的拾色器面板中设置颜色RGB 为（230、230、230）的一种灰色。（6）执行Ctrl+D 命令先取消上一步创建的长方形选区，在图层面板长方形填充所在的图层下方，创建一个新图层，执行Ctrl+Delete 命令用前景色进行填充。（7）在软件的工具箱中选取自由形状工具，设置绘图方式为形状，填充选项设置为白色，（8）在图层面板首先于长方形填充所在的图层上方创建一个新图层，然后用形

13、状工具绘制一个颜色RGB 为（230、230、230）的圆点。上一页下一页返回9.3 商品规格参数图的视觉设计（9）在软件的工具箱中选取文本工具，设置文本属性，其中文本字体为微软雅黑，大小为18.51 点，颜色为RGB（230、230、230），设置加粗选项，输入文字“商品信息”；在设置字体为Arial 字体，大小为12 点，字间距为9，字体颜色为RGB（230、230、230），设置加粗选项，输入英文文字。（10）在软件的工具箱中选取移动工具，将输入的文字对象以及圆点进行对齐设置。（11）在软件的工具箱中选取文本工具，设置文字字体为方正大黑简体，文字大小为20点，字体颜色为黑色，选择大写选项

14、。上一页下一页返回9.3 商品规格参数图的视觉设计（12）在图像文件中分别输入“SIZE”与“尺码推荐”文字，并用移动工具调整文字的位置，使它们左对齐。（13）继续运用文本工具，设置字体为微软雅黑，字体大小为13 点，行间距为20 点，字体颜色为黑色。（14）在“尺码推荐”文字下方输入中文段落，并使段落文本左对齐。（15） 在软件的工具箱中选取自由形状工具，设置绘制方式为形状，设置颜色为RGB（101、183、11）。（16） 在软件的形状库中选取不同的形状，在分别创建一个新图层的同时，绘制三个形状，然后用移动工具进行对齐排列。上一页下一页返回9.3 商品规格参数图的视觉设计（17）选取软件中

15、的文本工具，设置字体为微软雅黑，字体大小为15 点，行间距为20点，颜色为黑色。（18）分别输入段落文字，并进行左右对齐。（19）在软件的工具箱中选取矩形选择工具，设置羽化值为0。（20）前景色设置为RGB（101、183、11），在图像文件的右边绘制一个长方形选区，创建一个新图层以后，将前景色填充。（21）运用文本工具，设置字体为微软雅黑，选择Regular 选项，字体大小为16 点，行间距为30 点，字符间距为0，颜色为白色。（22）在右边的长方形填充区域输入白色的段落文字，设置对齐方式为左对齐，并把文字放置合适的位置。上一页返回9.4 商品色码属性图的视觉设计9.4.1 商品颜色分类展示

16、图的设计（1）运行Photoshop 软件，创建一个新的图像文件，设置文件尺寸，其中宽度为790 像素，高度为1 020 像素，分辨率为72 像素/英寸，具体如图9.73 所示。（2）在软件中打开素材文件“04sucai 1.psd”。（3）将素材文件用软件的移动工具移到目标图像中，执行Ctrl+T 命令，对素材图像的大小进行适当的调整，并放置合适的位置。（4）运用软件的文本工具，设置字体为微软雅黑，选择Regular 选项，字体大小为14 点，行间距为30 点，字符间距为50，字体颜色为黑色。下一页返回9.4 商品色码属性图的视觉设计（5）运用上一步设置完成的文字工具，分别输入两列注意对齐方

17、式与文字的位置。（6）运用软件的文本工具，设置字体为微软雅黑，选择Regular 选项，大小为14 点，行间距为30 点，字符间距为50，字体颜色为RGB（4、123、220）。（7）运用上一步设置完成的文字工具，注意对齐方式与文字的位置。（8）运用软件的文本工具，设置字体为方正粗宋简体，大小为24 点，行间距为16.81 点，字符间距为200，字体颜色为黑色。（9）创建一个新图层，在以上两个步骤输入的文字下方，运用省略号输入文本，形成一条虚线。上一页下一页返回9.4 商品色码属性图的视觉设计（10）在软件的工具箱中选取矩形选择工具，设置羽化值为0 像素。（11）在图层面板创建一个新图层，然后

18、绘制一个矩形选区，设置前景色为黑色，执行编辑菜单下面的描边命令，将选区描边，最后取消选择，把描边形成的矩形放置合适的位置。（12）运用文字工具设置字体为方正粗宋简体，大小设置为24 点，字符间距为200，颜色为黑色。（13）在描边的长方形内输入文字，英文文字的大小运用Ctrl+T 命令进行调整（14）运用文字工具设置字体为微软雅黑，大小设置为14 点，选择Regular 选项，字符间距为50，行间距为20 点，颜色为RGB（137、137、137）。上一页下一页返回9.4 商品色码属性图的视觉设计（15）输入灰色文字，文字设置为左对齐，并移到合适的位置，如图9.83 所示。（16）在软件中打开

19、素材文件“04sucai 2.psd”，将素材逐个移到目标图像文件中，用移动工具进行位置排列。（17）选取矩形选择工具，设置羽化值为0 像素。（18）绘制一个大小合适的正方形选区，创建一个新图层以后用RGB 为（33、118、171）的颜色填充，接着继续创建图层，用矩形选择工具移动平行移动选区后，用RGB 为（145、4、51）5）的颜色填充；继续相同的操作，用RGB 为（33、118、171）的颜色填充。上一页下一页返回9.4 商品色码属性图的视觉设计（19）取消选择，运用文字工具，设置中文文字的字体为方正兰亭粗体，大小为24 点，字符间距为24，颜色为白色；设置英文文字的字体为Arial，

20、大小为19 点，颜色为白色，大写。（20）将文字输入并移到合适的位置，最后效果如图9.89 所示。上一页返回9.5 商品设计理念展示图的设计商品设计理念风格展示图对于服装类商品、鞋类商品，以及手表等时尚类商品来说是必不可少的，其展现的是设计的风格、流行的元素、制作的工艺水准、设计理念、品牌的内涵，等等，有些还专门表明设计师的形象等，其中商品设计理念风格展示图中的文案设计也比较重要。下面这一商品设计理念风格展示图制作上并不复杂，左边直接采用现场照片图像排列，右边为一幅设计线描草稿，简介、明快、生动。文案设计能突出设计风格，字体设计活泼，文字左对齐排列显得整齐，软件操作上也比较容易实现。具体操作过

21、程如下所示。（1）运行Photoshop 软件，执行菜单命令创建一个新的图像文件，设置图像的宽度为790像素，高度为389 像素，分辨率为72 像素/英寸，具体如图9.97 所示。下一页返回9.5 商品设计理念展示图的设计（2）在软件的工具箱中，单击前景色按钮，设置前景色RGB 为（188、188、188）。（3）在软件的图层面板，创建一个新的图层，执行Ctrl+Delete 命令，将前景色填充在新创建的图层中。（4）在软件中打开“03 sucai.psd”图像文件，将素材图像用移动工具拖到文件中，并执行Ctrl+T 命令对素材图像进行调整。（5）运用文字工具设置字体为微软雅黑，大小为36 点

22、，颜色为RGB（70、22、22），输入“感受更精致的品质”文字；运用文字工具，设置字体为Arial，大小为14 点，颜色为RGB（70、22、22），输入一行英文文字。上一页下一页返回9.5 商品设计理念展示图的设计（6）运用移动工具，将上面输入的两条文字移到文件中合适的位置，并使之中间对齐。（7）在软件的工具箱中单击前景色按钮，在弹出的拾色器对话框中设置前景色RGB（56、60、91）。（8）在软件的工具箱中选取椭圆选择工具，在图像文件的左边创建一个圆形选区（同时按住shift 键），在图层面板创建一个新图层，执行Ctrl+Delete 命令将前景色填充。（9）执行Ctrl+D 命令，取消

23、前面创建的圆形选区，然后在软件的工具箱中选取钢笔工具，设置绘制方式为形状，描边方式为直线2 个点，描边线型为虚线，然后创建一个新图层，在圆形填充区域内绘制一条虚线。上一页下一页返回9.5 商品设计理念展示图的设计（10）在软件的工具箱中选取文本工具，设置文本字体为微软雅黑，显示方式为“regular”，大小为18 点，字符间距为0 ，行间距为自动，颜色为RGB（182、185、209），输入文字“运动风尚”。（11）继续运用文字工具，设置字体为微软雅黑，字体显示方式为bold，字体大小为28点，行间距为自动，字符间距为0，字体颜色为RGB（210、207、226），输入文字“更耐穿”。（12）

24、运用软件的移动工具将前面几步创建的“虚线”“运动风尚”“更耐穿”三个对象进行位置移动与编辑，使它们以圆形填充为背景居中对齐。上一页下一页返回9.5 商品设计理念展示图的设计（13）在软件的图层面板，将“圆形填充”“虚线”“运动风尚”“更耐穿”四个图形对象所在的图层同时选中，并进行复制，复制成5 份，使复制出来的图像水平对齐，然后双击需要更改的文字所在的图层，编辑更改相关的文字。（14）在软件的工具面板中选取文本工具，设置文字字体为微软雅黑，显示方式为bold，字体大小为14 点，行间距为18 点，字符间距为0，颜色为RGB（39、44、82）。（15）运用段落文本输入三行中文段落，并将文本设置

25、为左对齐，然后将文本放置在合适的位置。上一页下一页返回9.5 商品设计理念展示图的设计（16）继续运用段落文本工具，设置字体为Arial 字体，选择Regular 选项，行间距为10点，字符间距为0，颜色为黑色。（17）在图像的下方输入英文段落，并使文字中间对齐，最后的图像效果如图9.108 所示。上一页返回9.6 商品卖点展示图的视觉设计9.6.1 商品卖点展示图视觉设计（1）运行软件创建一个新的图像文件，设置文件宽度为790 像素，高度为682 像素，分辨率为72 像素/英寸，具体如图9.109 所示。（2）设置前景色RGB 为（38、65、83），运用矩形选择工具，羽化值为0 像素，创建

26、一个新图层后，在图像文件的上部绘制一个长方形选区，并用前景色填充。（3）打开素材文件，将天空素材放入图像文件中，按住Shift 键的同时调整素材图像的大小确保等比编辑。下一页返回9.6 商品卖点展示图的视觉设计（4）选取工具箱中的渐变填充工具，设置渐变颜色为从白色到透明，渐变方式为线性渐变，模式为正常，不透明度100%。（5）创建一个新图层，运用从白色到透明的渐变对图像渐变填充。（6）选取文字工具，分别设置字体为微软雅黑与一种英文字体（如果计算机中没有字体（7）输入文字“为什么选择我”与“WHY DID YOU CHOOSE ME”，使文字中间对齐居中排列。上一页下一页返回9.6 商品卖点展示

27、图的视觉设计（8）打开素材文件，将素材移到文件中，执行Ctrl+T 命令调整素材图像的大小与位置。（9）选取铅笔工具，设置笔刷大小为3 像素，模式为正常，不透明度为100%，创建一个新图层，在图像中绘制一直角形状。（10）运用文字工具设置字体为华文新魏，大小分别为30 点与79 点，颜色为黑色与深灰色。（11）运用设置好的文字工具分别输入“让您健步如”与“飞”两组文字，确定当前图层为“飞”字所在的图层，执行Ctrl+T 命令转动一个角度。上一页下一页返回9.6 商品卖点展示图的视觉设计（12）继续运用文字工具，设置字体为Elephant，选择Regular 样式，大小为50 点，字符间距为0，

28、斜体大写，颜色为一种深蓝色。（13）将文字放入合适的位置，运用编辑菜单下面的斜切工具对文字进一步地变形。（14）分别运用方正韵动粗体与微软雅黑，不同的字体大小。（15）分别输入文字，并放到合适的位置，文字为左对齐。（16）运用钢笔工具，绘制方式为形状，设置描边为3 个像素，选择线型为虚线，创建一个新图层以后，用黑色绘制两条平行的虚线，具体效果如图9.126 所示。上一页返回9.7 商品主体多角度展示图的设计商品主体多角度展示图是让消费者对商品的外观属性进行全面了解的一个环节，一般情况下消费者在这里对商品的了解要求深入细致，商品主体多角度展示图应尽可能全面地描述商品的外观特征，应从前后、左右、上

29、下、里外等多个角度来充分展示商品，商品主体多角度展示图在设计上相对较为简单，多直接采用拍摄好的图片，但尺寸上、颜色上要进行调整。商品主体多角度展示图的设计重心是图文并排，以图为主。一般的图像照片的排列顺序是根据商品使用的顺序，消费者一般浏览观察商品的顺序编排，即从前到后，从上到下，从左到右，从整体到局部，从外到内的顺序。当然不能千篇一律、照搬照抄，还要在遵守风格统一的基础上，根据具体情况进行设计，下面是一款鞋类一种颜色的商品展示。下一页返回9.7 商品主体多角度展示图的设计这款鞋有三种颜色，应根据三种颜色分别进行格调一致的设计。商品主体多角度展示图的设计均采用了拍摄好的照片图像，拍摄时商品主体

30、组合摆放合理生动，能充分展示商品的外观，制作方法也较为方便。而商品主体多角度展示图应对拍摄好的不同角度的商品图像进行抠图，然后进行排列组合来实现。（1）运行软件创建一个新的图像文件，设置文件大小宽度为790 像素，高度为4 391 像素，分辨率为72 像素/英寸，具体如图9.150 所示。（2）与上一讲的案例一样绘制一个蓝色填充的长方形，设置工具参数，先运用形状工具绘制“花型”形状，然后运用文字工具输入白色的文字，最后运用形状工具绘制三角形形状，并转动三角形形状。上一页下一页返回9.7 商品主体多角度展示图的设计（3）打开素材文件，将素材放入图像文件中，并调整素材的大小与位置。（4）创建一个新

31、图层，运用矩形选择工具，绘制一正方形选区，用蓝色的前景色填充选区，取消选择以后，设置文字属性。（5）输入“彩蓝”文字与“BLUE”文字，用移动工具放置合适的位置并对齐。（6）将彩蓝鞋子的素材全部放入图像中，运用编辑工具设置图像的大小与位置，做到排列整齐。上一页下一页返回9.7 商品主体多角度展示图的设计（7）在图像文件中移动绘图区域，用同样的方式编辑灰红鞋子的图像素材，注意排列整齐。（8）在图像文件中移动绘图区域，用同样的方式编辑灰蓝鞋子的图像素材，注意排列整齐。（9）运用缩放工具，将整体图像文件缩小，最后图像效果如图9.158 所示。上一页返回9.8 商品使用状态展示图的设计商品使用状态展示

32、图是用来表现商品使用状况的一组图像，这对进一步刺激消费者的购买欲望非常重要，这一组图往往能促进消费者联想自身使用该商品的状况，实际上是一种虚拟的体验，因为网上销售的商品最大的缺点就是无法满足消费者对商品的直接体验，不能直接接触商品，感悟品质，更不能试穿、使用商品体验使用的效果，只能根据消费者自身的经验，结合商家展示的商品图像信息来判断商品的使用价值，进而做出购买决定。所以商品使用状态展示图的设计是非常重要的。下面的操作实例就是使用直接拍摄的穿着状态的图像，通过软件进行切割，突出鞋与腿为主体，充分展示这款鞋子的使用效果，设计过程中图片上也可以运用红花绿叶等素材加以陪衬来突出主体效果。图像边缘的文

33、字是装饰性的，字体活泼随意，起到关联与统一风格的作用，软件操作上比较容易实现，注意使用段落文本。下一页返回9.8 商品使用状态展示图的设计（1）运行软件创建一个新文件，设置文件的宽度为790 像素，高度为3 505 像素，分辨率为72 像素/英寸，具体如图9.159 所示。（2）选取工具箱中的矩形选择工具，设置羽化值为0 像素，在图像文件的上部绘制一长方形选区，设置前景色为RGB（4、123、220），创建一个新图层后填充选区。（3）在工具箱中选取自定义形状工具，设置绘制方式为形状，填充颜色为白色，描边为无，从形状库中选择“花6”形状。（4）创建一个新图层，运用设置好的自定义形状工具绘制“花6

34、”形状，设置“花6”形状的大小与位置。上一页下一页返回9.8 商品使用状态展示图的设计（5）运用文字工具，设置字体为微软雅黑，选取Regular 选项，设置字体大小为18点，颜色为白色，字符间距为0，输入“模特展示”文字；设置字体为10 点，颜色为白色，字符间距为0，输入“MODEL SHOWS”大写英文字体。（6）运用自定义形状工具，选择形状选项，填充为白色，描边为无，从形状库中选择“三角形”形状。上一页下一页返回9.8 商品使用状态展示图的设计（7）创建一个新图层后运用设置好的自定义形状工具绘制一个正立的三角形形状，执行CTRL+T 变换编辑命令按住Shift 键的同时转动90，使三角形朝

35、右，然后运用移动工具将“花的形状”“模特展示”“MODEL SHOWS”“朝右的三角形形状”进行有序整齐的排列（这实际上是详情页的标题，在下面的章节中还会用到）。（8）打开素材文件并将第一幅素材图像运用移动工具拖入到目标文件中，调整其位置与大小。上一页下一页返回9.8 商品使用状态展示图的设计（9）选取文字工具，设置字体为方正超粗黑简体，文字大小为18.42 点，字符间距为0，颜色为RGB（159、159、159），输入大写文字“DAYS OF SUMMER”；设置字体为微软雅黑，文字大小为10 点，字符间距为100，颜色为RGB（174、174、174），输入大写加粗的斜体文字“STANFO

36、RDUNIVERSITY CUTTING-SDGE TECHNOLOGY”。（10）运用移动工具将文字“DAYS OF SUMMER”与“STANFORD UNIVERSITYCUTTING-SDGE TECHNOLOGY”移到合适的位置，并使左对齐。（11）在打开的素材文件中，继续把素材图像移入文件中，调整大小与位置。上一页下一页返回9.8 商品使用状态展示图的设计（12）运用文字工具，设置字体为微软雅黑，选择Bold 选项，字体大小为10 点，行间距为12 点，字符间距为0，颜色为黑色，输入大写加粗倾斜的段落英文文字，设置段落对齐方式为居中；设置字体为方正正纤黑简体，大小为48 点，字符间

37、距为0，颜色为（174、174、174），输入斜体的“SIMPLE 简约”文字。（13）运用移动工具把英文段落文字与“SIMPLE 简约”文字移到合适的文字，并使中间对齐。（14）运用移动工具，从素材文件中把灰蓝颜色的鞋子穿着效果图像移到文件中，调整其大小与位置。上一页下一页返回9.8 商品使用状态展示图的设计（15）运用移动工具，从素材文件中把其余2 幅灰蓝颜色的鞋子穿着效果图像移到文件中，调整其大小与位置。（16）运用文字工具，设置字体为微软雅黑，选择Regular 选项，字体大小为30 点，行间距为12 点，字符间距为0，颜色为黑色，输入“追逐生活的脚步”文字；设置字体为Edwardia

38、nS字体，选择Regular 选项，大小为24 点，字符间距为10，行间距为20 点，颜色为黑色，输入斜体的“The worst way to miss someone is to be shying right beside them knowing you”文字。上一页下一页返回9.8 商品使用状态展示图的设计（17）将文字“追逐生活的脚步”与“The worst way to miss someone is to be shying rightbeside them knowing you”放到合适的位置。（18）运用移动工具，从素材文件中把灰红颜色的鞋子穿着效果图像移到文件中，调整其大

39、小与位置。（19）运用移动工具，从素材文件中把其余2 幅灰红颜色的鞋子穿着效果图像移到文件中，调整其大小与位置。（20）选取工具箱中的矩形选择工具，绘制一个长方形选区，然后运用椭圆选择工具，设置羽化值为0 像素，设置为减选模式，根据图像的位置减选部分长方形选区。上一页下一页返回9.8 商品使用状态展示图的设计（21）确定当前图层为左边的灰红穿着效果图像，执行删除命令删除部分图像，形成圆弧状（也可用剪切蒙版的方式实现），具体如图9.183 所示。（22）运用相同的方法删除右边灰红穿着效果图像的部分图像，形成圆弧状。（23）设置前景色 RGB 为（33、118、171），运用矩形选择工具绘制一个正

40、方形选区，建立一个新图层以后用前景色填充。上一页下一页返回9.8 商品使用状态展示图的设计（24）运用文字工具，字体为微软雅黑，选取Regular 选项，大小为16.91 点，字符间距为0颜色为白色，输入“彩蓝”文字，调整大小后输入“BLUE”文字，放置合适的位置。（25）分别运用相同的方法为灰蓝与灰红图像效果设置相同大小、垂直方向位置对齐的标签，最后缩小图像，整体效果如图9.187 所示。上一页返回9.9 商品细节展示图的设计商品细节展示图是指商品整体信息中无法展示的商品局部信息，一般用放大的图像来表示，对鞋类商品主要描述商品材料的质感、工艺的精细程度、局部的装饰效果等，以辅助说明商品的品质

41、与工艺，促进消费者信任感的产生。对于服装类商品，要根据商品的特点来考虑并设计展示的部位，有选择地进行重点展示，消费者通常对服装造型关注的部位有：领口造型、肩部造型、袖口造型、腰部造型、裙摆造型、口袋造型、裤腰造型、蝴蝶结等装饰品造型等；消费者对工艺质量关注的内容有：面料质量、缝纫线痕迹、扣眼工艺、拉链安装工艺、花边工艺、腰带工艺、里料衬托工艺等；消费者一般还会关注品牌信息、质量检测信息、工艺合格证、权威认证信息、配件、赠品、外包装、生产实景等商品相关内容。商品的细节展示主要为消费者提供商品的质量信息、制作工艺信息等，满足消费者对商品的质量、工艺等要求。下一页返回9.9 商品细节展示图的设计下面

42、是一组鞋子的细节展示图，主要采用照片图像放大局部图，通过裁剪工具合理裁剪以后使用，配以文字说明，真实而具体。（1）运行软件，创建一个新的图像文件，设置图像宽度为790 像素，高度为2 184 像素，分辨率为72 像素/英寸，具体如图9.188 所示。（2）设置前景色RGB 为（4、123、220）为一种蓝色。选用羽化值为0 像素的矩形选择工具，在图像文件的上部绘制一个长方形选区，创建一个新图层后用前景色填充。（3）选择工具箱中的自定义形状路径工具，设置绘制方式为形状，描边为无，从形状库中选择星形形状（或者多边形形状进行多边形设置）。上一页下一页返回9.9 商品细节展示图的设计（4）创建一个新图

43、层，在蓝色长方形上方绘制一个白色多边形形状。（5）运用文字工具设置字体为方正兰亭粗黑，颜色均为白色，字体大小分别为18 点与10 点。（6）在多边形形状后面输入“细节展示”与“THE DETAILS SHOW”文字，使文字放在合适的位置，然后运用形状工具绘制一个三角形。（7）在图像文件中显示标尺，从标尺中用移动工具拖出参考线。（8）将素材文件在软件中打开，用移动工具将素材拖进图像中，运用编辑命令把素材图像的大小调整到两条参考线之间。上一页下一页返回9.9 商品细节展示图的设计（9）运用文字工具，设置字体为方正兰亭粗黑、方正兰亭准黑、方正兰亭中黑，颜色为RGB（4、123、220）的一种蓝色与黑

44、色，分别运用文字属性设置的方式输入文字。（10）在图像中输入文字，并使文字移到合适的位置，左边的文字基本接近右对齐，右边的段落文字为左对齐。（11）将素材文件在软件中打开，用移动工具将素材拖进图像中，运用编辑命令把素材图像的大小调整到两条参考线之间。（12）运用上面相同的字体，在图像中输入文字，并使文字移到合适的位置，左边的文字基本接近右对齐，右边的段落文字为左对齐。上一页下一页返回9.9 商品细节展示图的设计（13）将素材文件在软件中打开，用移动工具将素材拖进图像中，运用编辑命令把素材图像的大小调整到两条参考线之间。（14）运用上面相同的字体，在图像中输入文字，并使文字移到合适的位置，左边的

45、文字基本接近右对齐，右边的段落文字为左对齐。（15）将素材文件在软件中打开，用移动工具将素材拖进图像中，运用编辑命令把素材图像的大小调整到两条参考线之间。（16）运用上面相同的字体，在图像中输入文字，并使文字移到合适的位置，左边的文字基本接近右对齐，右边的段落文字为左对齐。（17）运用工具箱中的缩放工具，将整幅图像缩小后图像的最后效果如图9.208 所示。上一页返回9.10 商品功能展示图的设计商品功能展示图是指用来展示商品的特殊使用功能，展示与众不同的设计，提醒适合的人群等，并不是所有的网络销售的商品都必须设计功能性展示图，要根据需要进行设计与安排，有些商家为了节省成本而不进行设计，但对于一

46、些特殊类别的商品，最好是配备商品功能性展示图，以提升流量的转化率。对于服装商品有适合于各种体型的，有用于不同着装场合的，还存在一个穿着的合身度问题。由于网上购物过程无法对服装进行试穿比较，消费者只能根据商家提供的规格信息，结合自身的尺寸进行判断服装商品的合身度与可用性。但是由于个体间体型存在巨大的差距，即便是相同的规格，也存在不同部位上尺寸的差别，比如从身高判断体型一样为中号的消费者，因为存在胸围与腰围的不同，中号规格的服装就不一定都适合这类消费者。下一页返回9.10 商品功能展示图的设计因此，服装商品的特殊性使消费者网上购物存在规格上的风险。为了使消费者更好地把握服装型号与尺寸规格，尽可能将

47、消费者在型号规格上的风险与疑虑降到最低，判明服装的功能，一些精明的经销商往往非常详尽地把服装的使用功能、服装的规格型号、尺寸以及试穿报告展现给消费者，以提高消费者的满意度。而鞋类产品与服装类产品类似，由于不同消费者的脚型完全不同，比如脚板宽与窄，使相同的款式与尺码，不一定能满足所有消费者，所以对商品来说，为了避免高退货率的发生，最好配置商品功能性展示图。上一页下一页返回9.10 商品功能展示图的设计9.10.1 商品功能展示图的设计（1）创建一个新的图像文件，设置文件宽度为790 像素，高度为647 像素，分辨率为72像素/英寸，背景内容为白色，具体如图9.209 所示。（2）设置前景色为RG

48、B（210、210、210），在图层面板创建一个新图层，然后用前景色填充，设置图层不透明度为50%，填充值为100%。（3）打开素材文件，将天空素材用移动工具移入图像文件中，运用变换编辑命令设置素材文件的大小，使素材图像完全适合文件的大小。（4）打开素材文件，将土地的素材放入到图像文件中，调整大小与位置。上一页下一页返回9.10 商品功能展示图的设计（5）打开石块素材文件，选择魔术棒工具，设置容差为32，在石块素材的白色背景区域点选使白色背景区域全部选中，然后执行反选命令。（6）运用移动工具将选中的石块素材移到目标文件中，运用编辑命令调整石块图像的大小，并放置合适的位置。（7）打开运动鞋图像素

49、材，选择磁性套索工具，设置宽度为10 像素，对比度为10%，频率为57，沿着运动鞋图像周围移动使运动鞋全部选中。（8）运用移动工具，将选中的运动鞋图像移到目标文件中，运用变换编辑命令调整运动鞋图像的大小与位置。上一页下一页返回9.10 商品功能展示图的设计（9）选取工具箱中的缩放工具，将图像显示局部放大，然后选取多边形套索工具，设置羽化值为0 像素，在运动鞋造型下方绘制一个箭头形状的选区。（10）设置前景色为RGB（145、8、251），创建一个新图层后运用前景色填充选区。（11）运用以上同样的方法，在运动鞋图像上方绘制两个箭头造型并填充。（12）运用文字工具，设置文字字体为方正兰亭粗黑，大小

50、为52 点，字符间距为0，颜色为RGB（254、252、1），输入文字“防撞鞋头设计”，然后双击文字所在的图层，设置图层样式，勾选投影选项，上一页下一页返回9.10 商品功能展示图的设计设置混合模式为正片叠底，颜色为黑色，不透明度为75%，角度为90 度，距离为1 个像素，扩展值为0 ，大小为2 个像素，执行确定按钮完成图层样式设置，最后把文字移到合适的位置。（13）运用文字工具设置字体为方正大黑简体，大小为16.5 点，字符间距为0，行间距为20.17，颜色为白色与深灰色，输入文字，右对齐，并放置合适的位置。（14）运用文字工具设置字体为微软雅黑，选择Regular 选项，大小为9 点，行间

51、距为12，颜色为RGB（123、123、123），设置大写，输入英文段落，设置左对齐，放置合适的位置。（15）选取多边形套索工具，设置羽化值为5 像素，绘制一个圆弧状的选区，创建一个新图层后用白色填充。上一页下一页返回9.10 商品功能展示图的设计（16）创建一个新图层，羽化值为0 像素，运用矩形选择工具绘制一矩形选区并用白色填充，设置图层不透明度为30%，运用多边形选择工具绘制一个多边形选区，运用流量为20%的橡皮擦工具擦除选区内的部分像素，形成镂空状，然后运用画笔工具，不透明度设置为42%，流量为43%，绘制简笔石块造型，最后用微软雅黑大小为9 点的文字输入“防撞功能”文字。（17）运用软

52、件工具箱中的缩放工具，显示全部的图像文件，最后效果如图9.225所示。上一页返回9.11 商品售后、品牌、商家信息展示图的设计商品售后、品牌、商家信息展示图主要是为了解除消费者购买商品后产生的一系列顾虑，现在我国商务部已经规定15 天无理由退货，一些平台也要求商家做出相应的承诺，但是消费者对于商家的不信任感总是存在的，所以在销售平台上设计售后问题、物流问题、退换货问题的、商品的质保期限、售后的维修问题，以及商家的品牌信息、商家的生产场景等还是有必要的，能提升消费者对商品与商家的信任度。下面就是一组商品售后、品牌、商家信息展示图的设计。（1）运行Photoshop 软件，创建一个新的图像文件，设

53、置文件宽度为790 像素，高度为660 像素，分辨率为72 像素/英寸，具体如图9.242 所示。下一页返回9.11 商品售后、品牌、商家信息展示图的设计（2）选取软件工具箱中的矩形选择工具，设置羽化值为0 像素。（3）设置前景色为RGB（252、234、194），在图层面板创建一个新图层，运用矩形选择工具绘制一个长方形选区，然后用前景色填充。（4）设置前景色RGB 为（29、170、178），创建一个新的图层，选择工具箱中的多边形套索工具，设置羽化值为0 像素，按住Alt 键的同时对长方形选区进行减选，形成一个倒梯形选区，然后用前景色填充。（5）设置前景色RGB 为（136、127、104）的一种深灰色，在图层面板，单击上一步创建的图层左边的“眼睛”将图层关闭，然后在关闭的图层下方创建一个新图层，用设置好的深灰色填充。上一页下一页返回9.11 商品售后、品牌、商家信息展示图的设计（6）重新显示被关闭的图层，确定当前工作的图层为深灰色填充所在的图层，执行编辑菜单下的斜切命令，适当移出一点深灰色填充。（7）执行Ctrl+D 命令取消选择，设置前景色RGB 为（245、122、172），选取工具箱中的圆形选择工具，设置羽化值为0 像素。（8）在图层面板创建一个新图层，运用圆形选择工具绘制一个大小合适的圆形选区并用前景色填