任务分析

本任务将继续为项目5中已经制作过主图的加湿器设计详情页，最终完成一张长图片。通过介绍不同用途的分屏图设计，重点表现出产品的功能、特点和可爱的风格。

1.首屏图片

详情页首屏为加湿器的焦点图。

1）创建文件

打开PS软件，新建一个宽度为790像素、高度为6000像素、分辨率为72像素/英寸、颜色模式为RGB颜色的文件，将文件名设置为加湿器详情页。

2）加入背景

使用左侧工具栏的矩形工具，添加一个与白色画面等宽的矩形，设置填充颜色为灰色RGB：98/98/98。添加植物图片素材，拖入详情页，放置在矩形图层上，右击植物图片图层创建剪贴蒙版，调整植物图片的位置（见图6-13）。

3）输入文字

使用文字工具，分三行输入“萌宠”“2019”“新款加湿器”，位置居中，颜色设置为白色。

●“萌宠”字体设置为方正趣宋简体，字号为72点，两个字之间的间距为200，颜色RGB：255/255/255。

●“2019”设为思源黑体，字号72点，颜色RGB：255/255/255，字间距50。

●“新款加湿器”设为方正兰亭细黑简体，字号30点，字距50。使下面两行字等宽，上下间距调小，左右居中。在最下方输入广告语“加湿更补水”，字号为24点（见图6-14）。

图6-13

图6-14

4）加入蒙版

选择椭圆工具，在中间绘制一个圆形，大小覆盖图片中的文字信息（见图6-15）。

单击右下角新建图层，将蒙版的位置移至背景素材上方。使用油漆桶填充黑色，调整不透明度为40%。在上方工具栏执行“选择”/“反选”，在右下图层工具栏中添加蒙版图层，隐藏椭圆图层（见图6-16）。

图6-15

图6-16

最后微调图片、文字的大小和相对位置，获得满意的布局效果（见图6-17）。将本屏所有的图层加入新建图层组中，自动命名为组1。

2.第二屏图片

第二屏图片为加湿器的正面展示。

1）背景图

使用矩形工具，加入第二屏的黑色背景。将要加入的加湿器照片拖入文件，右键单击图层选择“转换为智能对象”。移动图层至矩形上方，右键选择创建剪贴蒙版。调整图片的大小和位置（见图6-18）。

单击下方调整图层，选择“曲线”。在弹出的窗口中，分别调整线条上下的两点（见图6-19），使明暗更加突出。右键选择创建剪贴蒙版。

图6-17

图6-18

图6-19

2）输入文字

输入第二屏的标题和广告语，可直接从主图中复制文字图层。设置标题为方正趣宋简体，字号60。下方文字为方正兰亭细黑简体，字号30。居中对齐（见图6-20）。

3）加入素材

选择烟雾素材，加入图片中。调整大小和位置，将烟雾不透明度调整为60%（见图6-21）。将第二屏的所有图层加入图层组2。

图6-20

图6-21

3.第三屏图片

选择矩形工具，绘制矩形框，将图片素材文件拖至矩形框内，调整图片尺寸大小。

选择文字工具，输入“治愈系设计”“秋冬的一份礼物”，字体为方正趣宋简体，字号60，对齐方式为右对齐，设置行距72。然后在文字下方输入“创意设计，萌宠的救赎”，字体为方正兰亭细黑简体，字号30，上下行靠右侧对齐。将图片、文字的位置、大小分别进行微调，将布局调至更平衡的状态（见图6-22）。

4.第四屏图片

1）调整图片

选择矩形工具，绘制矩形框，将图片素材拖至矩形框中，按“Shift”键调整图片大小，使其超出矩形框范围（见图6-23），按回车键，单击图片图层，右键选择剪贴蒙版。

图6-22

图6-23

单击属性栏新建图层蒙版，选择画笔工具，调整画笔大小为600像素，选择柔边圆。用白色画笔涂抹图片上边缘，至原图的绿色背景被虚化（见图6-24）。

然后选择黑色的蒙版图层，使用画笔涂抹人物的头发轮廓，将其再次显示出来（见图6-25）。

图6-24

图6-25

2）添加文字

将第一行文字改为“秋冬，喝水更需要补水”，居中对齐。第二行文字改为“干净的季节，空调房，皮肤喝水更应补水”。微调背景图的位置和大小，完成本屏布局的调整。将本屏上部的图层归入图层组4。

3）加入多个图片

使用矩形工具，绘制颜色为黑色，宽190像素、高400像素的矩形（见图6-26）。复制3个相同矩形，并向右移动，使4个矩形均匀排列。

选定要加入的第一个图片素材，将其加入文件。设置图片图层，使图片图层位于矩形图层上方（见图6-27），矩形为图层蒙版。单击图片图层创建剪贴蒙版。

