2017年淘宝美工教程,手机淘宝详情页制作讲解
详情页制作规范流程ppt课件

• 已有店铺视觉规范的,可以直接延续使用。
• 如果没有: • 1.从产品本身提取。 • 2.从LOGO提取。 • 3.从产品联想属性提取。
选择合适字体类型
• 字体相当于一个桥梁,相当重要。他对产品起到解释说
明,方便顾问阅读,同时也是重要信息的引导作用。
字体使用注意事项
• 一般不超过3种字体 • 重点部分加粗突出 • 字体颜色的深浅,不要太复杂,以免影响阅读 • 选择符合产品定位的字体 • 字号大小使用得体,不宜过大或过小等等
传淘宝店铺
• 1.切割好图,上传淘宝图片空间 • 2.发布宝贝使用
谢谢
• 多学习,多总结,扩展想法,拓展思维,建立自己的设
计风格。
修改定稿
• 把制作首稿输出JPG给老板或者运营进行审核。 • 如不符合要求,进行局部修改。直至定稿保存。
图片切割优化
• 美工在制作详情页往往是整张图,而我们在网上浏览,
是经过PS切片切图。
• 动辄数MB图,网络加载慢,所以进行图片切割优化。 • 课程18.19.20集详细讲解。
详情页制作规范流程
9大规范步骤
① 确定风格 ② 素材搜集 ③ 布局框架构建 ④ 确认配色方案 ⑤ 选择合适字体类型 ⑥ 文字和图片设计排版制作 ⑦ 修改定稿 ⑧ 图片切割优化 ⑨ 上传淘宝店铺
宝贝详情设计思路以及操作流程

一、宝贝详情页面规划的思路
• “宝贝详情页内容设计”
• 1.收藏+关注 轻松赚10元优惠券或者购物立减5元 优惠幅度可以调整
• 2.焦点图 突出单品的卖点,吸引眼球
• 3.推荐热销单品 大概3-4个必须是店铺热卖单品,性价比好的
• 4.产品详情+尺寸表 比如编号、产地、颜色、面料、重量、洗涤建议
• 5.模特图 至少一张正面 一张反面 一张侧面,展示不同的动作
宾夺主。因此此类商品的拍摄尽可能采用纯底来凸显宝贝。 • 场景图能够在宝贝展示的同时,在一定程度上烘托宝贝的氛围。通常需要较高
的成本和一定的拍摄技巧。这种拍摄手法适合有一定经济实力,有能力把控产 品的展现尺度的客户。因为场景的引入,运用的不好,反而增加了图片的无效信 息,分散了主体的注意力。 • 场景图需要体现出产品的功能,或者是一个唯美有意境的图片,可以衬托商品, 而不是影响商品展示
六、关于挖掘宝贝卖点
• 针对消费群体挖掘出本店的宝贝卖点。
• 一位老师的案例:一家卖键盘膜的店铺发现评价里中差评 很多,大多是抱怨键盘膜太薄,一般的掌柜可能下次直接进 厚一点的货。而这家掌柜则直接把描述里的卖点改为史上 最薄的键盘膜 结果出乎意料 评分直线上升,评价里都是关 于键盘膜真的好薄之类的评语 直接引导并改变了消费者 的心理期望达到非常良好的效果。
一、宝贝详情页面规划的思路
• 淘宝店的宝贝详情页设计是直接决定交易能否达成的关键 因素。宝贝详情页怎样才能具有吸引力,怎样才能抓住消 费者的心理
• 以前很多店铺宝贝描述第一屏,基本都是做宝贝推荐,关联 一大堆新品、热卖、搭配套餐等等,这个做法不是不可以, 而是没有把握好。比如做活动,当流量激增情况下,活动产 品页面做些“搭配套餐”、“新款促销”或者其他活动页面都 可以,但是不能常年老挂这些,多了反而让顾客方案。
《网店美工》教案--商品详情页设计

