淘宝天猫网店美工实战-视觉设计+店铺装修+移动端店铺（下篇共上中下3篇）

淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺（微课版）第8章制作PC端其他页面目录Contents8.1专题页的制作8.2活动页的制作8.3课堂实训——制作护肤品春节活动页8.1.1专题页的作用专题页可以集中输出要传达的信息，提高消费者的关注度，促使消费者做出购买决策，进而完成交易。下面将从4个方面对专题页的作用进行详解。补充、整合大量信息，吸引消费者注意力对大型或多个促销活动进行集中展示对外展示网店品牌形象和实力给网店带来流量，带动网店销售业绩8.1.2专题页的分类专题页主要可以分为两种，即陈述型和促销型。陈述型：一般是针对安全要求或价值较高的商品，展示的内容要能消除消费者对商品的顾虑，同时适当传递商品信息，加深消费者对网店的好感。促销型：促销型专题页主要通过促销活动来拉近消费者和商品的距离，增加消费者的购买概率。8.1.3制作圣诞节专题页制作圣诞节专题页时需要先确定主题，这里使用圣诞老人、圣诞树以及童话素材来体现圣诞节主题，并使用下雪夜背景与主题相契合，然后在下方添加商品信息。其具体操作如下。1添加背景2添加素材8.1.3制作圣诞节专题页3设置描边参数6设置渐变叠加参数5输入文字4设置投影参数7设置投影参数8添加小圣诞老人素材8.1.3制作圣诞节专题页9绘制形状10将形状转换为选区13绘制其他形状14绘制圆和圆角矩形11设置描边12绘制形状8.1.3制作圣诞节专题页17绘制圆角矩形18添加素材15输入文字16完成优惠券的制作8.1.3制作圣诞节专题页21输入文字19输入文字20绘制形状22绘制形状8.1.3制作圣诞节专题页24完成后的效果23复制并修改文字目录Contents8.1专题页的制作8.2活动页的制作8.3课堂实训——制作护肤品春节活动页8.2.1活动页的主题风格梦回童年1.故事性故事性是指通过一个故事或者一个能够贯穿页面的引子为中轴线，结合网店活动内容进行设计和策划。8.2.1活动页的主题风格以趣味性元素来提升娱乐性2.娱乐性娱乐性是指通过趣味性元素来进行页面设计或借助恶搞热点事件来提升页面的娱乐性。如图所示的活动页就融合了经典卡通娱乐元素，让消费者在看到页面时，就能感受到其趣味性。8.2.1活动页的主题风格以红色来突出促销感3.利益性利益性是指简单明了地通过页面渲染促销商品。网店美工在设计这类页面的通常会将利益是放在显眼的位置，以烘托促销氛围。以具有冲击力的视觉设计来体现促销感8.2.2制作11·11活动页本例将制作11·11活动页，在设计时通过紫色和线条以及文案让11·11的时尚感和促销感展现出来，完成后，依次添加活动内容和活动商品，让整个画面更加完整。其具体操作如下。1添加素材2添加图层蒙版8.2.2制作11·11活动页3设置图层混合模式4添加线条素材5添加渐变效果6设置描边参数7设置内阴影参数8.2.2制作11·11活动页8添加灯光9绘制圆角矩形11设置内阴影参数10设置描边参数12设置投影参数13输入文字8.2.2制作11·11活动页14设置图层样式参数15添加渐变效果17添加灯光16设置投影参数8.2.2制作11·11活动页18绘制圆角矩形并添加灯光20添加斜面与浮雕19输入文字21绘制矩形并输入文字8.2.2制作11·11活动页22设置描边参数23设置外发光参数24添加素材并绘制形状25绘制椭圆26添加素材并绘制形状27绘制矩形8.2.2制作11·11活动页28输入文字29绘制矩形30输入文字31输入文字并绘制矩形32完成后的效果目录Contents8.1专题页的制作8.2活动页的制作8.3课堂实训——制作护肤品春节活动页8.3课堂实训——制作护肤品春节活动页本例将制作一个护肤品网店的春节活动页。要求该活动页以商品促销为目的，以春节元素定位主题风格。同时加大优惠信息的展示力度。主色调可直接选择正红来渲染节日氛围。在结构上，可划分为焦点图、优惠券、活动区等，参考效果如图所示。实训目标8.3课堂实训——制作护肤品春节活动页实训思路根据实训目标，完成本实训主要需进行以下操作。（1）定位活动页主题风格。以春节为主题进行活动页设计，可以直接选取与春节相关的元素。本例以经典的正红和深蓝色作为主色，黄色作为辅助色，白色作为点缀色进行设计，同时添加中国元素作为页面装饰。（2）焦点图视觉设计。焦点图以主色红色为背景，添加祥云、烟花等元素来构建场景，同时搭配深色的光线营造一种节日气氛，文案则直接点明活动主题为“春节不打烊”，最后在下方添加烟花场景，以呼应主题。（3）活动区视觉设计。活动区包括优惠券区与活动专区两个区域。优惠券区以红色和黄色为背景，搭配红色的文字来突出显示优惠内容。以主色红色为背景，搭配红色的文字和淡黄色的形状来突出重点内容。（4）添加页面点缀物。为了增强页面的活动氛围，并体现出新年主题，网店美工可在页面中添加一些新年吉祥物以统一画面并区分出层次，比如中国结。淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺（微课版）学习进步海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺（微课版）第9章制作移动端网店页面目录Contents9.1移动端网店首页设计与制作9.2移动端商品详情页特征与制作9.3课堂实训——制作移动端家具网店首页9.1.1移动端网店首页设计的注意事项由于目前大多数的流量和订单都来自于移动端，因此商家都很重视移动端的运营，尤其是网店首页的优化。在设计移动端首页时，通常需注意以下4点。把握页面整体内容页面整体内容要便于消费者识别、读取和点击。03合理控制页面的长度信息不必过多，一般以6屏以内页面长度为最佳。02与PC端的视觉统一移动端的内容要与PC端的内容相互呼应，以提高网店品牌的关联性。04注重感官的舒适性图片的清晰度和大小都要适应移动设备的尺寸；商品的细节清晰、美观。019.1.1移动端网店首页设计的注意事项如图所示即为某卫浴商品网店的移动端首页设计示例。该网店设计时，在合理分配内容框架的基础上，严格遵守了设计规范，其内容展示重点明确、商品突出，可以吸引对这类商品感兴趣的消费者进行浏览。9.1.2移动端网店首页的设计要点优惠券首屏焦点图活动信息商品列表移动端首屏焦点图要在有限的页面范围内放大商品和主要文案。可以主动罗列其他商品信息来增加其曝光率与流量。每排的优惠券数量不要超过3个。一般涉及单栏单品重点推广和双栏大量推广两种类型。9.1.3制作移动端网店首页本例将制作小家电网店移动端首页，首先确定网店的主题，通过不规则形状的展现，再加上渐变的颜色，促销的商品，让整个首页美观、时尚且更具有亮点。其具体操作如下。1设置渐变叠加参数2设置投影参数9.1.3制作移动端网店首页3绘制正圆6绘制形状5填充渐变4绘制形状7添加渐变和投影8绘制形状并添加渐变叠加9.1.3制作移动端网店首页9绘制高光11绘制形状并添加渐变叠加10绘制形状9.1.3制作移动端网店首页12输入文字13设置图层样式参数9.1.3制作移动端网店首页14拷贝图层样式15输入文字18设置渐变叠加参数16绘制圆角矩形17设置斜面和浮雕参数9.1.3制作移动端网店首页19输入文字20绘制圆角矩形21复制优惠券并修改内容9.1.3制作移动端网店首页23绘制圆角矩形并输入文字24绘制矩形并添加素材25输入文字22绘制圆角矩形并输入符号9.1.3制作移动端网店首页26绘制圆角矩形并添加素材27输入文字并绘制圆角矩形9.1.3制作移动端网店首页28完成后的效果目录Contents9.1移动端网店首页设计与制作9.2移动端商品详情页特征与制作9.3课堂实训——制作移动端家具网店首页9.2.1移动端商品详情页的特征与PC端详情页相比，移动端商品详情页具有以下4个特征。一屏一主题卖点展示更加精炼商品更突出细节的展现9.2.2制作移动端商品详情页下面将制作莲子商品的移动端详情页，在制作时不但要体现莲子的品质，还需要将莲子的纯天然、营养美味、安全放心等内容体现出来，通过图片与文字的组合让整个商品详情页更加美观，其具体操作如下。1添加素材3添加素材并输入文字2输入文字9.2.2制作移动端商品详情页4添加素材7添加素材并输入文字6绘制圆角矩形5绘制矩形并输入文字9.2.2制作移动端商品详情页8绘制圆角矩形12绘制矩形11输入文字10绘制箭头9绘制正圆并添加素材9.2.2制作移动端商品详情页14查看完成后的效果13制作细节展示目录Contents9.1移动端网店首页设计与制作9.2移动端商品详情页特征与制作9.3课堂实训——制作移动端家具网店首页9.3课堂实训——制作移动端家具网店首页本例将制作家具网店网店移动端首页。要求在移动端首页中要展现出的家居用品，并将新品通过矩形框的形式展现出来，通过浅色的效果展现，让整个网店首页清新、自然。在结构上，可以将本例的移动端网店首页划分为首屏焦点图、优惠券、爆款活动3个部分。完成后的参考效果如图所示。实训目标9.3课堂实训——制作移动端家具网店首页实训思路根据实训目标，完成本实训主要需进行以下主要操作。（1）打开“移动端家具网店首页素材.psd”素材文件，将其中的“图层1”图层拖动到新建的文件中，调整位置和大小，并输入文字内容。（2）根据各个板块的具体情况，绘制矩形框添加优惠券信息。（3）在优惠券的下方添加单个图片，并在图片的下方输入说明性文字。（4）制作商品列表时，先使用矩形框的形式制作商品列表，在其中简单罗列常见的商品信息，完成后对下方特卖商品进行了图文的制作，注意该制作要精细表现的内容要完整。（5）保存文件查看完成后的效果。淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺（微课版）学习进步海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺（微课版）第10章装修网店目录Contents10.1装修前的准备工作10.2装修PC端网店10.3装修移动端网店10.4课堂实训——装修开学季专题页10.1.1切片与保存图片其具体操作如下。1添加参考线2切片图片本例为“女包网店首页”的首页图片创建切片，并将创建的切片保存到计算机中，方便后期装修网店时使用，下面介绍网页切片与保存的方法。10.1.1切片与保存图片3设置保存格式4查看保存效果10.1.2上传图片至图片空间进行装修或发布商品前，商家可将需要使用的图片上传到图片空间，在需要使用对应的图片时可以直接从中选择。其具体操作如下。1输入文件夹名称10.1.2上传图片至图片空间2单击“上传”超链接4查看上传的图片3选择需要上传的图片目录Contents10.1装修前的准备工作10.2装修PC端网店10.3装修移动端网店10.4课堂实训——装修开学季专题页10.2.1认识装修模块在进行模块布局前，需要了解网店装修的基础模块。常用的基础模块包括店铺招牌模块、宝贝推荐模块、宝贝排行模块、默认分类模块、个性分类模块、自定义区模块、图片轮播模块等。网店装修的常用模块，如图所示。10.2.2装修PC端网店首页本例将使用“全屏宽图”系统模块装修首页中的一个页面，其具体操作如下。1装修首页页面2添加模块10.2.2装修PC端网店首页3选择要添加的图片4调整裁剪区域5选择要添加的图片6预览装修后的效果10.2.3装修PC端商品详情页1单击“发布宝贝”超链接2选择商品类目详情页的装修主要是在发布商品时进行的，当完成详情页的设计后，即可将其上传到图片空间中，再直接通过“淘宝神笔”中的模板生成。下面讲解PC端商品详情页的装修方法，其具体操作如下。10.2.3装修PC端商品详情页4选择图片5单击“发布宝贝”超链接3“立即使用”按钮6选择宝贝信息10.2.3装修PC端商品详情页7完成编辑目录Contents10.1装修前的准备工作10.2装修PC端网店10.3装修移动端网店10.4课堂实训——装修开学季专题页10.3.1装修移动端网店首页在网店装修中除了涉及PC端，还需要对移动端网店进行装修。下面将使用移动端中的自定义模块对首页进行简单装修，其具体操作如下。1添加模块2编辑板式10.3.1装修移动端网店首页4单击“上传”按钮5选择需要上传的图片3单击“添加图片”超链接10.3.1装修移动端网店首页7单击“保存”按钮6选择图片10.3.1装修移动端网店首页8绘制其他矩形并添加图片10查看预览效果9添加链接地址10.3.2装修移动端商品详情页打开“商品发布”页面，单击选中“使用文本编辑器”单选项，单击“添加”按钮，打开“图片空间”对话框，在其中选择需要添加的商品详情页