5.4 家用电器网店视觉营销设计(课件）-《网店视觉营销》同步教学（高教版）

第5章 网店视觉营销综合应用 5.1 5.2 5.3 儿童玩具网店视觉营销设计 5.4 家用电器网店视觉营销设计 目录 箱包类网店视觉营销设计 婴儿尿不湿网店视觉营销应用分析 5.5 本章综合实训 5.4 家用电器网店视觉营销设计 3 5.4家用电器网店视觉营销设计 家用电器的网络店铺主要有两种：一种是以一种品牌为依托开设的网店（多见于知名品牌）；另一种是按商品分类、多种品牌混杂销售的网店（多见于3C、小家电类）。前者在店铺设计上着重体现品牌特点，后者的店铺设计主要突出商品性能、价格优势等。 5.4家用电器网店视觉营销设计 本案例是大型家电的网络店铺，店铺首页风格简洁，非常有设计感和时尚感。既能吸引消费者目光，又让人对主推产品一目了然。作为大型家电网店，商品的详情页肯定侧重于描述产品功能，本案例的详情页清新简约，合理使用了一些网络素材来合成说明商品功能的场景图，比只有文字描述更直观、清晰，从而使买家在欣赏图片的同时先了解产品，再购买产品。 设计理念如下： （1）这款家电的网店首页采用了有空间布局感的设计，通过背景图创造了一幅有立体空间感的画面，使人感觉在一个空间内移步浏览各类电器，有种逛家电商场的感觉。 （2）色调选用深绿和浅米黄色，这种撞色搭配使画面看起来和谐大方又灵动有节奏。 （3）页面中出现很多价格、优惠等信息，这些文字没有直接排列在产品旁边，而是使用了底框、图标进行归纳，既能突出优惠券等信息吸引买家，又能使画面统一、不凌乱。 5.4.1家用电器网店首页视觉营销设计 操作步骤： 步骤1：新建宽度为1920像素，高度为7400像素，分辨率为72像素/英寸的画布，将底色填充为浅米黄色。如图所示。 新建画布并填充为浅米黄色 5.4.1家用电器网店首页视觉营销设计 5.4.1家用电器网店首页视觉营销设计 步骤2：制作深绿色导航条，如图所示。 步骤3：在画布中拖入一张室内场景图素材（素材资源\第5章\家电网店素材\01.jpg），将素材图调整大小至与页面同宽度，如图所示。 店铺首页导航条 拖入室内场景图 5.4.1家用电器网店首页视觉营销设计 步骤4：将电器图片（素材资源\第5章\家电网店素材\02.jpg）拖入画布，放置在室内场景图中合适的位置并调整大小，如图所示。 加入几种电器的图片 5.4.1家用电器网店首页视觉营销设计 步骤5：为了使电器更有置于室内的感觉，可以给电器底部加上投影。使用多边形套索工具，将羽化值设置为10像素绘制投影，填充投影为黑色或深灰色，然后将投影图层置于电器图层下面，将透明度调至30%左右，如图所示。 给电器加投影 5.4.1家用电器网店首页视觉营销设计 步骤6：用“直排文字工具”在电器左侧输入文字，按住Ctrl键单击文字图层，选中文字并填充渐变效果，最后给文字加上投影，如图所示。 左侧添加文字 5.4.1家用电器网店首页视觉营销设计 步骤7：用钢笔工具和渐变工具在空白画布中绘制装饰素材，如图所示。 绘制装饰素材 5.4.1家用电器网店首页视觉营销设计 步骤8：将绘制好的背景装饰图层拖入页面中，多复制几个，错落摆 放好位置，营造出空间感，如图所示。 错落摆放好背景装饰素材 5.4.1家用电器网店首页视觉营销设计 步骤9：新建一个空白画布，新建图层，在图层上使用圆角矩形工具绘制矩形，并填充颜色，使用文字工具输入文字。制作的优惠券图标如图所示。 制作优惠图标 5.4.1家用电器网店首页视觉营销设计 步骤10：将制作完的优惠券图标拖入店铺设计页面，置于海报图下方，如图所示。 在店铺首页加入优惠券图标 5.4.1家用电器网店首页视觉营销设计 步骤11：用同样的方法绘制单个商品的价格优惠图标和店铺分类 横条，如图所示。 价格优惠图标 店铺分类横条 5.4.1家用电器网店首页视觉营销设计 步骤12：将抠选好的家电图片拖入店铺背景中，调整好位置。在电器旁边添加底框，放好文字和优惠券，可根据画面效果为电器图层和底框图层添加阴影，如图所示。 加入电器图片和底框、文字、优惠券 5.4.1家用电器网店首页视觉营销设计 步骤13：将其它电器图片 （素材资源\第5章\家电网店素材 \03.jpg）放入背景图中，调整整 体布局和大小，完成店铺的