***学校《网店美工》教案第 1 页有兴趣的设计师们可以利用业余时间多进行了解。
如果能够成为集设计与文案才能于一身的高级人才,可想而知,你将备受青睐。
商品详情页设计是直接决定交易能否成功的其中一个重要因素,如何去构思使之更具有吸引力,更能抓住消费者的心理是关键。
我们需要收集和了解买家需要看什么,不需要看什么:图6-1 详情页所需内容板块示意接着,在再构思宝贝页面需要放置什么内容:图6-2 详情内容要点示意任务23 商品功能性介绍区域设计在做商品详情页规划前,清楚商品详情页每个区域的功能性,对后期布局设计起到相当重要的作用。
一般来说,商品详情页分三大区域:商品营销区、产品展示区、品牌包装区。
而三大区域则又细分成以下6个展现区,并形成商品描述的布局图:突出卖点:提炼商品的主要功能利益进行重点表现,吸引买家关注并进行浏览由整体到细节:先进行商品的整体展现,再进行商品的细节描述,这也是买家在购买商品时的浏览顺序情感联想:针对商品提炼情感利益,激发买家的感性购买需求导购服务:针对买家关注的商品问题进行导购式解答,逐步打消买家的购买疑虑售前售后:对买家进行购买后的一系列服务,从包装、物流到售后服务进行描述实力呈现:商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容关联销售:关联销售区域,以便买家跳出前有更多商品选择图6-3 详情页个区域内容细分示意另外,除了基础功能区域版块,为了提高买家逛店体验度以及店铺成交转化率,我们建议增加一些额外的版块,来为商品详情页的功能加分:1.增加买家购买欲望—促销活动区:在商品描述中加进给力的促销信息,让买家了解商品的同时清楚可以享受的促销优惠,让促销优惠来刺激买家的购买欲望。
2.增加客单价—商品推荐:商品推荐有两种,分为同类商品推荐,设计必须要突出同类商品中不同商品的优势。
告诉买家可以如何进行商品选择,如可以的话还可以体现出购买咨询和导购信息。
另一类则是搭配商品推荐:设计中要突出不同商品搭配的艺术,或功能或效果或视理念或促销导购写到这里来,但是文案不宣过长。
淘宝美工教程

淘宝美工教程简介淘宝是中国最大的在线购物平台,拥有海量的商品和用户。
为了吸引更多的买家,卖家在淘宝上需要精心设计自己的店铺和商品页面。
淘宝美工教程将介绍一些常用的美工技巧和工具,帮助卖家提升店铺和商品的美观度和吸引力。
1. 设计店铺banner店铺的banner是卖家展示店铺形象和特色的重要元素。
为了吸引买家关注和了解店铺,设计一个独特而吸引人的店铺banner至关重要。
Markdown插入图片的示例代码:2. 优化商品图片商品图片是买家购买决策的重要参考因素。
优化商品图片可以增加商品的吸引力和销售潜力。
Markdown插入图片的示例代码:3. 使用图片编辑工具使用图片编辑工具可以对店铺banner和商品图片进行进一步的处理和设计。
以下是几种常用的图片编辑工具:•Adobe Photoshop:功能强大的图像处理软件,可以进行图片调色、修饰和合成等操作。
•Canva:在线图形设计工具,提供了丰富的模板和设计元素,方便快速制作美观的图片和海报。
•GIMP:免费开源的图像编辑软件,功能与Photoshop相似。
4. 使用配色方案选择合适的配色方案可以使店铺和商品页面更加整洁、美观和专业。
以下是一些常用的配色方案:•欢快明亮:使用明亮、饱和度高的颜色,营造愉快活泼的氛围。
•温暖舒适:使用柔和、温暖的颜色,营造舒适温馨的感觉。
•简约清爽:使用简洁、纯净的颜色,营造简约、时尚的风格。
5. 增加文字说明除了图片,文字说明也是买家了解和决策的重要依据。
在商品页面中添加具有吸引力的文字说明可以提升商品的吸引力。
Markdown插入文字的示例代码:这是一个很棒的商品,具有以下特点:- 特点1- 特点2- 特点36. 优化商品详情页商品详情页是买家了解商品细节和决策购买的重要页面。
为了让买家更容易理解和决策购买,可以优化商品详情页的布局和组织。
Markdown插入链接的示例代码:点击[这里](商品详情页链接)查看更多商品详情。
淘宝美工如何自学

