网店美工课件：情境14 详情页设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
新建图层固定尺寸
实例 关联推广标题条制作
步骤2：新建图层“纯色背景”尺寸为240X350，如图所示。
分块建图层
实例 关联推广标题条制作
步骤3：将模特拉近框内，调好要展示的位置“新建图层”颜色为“白色”，透明度为“60” 和模特有个层次感。
图层透明度
实例 关联推广标题条制作
步骤4：在模特“左上角”建一个“圆形”图层，右键“混合选项”，“样式”里双击颜色， 单击确定，如图所示。
怎么着手做一份好的详情页？
3 模板
1 分析 调查
方 法 论
2 参考
设计方法
流程
分析调查
设计方法
流程
分析调查
人群定位
产品定位
设计方法
流程
秘籍：参考+总结！
同 行
书 籍
风格
文案
颜 色 排 版
千万不要埋头苦思冥想！去找可以参考的一切资源！
设计方法 流程
模板
千图网
昵图网 我图网
……
千图网
设计方法
流程
图层样式
实例 关联推广标题条制作
步骤5：编辑好每个图片，再复制出来“左右”“上下”“对齐”，再上面“修改”文字信息 和模特图，如图所示。
依次复制在对齐
实例 宝贝页头介绍
步骤1：新建图层，尺寸自定义将扣好的模特拉到一个合适的位置，如图所示。
导入图片
实例 宝贝页头介绍
步骤2：选择好的天空背景导入图层里面，点击“创建新的填充或调整图层”调整色相饱和度 ，
《网店美工》
详情页设计
CONTENTS 丨 目录
一、认识详情页 二、详情页设计方法 三、详情页模块介绍及排序说明 四、详情页设计制作实例
CONTENTS COURSE
1
认识详情页
2
详情页设计方法
3
详情页设计制作实例
1
认识详情页
定义
传统零售可以用 多种方式同顾客 进行沟通，刺激 顾客购买。
定义
设计方法
模块排序
③看了细节之后我觉得都很不错，可能就会去看一下它的功能是否防干烧、是否使用安全、说 明说等。这就相当于在看描述也里的产品介绍文字
设计方法
模块排序
④如果这些都符合要求，就会再去看一下售后服务，是不是有保修，有没有全国联保等。
设计方法
模块排序
⑤再看看有没有公司的实力、品牌介绍，或者促销活动，如果都可以的话可能我就会购买了
步骤5：调整好每个图层的位置，再降文字编辑对齐下来，部分文字调为“暖色调”，整体看 起来比较暖，如图所示。
整体的结果
实例 标题条制作
步骤1：单击“自定形状工具”选好图案，直接单击拉出图案即可，大小按需要来调，如图示 。
自定型工具选项
实例 标题条制作
步骤2：将图标放置文字两边上下对齐好，在新建两个图层出来画两条线隔开，有个层次感， 如图所示。
文字编辑
实例 关联推广标题条制作
步骤4：新建图层:选择“图形”工具椭圆形工具绘制圆形，按住Shift和Alt绘制圆形，不会 将圆拉到变形了，如图所示。
绘制图形工具
实例 关联推广标题条制作
步骤5：选择图层“点击”右键选择“混合选项”，进入“样式”里面，“双击”“描边” 调整“大小”-“像素”，选择“颜色”为“白色”，单击“确定”就出现“图层”的描边的边 框了。
设计方法
模块排序
我们来模拟一下一个真实消费者的心理需求，这是一个递进的过程。 ①比如我想在超市里买一个电热水壶，走进去一看，刚好看到一个电热水壶正式我想要的那种 ，这就相当于在描述也看到的整体图片。
设计方法
模块排序
②接下来我可能会走进一些，拿起来看一下它的细节、做工，这就相当于宝贝描述页里的细节 图片。
Case丨 关联推广标题条制作
认识详情页
图层的边框描边
详情页设计方法
详情页模块介绍及排序说明
详情页设计制作实例
实例 关联推广标题条制作
步骤6：将每个图层分组起来，再复制三个出来，左右上下对齐好，文字直接改就可以， 如图所示。
创建组和复制
实例 关联推广标题条制作
步骤1:新建图层，宽度750，高度750固定好尺寸，以750除以3平分，如图所示。
步骤1：先在“Excel”表格里面绘制图标，将文字、数据填入表格里，再文字独立的表格里面 填充色块，将整个图标截图导入“PS”里面调好大小，如图所示。
尺码表制作
实例 尺码表制作
步骤2：根据衣服的尺码表的大小，将衣服详细介绍图放左边，如图所示。
衣服介绍
实例 宝贝展示制作
导入图片，将要展示不同的模特图排列下去，再中间编辑些文字，用“英文”字隔开，看起来 更舒服，如图所示。
矩形的透明度
实例 宝贝介绍制作
步骤5：将每个图片设计好依次“排版”下来，里面的设计小样左右上下对齐好，如图所示。
实例 宝贝介绍制作
介绍版型
实例 宝贝信息制作
导入图片，拉条辅助线出来，再新建一个色块，颜色可供模特衣服调色，将文字描边，这样以 下面的文字就有个分层显得显眼，如图所示。
信息制作
实例 尺码表制作
实例 宝贝展示制作
实例 宝贝展示制作
展示图
谢谢观看
电子商务只有页 面和顾客形成沟 通。
买家购物流程
买家
搜索关键词
产品 详情页查询
下单
定义
定义
定义
详情页是用于介绍品牌 和产品的功能（价值点） 以及产品卖点，进而促进 买家购买的介绍页面。
电脑端 详情页
定义
详情页尺寸和图片分辨率
尺寸：宽度750像素，高度没有限制。 制作原则：图片大小不超过100K左右。作图的时候，需要考虑用户浏览体验，图片太大加载速度
显示模特腰身
实例 宝贝介绍制作
步骤3：进入混合选项“图层样式”里面，单击描边颜色为“浅蓝色”，像素为“1”颜色可吸 取模特身上衣服的颜色，如图所示。
图形描边
实例 宝贝介绍制作
步骤4：新建一个矩形框，跟着圆形和文字控制合适的大小。在将矩形框颜色透明度拉到49% ，
透明度跟着图片整体调，合适即可，如图所示。
款式说明
实例 宝贝介绍制作
步骤1：导入模特图片，将图片放大拉到合适的视图，展现产品的主要特点，将多余的裁剪掉 ，
如图所示。
裁剪模特图
Байду номын сангаас
实例 宝贝介绍制作
步骤2：新建图层，颜色为白色，在拉个选区出来，不建新图层，单击“Del”键删除，放到腰 身，在复制一个出来，进入“混合选项”点击外发光，让图层显现处光影，如图所示。
如图所示。
调天空的色相饱和度
实例 宝贝页头介绍
步骤3：编辑文字，调到合适的大小，将文字的调为“倾斜度”，如图所示。
设计文字的倾斜度
实例 宝贝页头介绍
步骤4：导入气球图片，右键“混合选项”，图层样式里面描边“像素”调到3，“颜色”为白 色，“内发光”打开，如图所示。
气球透明和发光调节
实例 宝贝页头介绍
实例
4
详情页设计制作实例
实例 关联推广标题条制作
步骤1： 打开PS新建一个750像素X6000像素的白底画布（高度自定），如图所示。
新建图层
实例 关联推广标题条制作
步骤2：新建一个图层，样式固定大小，宽度和高度自己定义，如图所示。
图层高度和宽度
实例 关联推广标题条制作
步骤3：编辑文字，调整字体大小，字体设为英文字体样式“Chaparral Pro”如果是中文 字体的话效果就没这么好，再把样式设为平滑，如图所示。
慢，增加客户流失的几率。所以不建议一个图片太大。
定义
为什么要做详情页？
点击率
+
转化率
对于淘宝商品销售来说，点击率和转化率是决定其销售量的两个最重要的因素， 详情页设计至关重要，对于大多数淘宝卖家来说，详情页是其命脉所在。
有好的详情页，才会有高的成交量与转化率！
设计方法
2
详情页设计方法
设计方法
流程
模板
千图网
昵图网 我图网
……
千图网
设计方法
模块介绍
3
详情页模块介绍及排序说明
设计方法
模块介绍
设计方法
模块介绍
设计方法
模块介绍
设计方法
模块排序
一般情况下，针对大多数产品，我们可以这样排序
产品 海报
细节 展示
产品 卖点
联系 方式
交易 条款
售后 服务
设计方法
模块排序
为什么要这样安排？
把自己当成消费者，提出疑问！ 我为什么要购买你们的产品？ 这个东西好吗?怎么用？ 售后有保障吗？ 有色差吗？ 这个产品值不值这个价格？ 好不好吃 …… 充分了解客户的需求及心理！ 来安排我们详情页的内容和结构
实例 关联推广标题条制作
步骤2：新建图层“纯色背景”尺寸为240X350，如图所示。
分块建图层
实例 关联推广标题条制作
步骤3：将模特拉近框内，调好要展示的位置“新建图层”颜色为“白色”，透明度为“60” 和模特有个层次感。
图层透明度
实例 关联推广标题条制作
步骤4：在模特“左上角”建一个“圆形”图层，右键“混合选项”，“样式”里双击颜色， 单击确定，如图所示。
怎么着手做一份好的详情页？
3 模板
1 分析 调查
方 法 论
2 参考
设计方法
流程
分析调查
设计方法
流程
分析调查
人群定位
产品定位
设计方法
流程
秘籍：参考+总结！
同 行
书 籍
风格
文案
颜 色 排 版
千万不要埋头苦思冥想！去找可以参考的一切资源！
设计方法 流程
模板
千图网
昵图网 我图网
……
千图网
设计方法
流程
图层样式
实例 关联推广标题条制作
步骤5：编辑好每个图片，再复制出来“左右”“上下”“对齐”，再上面“修改”文字信息 和模特图，如图所示。
依次复制在对齐
实例 宝贝页头介绍
步骤1：新建图层，尺寸自定义将扣好的模特拉到一个合适的位置，如图所示。
导入图片
实例 宝贝页头介绍
步骤2：选择好的天空背景导入图层里面，点击“创建新的填充或调整图层”调整色相饱和度 ，
《网店美工》
详情页设计
CONTENTS 丨 目录
一、认识详情页 二、详情页设计方法 三、详情页模块介绍及排序说明 四、详情页设计制作实例
CONTENTS COURSE
1
认识详情页
2
详情页设计方法
3
详情页设计制作实例
1
认识详情页
定义
传统零售可以用 多种方式同顾客 进行沟通，刺激 顾客购买。
定义
设计方法
模块排序
③看了细节之后我觉得都很不错，可能就会去看一下它的功能是否防干烧、是否使用安全、说 明说等。这就相当于在看描述也里的产品介绍文字
设计方法
模块排序
④如果这些都符合要求，就会再去看一下售后服务，是不是有保修，有没有全国联保等。
设计方法
模块排序
⑤再看看有没有公司的实力、品牌介绍，或者促销活动，如果都可以的话可能我就会购买了
步骤5：调整好每个图层的位置，再降文字编辑对齐下来，部分文字调为“暖色调”，整体看 起来比较暖，如图所示。
整体的结果
实例 标题条制作
步骤1：单击“自定形状工具”选好图案，直接单击拉出图案即可，大小按需要来调，如图示 。
自定型工具选项
实例 标题条制作
步骤2：将图标放置文字两边上下对齐好，在新建两个图层出来画两条线隔开，有个层次感， 如图所示。
文字编辑
实例 关联推广标题条制作
步骤4：新建图层:选择“图形”工具椭圆形工具绘制圆形，按住Shift和Alt绘制圆形，不会 将圆拉到变形了，如图所示。
绘制图形工具
实例 关联推广标题条制作
步骤5：选择图层“点击”右键选择“混合选项”，进入“样式”里面，“双击”“描边” 调整“大小”-“像素”，选择“颜色”为“白色”，单击“确定”就出现“图层”的描边的边 框了。
设计方法
模块排序
我们来模拟一下一个真实消费者的心理需求，这是一个递进的过程。 ①比如我想在超市里买一个电热水壶，走进去一看，刚好看到一个电热水壶正式我想要的那种 ，这就相当于在描述也看到的整体图片。
设计方法
模块排序
②接下来我可能会走进一些，拿起来看一下它的细节、做工，这就相当于宝贝描述页里的细节 图片。
Case丨 关联推广标题条制作
认识详情页
图层的边框描边
详情页设计方法
详情页模块介绍及排序说明
详情页设计制作实例
实例 关联推广标题条制作
步骤6：将每个图层分组起来，再复制三个出来，左右上下对齐好，文字直接改就可以， 如图所示。
创建组和复制
实例 关联推广标题条制作
步骤1:新建图层，宽度750，高度750固定好尺寸，以750除以3平分，如图所示。
步骤1：先在“Excel”表格里面绘制图标，将文字、数据填入表格里，再文字独立的表格里面 填充色块，将整个图标截图导入“PS”里面调好大小，如图所示。
尺码表制作
实例 尺码表制作
步骤2：根据衣服的尺码表的大小，将衣服详细介绍图放左边，如图所示。
衣服介绍
实例 宝贝展示制作
导入图片，将要展示不同的模特图排列下去，再中间编辑些文字，用“英文”字隔开，看起来 更舒服，如图所示。
矩形的透明度
实例 宝贝介绍制作
步骤5：将每个图片设计好依次“排版”下来，里面的设计小样左右上下对齐好，如图所示。
实例 宝贝介绍制作
介绍版型
实例 宝贝信息制作
导入图片，拉条辅助线出来，再新建一个色块，颜色可供模特衣服调色，将文字描边，这样以 下面的文字就有个分层显得显眼，如图所示。
信息制作
实例 尺码表制作
实例 宝贝展示制作
实例 宝贝展示制作
展示图
谢谢观看
电子商务只有页 面和顾客形成沟 通。
买家购物流程
买家
搜索关键词
产品 详情页查询
下单
定义
定义
定义
详情页是用于介绍品牌 和产品的功能（价值点） 以及产品卖点，进而促进 买家购买的介绍页面。
电脑端 详情页
定义
详情页尺寸和图片分辨率
尺寸：宽度750像素，高度没有限制。 制作原则：图片大小不超过100K左右。作图的时候，需要考虑用户浏览体验，图片太大加载速度
显示模特腰身
实例 宝贝介绍制作
步骤3：进入混合选项“图层样式”里面，单击描边颜色为“浅蓝色”，像素为“1”颜色可吸 取模特身上衣服的颜色，如图所示。
图形描边
实例 宝贝介绍制作
步骤4：新建一个矩形框，跟着圆形和文字控制合适的大小。在将矩形框颜色透明度拉到49% ，
透明度跟着图片整体调，合适即可，如图所示。
款式说明
实例 宝贝介绍制作
步骤1：导入模特图片，将图片放大拉到合适的视图，展现产品的主要特点，将多余的裁剪掉 ，
如图所示。
裁剪模特图
Байду номын сангаас
实例 宝贝介绍制作
步骤2：新建图层，颜色为白色，在拉个选区出来，不建新图层，单击“Del”键删除，放到腰 身，在复制一个出来，进入“混合选项”点击外发光，让图层显现处光影，如图所示。
如图所示。
调天空的色相饱和度
实例 宝贝页头介绍
步骤3：编辑文字，调到合适的大小，将文字的调为“倾斜度”，如图所示。
设计文字的倾斜度
实例 宝贝页头介绍
步骤4：导入气球图片，右键“混合选项”，图层样式里面描边“像素”调到3，“颜色”为白 色，“内发光”打开，如图所示。
气球透明和发光调节
实例 宝贝页头介绍
实例
4
详情页设计制作实例
实例 关联推广标题条制作
步骤1： 打开PS新建一个750像素X6000像素的白底画布（高度自定），如图所示。
新建图层
实例 关联推广标题条制作
步骤2：新建一个图层，样式固定大小，宽度和高度自己定义，如图所示。
图层高度和宽度
实例 关联推广标题条制作
步骤3：编辑文字，调整字体大小，字体设为英文字体样式“Chaparral Pro”如果是中文 字体的话效果就没这么好，再把样式设为平滑，如图所示。
慢，增加客户流失的几率。所以不建议一个图片太大。
定义
为什么要做详情页？
点击率
+
转化率
对于淘宝商品销售来说，点击率和转化率是决定其销售量的两个最重要的因素， 详情页设计至关重要，对于大多数淘宝卖家来说，详情页是其命脉所在。
有好的详情页，才会有高的成交量与转化率！
设计方法
2
详情页设计方法
设计方法
流程
模板
千图网
昵图网 我图网
……
千图网
设计方法
模块介绍
3
详情页模块介绍及排序说明
设计方法
模块介绍
设计方法
模块介绍
设计方法
模块介绍
设计方法
模块排序
一般情况下，针对大多数产品，我们可以这样排序
产品 海报
细节 展示
产品 卖点
联系 方式
交易 条款
售后 服务
设计方法
模块排序
为什么要这样安排？
把自己当成消费者，提出疑问！ 我为什么要购买你们的产品？ 这个东西好吗?怎么用？ 售后有保障吗？ 有色差吗？ 这个产品值不值这个价格？ 好不好吃 …… 充分了解客户的需求及心理！ 来安排我们详情页的内容和结构