电子商务视觉设计PPT课件（共8章）第5章 电商网店首页视觉设计.pptVIP

电商网店首页视觉设计 知识目标和技能目标 知识目标： 了解和认知店电商网店页 掌握电商网店首页的店招视觉设计 掌握电商网店首页的店徽视觉设计 掌握电商网店首页的海报视觉设计 技能目标： 能够利用Photoshop软件的相关操作与命令制作电商网店首页内容 能够完成电商网店首页装修的整体布局与处理 学习重点和难点 学习重点： 电商网店首页店招、店徽和海报的视觉设计。 学习难点： 利用Photoshop软件的相关操作，完成电商网店首页的视觉设计。 第一节 电商网店首页认知 1.1 电商网店首页部分内容展示 （一）店招：店招是位于电商网店首页最顶端的招牌，由商品图片、宣传语和店铺名称等组成。 （二）店徽：店徽通常位于店招之内，却是区别于店招的独立部分，起到定位店铺风格、体现品味、展示商品内容、宣传商品信息的作用。 （三）海报：海报是电商宣传的一种形式，以较强的视觉冲击表现形式将店铺内产品及活动信息传递给消费者。 第一节 电商网店首页认知 1.2 电商网店首页设计 一个完整的电商网店首页不仅包含前面所说的内容，还包含导航条、客服区、收藏区、产品分类区等。在进行电商网店首页设计时要注意整体结构，合理安排各个区域的位置和顺序。普通的布局强调简洁明了，旺铺的布局要尽显高端大气的风格。 第二节 店招视觉设计 2.1 店招视觉设计的意义与功能 第一，店招是电商网店首页的黄金展示位置，是消费者掌握店铺品牌信息的最直接来源，属于核心信息通告区域，在第一时间吸引消费者。 第二，店招可以最大化展示商品优势、价格优势和服务优势等。 第三，店招的关键信息不但可以节约消费者了解店铺的时间成本，而且可以节约店铺向消费者介绍的时间成本和精力。 第四，引起消费者的购物欲望，促进购买率。 第二节 店招视觉设计 2.2 店招视觉设计规范 电商网店首页的店招图片格式有三类，分别是JPG、GIF和PNG。GIF格式的店招就是常见的带有动画效果的动态店招。常见的电商网店首页的店招尺寸有两种，分别是950像素×120像素和1920像素×150像素。 电商网店首页的店招内容包含网店名称、网店LOGO、网店口号、网店促销广告、网店优惠券、网店公告、网店活动信息等。 第二节 店招视觉设计 2.3 店招视觉设计要求 首先，通常要求有标准的字体和颜色、简洁的排版设计、可以吸引消费者的广告语、有较强视觉冲击力的画面和可以清晰表达店铺卖点的信息。 其次，选择合适的素材图片。店招素材图片通常可以从互联网上收集、利用摄影获取和利用Photoshop软件等绘图软件原创绘制。无论哪一种方式都要求图片专业、精美、清晰度良好、不能涉及版权问题且适合自己的店铺。 最后，突显店铺的独特性质。位于首页的店招是电商品牌给消费者的第一印象。店招是否与众不同，别出心裁，有自己的个性直接影响到第一印象的好坏。因此，店招视觉设计一定要体现店铺的独特风格、品质和情感。 第二节 店招视觉设计 2.4 店招视觉设计方法 静态店招视觉设计一般由文字和图像组成，可以是背景与纯文字组合，也可以是背景与文字、图像组合。 动态店招视觉设计是指GIF动画效果，由多个图像和文字效果构成。可以使用专业的GIF制作软件完成，可以使用Photoshop软件制作部分简单效果，也可以通过电商软件后台代码实现。 第二节 店招视觉设计 2.5 店招视觉设计案例——善美花屋网店店招 案例准备：启动软件后，创建一个1920像素×150像素大小的文件，文件名称为“花店店招”。选择“矩形工具填充颜色设置为#fbcece，绘制一个与文档大小相同的矩形在矩形底部再绘制一个长条矩形，将填充颜色设置为#eb6877。 第二节 店招视觉设计 2.5 店招视觉设计案例——善美花屋网店店招 案例操作：选择“圆角矩形工具”绘制圆角矩形，填充颜色设置为#e4007f。为“圆角矩形1”图层添加投影；选择“横排文字工具”输入字号大小为6点，颜色为#ffffff,黑体文本“首页有惊喜”；复制“圆角矩形1”向右移动，并按下Ctrl+T组合键缩小，反复6次；选择“横排文字工具”输入字体为黑体，字号大小为6点、颜色为白色的文本；在“首页有惊喜”按钮上方输入“LOGO”，将字号大小设置为18点，字体设置为黑体，颜色设置为#e4007f；在店招中心位置输入字号大小为14点、颜色为白色、字体为黑体的文本“一花一世界，一人一份情”，并设置文本投影效果；插入资源库素材文件中的“花束”图片在“花束”图片右侧输入字号大小为8点