一、要知道如何自学淘宝美工,首先要知道什么是淘宝美工:淘宝美工是淘宝网店网站页面的美化工作者的统称。
周边工作有网店设计(平面设计)、P图(图片处理)。
主要设计主图、详情页等淘宝美工的具体工作内容包括但不限于网站页面设计、美化、网店促销海报制做、拍摄实物成照片、把物品照片制作成宝贝描述中需要的图片、设计电子宣传单等。
最近几年,随着移动客户端的增加,淘宝美工也针对手机端,平板电脑端制作出相应的页面美化。
总而言之,淘宝美工的任务就是要把网站页面上的所有内容变得更加美丽,让人过目不忘最好二、淘宝美工需要学:1、让自己的拥有审美能力。
把网店进行外观优化,进行色彩搭配,让人过目不忘,优化图片,美化图片。
2、熟练掌握色彩、平面的构成,了解分析各种商业色调以及板式构成。
深入分析各种设计色彩的纯度对比、色相对比、明度对比,精准了解色调的心理色彩。
3、字体的设计,字体的适合性。
在不同的页面、版式、封面上可以选择不同的字体,另外,字体的可识别性,字体的视觉美观性,字体的商业性,字体的艺术性,字体设计个性等等,都是美工设计需要掌握的。
3、美工不仅仅是做图,理解能力同样重要,洞悉策划的方案意图。
加上自己的能力,与洞悉能力才能完成一个活动最好的界面。
美工往往创意比起技术更重要,想成为资深的美工需要更大的努力。
在此引出一个广告术语:产品诉求,即:广告总是要突出所宣传产品的某一个吸引人的特点,这个突出的特点就是产品的诉求。
即最能够打动消费者的,商家最想展示的,产品最大的特色。
所以,一个优秀的美工,一定要有一个良好的营销思维;在做图的时候,一定要清晰地知道,图片传递出去的是什么信息,能否打动买家。
这个概念请转达给每一个默默后面付出的美工,一定要做一个懂产品,懂营销,懂广告的美工。
由此可见,淘宝美工不仅要求会相关的绘图软件,还要求懂一定的色彩搭配以及审美能力,还要有一定的文字功底。
看到这里,应该有很多人都倒吸一口冷气,觉得要学的东西实在太多了,其实不用担心,学习是一件循序渐进的事情,急不得,只要先熟练掌握设计软件就行了。
商品详情页制作

商品详情页制作 【流程图】
商品详情页制作的步骤 商品设计前作一个市场调查 商品调查结果及产品进行分析
商品定位 开始准备设计元素 商品制作详情页 图片上传到淘宝平台上制作详情页
商品详情页制作 一、网店详情页的构成
网店装修
一个好的详细描述主要包含以下几个方面: (1)商品重要的指标参数和功能 (2)5张及以上详细描述的图片。 (3)售后服务条款。
(2)产品细节图片 (3)模特或使用效果图片 (4)广告图
(5)SKU属性 (6)产品介绍 (7)使用说明 (8)产品卖点
(9)产品类比 (10)口碑 (11)包装展示 (12)售后说明 (13)企业文化展示、品牌文化展示 (14)关联营销 (15)活动图片
网店经营
Thank You
网店装修
区域 广告
产品图区
与产品相关的图片区
售后服务区
图片类型 欢迎光临图 关联营销模块 尺码表、产品图
摄像图 细节图 效果图 特点介绍图 真假对比图 消费者分享图 包装图 网购流程图 物流示意图 售后赔付图 请给好评图 FAQ常见问题解答 公司图 商品质量证商品整体图片
淘宝天猫美工 第3章 淘宝商品图片的收集和优化