图6-26

图6-27

同理加入第二、第三、第四个图片素材，得到如图6-28所示的画面。

4）加入小标题

设置矩形宽为190像素、高60像素，将其置于左侧第一张图片下方并对齐。

调整矩形不透明度为60%，加入白色文字小标题“皮肤干燥”，设置大小为28点，与矩形居中对齐，将文字图层置于矩形图层上方（见图6-29）。

图6-28

图6-29

复制标题文字与背景，分别与右侧的几张图片底端对齐。分别修改后几个标题文字（见图6-30）。将本屏下方所有图层加入图层组4副本。（注意：每一个文字图层均需置于矩形图层上方，否则无法显示文字。）

图6-30

5.第五屏图片

第五屏图片为加湿器的功能展示。

1）调整背景图

复制第四屏上部的图层组，移动该图层于最上方。修改图层组名称为图层组5。删除图片图层，将所需图片拖至PS文件中，修改标题为“加湿滋润一步到位”，说明的文字内容改为“不受限制更满足不同环境加湿要求”，设置对齐方式为水平居中，如图6-31所示。

2）加入图标1

在文件夹中选择要加入的图标素材，拖入PS文件，在粘贴的弹窗中选择智能对象，单击确定。调整图标大小和位置（见图6-32）。

使用椭圆工具，为图标加入圆形边框，大小与图标外缘相同。

使用椭圆工具，为图标加入圆形边框，将圆形填充为“无”，边线为黑色，点数设为1。将图标的图层移至圆形图层上方。选中图标、圆框两个图层，移动至文字左下（见图6-33）。

图6-31

图6-32

图6-33

复制圆形图层，将其移至图标和小圆下方。微调大小至比内圆稍大一些，与其中心对齐。(www.daowen.com)

选择图层中的“效果”，设置图标为“颜色叠加”，在拾色器中设为灰色。选中内圆图层，将线段宽度改为1像素（见图6-34）。

使用文字工具，在图标下方加入相应的宣传语“睡觉加湿”。修改大小为24点，字体为方正兰亭细黑简体（见图6-35）。

3）加入图标2

将图标和文字的图层设为图层组，复制并右移，获得4个并列的图标（见图6-36）。

选中4个图层组，设置上方的对齐方式为竖向分布，使间距相同。

拖入第二个图标，调整大小和位置，删掉复制的第一个图标。

选择图层效果为颜色叠加，混合模式正常，在拾色器中使用取色，设置图标颜色与第一个的黑色相同。调整内部的图标文件大小，修改下方文字（见图6-37和图6-38）。完成第二个图标的调整。

图6-34

图6-35

图6-36

重复上述步骤，更换图标3、图标4及其说明文字。复制上方的说明文字，修改为本页中部的文案“工作学习办公宿舍加湿”，移动位置至左右居中，字号设为36，如图6-39所示。将本页图层归入图层组5。

图6-37

图6-38

图6-39

6.第六屏图片

第六屏图片为加湿器的宣传语。

添加图层蒙版，使用柔边圆画笔，先用黑色将图片上边缘擦除。

改用白色的小尺寸画笔，将人物的头发重新涂抹清晰（见图6-40）。

7.第七屏图片

第七屏图片为加湿器的使用步骤。

1）调整背景

在工具栏中使用矩形工具，为图片加入本屏的背景，填充色设置为RGB：238/238/238。尺寸W为795像素，H为895像素。使用横排文字工具，输入文字“简单四步开启滋润之旅”，设置字体为“方正兰亭中粗黑简体”，字体大小为36点，颜色为RGB：27/27/27，居中对齐，如图6-41所示。

图6-40

图6-41

2）添加图文1

使用工具栏当中的矩形工具，填充色为白色。设置宽度W为350像素，高度H为300像素。将其置于文字左下方。按住“Alt”键复制矩形图层，移至右侧，与左侧形状居中对齐，如图6-42所示。

加入素材“步骤一”，覆盖在左侧矩形上。在图层面板中将“步骤一”图层居于左侧矩形图层之上，右击“步骤一”图层创建剪贴蒙版，将照片设为剪贴画效果，按“Ctrl+T”调整图片大小及显示位置。在图片下方输入序号和文字“1.准备安装”，设置字体为“方正兰亭细黑简体”，字体大小为24点，颜色为RGB：27/27/27，与矩形图片水平居中对齐，如图6-43所示。

图6-42

图6-43

3）添加其他图文

重复上述步骤完成其他图文的添加。在图层面板中创建新组，将有关第七屏加湿器的使用步骤的所有图层置入其中，如图6-44所示。

8.第八屏图片

第八屏图片为加湿器的具体参数。

1）设置标题

