任务分析
本任务对花瓶的详情页制作过程进行分解说明，按顺序、分层次地完成本商品的图文设计。
1.整体展示图
打开PS软件，执行“文件”/“新建”命令，在弹出的“新建”对话框中设置文档的各项参数，如图6-57所示。
输入新文件名称——花瓶详情页，设置空白文档的大小为宽度790像素、高度7606像素，“预设”选择“自定”，分辨率为72像素/英寸，颜色模式为RGB，默认8位，背景内容为白色，单击“确定”，即获得竖向的白色画布。
单击左侧工具栏中的矩形工具，在页面上绘制矩形，尺寸为宽790像素、高1089像素，填充颜色RGB：20/20/22，描边颜色无，单击页面，确定创建矩形。使用移动工具将其移到花瓶详情页头部，如图6-58所示。
图6-57
图6-58
在菜单栏中单击“文件”，打开“细节78”素材图片，对图片的饱和度进行调整。在图层面板底部单击“创建新的填充或调整图层”，勾选“自然饱和度”，调整自然饱和度为-6，饱和度为-7，如图6-59所示。
按住“Ctrl”键选中两个图层，右击鼠标选择“合并图层”，如图6-60所示。
单击菜单栏中的“图像”/“图像大小”，选择“约束比例”，调整宽度为790像素，如图6-61所示。
图6-59
图6-60
图6-61
将调整后的“细节78”素材图片置入花瓶详情页的头部，在图层面板中将“细节78”素材图片的图层置于矩形图层之上，单击“细节78”素材图片的图层，按“Ctrl+Alt+G”创建剪贴蒙版，使矩形限制“细节78”素材图片的显示状态。
按“Ctrl+T”自由变换工具，调整“细节78”素材图片的大小和位置，如图6-62所示。
在工具箱中选择横排文字工具，在图片上方输入文本内容，设置“一个高颜值”文本字体格式为“思源黑体CN”、72点、黑色，字体样式为“Bold”，字符字间距为25。设置“轻奢花瓶”文本字体格式为“思源黑体CN”、72点、黑色，字体样式为“Bold”，字符字间距为300。
按“Ctrl”键在图层面板中选中两个文字图层，调整文字的大小与位置。
在工具箱中选择圆角矩形工具，在文字下方绘制与文字等宽的圆角矩形，设置填充色为RGB：227/215/204，描边颜色无，尺寸宽394像素、高55像素，圆角半径为40像素，如图6-63所示。
在图层面板中单击圆角矩形图层，在图层面板底部单击“fx”按钮，勾选“颜色叠加”，设置混合模式为正常，颜色为RGB：59/59/59，不透明度为100%。
在工具箱中选择横排文字工具，输入文本内容，设置“<可能比你想象中更优秀>”文本字体格式为“思源黑体CN”、24点、RGB：221/221/228，字体样式为“Bold”，字符字间距为50。文字居于圆角矩形之上，按住“Ctrl”键选择文字和圆角矩形图层，在上方工具属性栏中单击水平居中对齐，如图6-64所示。
图6-62
图6-63
图6-64
在图层面板中新建一个图层，使用工具栏中的画笔工具，选择干边深描油彩笔笔刷，设置画笔大小为55像素，前景色RGB：212/159/202，按住“Shift”键画出高约155像素的笔刷。笔刷方向垂直于页面。
在工具箱中选择竖排文字工具，输入文本内容，设置“薰衣草”文本字体格式为“思源黑体CN”、24点、RGB：255/255/255，字体样式为“Medium”，字符字间距为200。
按住“Ctrl”键选择文字和笔刷图层，在上方工具属性栏中单击水平居中对齐，如图6-65所示。
在图层面板中新建图层，居于“细节78”素材图片图层之上。不透明度设置为70%，使用画笔工具，按“Alt”键吸取“细节78”素材图片的背景颜色，画笔设置为“柔边圆”，画笔大小为600，涂抹“细节78”素材图片中左侧薰衣草，降低其饱和度，如图6-66所示。
图6-65
图6-66
在图层面板中创建新组，将之前所做的有关“整体展示图”的所有图层都置于新组当中，命名为1，如图6-67所示。
2.细节说明图
使用工具栏中的矩形工具在距离上张整体展示图275像素的距离处绘制一个矩形，设置填充色为黑色，描边颜色无，尺寸宽790像素、高721像素，如图6-68所示。
在工具箱中选择横排文字工具，输入文本内容，设置“新轻奢主义懂你所需”文本字体格式为“思源黑体CN”、72点、RGB：53/53/53，字体样式为“Bold”，字符字间距为50。
标题文字与上张图片间距为85像素，与下方矩形间距为115像素。
使用椭圆工具在上述文本内容之间绘制一个圆点，设置填充色RGB：53/53/53，描边颜色无，尺寸宽11像素、高11像素。单击“视图”/“显示”/“智能参考线”，将椭圆移至空格中间。当椭圆与文字、图片对齐时，会有粉红色智能参考线出现，如图6-69所示。
图6-67
图6-68
图6-69
在工具箱中选择圆角矩形工具，在标题下方绘制3个圆角矩形。设置填充色无，边框颜色RGB：62/62/62，描边宽度2像素，尺寸宽195像素、高43像素，圆角半径40像素。
在工具箱中选择横排文字工具，在3个圆角矩形中输入文本内容，设置“色料玻璃”“高温电炉”“22K手描真金”文本字体格式为“思源黑体”、26点、RGB：53/53/53，字体样式为“Regular”，居中对齐，如图6-70所示。
图6-70
在图层面板中创建新组，将上述所做的有关“细节说明图”的所有图层都置于新组当中，命名为2，如图6-71所示。
1）细节图1
在菜单栏中单击“文件”，打开“细节1”素材图片，将其覆盖在“矩形2”图层上方。调整图片大小与位置。在图层面板中单击“细节1”素材的图层，按“Ctrl+Alt+G”创建剪贴蒙版，使矩形限制“细节1”素材图片的显示状态，如图6-72所示。
图6-71
图6-72
在图片左下角输入文本内容“01”，设置文本字体格式为“DIN Medium”、60点、白色。
在数字“01”下方输入文本“真金才是真轻奢”，字体选择“思源黑体CN”，字体样式“Bold”，字体大小48点，所选字符的字间距为50，颜色为白色。在图层面板底部单击“fx”按钮，勾选“投影”，混合模式选择“正片叠底”，颜色RGB：82/82/82，不透明度35%，角度134度，使用全局光，距离1像素，扩展0%，大小为2像素。与上方“01”左对齐，如图6-73所示。
按住“Alt”键，单击文字“真金才是真轻奢”移至下方。然后修改文字内容为“升级22K真金，更显轻奢品质”，字体选择“思源黑体CN”，字体样式为“Normal”，字体大小为30点，所选字符的字间距为50，颜色为白色。在图层面板中按住“Shift”键连选“真金才是真轻奢”和“升级22K真金，更显轻奢品质”文字图层，调整位置，与数字“01”左对齐。
使用工具栏中的矩形工具，在数字下方添加横向的白色矩形。填充色为白色，描边无，尺寸为宽25像素、高3像素。单击页面，确定创建矩形。选择该矩形图层，按“Ctrl+J”键再复制两个矩形。三个矩形等距排列。将全部白色元素左对齐，如图6-74所示。
图6-73
图6-74
在图层面板中创建新组，将上述所做的有关“细节图1”的所有图层都置于新组当中，命名为3-1，如图6-75所示。
2）细节图2
在工作区按“Alt”键复制“细节图1”，在图层面板中修改文件夹名称为3-2。将所复制的图片向下移动至与上方“细节图1”间隔为35像素的留白区域，如图6-76所示。
单击“文件”，打开“细节2”素材图片，将图片置入详情页，覆盖在“细节图1”上，按“Ctrl+T”出现变换框后，再按住“Shift”键等比例调整图片大小。
图6-75
图6-76
在图层面板中将素材“细节2”图层拖入文件夹3-2，删除“细节1”素材图层，将素材“细节2”图层居于矩形图层之上。单击“细节2”素材图层，按“Ctrl+Alt+G”创建剪贴蒙版，使矩形限制“细节2”素材图片的显示状态。调整图片位置，如图6-77所示。
在图层面板中按住“Shift”键连选“真金才是真轻奢”文字图层、“升级22K真金，更显轻奢品质”文字图层、“01”数字图层以及三个白色矩形条，在上方工具属性栏中单击右对齐调整位置。修改文字内容，内容改为“02”“升级高温电炉”“提高玻璃通透质感”，右对齐文字，如图6-78所示。
图6-77
图6-78
在图层面板中新建图层，置于“细节2”素材图层上方，按“Ctrl+Alt+G”创建剪贴蒙版。前景色RGB：39/39/39，使用大小为800的画笔工具，涂抹在“细节2”素材图片的右下方位置，不透明度设置为60%，如图6-79所示。
3）细节图3
复制“细节图1”的图层组，将其整体向下移动至与上方“细节图2”间隔为35像素的留白区域，如图6-80所示。
图6-79
图6-80
在图层面板中选中“3-1”组、“3-2”组、“3-1副本”组，在上方工具属性栏中单击垂直居中分布。修改“3-1副本”组的名称为“3-3”，如图6-81所示。
单击“文件”，打开“细节3”素材图片，将图片置入详情页，覆盖在“细节图2”上，按“Ctrl+T”出现变换框后，再按住“Shift”键等比例调整图片大小。
在图层面板中将“细节3”素材图层拖入文件夹3-3，删除“细节2”素材图层，将素材“细节3”图层居于矩形图层之上。单击“细节3”素材图层，按“Ctrl+Alt+G”创建剪贴蒙版，使矩形限制“细节3”素材图片的显示状态。调整图片位置，分别修改序号和文字内容，如图6-82所示。
图6-81
图6-82
3.特征说明
在距离细节图下方80像素的位置，输入标题文字“好产品细节是关键”，字体选择“思源黑体CN”，字体样式“Bold”，字体大小72点，行距为90点，所选字符的字间距为50，颜色RGB为53/53/53。调整位置至水平居中，如图6-83所示。
输入下方说明文字“好工艺不褪色”，字体选择“思源黑体CN”，字体样式“Regular”，字体大小24点，所选字符的字间距为50，颜色RGB为53/53/53，如图6-84所示。
单击“文件”，打开素材“工艺品”，调整其大小，置于文字上方。选中素材“工艺品”图层，在图层面板底部单击“fx”按钮，勾选“颜色叠加”，混合模式为“正常”，颜色RGB：231/147/101，不透明度100%。
选择工具栏中的自定形状工具，在上方工具属性栏中单击“形状”/“水波”，设置填充颜色为黑色，在文字下方插入此元素，大小与上方图标相同，如图6-85所示。
图6-83(www.daowen.com)
图6-84
图6-85
其余图标、文字、自定形状的制作与上述步骤一致。四个产品卖点素材间距为40像素。创建4个新组，将图标、文字、自定形状分别置入进去，如图6-86所示。
在图层面板中选择素材“花瓶”图层，在图层面板底部单击“fx”按钮，勾选“描边”，大小为1像素，位置“外部”，混合模式“正常”，不透明度100%，填充类型“颜色”，颜色RGB：234/162/122，如图6-87所示。
图6-86
图6-87
在工具栏中选择直线工具，在产品卖点素材中间画出分割线。填充无，描边颜色RGB：229/229/229。描边宽度为1像素，描边选项虚线0、间隙2。尺寸宽1像素、高201像素，粗细1像素，如图6-88所示。
复制虚线并右移至第二、三个图标的右侧，在相邻文字间的空白处水平居中。
创建新组，将全部竖线置于新的文件夹中，统一设置不透明度为70%。创建新组，将“特征说明”所有图层元素都置入其中，命名为4。完成的特征说明如图6-89所示。
图6-88
图6-89
4.工艺展示图
1）工艺图1
在距离产品卖点下方55像素的位置创建矩形。使用工具栏中的矩形工具，填充颜色RGB：249/239/238，描边无，尺寸宽790像素、高2606像素。单击页面，确认创建矩形，如图6-90所示。
输入文字“用料足更厚重”，字体选择“思源黑体CN”，字体样式“Bold”，字体大小72点，所选字符的字间距为50，颜色RGB为42/42/42，水平居中对齐。
在标题下方输入文字“加厚瓶身瓶底，赋予更好的质感，同时让花瓶摆放更平稳”，字体选择“思源黑体CN”，字体样式“Regular”，字体大小28点，所选字符的字间距为50，颜色RGB为42/42/42，如图6-91所示。
图6-90
图6-91
使用圆角矩形工具在屏幕中间插入圆角矩形。填充色RGB为255/177/134，尺寸宽700像素、高649像素。圆角半径40像素。单击页面，确认创建圆角矩形。圆角矩形与上方文字以及与两侧页边均保持一定的间隔，如图6-92所示。
单击“文件”，打开素材“细节4”，置入矩形图层上方，按“Ctrl+T”出现变换框后，再按住“Shift”键等比例调整图片大小，单击“细节4”素材图层，按“Ctrl+Alt+G”创建剪贴蒙版，使矩形限制“细节4”素材图片的显示状态。调整图片位置，如图6-93所示。创建新组，将“工艺图1”所有的图层都置入其中。
图6-92
图6-93
2）工艺图2
在图层面板中单击包含“工艺图1”图文元素的文件夹，在工作区按“Alt”键复制并移至下方位置，如图6-94所示。
修改标题为“摆放哪里都刚刚好”，说明文字改为“餐桌|沙发|办公|窗边|床头柜|茶几”，如图6-95所示。
单击“文件”，打开素材“工艺图2”，在工作区将素材覆盖在所复制出来的“工艺图1”上。在图层面板中，删除复制组当中的“工艺图1”素材图层，将“工艺图2”素材图层放于矩形图层之上。单击素材“工艺图2”图层，按“Ctrl+Alt+G”创建剪贴蒙版，使矩形限制“工艺图2”素材图片的显示状态。按“Ctrl+T”出现变换框后，再按住“Shift”键等比例调整图片大小，如图6-96所示。
图6-94
图6-95
图6-96
使用工具栏当中的椭圆工具，画出椭圆形。填充色RGB：249/239/238，描边无，尺寸宽24像素、高23像素，调整位置，如图6-97所示。
使用工具栏当中的多边形工具，在工具属性栏中选择填充色RGB：249/239/238，描边无，边长为3，调整位置，将两个图形拼接成对话框的形状，如图6-98所示。
在椭圆当中输入文字“黄色百合花”，字体选择“思源黑体CN”，字体样式“Medium”，字体大小30点，行距为36点，颜色RGB为42/42/42，如图6-99所示。
图6-97
图6-98
图6-99
3）工艺图3
在图层面板中新建组，将“工艺图2”的所有图层归为一个图层组。在工作区按“Alt”键复制“工艺图2”图片，向下移动至与上方“工艺图2”间隔为30像素的留白区域，如图6-100所示。
单击“文件”，打开素材“工艺图3”，在工作区将素材覆盖在所复制出来的“工艺图2”上。在图层面板中删除复制组当中的“工艺图2”素材图层，将“工艺图3”素材图层居于矩形之上。单击素材“工艺图3”图层，按“Ctrl+Alt+G”创建剪贴蒙版，使矩形限制“工艺图3”素材图片的显示状态。按“Ctrl+T”出现变换框后，再按住“Shift”键等比例调整图片大小。
重复上述“工艺图2”的对话框的制作步骤，输入文字“粉色郁金香”，字体选择“思源黑体CN”，字体样式“Medium”，字体大小30点，行距为36点，颜色RGB为42/42/42，如图6-101所示。
图6-100
图6-101
5.产品参数图
1）标题
在距离上方“工艺图3”60像素的位置输入英文标题“|product parameters|”，字体选择“DIN Medium”，字体大小20点，颜色RGB为42/42/42。在英文标题下方输入中文标题“产品参数”，字体选择“思源黑体CN”，字体样式“Bold”，字体大小60点，所选字符的字间距为50，颜色RGB为42/42/42。调整位置，居中对齐。
在标题下方分两列加入参数说明。使用文本框工具输入文字“品牌：目木家居”“品名：轻奢描金玻璃花瓶”“用途：餐桌、沙发、办公、窗边、床头柜、茶几”，字体选择“思源黑体CN”，字体样式“Medium”，字体大小20点，行距为36点，颜色RGB为61/61/61，文字左对齐，如图6-102所示。
在图层面板中选择左侧参数说明图层，在工作区按“Alt”键平移复制参数内容至右侧对称的位置，如图6-103所示。
保持上边缘对齐，分行修改文字内容为“材质：玻璃”“工艺：手工吹制”“颜色：烟灰色、透明色”。
图6-102
图6-103
在图层面板中按“Shift”键选择参数图层，整体移动两个文字图层，与标题水平居中对齐，如图6-104所示。
2）抠图
单击“文件”，打开素材“细节28”、素材“细节29”。使用钢笔工具对这两张图片进行抠图处理，如图6-105所示。
图6-104
图6-105
3）图片处理
将进行抠图后的两个素材添加到产品参数下方，分别调整图片的大小和位置，如图6-106所示。在图层面板中创建新组，将素材“细节28”和素材“细节29”置入其中。
图6-106
在图层面板底部单击“创建新的填充或调整图层”，选择“亮度/对比度”，亮度为31，对比度为-9。在图层面板中将“亮度/对比度”置于两个瓶身的文件夹之上，单击“亮度/对比度”，按“Ctrl+Alt+G”创建剪贴蒙版，调整两个瓶身的亮度，如图6-107所示。
图6-107
4）瓶身尺寸参考信息
在工具栏中选择直线工具，在左侧瓶身上方画出虚线，填充颜色无，描边RGB：61/61/61，描边宽度1像素，描边选项设置虚线3、间隙8，尺寸宽129像素、高1像素，粗细1像素。
制作椭圆，填充色RGB：61/61/61，描边无，尺寸宽7像素、高7像素。在图层面板单击该椭圆图层，按“Ctrl+J”复制，将两个椭圆移至虚线两端。
在虚线上方中间位置输入文字“8cm”，字体选择“思源黑体CN”，字体样式“Medium”，字体大小20点，颜色RGB为61/61/61，如图6-108所示。
在图层面板中创建新组，将上述所做的尺寸参考信息置入其中。在图层面板中单击刚刚所做的尺寸参考文件夹，在工作区按住“Alt”键，单击左侧瓶口的图标和文字并右移至第二个花瓶上方。拉长虚线至与瓶口同宽，右移右侧圆点至线段边缘，并修改相应文字为“10.5cm”。
左侧和右侧瓶底宽度的尺寸参考信息的制作方式与上述步骤一致，如图6-109所示。
在图层面板中单击有关“14cm”的尺寸参考文件夹，在工作区按“Alt”键复制，选择其中的虚线按“Ctrl+T”调整角度，拉长虚线，使其与瓶身上下两侧边缘对齐，调整圆点的位置至虚线两端点。更改文字内容为“25cm”，字体选择“思源黑体CN”，字体样式“Medium”，字体大小20点，颜色RGB为61/61/61，如图6-110所示。
图6-108
图6-109
图6-110
右侧瓶身高度的尺寸参考信息的制作方式与上述步骤一致，文字改为“19cm”，如图6-111所示。
5）小标题
使用工具栏中的圆角矩形工具，在左侧花瓶的左侧位置加入黑色圆角矩形，填充色RGB为61/61/61，描边无，尺寸宽28像素、高87像素，圆角半径40像素。使用直排文字工具输入文字“束口款”，字体选择“思源黑体CN”，字体样式“Normal”，字体大小20点，行距36点，颜色白色。文字在椭圆形中垂直居中对齐。
在图层面板中复制上述所作的黑色圆角矩形和文字，在工作区移至右侧花瓶旁，调整位置，修改文本内容。
使用直线工具在两个花瓶中间画出灰色竖线，填充色无，描边RGB：61/61/61，描边宽度1像素，描边选项设置虚线5、间隙5，尺寸宽1像素、高492像素，粗细1像素，如图6-112所示。
图6-111
图6-112
至此完成详情页全部内容的制作。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
