Photoshop CC网店美工全能一本通课件

项目简介：PC端店铺首页设计与商品详情页设计一样，是网店美工设计任务中的综合型工作任务，通过精心设计的PC端店铺首页能够向消费者传达品牌感和信任感。本章针对PC端店铺首页的基本概念和设计模块等基础知识进行系统讲解，并针对流行风格和典型行业的PC端店铺首页进行设计演练。通过本章的学习，读者可以对PC端店铺首页的设计有一个系统的认识，并快速掌握PC端店铺首页的设计规范和制作方法，成功制作一个具有品牌影响力的PC端店铺首页。第6章PC端店铺首页设计课堂学习目标了解店铺首页的基本概念熟悉店铺首页的设计模块6.1店招与导航栏设计店招与导航位于店铺页面顶部，在PC端的任何页面都可以看到。店招即店铺的招牌，主要用于展示店铺品牌、活动内容和特价商品等内容。以淘宝为例，店招可以分为常规店招和通栏店招两类。常规店招尺寸为950像素×120像素；通栏店招包含店招、导航栏和背景，尺寸建议为1920×150像素。好的店招会起到品牌宣传，加深记忆的作用。导航栏则是对商品进行分类，用于帮助消费者定位到当前位置、完成页面之间的跳转并快速找到商品，导航栏高度通常在10-50像素之间，建议30像素；导航栏字体建议为黑体和宋体，字号建议黑体为14像素、16像素，宋体为12像素、14像素；文字间距建议为20像素。下面为制作家居网店首页店招与导航栏的方法，在设计过程中，我们围绕店铺基本信息与产品分类进行创意。将背景变为纯色，令内容易读。色彩选取灰色和中蓝色体现了舒适和环保，字体选用黑体呼应主题。搭配产品实物图片，使人一目了然。6.1店招与导航栏设计6.2轮播海报设计轮播海报即多张海报循环播放，通常位于首页店招和导航栏下方，主要用于进行产品宣传和活动促销等内容。优秀的轮播海报会对每张海报的主题、构图和配色等因素进行综合考虑和设计。轮播海报的设计尺寸可以依据4.1节中的PC端全屏海报和PC端常规海报的建议尺寸进行设计。其他设计规则可以依据4.2节的设计形式进行设计。下面为制作家居网店首页轮播海报的方法，在设计过程中，我们结合店招导航，围绕主体物餐桌椅进行创意。背景为产品实拍图，文字色彩选取褐色、灰色和玫红色体现了稳重、高端和温馨。6.2轮播海报设计优惠券即减价优惠，通常位于首页轮播海报下方，是店铺常用的促销方式，也是吸引消费者进行二次消费的常用策略。优惠券可以起到提高消费者购买欲望、刺激冲动消费的作用。6.3优惠券设计

下面为制作家居网店首页优惠券的方法，在设计过程中，我们结合轮播海报，围绕店铺优惠活动进行创意。将背景变为纯色，使内容易读。色彩选取中蓝色、灰色和中黄色分别体现了清新、稳重和舒适。优惠券信息以标签的形式出现，具有醒目、直观的特点。

6.3优惠券设计

6.4分类模块设计分类模块即店铺商品的类别，通常位于店铺首页轮播海报或优惠券下方，是用于引导消费者进行购买商品的重要模块。优秀的分类模块起到提升购买效率、增强用户体验的作用。

下面为制作家居网店首页分类模块的方法，在设计过程中，我们结合轮播海报，围绕店铺商品分类进行创意。将背景变为纯色，令内容易读。色彩延用优惠券模块中的配色。图标采用与家居相关的线性图标呈现了简约精致的特点，整体排版简洁清晰。6.4分类模块设计

6.5商品展示设计商品展示即店铺商品的展示区域，通常位于店铺首页优惠券或分类模块下方，是用于向消费者展示爆款商品、新上商品和推荐商品等内容的模块。商品展示的布局通常分为整体模块布局、主次模块布局和自由模块布局。优秀的商品展示模块可以起到引导消费者购买、促进商品销售的作用。

下面为制作家居网店首页商品展示的方法，在设计过程中，我们结合轮播海报，围绕店铺热销产品进行创意。将背景变为纯色和渐变色，令内容易读。色彩延用优惠券模块中的配色。整体排版整齐有序，一目了然。6.5商品展示设计

6.6底部信息设计底部信息即店铺其他信息展示，通常位于店铺首页的最下方，用于放置店铺品牌故事、购物须知和店铺公告等信息，优秀的底部信息可以起到补充说明、挽留消费者的作用。

下面为制作家居网店首页底部信息的方法，在设计过程中，我们结合轮播海报，围绕店铺简介进行创意。背景为商品实拍图，凸显网店经营方向。色彩沿用商品展示模块中的配色。底部按钮较为醒目，易于消费者点击。6.6底部信息设计

6.7模块合并设计制作完成各个模块后，需要将模块合并形成一张完整的首页。下面为制作家居网店首页模块合并的方法。

6.8课堂实训-PC端数码产品店铺首页设计在设计过程中，围绕主体物头戴式耳机进行创意。背景为渐变色、纯色与图片相结合的形式，增加多种元素实现点缀效果。色彩选取亮蓝色、深紫色和玫红色分别体现了科技、时尚和质感。字体选用创意美术体和黑体起到了呼应主题的作用。采用黄金比例分割的左右构图表现和谐美感。图标采用与数码产品相关的线性图标体现了简约精致的特点，整体设计充满特色，契合主题。

6.9课后习题-PC端护肤品店铺首页设计在设计过程中，围