绘制标题的矩形背景。在工具栏中选择矩形工具，填充色为RGB：232/85/79，设置宽W为791像素，高度H为164像素。单击页面，创建矩形。在矩形中输入文字“产品参数”，设置字体为“方正兰亭中粗黑简体”，字体大小为48点，颜色为白色，居中对齐。使用矩形工具在文字下方绘制出矩形，填充色为白色，设置宽W为70像素，高H为2像素，调整文字和矩形居中对齐。输入英文标题“PRODUCT PARAMETERS”，设置字体为“方正兰亭中粗黑简体”，字体大小为14点，颜色为白色，如图6-45所示。

图6-44

图6-45

2）美化背景

在工具栏中选择自定形状工具，在上方属性栏的形状库中选出要用的雪花图案“雪花3”。在页面拉伸至高度超过红色矩形，形状默认，填充颜色为白色。将雪花移至左上，调整不透明度为10%，旋转图形并微调大小，如图6-46所示。

复制雪花图层，移至左下和右下，分别调整大小，完成标题的背景设置，如图6-47所示。

图6-46

图6-47

3）加入设计主体

将素材“商品正面图”置入页面中，调整大小与位置，使产品主体居中。在图层面板中对“商品正面图”设置图层蒙版，模式为正常，前景色为黑色，擦除照片四周的明显边缘，如图6-48所示。

4）设计标尺

在左侧工具栏中选择直线工具，在图片右上方加入一条横向直线，填充色为黑色，设置宽W为54像素，高H为1像素，粗细为1像素。在横向直线的中心位置下拉出一条垂直的竖线，填充色为黑色，设置宽W为1像素，高H为193像素，粗细为1像素。在图层面板中按“Shift”键连选之前所作的横线和竖线，按“Ctrl+J”复制，在工作区域将所复制出来的线条移至下方，选择菜单栏中的“编辑”/“变换”/“旋转180度”，获得垂直对称的两组线段，如图6-49所示。

图6-48

图6-49

在商品右下方拉出一条垂直的竖线，填充色为黑色，设置宽W为1像素，高H为27像素，粗细为1像素。在竖线的中心位置拉出一条横向直线，填充色为黑色，设置宽W为97像素，高H为1像素，粗细为1像素。在图层面板中按“Shift”键连选之前所作的横线和竖线，按“Ctrl+J”复制，在工作区域将所复制出来的线段移至左侧，选择菜单栏中的“编辑”/“变换”/“旋转180度”，获得水平对称的两组线段，如图6-50所示。

5）输入数字

输入文字“143 mm”和“88 mm”，设置字体为“方正兰亭中粗黑简体”，字体样式为“Regular”，字体大小为18点，颜色为RGB：58/58/58。将文字“143 mm”顺时针旋转90°。在商品下方输入文字“象牙白”，字体设置为“方正兰亭中黑简体”，字体样式为“Regular”，字体大小为28点，颜色为RGB：58/58/58，如图6-51所示。

6）加入参数文字

图6-50

图6-51

使用文字工具，输入产品的参数名称，设置字体为“方正兰亭纤黑简体”，字号为24点，行距为72，颜色为RGB：58/58/58。设为左对齐。按“Alt”键复制文字图层，平移至右侧，使用横排文字工具修改文字内容，如图6-52所示。

7）设置表格

在第一、二行文字中间插入横线，填充颜色RGB：170/170/170。设置宽W为615像素，高H为1像素，粗细为1像素。按照上述设置分别完成剩下横线的添加，如图6-53所示。在图层面板中创建新组，将产品参数的所有图层都置入其中。

图6-52

图6-53

9.第九屏图片

第九屏图片为加湿器的包装展示。

1）设置标题

在图层面板中选中上一屏有关产品参数的标题图层，按“Ctrl+J”复制。在工作区域将复制的图文移到第九屏，使用横排文字工具修改中文、英文内容为本屏标题，如图6-54所示。

图6-54

2）调整照片

打开素材“商品+外包装”，调整图片的大小和位置，置于标题下方。在图层面板中对“商品+外包装”图层设置蒙版，模式为正常，前景色为黑色，擦除照片四周的明显边缘，如图6-55所示。

3）添加文字

在素材“商品+外包装”左下角绘制圆角矩形，填充颜色RGB：232/85/79，设置宽W为167像素，高H为40像素，圆角半径为10像素。在圆角矩形内插入文字，设置字体为“方正兰亭细黑简体”，设置字号为22点，颜色为白色。复制图形和文字，平移至右侧，重复上述操作完成其余图形的添加和调整，如图6-56所示。创建新组，将本屏内的元素归为图层组。

图6-55

图6-56

完成加湿器详情页的制作，单击保存，并将图片输出为JPEG格式。