任务分析

本任务为果汁茶制作电商详情页，展示出其天然、美味的感觉。

1.正面展示图

打开PS软件，执行“文件”/“新建”命令，在弹出的“新建”对话框中设置文档的各项参数。

输入新文件名称——果汁茶详情页，设置空白文档的大小为宽度790像素、高度6000像素，“预设”选择“自定”，分辨率为72像素/英寸，颜色模式为RGB，默认8位，背景内容为白色，单击“确定”，即获得竖向的白色画布，然后将图片素材导入。

使用文字工具插入主标题，字体设置为“方正大标宋简体”，字号80，颜色选择RGB：243/131/43。复制文字并向下移动，输入第二行文字。两行标题水平居中对齐，竖向留有一定间距。输入下方的黑色说明文字，字号30点。添加下方的英文内容，字号18，两行文字水平居中对齐。使用矩形工具在最下方插入线段，颜色选择RGB：243/131/43，长度与上方第一行英文相同，如图6-113所示。

选中本屏的文字等素材，归入图层组1。最后微调文字组合与图片的相对位置。

2.原材料展示

图6-113

1）细节图1

在第一屏下方插入横向的矩形，将农田背景的照片加入PS文件，调整大小并创建剪贴蒙版。设置文字大小为30点，行距36，字体为“思源黑体CN”，输入左上方的三行白色文字，左对齐。

选择要插入的茶叶图标，调整大小并置于左下角。为图层添加颜色叠加的效果，设为白色。设置文字为“逐浪帅宋斜楷体”，字号60点，白色，输入小标题。修改字号为30点，字体“DIN Medium Italic”，输入上方的英文内容，与中文左对齐。将图片水平翻转，使人物位于右侧，如图6-114所示。

2）细节图2

插入与画面等宽的矩形，设置填充颜色为RGB：153/206/135。在上方中部添加圆角矩形，填充颜色RGB：0/153/68。输入主标题，字体为“思源黑体CN”，颜色设为白色，36点，居中对齐。输入下方的说明文字，调整字号为30，颜色设置为RGB：0/153/68。第三行英文字号为18点，使用空格对单词进行分隔。

插入圆角矩形，与文字、页面两边保留一定间隔。插入水果的照片，放大并调整位置，设为蒙版图层，如图6-115所示。

图6-114

图6-115

3）细节图3

复制上一页横版的文字和图片元素，移动至本屏位置。分别修改文字和图片图层，所有文字参数与上一页相同，完成本页的内容调整，如图6-116所示。

3.产品展示图

1）展示图1

使用文字工具输入文字标题“产品展示”，字体选择“思源黑体CN”，字体样式“Bold”，字体大小60点，颜色RGB：33/33/33，所选字符的字间距为50。在文字标题下方输入“PRODUCT DISPLAY”，字体大小24点。两行文字标题水平居中对齐于页面，如图6-117所示。

图6-116

图6-117

绘制一个矩形框，填充颜色RGB：137/201/151。在矩形框置入素材“展示图1”，创建剪贴蒙版，使矩形框限制素材“展示图1”的显示状态。使用“亮度/对比度”对素材“展示图1”的亮度进行调整，亮度35、对比度8。在图层面板中选择“亮度/对比度”，对“展示图1”图层创建剪贴蒙版。效果如图6-118所示。

在素材“展示图1”右侧创建一个矩形，填充颜色RGB：167/132/10。对此矩形做个投影效果，选择“正片叠底”，颜色RGB：45/45/45，不透明度35%，角度48度，使用全局光，距离3像素，扩展0%，大小为21像素。在图层面板选择新建的矩形，对“亮度/对比度”创建剪贴蒙版，如图6-119所示。

图6-119(www.daowen.com)

图6-118

