资源简介

(共41张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
实践篇
第 4 章
精准转化——商品详情页
4.1　认识商品详情页
4.3　商品详情页的布局方式
4.2　商品详情页的内容安排
4.4　设计与制作针织衫详情页
4.5　商品详情页的切片与导出
4.4　设计与制作针织衫详情页
4.4.1　设计针织衫详情页
4.4.2　制作针织衫详情页
4.4　设计与制作针织衫详情页
本节以针织衫详情页的设计与制作为例，学习商品详情页的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch4”→“针织衫”文件夹中的“针织衫详情页 .psd”文件。
（1）内容安排。
（2）配色分析。
（3）布局方式确定。
4.4.1　设计针织衫详情页
4.4.2　制作针织衫详情页
步骤1　新建一个名为“针织衫详情页”，宽度为750像素，高度为2300像素，分辨率为72像素/英寸，颜色模式为RGB颜色的文档。
1．制作针织衫宣传版块
提示
不同平台对商品详情页尺寸的要求有所不同，通常淘宝PC端店铺装修要求商品详情页的宽度不超过750像素，高度自定（根据页面内容的多少设定）。因此，可以先设置一个预估高度，然后在具体制作过程中根据实际需求进行调整。
4.4.2　制作针织衫详情页
添加文本和图片
步骤2　选择“横排文字工具” ，在图像编辑区上方单击添加文本光标后，输入“HOT SELLING”，然后按“Ctrl+A”组合键全选文本，接着在工具属性栏中设置文本的字体为EU-B8，字体大小为 75 点，字体颜色为黑色（#000000）。采用同样方法输入其他文本并设置文本属性。
置入本书配套素材“素材与实例”→“Ch4”→“针织衫”文件夹中的“模特 1.jpg”文件，并调整其大小和位置。
绘制白色折线
4.4.2　制作针织衫详情页
步骤3　选择“钢笔工具” ，在工具属性栏的“选择工具模式”下拉列表中选择“形状”项，然后设置填充色为无，描边色为白色，描边宽度为2像素，接着在模特右侧绘制一条折线。
4.4.2　制作针织衫详情页
步骤4　新建一个图层，选择“椭圆选框工具” ，按住“Shift”键的同时在折线左侧顶端绘制一个直径为7像素的正圆选区，然后将前景色设置为白色，接着按“Alt+Delete”组合键填充选区，最后按“Ctrl+D”组合键取消选区。
步骤5　同时选中步骤3的折线图层和步骤4创建的正圆图层，按“Ctrl+E”组合键将其合并。双击合并图层的名称，然后在激活的编辑框中输入“指示器”，接着按“Enter”键确认，为合并图层重命名。最后为合并图层添加“投影”图层样式。至此指示器绘制完成。
为指示器添加“投影”图层样式
4.4.2　制作针织衫详情页
商品详情页内容较多，因此会创建很多图层，需及时对图层进行重命名，方便后续编辑区分。
提示
纯度
4.4.2　制作针织衫详情页
步骤6　使用“横排文字工具” 在指示器上方添加文本并设置文本属性，然后为文本添加与指示器一样的“投影”图层样式。
步骤7　采用步骤3～步骤6的方法，在模特左侧绘制指示器并添加文本，然后选中文本，选择“窗口”→“字符”菜单项，打开“字符”面板，在“设置行距”编辑框中输入“30点”，并按“Enter”键确认，调整文本行距。选中除“背景”图层外的所有图层，按“Ctrl+G”组合键进行编组并设置组名为“1”。
绘制指示器并添加文本
4.4.2　制作针织衫详情页
提示
商品详情页内容较多，每制作完一个版块，应对版块中的所有图层进行编组并自定义组名，便于后续操作与管理。
步骤1　使用“矩形工具” 在针织衫宣传版块下方绘制一个宽度为700像素，高度为170像素的矩形，并设置其填充色为白色，描边色为无。
4.4.2　制作针织衫详情页
2．制作针织衫信息描述版块
绘制白色矩形
1.3.2　店铺配色方案
步骤2　在白色矩形上添加文本并设置文本属性，制作版块标题。
步骤3　置入本书配套素材“素材与实例”→“Ch4”→“针织衫”→“信息描述”文件夹中的“白 .jpg”“黄 .jpg”“粉 .jpg”“灰 .jpg”“蓝 .jpg”“绿 .jpg”文件，并调整它们的大小和位置，然后在每款针织衫下方添加文本并设置文本属性。
制作版块标题　
置入图片并添加文本
由于本款针织衫为均码，故不安排尺寸信息。
4.4.2　制作针织衫详情页
增加文档高度
4.4.2　制作针织衫详情页
3．制作针织衫卖点版块
步骤1　选择“图像”→“画布大小”菜单项，打开“画布大小”对话框，单击“定位”中的 按钮，然后在“高度”编辑框中输入“5000” ，单击“确定”按钮，增加文档高度。
4.4.2　制作针织衫详情页
步骤2　利用“横排文字工具” 在针织衫信息描述版块下方添加文本并设置文本属性，然后在文本下方置入素材文件夹中的“模特 2.jpg”文件，并调整其大小和位置，接着在当前图层上右击，并从弹出的下拉列表中选择“栅格化图层”项，将其转换为普通图层。
使用“矩形选框工具” 框选图片右侧多余的背景，并按“Delete”键将其删除。选择“模糊工具” ，在工具属性栏中自定义画笔属性，然后在图片背景处涂抹模糊背景，使模特更突出，最后在图片右侧添加文本并设置文本属性。
编辑置入的图片并添加文本
4.4.2　制作针织衫详情页
步骤3　置入素材文件夹中的“细节1.jpg”文件，并调整其大小和位置。按“Ctrl+J”组合键复制细节图片，然后将其等比例缩小，接着为其添加“投影”图层样式。
4.4.2　制作针织衫详情页
设置投影参数　
步骤4　选中“细节 1”图层，选择“滤镜”→“模糊”→“高斯模糊”菜单项，打开“高斯模糊”对话框，在其中设置“半径”为3.0像素，然后单击“确定”按钮，模糊图片。
4.4.2　制作针织衫详情页
模糊图片
步骤5　在“细节1拷贝”图层上方新建一个图层，使用“矩形选框工具” 绘制一个宽度为 600像素，高度为880像素的矩形选区并为其填充白色，然后在白色矩形上再绘制一个宽度为560像素，高度为650像素的矩形选区，接着按“Delete”键删除选区内容，最后按“Ctrl+D”组合键取消选区。
绘制白色矩形并修剪
4.4.2　制作针织衫详情页
步骤6　在白色矩形上添加文本并设置文本属性，然后在文本下方绘制灰色（#e6e6e6）矩形，在文本“1”右侧绘制一条黑色斜线作为装饰。
添加文本和矩形、斜线装饰
4.4.2　制作针织衫详情页
步骤7　置入素材文件夹中的“细节2.jpg”“细节3.jpg”“细节4.jpg”“细节5.jpg”文件，并调整它们的大小和位置。复制步骤 7 中添加的文本和矩形、斜线装饰，修改文本内容后放在合适位置。
制作针织衫细节部分
4.4.2　制作针织衫详情页
4.4.2　制作针织衫详情页
步骤8　在“细节5.jpg”图片下方输入“模特展示”文本并设置其字体为方正大黑_GBK，字体大小为 70点，然后在“模特展示”文本下方输入“Model display”文本并设置其字体为汉仪中黑简，字体大小为 30 点。
新建一个图层，使用“矩形选框工具” 在文本上绘制一个宽度为380像素，高度为70像素的矩形选区，然后选择“编辑”→“描边”菜单项，打开“描边”对话框，在其中设置描边参数，单击“确定”按钮，为选区添加描边，最后按“Ctrl+D”组合键取消选区。
步骤10　置入素材文件夹中的“模特3.jpg”文件，自行调整其大小后移至合适位置。
设置描边参数
4.4.2　制作针织衫详情页
制作文本装饰框
4.4.2　制作针织衫详情页
步骤11　在“模特3”图片下方添加文本，然后将中文文本字体设置为方正大黑_GBK，字体大小设置为37.5点，英文文本的字体设置为EU-B8，字体大小设置为20点，接着绘制一个灰色矩形作为装饰。
置入素材文件夹中的“模特4.jpg”文件，调整其大小后移至合适位置。采用同样方法添加文本并置入素材文件夹中的“模特5.jpg”文件。
添加文本并置入图片
4.4.2　制作针织衫详情页
设计商品卖点版块时，在商品图片之间加入文本，可在避免画面显得呆板的同时宣传商品特点。
实用技巧
4.4.2　制作针织衫详情页
步骤12　置入素材文件夹中的“模特6.jpg”文件，调整其大小并移至合适位置，使用“矩形选框工具” 框选图片中的模特，然后单击“图层”面板底部的“添加图层蒙版”按钮 ，裁剪图片。
利用图层蒙版裁剪图片
步骤13　置入素材文件夹中的“模特7.jpg”“模特8.jpg”文件，并利用图层蒙版将其裁剪后移至合适位置。
4.4.2　制作针织衫详情页
4.4.2　制作针织衫详情页
步骤1　绘制一个适当大小的灰色矩形，然后在灰色矩形上添加文本并设置文本属性。
添加文本和矩形装饰
4．制作针织衫售后服务版块
4.4.2　制作针织衫详情页
步骤2　在步骤1添加的文本下方绘制两个大小不等的灰色矩形，并设置大矩形的描边色为白色，描边宽度10像素。
绘制矩形
4.4.2　制作针织衫详情页
步骤3　选中小矩形所在的图层，置入素材文件夹中的“绵羊 .jpg”文件，然后将其适当缩放后移至小矩形上，接着将光标移至两个图层之间（当前图层与小矩形图层），按住“Alt”键，当光标呈 状时单击，将图片剪切到小矩形中。采用同样方法将素材文件夹中的“棉花 .jpg”剪切到大矩形中。
将素材图片剪切到矩形中
4.4.2　制作针织衫详情页
步骤4　采用“制作针织衫宣传版块”中步骤3～步骤5的方法，制作黑色指示器，然后在指示器旁边添加文本并设置文本属性，接着绘制灰色矩形作为装饰。
绘制黑色指示器并添加文本和矩形装饰
4.4.2　制作针织衫详情页
步骤5　使用“矩形工具” 绘制一个宽度为300像素，高度为500像素的矩形，置入素材文件夹中的“证书1.jpg”文件，调整其大小和位置后将其剪切到矩形中。
同时选中以上两个图层，按“Ctrl+T”组合键显示变换框，按住“Ctrl”键的同时向上拖动变换框的右侧边框，对证书做变形处理，完成后按“Enter”键确认。采用同样方法处理素材文件夹中的“证书 2.jpg”和“证书 3.jpg”文件。
4.4.2　制作针织衫详情页
处理证书
4.4.2　制作针织衫详情页
步骤6　在步骤5绘制的矩形图层下方新建一个图层，然后设置其图层混合模式为“正片叠底”，接着设置前景色为浅灰色（#e8e5e1），最后选择“画笔工具” ，自定义画笔大小和硬度后，在证书下方涂抹，绘制证书的阴影。
绘制证书的阴影
4.4.2　制作针织衫详情页
步骤7　在证书上方添加文本并设置文本属性。至此，针织衫详情页制作完成。
添加文本并设置文本属性
谢谢观看

展开更多......

收起↑