图 3-5
所有主图必须是同一款商品,图片要求是正方形,图片大 小为 800 像素 ×800 像素。
若一款商品有多个颜色,5 张商品主图建议统一为一种颜 色,其他颜色主图可在宝贝详情页展示。
在商品细节表现上,服装类商品应包括款式特写、做工特 写、材质特写和配件特写等,其他商品的特写可根据自身 情况决定。
数码相机:拍摄商品最好选择单反相机,且具有很好的微 距功能,并应优先选择具有全手动功能的相机,如自定义 白平衡等功能,如图 3-1 所示。
三脚架:有了三脚架的辅助,就不用担心由于快门速度或 相机抖动所造成的对焦不准的问题,这样在拍摄的时候能 更加得心应手地用慢快门、小光圈来表现商品细节,特别 在微距拍摄和长时间拍摄过程中,借助三脚架拍摄能让拍 摄更轻松。如图 3-2 所示。
微距拍摄商品细节时,商品细节必须占该张图片 70% 的 位置。
商品细节图片必须单独拍摄,不能在原主图上进行裁剪。
3. 商品详情页图片的拍摄
商品详情页是影响商品成交转化最重要的因素之一,制作 详情页首先需要优质的商品图片,然后完成图片的后期处理, 最后再设计制作而成。也就是说,详情页的具体展示内容需要 摄影师、美工、运营等共同对商品和消费者分析后决定。
图 37
参数信息拍摄:对于一些特殊的商品,可能需要测量商品 尺寸或对商品进行称重等,如图 3-8所示。
图 3-8
款式颜色拍摄:多颜色或多款式的商品需要将每种颜色、 款式分别拍摄出来,然后再进行后期美化,如图 3-9 所 示。
图 3-9
各种细节拍摄:拍摄出能体现商品质量、特色、功能、卖 点的一些细节,如图 3-10 所示。
图 3-3
图 3-4
2. 商品主图的拍摄
网店美工实战教程第6章 商品详情页的制作