在此前矩形框的基础上再绘制两个矩形框，填充颜色分别为RGB：219/173/15、RGB：255/202/19。按“Shift”键连选这两个矩形，创建剪贴蒙版，使得矩形背景限制这两个矩形的显示状态。创建一个新组，将素材“展示图1”和之前所作的矩形全部置入其中。绘制矩形框，填充色无，描边颜色白色，描边宽度5像素，如图6-120所示。

在矩形图右上角绘制圆角矩形，填充色为白色，输入文字“金桔柠檬”，字体选择“逐浪帅宋斜楷体”，字体大小32点，颜色RGB：255/168/32，如图6-121所示。创建一个新组，将文字和圆角矩形置入其中。

图6-120

图6-121

将图标“柠檬”置入矩形图右侧，调整大小。为素材“柠檬”添加颜色叠加效果，混合模式为正常，颜色设为白色，不透明度100%。输入文字“柠檬汁”，字体选择“逐浪帅宋斜楷体”，字体大小23点，颜色为白色。其余三个素材的制作方式与上述步骤一致，如图6-122所示。

使用矩形工具绘制分割线，填充色无，描边为白色，描边宽度为2像素。依次复制两个出来，置于素材之间。在素材下方输入文字“清爽酸甜溢满舌头”，字体选择“逐浪帅宋斜楷体”，字体大小52点，颜色为白色，如图6-123所示。

图6-122

图6-123

2）展示图2和展示图3

在距离上图有一定间隔处绘制两个矩形图，两个矩形图之间留有一定的空白间隔。分别将素材“展示图2”和素材“展示图3”置于两个矩形图之上。分别创建剪贴蒙版，使矩形框限制素材“展示图2”和素材“展示图3”的显示状态。移动照片位置、调整大小，使主体居中展示。使用“亮度/对比度”调整素材“展示图2”和“展示图3”的亮度，亮度为6、对比度为7。效果如图6-124所示。

4.产品信息图

复制“产品展示图”的两行主标题文字，移至本屏的上方中部，分别修改中文和英文内容。加入素材“细节11”，调整其大小，添加蒙版图层，使用画笔工具将照片边缘的浅灰色适当虚化。使用“亮度/对比度”调整图片亮度，亮度为19、对比度为0。在图层面板中右击“亮度/对比度”，对“细节11”图片创建剪贴蒙版，如图6-125所示。

图6-124

图6-125

在右侧输入文字“营养成分表”，字体选择“思源黑体CN”，字体样式“Regular”，字体大小32点，颜色为黑色，所选字符的字间距为50。绘制矩形图，填充颜色RGB：255/169/33，依次复制两个矩形图，三个矩形图之间留一定的空白距离。分别在三个橘色矩形图中输入文字，字体选择“思源黑体CN”，字体样式“Regular”，字体大小18点，颜色为白色。然后分别在空白区域输入文字，颜色为黑色。效果如图6-126所示。

输入左下方的文字标题“蜜谷·果汁茶”，字体选择“方正大标宋简体”，字体样式“Regular”，字号42点，颜色RGB：236/152/19。输入下方的说明内容，字体选择“思源黑体CN”，字体样式“Regular”，字体大小24点，行距48点，颜色为黑色，文字两端分别与屏幕左右两侧保持一段空白距离。将画布的下边缘裁剪至与文字下方距离约一行字，确定并完成详情页的制作。

项目小结

本项目通过对详情页设计基础的讲解，以及三个商品的具体页面制作，使读者掌握电商详情页的设计过程。在详情页的设计中，页面构成主体包括细节图、场景图、尺码表等，布局则应根据产品特点选择相应的排版方式。在具体产品的详情页设计中，不同的功能和特点要分别体现，如加湿器注重表现加湿功能、可爱的特点，花瓶则重在形状、图案的表达，果汁茶要体现外包装和饮品的吸引力等。

同步实测

一、思考题

1.在商品详情页的设计中，哪几类图是比较重要、必须要制作的？

2.在花瓶的详情页设计中，哪些页面布局是常见的？

二、实践题

任选一款衬衫，为其设计一个商品详情页，要求整体风格大气、简约、实用。