网店美工教学课件Chapter04店招与导航的设计.ppt

淘宝美工教程 Chapter 04 店招与导航的设计 Chapter 04 店招与导航的设计 [情境导入] 小田打算在网上新开一家网店，主要销售一些手工织品，在完成商品照片的拍摄和处理之后，她需要为店铺进行装修，她开始思考，需要用怎样的创意、配色和设计元素来制作店招和导航了…… [技能要求] 能够通过“图层样式”、添加修饰元素等方式对店铺的店名进行修饰，制作出别具一格的店铺LOGO，并使用图层蒙版控制店招中广告图片的显示效果。 根据店铺的商品及商品照片的风格，来定义店铺店招和导航的风格及配色，以适当的广告语和图像来吸引顾客的注意和兴趣。 [效果展示] Chapter 04 店招与导航的设计 粉嫩婴幼儿商品网店店招 潮流女装网店店招 4.1 了解网店店招与导航 4.1.1 店招与导航的概述 店招和导航位于网店的最顶端，设计成功的店招要求主要是有标准的颜色和字体、清洁的设计版面，此外，店招中需要有一句能够吸引消费者的广告语，画面还需要具备强烈的视觉冲击力，清晰的告诉买家你在卖什么，通过店招也可以对店铺的装修风格进行定位，如图4-1所示。 Chapter 04 店招与导航的设计 为了让店招有特点且便于记忆，在设计的过程中都会采用简短醒目的广告语辅助LOGO的表现，通过适当的配图来增强店铺的认知度，店招所包含的主要内容包括店铺的名称、品牌名称、店铺LOGO、简短的广告语和广告商品等，如图4-2所示。 在大部分的店招设计中，往往会将店铺的名称进行重点展示，而将其它的元素进行省略，这样设计的效果能够让浏览的过程中店铺的名称更加的直观，树立出店铺的形象。 Chapter 04 店招与导航的设计 4.1.2 赏析网店店招和导航 如图4-4和4-6所示店招和导航设计中，设计者使用了与店铺商品风格一致的色彩和图片进行创作，同时添加具有吸引力的广告信息和收藏信息来赢得顾客的兴趣和喜爱。 Chapter 04 店招与导航的设计 4.2 粉嫩婴幼儿商品网店 本案例使用了多种高明度的色彩营造出纯洁、稚嫩的画面效果，如图4-7所示，画面中搭配了外形可爱的婴儿用品图形，同时使用多彩的彩虹条作为画面的背景，表现出一种初生的嫩芽之感。 Chapter 04 店招与导航的设计 Chapter 04 店招与导航的设计 [设计理念] 以浅黄色为主，表现出一种温暖、明亮的感觉，使用明度较高的多种色彩来修饰画面，烘托出婴儿娇柔、稚嫩的肌肤质感，让店铺的形象更加的活泼可爱； 使用浅色的条纹作为画面背景，制作出彩虹般多姿多彩的视觉效果； 采用俏皮可爱，且圆润的字体来完成文字的编辑，使得整个画面风格更加的统一。 [工具使用] 使用素材照片制作出店招中所需的背景和修饰元素，通过图层蒙版和“不透明度”来调整编辑的效果； 利用“描边”样式对绘制的形状进行修饰，使其边缘清晰可见； 选择“自动形状工具”中的“轨道”形状绘制LOGO中的图形。 Chapter 04 店招与导航的设计 [操作主要步骤] 一、新建文档，将所需要的素材添加到窗口，接着对其进行设置。 二、使用“矩形选框工具”绘制矩形，并添加所需素材。 三、添加文字，并且使用“圆角矩形工具”绘制所需图形。 四、使用“横排文字工具”添加文字，并添加素材。 Chapter 04 店招与导航的设计 五、分别使用“自定形状工具”、“钢笔工具”和“圆角矩形工具”绘制出所需图形，并进行适当的设置。 六、最后为搜索框添加上文字和放大镜图形。 4.3 潮流女装网店店招 本案例是为某潮流女装网店所设计的店招和导航，设计中参照了模特照片的色彩进行配色。 Chapter 04 店招与导航的设计 Chapter 04 店招与导航的设计 [设计理念] 本案例在色彩搭配上使用怀旧色彩打造出复古时尚的感觉，整个画面以橡皮红和熟褐色为主，给人以怀旧的情感，搭配饱和度较低的图像，使得整个画面色彩和谐而统一； 店招的背景添加了细小的条纹，增添了画质的精致感； 在画面文字上添加细小的投影效果，突出质感的同时给人以华丽、高贵的感觉。 [工具使用] 使用“渐变叠加”样式对绘制的形状进行修饰，使其层次更加丰富； 利用“投影”样式来修饰添加的文字，提升文字的表现力； 使用图层蒙版将两张照片合成到一起，形成自然的过渡效果。 Chapter 04 店招与导航的设计 [操作主要步骤] 一、新建文档，将所需要的素材添加到窗口，对照片进行编辑设置。 二、绘制出店招的背景。 三、使用“横排文字工具” 添加文字，并进行文字设置和添加上“投影样式”。 Chapter 04 店招与导航的设计 五、添加素材，接着添加蒙版并进行编辑。 六、添加