第4章 店铺首页核心模块设计

店铺首页核心模块设计网店美工视觉设计实战教程（全彩微课版第3版）第4章目录Contents店招设计轮播海报设计优惠券设计4.24.14.3商品促销区设计实战演练4.44.54.1.1店招制作规范3店招可以分为普通店招和全屏店招两种类型。其中，普通店招的尺寸为950像素×120像素，全屏店招的尺寸则为1920像素×150像素（通常为了与全屏海报适配才使用该尺寸，左右两侧一般为空白背景），并且店招连同导航条高度不能超过150像素。为了便于上传店招，店招大小最好小于80KB，店招的格式也应设置成JPG、GIF或PNG。此外，为便于推广店铺商品和扩大品牌知名度，网店美工在设计店招时，除了需要使店招的视觉效果新颖别致外，还应遵循以下两个基本原则。植入品牌形象抓住商品定位4.1.2制作店招4现有首饰专卖店“SKAW崇家旗舰店”准备装修店铺首页，因此需要先制作店招，为了让店招的整体色调迎合主要消费群体的审美，可以以粉色为主色调，并将粉色花瓣作为背景，其具体操作步骤如下。添加背景12新建文件绘制正圆34.1.2制作店招5复制并缩小圆输入文本45创建扇形变形效果6绘制直线的效果74.1.2制作店招6添加投影添加商品89输入文本复制投影效果11104.1.2制作店招7输入并调整文本12常规店招效果151314绘制形状复制图层并修改文本目录Contents店招设计轮播海报设计优惠券设计4.24.14.3商品促销区设计实战演练4.44.54.2.1轮播海报布局方式91234左右布局斜切布局左中右三分式布局上下布局4.2.2轮播海报设计要点10规范尺寸常规型轮播海报的宽度可设置为950像素、750像素和190像素，其高度为300像素~500像素，图片大小要小于300KB；而全屏型（指全屏展示的海报）的尺寸为1920像素×550像素或1920像素×650像素。主题明确内容合理主题可通过商品和文字的描述来体现，将对商品的描述提炼为简练的主题，并将其和商品放在第一视觉点，让消费者直观地看到商品以及主题，从而明白该轮播海报所传出的信息。重要文字信息的色彩需要较为鲜明，起到强调作用；背景所采用的颜色尽量在1~3种，避免抢夺商品和文字的存在感。若要围绕同一商品制作不同的轮播海报，应该重点注意第1~2张轮播海报的视觉效果，第3~4张轮播海报可围绕商品的功能、制作工艺、包装等内容制作，使每张轮播海报都有独特的内容展示。色彩鲜明一般来说，轮播海报是指2~4张海报循环播放，这样比较适合消费者的浏览节奏，并且每张海报的尺寸大小需一致。4.2.3制作轮播海报1121设置参数放置素材首饰专卖店“SKAW崇家旗舰店”店铺的店招制作完毕后，需要设计2张轮播海报用于推广热销商品。由于该商品的外观颜色中白色较多，为了衬托商品和对应店招设计，将制作以白色为主色调的两张轮播海报，另外，为增强两张海报的统一性，可采用相同背景，只改变布局和商品图像的形式制作，其具体操作步骤如下。3添加投影4.2.3制作轮播海报1254绘制直线输入文本6轮播海报1效果7轮播海报2效果目录Contents店招设计轮播海报设计优惠券设计4.24.14.3商品促销区设计实战演练4.44.54.3.1优惠券的制作原则14优惠券在首页中展示的信息有限，一般只展示优惠的金额，但一张完整的优惠券内还包括了优惠券的使用范围、使用条件等，这些信息只有在消费者点击领取优惠券后才会显示。0103050204优惠券的使用范围优惠券的使用时间限制优惠券的最终解释权优惠券的使用张数限制优惠券的使用条件4.3.2制作优惠券15绘制圆角矩形12优惠券的发放模式主要有消费满减（满就送）、会员折扣和消费者自主领取3种类型，“SKAW崇家旗舰店”店铺的装修选择设计满减优惠券，其具体操作步骤如下。绘制虚线输入文本34.3.2制作优惠券16绘制圆角矩形4创建剪贴蒙版5输入文字64.3.2制作优惠券17绘制形状7最终效果89复制图层组目录Contents店招设计轮播海报设计优惠券设计4.24.14.3商品促销区设计实战演练4.44.54.4.1商品促销区的设计要点19在制作商品促销区时，通常会配合商品、文案、优惠价格等内容来展示促销信息，为了优化商品促销区的功能，设计过程中需要注意以下4个方面。商品促销区的常用尺寸为720像素×500像素，宽度不能大于750像素，但是高度可以根据商品促销内商品的数量来设置。制作规范商品文案商品图片展示促销信息的文字应该尽量简洁、明确，字数尽量在10字以内，避免文字太多降低视觉观感。而商品名称的定义也要全面、准确，能够体现商品名字和卖点。商品图片要美观、真实，可以吸引消费者的眼球，能够配合商品促销区版块整体的设计效果。商品促销展示区中的商品除了可以选择店铺中优质的商品外，还可选择临近下架时间的商品。这是因为紧临下架时间的商品会获得淘宝的优先展示机会，有一定的概率让消费者优先查看。商品挑选4.4.2制作商品促销区2012“SKAW崇家旗舰店”店铺首页需要添加商品促销区，为了与首页店招、轮播海报、优惠券的设计风格统一，在配色上准备延续白粉配色，背景色和布局延续优惠券的设计。在制作时，先制作促销区中的装饰区域，再制作单个商品的展示区，其具体操作步骤如下。输入文字置入图片绘制3个矩形34.4.2制作商品促销区21最终效果输入文字对齐图像564目录Contents店招设计轮播海报设计优惠券设计4.24.14.3商品促销区设计实战演练4.44.54.5.1制作家电店铺店招231. 设计思路020103新建文件，创建划分导航条的辅助线使用文字，制作文字型的店标绘制形状，制作收藏店铺、商品、导航条的装饰部分4.5.1制作家电店铺店招242.知识要点使用“新建参考线”命令确定导航条位置使用“横排文字工具”输入店铺名称，使用“钢笔工具”绘制装饰线，制作店铺Logo使用“矩形工具”“圆角矩形工具”和“椭圆工具”绘制其他区域的装饰形状和标签4.5.1制作家电店铺店招25133.操作步骤下面开始制作家电店铺店招，其具体操作步骤如下。 输入文字新建参考线绘制曲线24.5.1制作家电店铺店招266绘制正圆4输入店铺广告语5绘制圆角矩形7输入说明文本4.5.1制作家电店铺店招27复制图层组8输入导航条文本10修改图层组内容最终效果9114.5.2制作手机轮播海报28创建文件，并制作渐变背景，丰富画面色彩在海报左侧添加文本，右侧添加商品图像，并强调关键区域的信息新建同等大小的文件，将第1张轮播海报中的内容移至其中，并适当修改内容

1.设计思路4.5.2制作手机轮播海报29

2.知识要点1234使用“复制图层”“拷贝图层样式”“粘贴图层样式”命令制作相同内容使用“渐变叠加”“投影”图层样式命令强调关键区域使用“横排文字工具”输入文本，使用“圆角矩形工具”绘制装饰使用“渐变工具”绘制渐变色背景4.5.2制作手机轮播海报3013.操作步骤下面开始制作手机轮播海报，其具体操作步骤如下。调整渐变色条绘制垂直线2填充背景色3