跨境电子商务视觉设计：跨境电商店铺色彩搭配PPT教学课件.pptx

跨境电商店铺色彩搭配项目二

YCF2.1色彩的基础知识2.2跨境电商店铺色彩搭配技巧目录CATALOG

01了解色彩的基础知识。02掌握跨境电商店铺色彩搭配技巧。知识目标

01能够对不同的色彩进行对比、搭配。02能够进行有效的网店配色。技能目标

重点与难点重点:（1）色彩的基本特性。（2）网店配色。难点：（1）色相对比与色彩视觉。（2）网店页面与色彩。

案例导入—跨境电商店铺配色技巧1.色彩风格定位色彩风格定位也就是确定主色调。什么是色彩风格？什么是主色调？先来看两幅图，试着分别用这几个关键词去对应这几张海报：高档、促销、喜庆、科技。能对应得上吗？相信绝大多数人都能对应上，因为从小到大受到周围环境的影响，在人们的潜意识里已经形成了这样一种色彩印象，也就是所谓的色彩风格：红色象征喜庆，蓝色象征科技，暗黑象征高档，橙黄象征促销。

案例导入—跨境电商店铺配色技巧所以不管是做详情页还是做海报，首先要根据产品的风格来确定主色调。比如现在要做一款女装的海报，如图左所示。图左中的服装是不是很粉嫩，很可爱？再比如下面这款服装，如图右所示。暗黑的花纹、蝙蝠的翅膀，给人的感觉就是阴森、黑暗。如果做详情页时首先考虑用粉色来跟这款衣服搭配，画面会让人感觉“太诡异”。所以做任何图片之前都要根据产品的风格来确定主色调，主色调不同于主体。产品是海报的主体，是图片中最重要的部分；但主色调的作用也不可忽视，用好了可以很好地烘托出主体的风格。

案例导入—跨境电商店铺配色技巧2.色彩的风格主色调定好了，接下来就要确定搭配色了。那么如何才能搭配出合适的配色呢？图示的海报，主色调是黑色，文字部分选的是比较透亮的黄色与白色，与背景形成鲜明的反差，自然就脱颖而出了。这是对比色的应用，黑色与白色搭配是明度对比，黑白与黄色搭配是无彩色与有彩色的对比，等等。简单来说，案例海报的配色就是选择与主色调差别较大的颜色（对比色），这个差别可以是明度上、色相上的差别，也可以是纯度上的差别。一般来说，色彩基础比较扎实的人是可以随机应变的，根据色彩要素可以随意组合出自己想要的任何风格的配色。新手怎么办？对色彩没有那么敏感，总不能盲目地配色。经验告诉我们，最好的办法就是临摹。3.色相的种类色相的种类不超过3种，是最不容易出错的搭配法则（对色彩的把控能力特别强的话可以例外）。一般来说，不是追求特别夸张、特别刺激的画面，色相的种类不超过3种是最为适宜的做法。

案例导入—跨境电商店铺配色技巧4.色彩的面积主色和对比色的比例要协调，一般来说,主色的面积占比是最大的，对比色（想要突出的重点）的面积占比小，如图所示。图片一眼看过去全是黄色（主色）——最能烘托海报想要表达的促销主题，烘托活动低价的氛围。再看主题部分“抢足红包”，用了明度最高的白色（对比色），面积很小，次主题“最高1111元”用的是一个红色的色块，面积占比也很小——但这两个面积很小的地方却很抢眼。通过这个案例想传递给大家的信息如下。主色：通常面积占比最大，一眼看过去全是它，最能体现产品的风格，烘托整张海报的氛围。对比色：通常面积占比很小，但颜色要最抢眼，能突出重点。

案例导入—跨境电商店铺配色技巧5.最不容易出错的配色方法——吸物法如果拿到一款产品，做详情时不知道它是什么风格的，对配色完全没有思路，那么最保险的方法就是取物体本身的颜色来搭配。例如，一件红色衣服，如果看不出来它是什么风格的，那么主色就选和衣服一样的红色或者粉色，而且整个详情的底色都用该颜色。搭配色的话首先选黄色，而且面积要很小，可能会用在详情标题栏的位置。同理，如果一件衣服除了黑白和红色，还有面积很小的黄色，那么黄色部分一般是服装设计师设计这款衣服时想要表达的亮点，使衣服整体看起来多了一份活力，如果去掉这一抹面积很小的黄色，整个服装的色彩设计给人的感觉可能就有点乏味了。

案例导入—跨境电商店铺配色技巧6.色彩临摹法色彩临摹法的前提是要找准产品的风格、定位，再相应地去找合适的临摹对象。例如，要做一张复古优雅的女装海报，那么就可以从复古优雅的花瓣海报中选一张最合适的，直接模仿它的色彩就好。模仿优秀配色的原则是除了色相、明度、饱和度要抄对之外，最重要的是各个颜色之间的面积比例要抄对。最后给大家留一个问题：看到图示这张海报配色（主色调为紫色，字体为白色），你能联想到的词汇有哪些？

2.1色彩的基础知识2.1.1色彩的种类2.1.2色彩的基本特性2.1.3国际标准色彩体系2.1.4色相对比与色彩视觉2.1.5色彩的表现特征

2.1.1色彩的种类色彩可分为两大类：无彩色系和有彩色系。有彩色系的颜色具有三个基本特性：色相、纯度（也称彩度、饱和度）、明度。饱和度为零的颜色则为无彩色系。提示

2.1.1色彩的种