天猫网店美工教程项目8店铺首页视觉设计课件.pptx

1、 项目8店铺首页视觉设计淘宝天猫网店美工实战教程任务1 了解店铺首页内容导航任务2 设计首页焦点轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块3任务1 了解店铺首页一、任务描述 本例将自定义布局女包店铺首页的布局方式，其中收藏模块、全屏海报模块、促销模块、页尾模块等皆可使用自定义模块来实现，定义页面布局和使用该布局制作的首页效果。4任务1 了解店铺首页二、相关知识（一）了解淘宝店铺首页的基础模块l 宝贝推荐模块l 个性分类模块l 自定义区模块l 宝贝排行模块l 全屏宽图与全屏轮播模块l 默认分类模块l 图片轮播模

2、块l 宝贝搜索l 客服中心模块l 收藏模块5任务1 了解店铺首页（二）店铺首页模块布局的要点 店铺的模块布局并非是将所有装修模块直接排放到店铺中，而是根据自己店铺的风格、促销活动，以及客户的浏览模式、需求及行为来合理组合与布局模块。6任务1 了解店铺首页三、任务实施1、模板管理2、点击查看图片详情及操作（一）应用系统模板7任务1 了解店铺首页3、查看模板信息4、应用模板8任务1 了解店铺首页5、看到店铺的布局9任务1 了解店铺首页1、模块编辑2、宝贝设置（二）搭建首页框架10任务1 了解店铺首页四、新手试炼11任务1 了解店铺首页四、新手试炼12任务1 了解店铺首页内容导航任务2 设计首页焦点

3、轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块13任务2 设计首页焦点轮播图 本例将制作两张女款包包2 任务 设计首页焦点轮播图的全屏海报图，以便于轮播。一、任务描述14任务2 设计首页焦点轮播图二、相关知识（一）不同轮播图的尺寸要求全屏轮播图尺寸：全屏轮播图片的宽度为1920像素，高度一般以400800像素为最佳。15任务2 设计首页焦点轮播图常规轮播图尺寸：使用淘宝中的“轮播图”模块可以制作常规轮播图，其高度要求在100600像素以内，体积要求小于300KB，按宽度可细分为通栏轮播图（950像素）、右侧轮播图

4、（750像素）、左侧轮播图（190像素）。16任务2 设计首页焦点轮播图（二）首页焦点图的设计要点 店铺首页焦点图的设计与淘宝首页焦点图钻展的设计方法相似，包括构图技巧、配色方式、文本排版等，都要求简洁美观、主题突出、能够吸引买家等。但在设计全屏首页焦点图时需注意，由于显示器的分辨率大小不一致，为了保证全屏图片在任何显示器中都能完整地显示出图片中的重要信息，通常需要对图片的两边进行“留白”，即全屏图片左右两侧宽度为360像素的区域中不放置人物或商品图片，也不放置文案。17任务2 设计首页焦点轮播图三、任务实施1、添加素材2、制作投影（一）制作首张全屏海报图18任务2 设计首页焦点轮播图3、融合

5、商品与背景4、输入文本19任务2 直通车推广图设计5、设置画笔20任务2 直通车推广图设计6、绘制雪花7、添加雪花的效果21任务2 直通车推广图设计8、输入文本并添加形状22任务2 设计首页焦点轮播图1、绘制柔边圆2、变换图形（二）制作第二张全屏海报图3、绘制装饰条4、绘制装饰矩形、线条与摆台23任务2 设计首页焦点轮播图5、渐变填充摆台24任务2 设计首页焦点轮播图6.为摆台添加投影25任务2 设计首页焦点轮播图7.组合与排列商品8.设置图层样式9.组合与排列商品10.输入文本并变换文本角度26任务2 设计首页焦点轮播图11.设置渐变填充27任务2 设计首页焦点轮播图四、新手试炼28任务1

6、了解店铺首页内容导航任务2 设计首页焦点轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块29任务3 设计优惠券模块 本例将以“满减”形式制作淘宝女包店铺的优惠券，如满100优惠5元、满160优惠10元、满210优惠15，在制作时可以参考前面制作的女包海报，由于本例的女包店铺风格比较简洁，因此在设计优惠券时，应简洁大气，以文本为主、图形为辅。一、任务描述30任务3 设计优惠券模块二、相关知识优惠券的使用范围优惠券的使用时间限制设置使用张数限制优惠券的使用条件优惠券的最终解释权31任务3 设计优惠券模块三、任务实施1、

7、输入文本2、绘制圆角矩形3、复制并和合并图层4、均匀排列文本并添加虚线32任务2 商品图片的管理四、新手试炼33任务1 了解店铺首页内容导航任务2 设计首页焦点轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块34任务4 设计分类模块 本例先通过商品与图形的结合制作大气、美观的横向女包分类模块，制作时以矩形为设计的基本元素，然后结合制作的横向分类模块制作规范的纵向分类模块。一、任务描述35任务4 设计分类模块二、相关知识从店铺的装修风格宝贝分类图像的大小宝贝分类不宜太长分类名称36任务4 设计分类模块三、任务实施1、