39
添加素材,使用“矩形工具” 和“直线工具” 制作具有中国结样式的形状,并在 其中输入深色的文字,强调产品的信息,达到吸引顾客的目的。
使用“画布大小”对话框延长画布,以便于继续制作,完成后添加素材并使用“矩
形工具” 和“横排文字工具” 制作买点图,使用“创建剪切蒙版”命令,将图片 载入到图图形中。 继续进行描述模块的制作,并使用“矩形工具” 和“套索工具” 对矩形进行三角 形的裁剪。完成后对文本和素材图片进行处理,完成宝贝描述的制作。
专业 品牌 图片质量
6.3.3 宝贝描述主要包含的内容
焦点图的完美 体现 温馨提示
22
1
5
主要 内容
快递与售后
2
产品信息的描述
4
产品卖点
3
23
内容导航
6.1 详情页设计要点
6.2 详情页模块的设置 6.3 详情页中的宝贝描述设计
6.4 详情页中宝贝描述的制作 6.5 综合实训——制作棉袜描述
6.4 详情页中宝贝描述的制作
11
商品详情页中除了出现该商品的具体信息外,还可罗列本店铺的其他宝贝,便于向买推荐 店铺内的其他产品,以促进销售。
6.2.3 宝贝排行榜模块
12
宝贝排行榜罗列了本店的宝贝销售情况,当顾客需要查看店铺中宝贝的销量和收藏量时,可 直接在该模块中进行查看。
6.2.4 客服中心的设置
1. 设置子账号 1.单击“子账号”管理超链接 2.输入部门名称
6.5 综合实训——制作棉袜描述
3. 操作步骤 (1)添加素材文件并对棉花进行蒙版 (2)绘制正方形并在对应的边绘制直线
40
6.5 综合实训——制作棉袜描述
41
(3)完成焦点图的制作
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
•电脑端详情页的导入
• 已经装修了电脑端详情页的宝贝,可以直接将其生成手机详情页。
• 制作电脑端详情页的时候,一定要注意所用字体的大小。 • 字体太小则不利于直接生成无线端详情页使用。
2017/1/8
2017/1/8
模板生成详情页
• 手机店铺详情页也可以使用“淘宝神笔”进行编辑,方便简单, 同时还可以导入设计师设计好的模板。
• 5.店铺特色和服务: • 填空:亲们,本店拥有______(店铺特色),在本店选购任何商 品,均享受_________(店铺服务)! • 示例:亲们,本店拥有杭州最优质的货源,全淘宝最清晰的手机 细节实拍图,同类商品最低廉的价格,在本店选购任何商品,均 享受十天无理由退换货服务,退换货产生的来回运费掌柜包哦。 •
三、文字要求:
• 1.中文字体大于等于30号字。 • 2.英文和阿拉伯数字大于等于20号字。 • 3.当需要添加的文字太多时,建议使用纯文本的方式编辑,这样 看起来更清晰。
四、音频(可选):
• 1.每个手机详情只能增加一个音频,时长建议不超过30秒,大小 不超过200K,格式支持MP3。 • 2.音频内容可以围绕产品卖点、品牌故事、产品特色、产品优惠 等等展开。
• 3.产品特色: • 填空:亲,我家的______(产品名称),和别家大不同, _________(产品特点特点),千万别错过呀! • 示例:亲,我家的黑芝麻,和别家大不同,是村里的老人炒制出 来的,是淘宝上唯一可以即食的黑芝麻,千万别错过呀。 • 4.产品优惠: • 填空:大家好,这里是______(店铺名称),恰逢________(优 惠理由)之际,我们推出________(优惠具体内容),大家不要 太眼花缭乱哦 !看准心仪的一款,赶紧下手吧! • 示例:添加好,这里是杰克牛仔,恰逢本店开店一周年之际,我 们推出买一送一的活动,买一条牛仔裤,马上送一双袜子,大家 不要太眼花缭乱哦!看准心仪的一款,赶紧下手吧。小:图片+文字+音频应小于等于1.5M,图片仅支 持JPG、GIF、PNG格式。
二、图片大小要求:
• 1.宽度480 像素- 620像素。 • 2.高度小于等于960像素。 • 3.格式为:JPG\GIF\PNG。 • 举例:可以上传一张宽度为480,高度为960像素,格式为JPG的 图片。
• 2.建议:可以采用多样化的表达方式:比如口语化的表达方式, 会显得更加亲切;比如激情的表达方式,会让人产生购物冲动; 比如有趣的模仿明星口吻,会让人有想听完的欲望。
•音频内容示例:
• 1.产品卖点: • 填空:大家好,欢迎光临______(店铺名称),我们的产品 ___________(描述卖点),喜欢请记得点击收藏哦! • 示例:大家好,欢迎光临美体小铺,我们产品纯植物提取,0添 加,安全有保障,还有美白淡斑的供销,喜欢请记得点击收藏哦! • • 2.品牌故事: • 填空:_____(品牌名称),_________(品牌口号),贴合亲的 心意,欢迎选购 • 示例:欧诗漫雨伞制造世家,每一把都是随时为你撑开的绚丽之 伞,贴合亲的心意,欢迎选购。 •
2017/1/8
2017/1/8
2017/1/8
2017/1/8
2017/1/8
手机详情页音频录制
2017/1/8
• 选择要上传的音频,大小不要超过200K,仅支持MP3格式,可以 找专业的配音录制,也可以自己使用手机录制,
•音频基本规范和建议:
• 1.基本规范:每个手机详情只能增加一个音频,时长建议不超过 30秒,大 小不超过200K,格式仅支持。