《网店美工案例教程》教学课件-第1章-电商美工设计基础

第1章电商美工设计基础1.1网店装修的设计基础与要求1.2网店装修色彩的搭配31.1.1店标设计基础与要求常见的店标有文字店标、图形店标和图文组合店标：文字店标表达比较准确；图形店标形象生动，不受语言限制，易于识别；图文组合店标同时兼具了文字及图形店标的优点，图文并茂，形象生动，又易于识别，因此使用更加广泛。如图所示为图文组合类店标，名称和精美的图案相互呼应，既直接又美观。41.1.1店标设计基础与要求优秀的店标设计应具备以下特点。1.店标设计的特点0104设计特点有领导性造型新颖、识别性强有统一性要与时俱进有延伸性有系统性51.1.1店标设计基础与要求不同平台对店标尺寸的要求通常有所不同：PC端和跨境端电商店铺店标尺寸为230像素×70像素，大小不超过150KB；移动端电商店铺店标尺寸为100像素×100像素，大小不超过80KB。店铺店标上传的图片文件格式通常要求为GIF、JPG、JPEG、PNG等。2.店标设计规范与要求61.1.1店标设计基础与要求店标采用的文字和图形必须遵守相关的法律法规，重要的规范要求如下。2.店标设计规范与要求未经许可，严禁使用电商平台专用文字和图形作为店铺宣传的文字和图形。店标禁止使用带有种族歧视、仇恨、性和淫秽信息的语言，或不良言辞；店标禁止使用与国家名称、国旗、国徽、军旗相同或者近似的文字或图形。店标禁止使用同政府间国际组织的旗帜、徽记、名称相同或者近似的文字或图形。店标禁止使用同第三方标志相同或者近似的文字或图形，如中国邮政、中国电信、中国移动、中国联通、中国网通和中国铁通、“红十字”标志、“红新月”标志等。如用户或店铺不具有相关资质或未参加相关活动，不允许使用与特定资质或活动相关的特定含义的词汇，如消费者保障计划、先行赔付等。店标禁止使用带有民族歧视性的、有害于社会主义道德风尚或者有其他不良影响的、或夸大宣传并带有欺骗性的文字。店标禁止使用县级以上行政区划的地名或者公众知晓的外国地名，地名具有其他含义的除外，已经注册的使用地名的店标继续有效。71.1.2店招设计基础与要求不同平台对店标尺寸的要求有所不同，通常淘宝PC端和跨境端电商店铺默认店招尺寸为950像素×120像素，移动端电商店铺店招尺寸为642像素×200像素，大小不超过200KB。PC端店招案例81.1.2店招设计基础与要求随着电商移动化趋势的加强，移动端的店招在品牌宣传、提升视觉形象方面发挥着日益重要的作用。在设计店招时，要求其应具有新颖别致、易于传播的特点，这就必须遵循两个基本的原则。移动端店招案例品牌形象的植入：品牌形象的植入可以通过店铺名称、标志来展示品牌形象，可从品牌专属颜色、Logo颜色、字体等体现品牌气质，还可以利用广告语传递品牌理念。抓住产品定位：精准的产品定位可以让消费者很容易清楚店铺商品是否适合自己，快速吸引目标消费者进入店铺。91.1.2店招设计基础与要求店招的视觉设计应遵守以下规范。01020304店招颜色尽量少于3种色彩，保持店招的简洁、明了。店招设计要做到与众不同、标新立异。店招的视觉重点不宜过多，有1~2个就够了。相应地使用设计素材、造型形式以及流行色彩进行搭配。101.1.3Banner设计基础与要求1.了解Banner设计需求后续案例中会要求根据素材和商品信息制作淘宝PC端、移动端、跨境端3个端口的商品Banner。PC端Banner尺寸为727像素×416像素移动端Banner尺寸为608像素×304像素（文字简洁）跨境端Banner尺寸为980像素×300像素（要求采用英文进行制作）111.1.3Banner设计基础与要求2.确定Banner风格下面对电商常见的几种Banner风格进行介绍。科技炫酷风格Banner喜庆节日、产品促销风格Banner青春、活力风格Banner121.1.3Banner设计基础与要求2.确定Banner风格复古风格Banner简约时尚风格Banner趣味、可爱风格Banner文艺、小清新风格Banner131.1.3Banner设计基础与要求3.进行Banner排版设计排版是指将文字、图片、图形等可视化信息元素进行位置、大小、外观的调整，使之达到美观的视觉效果。在Banner排版过程中，常用到以下排版原则。相关内容对齐、聚拢适当留白保持画面的和谐统一使用对比突出原则把握节奏韵律把握画面的平衡性排版原则141.1.3Banner设计基础与要求3.进行Banner排版设计在Banner排版过程中，文案与商品（模特）的排版尤为重要，一般呈现为以下几种模式。两栏式Banner三栏式Banner上下式Banner151.1.3Banner设计基础与要求3.进行Banner排版设计组合模式Banner满版式Banner161.1.3Banner设计基础与要求3.进行Banner排版设计中心式Banner171.1.4主图设计基础与要求不同平台对主图尺寸的要求有所不同，通常淘宝PC端和跨境端电商店铺主图尺寸为800像素×800像素，移动端主图尺寸为600像素×600像素。主图一般由背景、商品和文案组成，下面从这3个方面分析主图设计的要求。背景：背景颜色常使用可以烘托商品的纯色背景，切记不要用过于繁杂的颜色。纯色背景主图场景图主图181.1.4主图设计基础与要求文案：在编辑促销信息时，内容要尽量简单、字体统一，做到简短、清晰有力，避免出现促销信息混乱、喧宾夺主等情况。文案精简的主图商品：需要控制主图中商品的大小，商品太小不方便查看，商品太大又不易放置文案，一般商品高度应控制在背景高度的2/3到4/5为宜。191.1.5详情页设计基础与要求1.明确详情页展示的内容在设计商品详情页模块时，首先应通过焦点图展示商品，然后将商品的卖点描述清楚，对商品品质进行展示，并给出优惠让消费者心动，最后通过树立品牌和服务形象，促进信任，达成交易，下面分别进行介绍。商品品质展示是对商品信息的详细展示。树立品牌和服务形象消除消费者的疑虑和对相应疑虑的解答。焦点图通过场景图或海报对商品的特点进行展示。商品卖点展示增加商品竞争力，吸引消费者。201.1.5详情页设计基础与要求1.明确详情页展示的内容工艺细节展示品质保障展示211.1.5详情页设计基础与要求2.确定详情页规格与风格通常淘宝PC端和跨境端电商店铺详情页宽度为750像素、移动端详情页宽度为480像素，详情页高度通常会根据商品需要展示的内容进行调节。详情页可呈现多种风格，设计前可参考该商品的Banner风格进行确定。为了保持风格的统一，商品详情页的用色、字体、排版方式等应具有协调统一性，各个模块之间的版式分割要统一。221.1.5详情页设计基础与要求3.进行详情页设计在进行详情页文案和图片的编辑时，为了使详情页更加具有吸引力，需要注意以下3点。020103详情页选择的图片要清晰、美观，尽量从多角度展示商品。保持图片的精美编写商品文案时需要有创意。差异化文案都必须真实地反应或介绍出商品的真实属性。实事求是原则1.1网店装修的设计基础与要求1.2网店装修色彩的搭配241.2.1色彩搭配的原理鲜明红色复古红色色彩是有情感的，不同的色彩会带给人不同的心里感受，具体影响如下。红色系：红色是强有力、喜庆的色彩，具有刺激效果，容易使人产生愤怒、热情、活力等感觉。鲜明的红色极容易吸引目光，在店铺装饰中常用于突出表现某些内容。白色系：纯白色会带给人光明、严寒的感觉，在使用白色时，一般会掺一些其他的色彩。251.2.1色彩搭配的原理坚果海报男士皮鞋主图橙色系：橙色给人温暖、朝气活泼、华丽、健康、兴奋、欢乐、辉煌、有食欲的感觉。黄色系：明亮的黄色给人甜美幸福、喜庆、富饶的感觉。绿色系：绿色是大自然中最常见的颜色，浅绿色给人文艺清新的感觉，深绿色给人天然、健康、生命、青春、希望的感觉。黄色系绿色系261.2.1色彩搭配的原理蓝色系紫色系蓝色系：高纯度的蓝色给人整齐轻快的感觉，低纯度的蓝色给人都市化的感觉。紫色系：紫色给人神秘、高贵、优雅、浪漫的感觉。较暗色调的紫色给人成熟的感觉，适用于以女性为目标消费群体的或摄影、绘画等艺术类的店铺装修。黑色系：黑色是一种百搭潮流的色彩，而在网店装修设计中，偏黑的颜色给人高贵、稳重、高科技的感觉。黑色系271.2.2色彩搭配的技巧1.同色系色彩搭配同色系色彩搭配是指使用一种色系中的不同纯度或明度的色彩进行搭配，这样搭配出的效果画面和谐、平衡性强，是比较安全的色彩搭配方式。如主色调为红色，在页面中搭配深浅不一的红色，如图所示，用白色或黑色作为点缀色，突出文案或商品细节。281.2.2色彩搭配的技巧2.不同色相的色彩搭配在12色相环中，将色彩分为红、橙、黄、绿、蓝、紫等12个区域，离得近的几种色彩搭配起来更柔和，离得远的几种色彩搭配起来则会更强烈，如图所示。相邻色搭配间隔色搭配互补色搭配分散的互补色搭配常见的搭配方式分别如下291.2.2色彩搭配的技巧2.不同色相的色彩搭配相邻色搭配互补色搭配间隔色搭配301.2.2色彩搭配的技巧3.不同纯度、明度的色彩搭配在色彩搭配中，除了色相的搭配，纯度、明度也直接影响色彩搭配效果，以Photoshop的拾色器为例，拖动左侧的颜色条，可以改变色相，将左侧的颜色选择区域中的色彩纯度分为高纯度、中纯度、低纯度，色彩明度分为高明度、中明度、低明度，有以下常见的搭配。色彩明度与纯度划分311.2.2色彩搭配的技巧3.不同纯度、明度的色彩搭配低明度色彩搭配高纯度、高明度色彩搭配低纯度、高明度色彩搭配低纯度色彩搭配321.2.3网店色彩搭配的原则柔色调+任务部分明色调柔色调+红色纯色调进行网店色彩搭配要清楚色彩原理、色彩搭配方案，还要结合店铺和商品的色彩或特点来合理选择主色调，并控制好色彩搭配比例，突出前景色和背景色的颜色对比。网店色彩搭配要遵循以下3项原则。合理选择主色调合理控制色彩比例突出前景色和背景色的颜色对比