8、布局页面2、添加素材（一）横排分类模块设计37任务4 设计分类模块3、输入文本4、绘制并描边手提包38任务4 设计分类模块5、输入文字并添加矩形39任务4 设计分类模块1、布局页面2、添加素材（二）纵向分类模块设计40任务4 设计分类模块3、绘制直线4、扩展画布41任务4 设计分类模块5、绘制直线6、扩展画布42任务4 设计分类模块四、新手试炼43任务1 了解店铺首页内容导航任务2 设计首页焦点轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块44任务5 设计宝贝促销模块 本例将通过海报的制作与多个单品的陈列组合，制

9、作大气、美观的横向女包上新预告与宝贝推荐模块，制作时以矩形为布局的基本元素，字体则采用方正系列的字体。一、任务描述45任务5 设计宝贝促销模块二、相关知识宝贝名称定义要全面、准确有足够的宝贝数量来支持上架和推荐在进行宝贝推荐时，宝贝的价格不宜过高，但也要控制成本。宝贝推荐位和下架时间相结合46任务5 设计宝贝促销模块1、添加背景与包素材2、绘制矩形（一）宝贝上新预告模块设计一、任务描述47任务5 设计宝贝促销模块3、收缩选区4、描边选区48任务5 设计宝贝促销模块5、输入文本6、编辑花瓣49任务5 设计宝贝促销模块7、动感模糊花瓣8、输入文本50任务5 设计宝贝促销模块9、划分板块10、布局图

10、片51任务5 设计宝贝促销模块1、添加背景与包素材2、绘制三角架（二）宝贝推荐模块设计52任务5 设计宝贝促销模块3、输入文本53任务5 设计宝贝促销模块4、复制树叶5、绘制直线6、输入文本54任务5 设计宝贝促销模块7、制作宝贝推荐框8、绘制直线55任务5 设计宝贝促销模块9、添加包素材56任务5 设计宝贝促销模块四、新手试炼57任务1 了解店铺首页内容导航任务2 设计首页焦点轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块58任务6 设计收藏区与客服模块 本例将分别设计收藏区与客服模块，制作收藏模块时以棱形为设

11、计的出发点；制作客服模块时将结合矩形、椭圆与卡通图片。一、任务描述59任务6 设计收藏区与客服模块二、相关知识 在浏览淘宝网页时，遇到喜欢的店铺可以点击收藏图标将其收藏，方便以后快速在我的收藏页面中再次访问。若店铺的收藏数量高，其曝光率也会相对于同行的其他店铺高，获得的流量也会相对增大。店铺收藏通常由文字和简单的广告语组成，一般较为简洁，店家为了吸引顾客眼球，通常会为其添加图片、花纹或是动态效果。若为其添加宝贝图片，可在提高收藏量的同时推销商品。（一）店铺收藏概述60任务6 设计收藏区与客服模块 一般情况下，客服区域以横条的形式位于网店首页的中间或底部位置，或以190像素的宽度位于店铺左侧的顶

12、部或中部位置，便于顾客在浏览部分商品后及时进行咨询，从而提升店铺的销量。（二）店铺客服区的概述61任务6 设计收藏区与客服模块1、添加背景与包素材2、输入文本（一）设计收藏图片一、任务描述62任务6 设计收藏区与客服模块3、创建帧动画4、添加阴影1、输入文本（二）设计客服区63任务6 设计收藏区与客服模块2、客服区布局3、添加并编辑素材64任务6 设计收藏区与客服模块四、新手试炼65任务1 了解店铺首页内容导航任务2 设计首页焦点轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块66任务7 设计页尾模块 本任务将从顾

13、客浏览店铺的便利度与购物常见问题出发，对女包店铺的页尾模块进行设计，设计时将应用到前面的虚线与矩形块。一、任务描述67任务7 设计页尾模块二、相关知识店铺底部导航返回顶部的文字或按钮收藏、分享店铺旺旺客服温馨提示一款具有代表性的页尾设计一般包含以下5点内容。68任务7 设计页尾模块1、设置直线2、绘制虚线一、任务描述69任务7 设计页尾模块3、输入文本4、绘制并编辑矩形70任务7 设计页尾模块5、客服区布局6、添加并编辑素材71任务7 设计页尾模块四、新手试炼72任务1 了解店铺首页内容导航任务2 设计首页焦点轮播图课后练习任务3 设计优惠券模块任务6 设计收藏区与客服模块任务4 设计分类模块任务5 设计宝贝促销模块任务7 设计页尾模块73课后练习 新建名为“婚纱店铺首页”的文件，利用搜集的婚纱素材制作店招、海报，添加新品、婚纱、礼服和小礼服的分类条，将不同风格的婚纱分栏排列，采用浅黄色的主色调，整体风格甜美、浪漫。74课后练习75谢谢观看店铺首页视觉设计淘宝网店美工一本通