淘宝美工教程22集第22集：手机淘宝详情页制作28页PPT
详情页制作规范流程ppt课件
• 已有店铺视觉规范的，可以直接延续使用。
• 如果没有： • 1.从产品本身提取。 • 2.从LOGO提取。 • 3.从产品联想属性提取。
选择合适字体类型
• 字体相当于一个桥梁，相当重要。他对产品起到解释说
明，方便顾问阅读，同时也是重要信息的引导作用。
字体使用注意事项
• 一般不超过3种字体 • 重点部分加粗突出 • 字体颜色的深浅，不要太复杂，以免影响阅读 • 选择符合产品定位的字体 • 字号大小使用得体，不宜过大或过小等等
传淘宝店铺
• 1.切割好图，上传淘宝图片空间 • 2.发布宝贝使用
谢谢
• 多学习，多总结，扩展想法，拓展思维，建立自己的设
计风格。
修改定稿
• 把制作首稿输出JPG给老板或者运营进行审核。 • 如不符合要求，进行局部修改。直至定稿保存。
图片切割优化
• 美工在制作详情页往往是整张图，而我们在网上浏览，
是经过PS切片切图。
• 动辄数MB图，网络加载慢，所以进行图片切割优化。 • 课程18.19.20集详细讲解。
详情页制作规范流程
9大规范步骤
① 确定风格 ② 素材搜集 ③ 布局框架构建 ④ 确认配色方案 ⑤ 选择合适字体类型 ⑥ 文字和图片设计排版制作 ⑦ 修改定稿 ⑧ 图片切割优化 ⑨ 上传淘宝店铺
《网店美工说课》课件
详情页设计
总结词：关联推荐
详细描述：在详情页中可添加关联推荐，向顾客推荐与该商品相关的其他商品，提高客单价。
详情页设计
总结词
购物车集成
详细描述
详情页应与购物车集成，方便顾客将商品加入购物车或 直接购买。
活动页设计
总结词
活动氛围营造
详细描述
活动页是网店举办促销活动的页 面，设计时应注重营造活动氛围 ，吸引顾客参与。
推广图设计
总结词：创意吸睛
详细描述：推广图是用于广告投放的图片素材， 设计时应注重创意和视觉效果，吸引目标受众点 击。
推广图设计
01
总结词：突出卖点
02
详细描述：推广图应突出商品的 卖点或促销信息，让目标受众了 解广告内容。
推广图设计
总结词：简洁明了
详细描述：推广图设计应简洁明了， 避免过多的文字和元素，以免干扰目 标受众的注意力。
网店美工的职责
负责网店的视觉设计
包括店铺首页、商品详情页、促销活 动页等页面的设店铺 的标志、字体、色彩等视觉元素，并
保持品牌形象的一致性和统一性。
商品图片处理和美化
对拍摄后的商品图片进行修图、调色 、添加水印等处理，提高商品图片的 质量和美观度。
情感化设计将更多地应用于网店美工，通过情感 化的元素和故事来吸引用户。
电商行业的发展趋势
社交电商的崛起
数据驱动的设计优化
社交电商的兴起将为网店美工提供更 多的展示机会和创意空间。
电商行业对数据的重视将推动网店美 工的数据分析能力，实现精准设计和 优化。
跨境电商的发展
跨境电商的崛起将促进网店美工的国 际化发展，要求更高的跨文化沟通能 力。
选择与品牌调性相符的颜 色，保持整体色调统一。
《网店美工设计》教学课件
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
1 分辨率
分辨率有两种：屏幕分辨率和图像分辨率。
2 像素
图像由一个个点组成，这个点叫作像素。像素是图像中最小的单位。每个像素是一个小点，不同颜色 的点（像素）聚集起来就变成一幅动人的画面。
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
任务描述 任务技能
淘宝网成立于2003年5月10日，由阿里巴巴集团投资创办。淘宝网分为淘宝C店和淘宝商城2种 模式。淘宝C店是淘宝集市卖家所开设的店铺，这种店铺的门槛低，任何通过实名认证的人，只要 发布10件宝贝就可以免费在淘宝上开店。淘宝商城（天猫）是亚洲最大的购物网站淘宝网打造的在 线 B2C 购物平台，自2008年4月10日成立以来，吸引了 Kappa、JackJones、苏泊尔、联想、惠普等 在淘宝商城开设官方旗舰店，受到了消费者的热烈欢迎。
而淘宝网作为服装类电子商务行业的老大，是国内B2C及C2C 电子商务网站中发展最快、 最为成功的案例，以提供具有本土特色的电子商务平台服务为宗旨，并一直不断完善和发展。 其在中国的 C2C 市场中可谓是一家独大，市场份额更是超过了 90%，行业领先的地位暂时是 无人能撼动的。目前，服装服饰类产品已经成为网络零售的第一大商品，无论从数量还是交 易规模上都是如此。单是淘宝网上初具规模的卖家群体皇冠店铺就已达上万家之多，并且仍 保持着快速增长的态势。本次任务主要是实现淘宝女装店铺首页设计。
【功能描述】 ● 使用淘宝布局要素来设计女装店铺首页。 ● 头部包括店铺的logo、宣传标语、购物车、账户登录及客户中心的图标。 ● 主体包括各个分类版块下的图片链接。 ● 底部包括店铺的各项服务链接、搜索框及返回首页和顶部的按钮。
淘宝美工教程
淘宝美工教程简介淘宝是中国最大的在线购物平台，拥有海量的商品和用户。
为了吸引更多的买家，卖家在淘宝上需要精心设计自己的店铺和商品页面。
淘宝美工教程将介绍一些常用的美工技巧和工具，帮助卖家提升店铺和商品的美观度和吸引力。
1. 设计店铺banner店铺的banner是卖家展示店铺形象和特色的重要元素。
为了吸引买家关注和了解店铺，设计一个独特而吸引人的店铺banner至关重要。
Markdown插入图片的示例代码：2. 优化商品图片商品图片是买家购买决策的重要参考因素。
优化商品图片可以增加商品的吸引力和销售潜力。
Markdown插入图片的示例代码：3. 使用图片编辑工具使用图片编辑工具可以对店铺banner和商品图片进行进一步的处理和设计。
以下是几种常用的图片编辑工具：•Adobe Photoshop：功能强大的图像处理软件，可以进行图片调色、修饰和合成等操作。
•Canva：在线图形设计工具，提供了丰富的模板和设计元素，方便快速制作美观的图片和海报。
•GIMP：免费开源的图像编辑软件，功能与Photoshop相似。
4. 使用配色方案选择合适的配色方案可以使店铺和商品页面更加整洁、美观和专业。
以下是一些常用的配色方案：•欢快明亮：使用明亮、饱和度高的颜色，营造愉快活泼的氛围。
•温暖舒适：使用柔和、温暖的颜色，营造舒适温馨的感觉。
•简约清爽：使用简洁、纯净的颜色，营造简约、时尚的风格。
5. 增加文字说明除了图片，文字说明也是买家了解和决策的重要依据。
在商品页面中添加具有吸引力的文字说明可以提升商品的吸引力。
Markdown插入文字的示例代码：这是一个很棒的商品，具有以下特点：- 特点1- 特点2- 特点36. 优化商品详情页商品详情页是买家了解商品细节和决策购买的重要页面。
为了让买家更容易理解和决策购买，可以优化商品详情页的布局和组织。
Markdown插入链接的示例代码：点击[这里](商品详情页链接)查看更多商品详情。
淘宝宝贝详情描述页设计制作PPT课件
实力展示类：品牌、荣誉、资质、销量、生产、仓存
宣传品牌 培养品牌效益，进一步打消顾客购买顾虑，得到顾客认可
实力展示：相关推荐
提高转换率 同类产品推荐，提高店铺转换率
宝贝详情页的框架
在做宝贝描述的时候把自己当成非专业人士，突出价值点。
宝贝详情页的内容
实力展示：品牌、荣誉、资质 实力展示：销量—热销单品 促销说明：热销产品、搭配产品 促销说明：促销活动、优惠方式 商品展示：色彩、细节、优点、
卖点、包装
吸引购买：卖点打动、感情打动、
实力展示：品牌、荣誉、资质、销量、 生产、仓存
实力展示：相关推荐
宝贝详情描述页版式设计
一、宝贝详情描述页的规划 二、宝贝详情描述规划的剖析
宝贝详情描述页的规划
宝贝详情描述页设计思路
宝贝详情描述页是直接决定交易能否达成的关键因素。宝贝详情页怎样才能具有吸引力？ 怎样才能抓住消费者的心理？
以前很多店铺的第一屏，基本都是做宝贝推荐，关联一大堆新品/热卖/搭配套餐等等， 这个做法不是不可以，而是没有把握到最好。比如做活动，在流量激增的情况下，产品 活动页面做些“搭配套餐/新款促销”或者其它活动页面都是可以的，但是不能常年老 挂这些，多了反而让顾客厌烦。
对宝贝详情描述规划的剖析
实力展示：品牌、荣誉、资质
定义品质感，用来打消顾客的购买顾虑，让顾客一看就觉得很放心
实力展示：展示销量—热销单品
突出卖点，打造爆款，提高爆款的展现量
促销说明：热销产品、搭配产品、促销活动、优惠方式
提高转换率 打动顾客 提高热销商品展现量-发现潜力爆款 告诉顾客购买商品享受的优惠/店铺购包装
完整商品-包括配件-产品详细说明-商品展示
交易说明类：购买、付款、收货、验货、退换货、保修
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》—教学教案
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学教案第1章小结1、掌握网店美工的工作范畴。
2、掌握网店美工需要遵循的设计原则。
3、掌握网店美工工作流程。
课后练习课后练习——赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。
第2章2.4.1文案在网店美工中的重要性2.4.2文案的策划2.4.3文案的前期准备2.4.4文案的写作要点2.4.5主图文案的设计与编写2.4.6详情页文案的设计与编写2.4.7海报文案的设计与编写2.5课堂实训——鉴赏森林大叔旗舰店的首页2.6课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配练习2：赏析森马官方旗舰店首页的布局2.7拓展知识小结1、掌握色彩的搭配技巧。
2、掌握版式布局的知识。
3、掌握文字的运用原则。
4、掌握文案设计与编写。
课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。
练习2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。
第3章实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹污点练习2：抠取红酒商品图片并合成3.6拓展知识小结1、掌握修改商品图片尺寸及校正方法。
2、掌握优化图片的方法。
3、掌握抠取图片并合成的方法。
课后练习练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。
处理前后的对比效果如图所示。
其具体要求如下。
熟练掌握商品图片的优化方法。
分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。
练习2：抠取红酒商品图片并合成本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。
淘宝店铺首页设计资料ppt课件
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产 品：当海报 上要放置过 多的促销产 品，可以采 用这种版式。 产品平行排 版，中间利 用半透明的 框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图： 斜切式构图 会让画面显 得时尚，动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°， 文字往右上 方倾斜便于 阅读 。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同，形成差异化竞争
12
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
（一）海报设计思路：
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色
《网店美工》项目6--PC端与移动端详情页设计制作
有一句话是这样说的：“有道无术,术尚可求,有术无道,止于术”。意思是说有方法理论但是没 有技术，技术尚且是可以学到和培养，如果只有技术但缺少理论方向的支持，则只能停留于技 术层次，个人发展很容易到瓶颈，无法进一步发展，只能止步不前。网上有些人把美工分为技 术型美工和运营型美工，这个也是美工自我发展的一个过程。从营销学的角度分析，详情页的 设计思路基本上遵循以上五部曲。
京东商城
≤790px（像素）
自定义
Aliexpress（速卖通） ≤790px（像素）
自定义
— 17 —
6.2.2 PC端详情页设计
1.模板设计
步骤1 打开Photoshop软件，选择“文件”|“新建”菜单项，新建一个750像素*600像素空白文档，将文件 保存为“四件套详情.psd”。 步骤2 选择工具箱中的“横排文字工具”Ｔ，输入相应的文本“商品在展示”及“Commodity Display”， 设置字体为“微软雅黑”，颜色为“＃3ca5b8”，如图6-12左边部分所示。 步骤3 选择工具箱中的“矩形工具”，绘制一个颜色为“＃3ca5b8”的矩形，如图如图6-12右边部分所示。
— 15 —
6.2.1 页面内容布局
— 16 —
6.2.2 PC端详情页设计
在各大电商平台的宝贝详情页中，都有各自不同的详情页图片尺寸 和标准，以下为主流平台详情页图片建议尺寸
平台
详情页建议图片宽度 详情页单张图片高度
淘宝
≤750px（像素）
≤1500px
天猫商城
≤790px（像素）
≤1500px
在生产工艺上有无特别之处 消费者是否喜欢通过这种工艺生产的产品
淘宝美工是做什么的
淘宝美工是做什么的淘宝美工是做什么的《淘宝美工》是淘宝网店网站页面的美化工作者的统称。
周边工作有网店设计(平面设计)、P图(图片处理)。
是淘宝网店页面编辑美化工作者的统称。
主要设计主图、详情页等。
工作内容网站页面设计、美化、网店促销海报制做、把物品照片制作成宝贝描述中需要的图片、设计电子宣传单等。
技能要求以下详细的技能要求内容来自普通美工的培训课程表：第一部分软件基础及代码编写(重要)A：photoshop使用从入门到高手级特训20天左右)B：Dreamweaver,Flash使用从入门到高手级特训(15天左右)C：coreldraw使用从入门到高手级特训(10天左右)第二部分色彩设计理论在网店美工设计中的应用(10天左右)(通过本课程的学习，可以建立起一整套的色彩应用体系，让设计作品的色彩更能突出作品主题)1课色彩学的基本原理光线与色彩色彩的三大属性色彩的混合色彩的表示方法2课色彩的生理与心理性以及在网店美工调色与设计中的应用色彩的表情色彩的象征色彩的联系，色彩的喜好。
3课色相对比配色在网店美工设计中的讲解与训练4课明度对比配色在网店美工设计中的讲解与训练5课纯度对比配色在网店美工设计中的讲解与训练6课面积对比配色在网店美工设计中的讲解与训练7课形状对比配色在网店美工设计中的讲解与训练8课位置对比配色在网店美工设计中的讲解与训练9课网店美工设计中色彩调和规律和方法第三部分平面设计理论在网店美工中的应用(10天左右)(通过本课程的学习，可以让学员掌握专业的平面设计构成基础知识。
让设计作品更具有美学价值。
)1课，网店美工设计的基本图形与表现特征2课，相册设计美感原理第一法则:变化与统一和谐与对比节奏与韵律对称与平衡比例与分割3课,网店美工设计中点线面特征的应用4课网店美工设计中形与形的位置关系(网店美工中构成设计的表现形式以及在网店美工设计中的应用)5课重复构成设计讲解与训练6课近似构成设计讲解与训练7课渐变构成设计讲解与训练8课发射构成设计讲解与训练9课特异构成设计讲解与训练10课密集构成设计讲解与训练11课对比构成设计讲解与训练12课肌理构成设计讲解与训练13课空间构成设计讲解与训练第四部分网站实战特训课程(与其它课程同步进行)A：淘宝网店的图片处理技法1、PS图像编辑、图像修饰及修补2、PS调整图片的色彩，制作特殊艺术效果等3、PS滤镜效果，照片合成，效果图后期合成等4、宝贝描述美化B：淘宝店铺风格与色彩搭配1、网页配色技巧与颜色的表现力2、店铺颜色风格定位及店招制作C：淘宝店铺装修设计1、宝贝店铺LOGO、招牌、宝贝特效设计2、宝贝详情页制作杭州起程美工设计培训3、旺铺导购分类及描述设计4、旺铺店标和店招的制作与发布5、旺铺装修模板应用技巧6、旺铺装修设计实践杭州起程美工培训D：淘宝店铺促销广告设计1、淘宝店铺整体形象设计2、网店促销海报的制作(网店特价、打折、积分、促销商品等活动进行海报设第五部分商业摄影特训课程(6天左右)A:专业数码单反摄影基础知识1、光圈快门感光度2、摄影构图，专业广告摄影灯光打法3、数码单反相机的设置与使用B:商业摄影实战拍摄1、服装面料拍摄灯光2、反光物品拍摄3、金银及玉器拍摄其他信息淘宝美工的待遇：据统计，网店美工的工资待遇一般在4000元/月左右，部分掌柜还包吃住，再有好的会交5险1金。
淘宝美工工作内容
淘宝美工工作内容
淘宝美工作为一种电商运营的重要职业，职责是通过各种设计手段和技能，在淘宝等电商平台上为商家设计和制作产品图片、详情页、Banner广告、推广图文和店铺形象等等。
淘宝美工通常需要具备较高的艺术和设计素养，掌握专业设计软件的使用。
具体来说，淘宝美工的工作内容包括以下几个方面：
1.产品图片设计：根据商品的特点和市场需求，在平面设计的基础上，通过精心的拍摄和
处理，制作出逼真、美观的产品图片，同时辅以高质量文字描述和展示方式，尽可能提升产品在网站中的曝光率和销售量。
2.商品详情页设计：根据电商平台的规范和用户习惯，为商家的产品设计功能详细、排版
合理、美观易懂的详情页面，以达到引导用户消费的效果。
3.Banner广告设计：通过创新的设计思路和富有吸引力的效果，为电商平台和商家的活
动服务，制作宣传海报、广告Banner等等，以提高品牌的曝光率和影响力。
4.推广图文设计：通过有趣、吸引人的内容，精心制作短视频、图文、海报等形式的营销
推广材料，提升品牌曝光度和用户关注度。
5.店铺形象设计：为商家设计符合品牌形象和消费者口味的店铺LOGO、首页装修、页面
风格等等，通过视觉感受的塑造，增强品牌形象的认知度和信任度。
总之，淘宝美工作为电商运营中的一种核心职业，致力于通过设计创意和图像表现手法，为商家及其品牌制作出高质量的产品图片、详情页、广告等等，以达到品牌宣传和销售促进的目的。
淘宝页面商品详情页abf法则
淘宝页面商品详情页abf法则如何利用销售法则FABE原理制作淘宝页面商品详情页。
F代表特征(Features)：产品的特质、特性等最基本功能；以及它是如何用来满足我们的各种需要的。
例如从产品名称、产地、材料、工艺定位、特性等等方面深刻去挖掘这个产品的内在属性，找到差异点。
特性，毫无疑问就是要自己品牌所独有的。
每一个产品都有其功能，否则就没有了存在的意义，这一点应是毋庸置疑的。
对一个产品的常规功能，许多人员也都有一定的认识。
但需要特别提醒的是：要深刻发掘自身产品的潜质，努力去找到竞争对手和其他人员忽略的、没想到的特性。
当你给了顾客一个“情理之中，意料之外”的感觉时，下一步的工作就很容易展开了。
A代表作用(Advantages)：A代表由这特征所产生的优点(Advantages)：即(F)所列的商品特性究竟发挥了什么功能？是要向顾客证明“购买的理由”：同类产品相比较，列出比较优势；或者列出这个产品独特的地方。
可以直接，间接去阐述。
B代表利益(Benefits)：B代表这一优点能带给顾客的利益(Benefits)：即(A)商品的优势带给顾客的好处。
利益推销已成为推销的主流理念，一切以顾客利益为中心，通过强调顾客得到的利益、好处激发顾客的购买欲望。
这个实际上是右脑销售法则时候特别强调的，用众多的形象词语来帮助消费者虚拟体验这个产品。
E代表证据(Evidence)E代表证据(Evidence)：包括技术报告、顾客来信、报刊文章、照片、示范等，通过现场演示，相关证明文件，品牌效应来印证刚才的一系列介绍。
所有作为“证据”的材料都应该具有足够的客观性、权威性、可靠性和可见证性。