2.1色彩的基础知识（课件）-《跨境电子商务视觉设计》同步教学（北京邮电大学出版社）

跨境电商店铺色彩搭配 项目二 1 YCF 2.1 色彩的基础知识 2.2 跨境电商店铺色彩搭配技巧 目录 CATALOG 2 01 了解色彩的基础知识。 02 掌握跨境电商店铺色彩搭配技巧。 知识目标 01 能够对不同的色彩进行对比、搭配。 02 能够进行有效的网店配色。 技能目标 重点与难点 重点: （1）色彩的基本特性。 （2）网店配色。 难点： （1）色相对比与色彩视觉。 （2）网店页面与色彩。 5 案例导入—跨境电商店铺配色技巧 1.色彩风格定位 色彩风格定位也就是确定主色调。什么是色彩风格？什么是主色调？先来看两幅图，试着分别用这几个关键词去对应这几张海报：高档、促销、喜庆、科技。 能对应得上吗？相信绝大多数人都能对应上，因为从小到大受到周围环境的影响，在人们的潜意识里已经形成了这样一种色彩印象，也就是所谓的色彩风格：红色象征喜庆，蓝色象征科技，暗黑象征高档，橙黄象征促销。 6 案例导入—跨境电商店铺配色技巧 所以不管是做详情页还是做海报，首先要根据产品的风格来确定主色调。比如现在要做一款女装的海报，如图左所示。图左中的服装是不是很粉嫩，很可爱？ 再比如下面这款服装，如图右所示。 暗黑的花纹、蝙蝠的翅膀，给人的感觉就是阴森、黑暗。如果做详情页时首先考虑用粉色来跟这款衣服搭配，画面会让人感觉“太诡异”。 所以做任何图片之前都要根据产品的风格来确定主色调，主色调不同于主体。产品是海报的主体，是图片中最重要的部分；但主色调的作用也不可忽视，用好了可以很好地烘托出主体的风格。 7 案例导入—跨境电商店铺配色技巧 2.色彩的风格 主色调定好了，接下来就要确定搭配色了。那么如何才能搭配出合适的配色呢？图示的海报，主色调是黑色，文字部分选的是比较透亮的黄色与白色，与背景形成鲜明的反差，自然就脱颖而出了。这是对比色的应用，黑色与白色搭配是明度对比，黑白与黄色搭配是无彩色与有彩色的对比，等等。 简单来说，案例海报的配色就是选择与主色调差别较大的颜色（对比色），这个差别可以是明度上、色相上的差别，也可以是纯度上的差别。 一般来说，色彩基础比较扎实的人是可以随机应变的，根据色彩要素可以随意组合出自己想要的任何风格的配色。新手怎么办？对色彩没有那么敏感，总不能盲目地配色。经验告诉我们，最好的办法就是临摹。 3.色相的种类 色相的种类不超过3种，是最不容易 出错的搭配法则（对色彩的把控能力 特别强的话可以例外）。 一般来说，不是追求特别夸张、特别刺激的画面，色相的种类不超过3种是最为适宜的做法。 8 案例导入—跨境电商店铺配色技巧 4.色彩的面积 主色和对比色的比例要协调，一般来说,主色的面积占比是最大的，对比色（想要突出的重点）的面积占比小，如图所示。 图片一眼看过去全是黄色（主色）——最能烘托海报想要表达的促销主题，烘托活动低价的氛围。再看主题部分“抢足红包”，用了明度最高的白色（对比色），面积很小，次主题“最高1111元”用的是一个红色的色块，面积占比也很小——但这两个面积很小的地方却很抢眼。 通过这个案例想传递给大家的信息如下。 主色：通常面积占比最大，一眼看过去全是它，最能体现产品的风格，烘托整张海报的氛围。 对比色：通常面积占比很小，但颜色要最抢眼，能突出重点。 9 案例导入—跨境电商店铺配色技巧 5.最不容易出错的配色方法——吸物法 如果拿到一款产品，做详情时不知道它是什么风格的，对配色完全没有思路，那么最保险的方法就是取物体本身的颜色来搭配。例如，一件红色衣服，如果看不出来它是什么风格的，那么主色就选和衣服一样的红色或者粉色，而且整个详情的底色都用该颜色。搭配色的话首先选黄色，而且面积要很小，可能会用在详情标题栏的位置。同理，如果一件衣服除了黑白和红色，还有面积很小的黄色，那么黄色部分一般是服装设计师设计这款衣服时想要表达的亮点，使衣服整体看起来多了一份活力，如果去掉这一抹面积很小的黄色，整个服装的色彩设计给人的感觉可能就有点乏味了。 10 案例导入—跨境电商店铺配色技巧 6.色彩临摹法 色彩临摹法的前提是要找准产品的风格、定位，再相应地去找合适的临摹对象。例如，要做一张复古优雅的女装海报，那么就可以从复古优雅的花瓣海报中选一张最合适的，直接模仿它的色彩就好。 模仿优秀配色的原则是除了色相、明度、饱和度要抄对之外，最重要的是各个颜色之间的面积比例要抄对。 最后给大家留一个问题：看到图示这张海报配色（主色调为紫色，字体为白色），你能联想到的词汇有哪些？ 11 2.1 色彩的基础知识 2.1.1 色彩的种类 2.1.2 色彩的基本特性 2.1.3 国际标准色彩体系 2.1.4 色相对比与色彩视觉 2.1.5 色彩的表现特征 12 2.1.1 色彩的种类 色