第4章网店首页视觉设计《Photoshop CC网店美工视觉设计实战》同步教学（工信版）（课件）

网店首页视觉设计 Photoshop CC网店美工视觉设计实战（全彩微课版） 第4章 目录 Contents 店招与导航条设计 轮播海报设计 4.2 4.1 优惠券设计 4.3 商品陈列区设计 4.4 实战演练 4.5 4.1.1 店招与导航条设计要点 3 店招一般指通栏店招，主要由页头背景、常规店招和导航条3部分组成，如下图所示。 √ 页头背景通常在店招的左右两侧，其宽度多为485像素，该区域通常不包含重要内容； √ 常规店招的尺寸为950像素×120像素，用于展现店招信息，是Logo、网店名称、优惠信息等重要信息的展示窗口； √ 店招的下方是导航条，其尺寸多为1920像素×30像素，用于展示网店的主营类目，方便消费者点击时快速跳转到对应页面。 4.1.1 店招与导航条设计要点 4 为了便于推广网店商品和树立品牌形象，网店美工在设计店招与导航条时，除了需要使其新颖别致、易于传播外，还应遵循以下两个基本原则。 植入品牌形象 抓住商品定位 A B 网店美工在设计时可以通过网店名称、标志来植入品牌形象。 商品定位是指展示网店所卖商品的类别，精准的商品定位可以快速吸引目标消费群体进入网店。 4.1.2 制作宠物用品店店招与导航条 5 “友猫”宠物用品店需要制作店招与导航条，用于展示网店的品牌形象和商品信息。 网店美工可为宠物用品店制作通栏店招，制作时可先设计网店的品牌Logo，由于网店是猫咪宠物用品店，网店美工可以通过绘制猫咪的卡通形象来体现品牌形象，然后添加热卖商品、优惠信息，最后根据商品分类制作导航条，具体操作如下。 新建文件 1 添加参考线 2 4.1.2 制作宠物用品店店招与导航条 6 绘制圆角矩形 6 绘制形状 绘制圆 绘制其他圆 3 4 5 4.1.2 制作宠物用品店店招与导航条 7 绘制嘴巴部分 8 绘制直线 绘制阴影部分 7 9 4.1.2 制作宠物用品店店招与导航条 8 输入文本 13 输入其他文字 绘制正圆 输入“宠物有好货！”文本 10 11 12 4.1.2 制作宠物用品店店招与导航条 9 输入优惠文字 粘贴图层样式 绘制圆角矩形并输入文字 14 16 15 4.1.2 制作宠物用品店店招与导航条 10 输入导航条文字 绘制矩形 18 17 目录 Contents 店招与导航条设计 轮播海报设计 4.2 4.1 优惠券设计 4.3 商品陈列区设计 4.4 实战演练 4.5 4.2.1 不同轮播海报的尺寸要求 12 轮播海报的尺寸与网店的布局紧密相关，网店美工可以根据需要设置常规轮播海报和全屏轮播海报两种样式。 ● 常规轮播海报尺寸：使用淘宝中的“轮播海报”模块可以制作常规轮播海报，其高度要求在100像素～600像素，按宽度可细分为左侧轮播海报（宽度：190像素）、右侧轮播海报（宽度：750像素）和通栏轮播海报（宽度：950像素）。右图所示为常规轮播海报。 4.2.1 不同轮播海报的尺寸要求 13 ● 全屏轮播海报尺寸：全屏轮播海报宽度为1920像素，高度一般为450像素～900像素，如图所示，但是该轮播海报需要付费开通或利用“自定义区”模块进行装修。 4.2.2 轮播海报设计要点 14 轮播海报是多张海报循环播放后形成的。要使轮播海报具有美观、吸引消费者注意力的效果，网店美工就要综合考虑每张海报的主题、构图和配色等设计要点。 ● 主题：无论是新品上市还是活动促销，轮播海报中的主题都需要围绕同一个方向，并确定对应的轮播海报效果。右图所示为主题明确的轮播海报，该轮播海报直接运用模特展现不同颜色的女包，然后添加商品说明文字，画面整体显得简洁、美观。 4.2.2 轮播海报设计要点 15 ● 构图：构图的好坏直接影响海报的效果，构图方式主要有左右构图、左中右三分式构图、上下构图和斜切构图4种右图所示为左右构图的轮播海报。 ● 配色：网店美工在配色时，对重要的文字信息需要用突出醒目的颜色进行强调，通过明暗对比以及不同颜色的搭配来确定对应的风格，应使其背景颜色统一，不要使用太多的颜色，以免使画面显得杂乱。右图所示为配色简单的轮播海报。 4.2.3 制作宠物用品店轮播海报 16 “友猫”宠物用品店需要在导航条的下方制作色调为蓝色、尺寸为1920像素×800像素的两张轮播海报。第一张海报以新品宣传为出发点，整个海报要突出显示新品信息，且要美观、简洁；第二张海报要通过商品的使用场景来体现商品，要求简单、直观，具体操作如下。 添加背景 1 设置颜色叠加参数 2 4.2.3 制作宠物用品店轮播海报 17 完成背景制作后的效果 添加投影后的效果 输入文字 3 4 5 4.2.3 制作宠物用品店轮播海报 18 完成轮播海报1的制作 完成轮播海报2的制作 6 7 目录 Content