淘宝美工配色_第1页
淘宝美工配色_第2页
淘宝美工配色_第3页
淘宝美工配色_第4页
淘宝美工配色_第5页
已阅读5页,还剩119页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

配色干货分享——网店美工配色技巧最全面的配色知识分享哪个更暖?哪个促销更火爆?哪个更鲜艳?如果将水果的色彩去掉,便再没有流口水的冲动。一、学配色必须先了解配色比例日本的设计师提出过一个配色黄金比例,是70:25:5,其中的70%为大面积使用的主色,25%为辅助色,5%为点缀色。一般情况下建议画面色彩不超过3种,3种是指的3种色相,比如深红和暗红可以视为一种色相。二、了解色彩的关系

色彩搭配就是不同色相之间相互呼应相互调和的过程,色彩之间的关系取决于在色相环上的位置,色相和色相之间距离的角度越近,则对比越弱,离得越远则对比越强烈。在色相环上相距120度到180度范围之间的两种颜色,称为对比色,距离越远(色相差越大)对比越强。其中距离180°的颜色对比最为猛烈,又专门起了一个名叫互补色。配色的第一个步骤就是根据你想要表达的内容选出主色系主色选好了以后我们就要开始做色彩搭配啦RGBCMY光色印刷色常见的色彩搭配方式类似色搭配对比色搭配互补色搭配①相邻色搭配在色轮中挨着比较近的就是邻近色,根据红橙黄绿蓝紫这六字顺序,相邻色搭配就是红+橙,橙+黄,黄+绿,绿+蓝……以此类推。

相邻色因为比较邻近,有很强的关联性,非常协调柔和,画面非常和谐统一,可以制造出一种柔和温馨的感觉,因为在色轮中位置较近所以这种搭配视觉冲击力较弱。

相近色搭配中还有一种单色系的搭配方式,采用同一色相,仅仅调整该色的明度/饱和度,得到另外一种颜色。如上图所示,文字颜色就是用背景色降低饱和度/明度后的结果。本身背景色明度很高,又采用单色搭配手法所以会给人高雅,淡雅,宁静的感觉。

七夕这张图片使用的蓝与紫搭配,画面宁静和谐。旁边这张图片使用的单色搭配,深蓝+浅蓝,画面统一带有一点传统的感觉。

这张海报用的红+橙的搭配方式,以橙色为主色调,背景中采用不同橙色增加了画面的空间感,并且让画面看起来不是那么的单调。

②间隔色搭配根据红橙黄绿蓝紫这六字顺序,红+黄,橙+绿,黄+蓝,绿+紫,蓝+红,因为这种搭配方式中间都隔了一个颜色,因此称为间隔色。间隔色相比较相邻色,2色之间在色轮上相隔远一些,因此视觉冲击力会强于相邻色,而且间隔色使用非常广泛,既没有180互补色冲击力那么具有刺激性,又比相邻色多了一些明快丶活泼丶对比鲜明的感觉。特别是红黄蓝三原色之间的相互搭配,应用非常广泛,也非常流行。配色一定要控制好画面的色彩比例!

重点说下红蓝搭配:红蓝搭配应用非常广泛,因为这2个颜色是典型的冷暖结合的颜色,有很强的对比性,会给人留下很深刻的印象。比如百度的logo,百事可乐的logo,公安局的警车,超人、蜘蛛侠的动漫形象,很多国家的国旗等。这2种色彩对比很容易让人产生视觉疲劳和心理亢进,所以不适用家居等静物。

这些海报基本都无一例外的在图片中添加了白色作为调和,白色和黑色都是万能的调和色,红蓝搭配还要注意的是不能让色彩过于均衡,一定要控制好两色的比例,其中一个要为主色在画面中要占大比例,使之产生主次关系,或者降低其中一个颜色的明度/饱和度,产生一种明暗对比。

还需要说明一点的是:冷色在画面中总是趋于后退,暖色是趋近,暖色很容易就可以进入人的眼帘。这点就需要大家根据画面中重点信息的层级自己把握了。③互补色搭配在色轮中相隔180的2个颜色互为补色,是色彩搭配中,对比最为强烈的颜色,没有之一…根据红橙黄绿蓝紫这六字顺序,互补色就是中间间隔2个颜色,红+绿,橙+蓝,黄+紫…第一种常见于促销海报,官方的促销海报非常常见。充满视觉刺激性同时也很容易形成廉价的印象。第二种具有对抗,PK,对比性质的海报。互补色在色环相距180°,可以形成强烈的撞色效果,配合相等的色彩面积,非常适用于PK场景的设计。第三种就是消费群体以年轻人为主的产品。纯度较高的对比色可以演绎流行活力的感觉。

互补色搭配要注意三个方面:①一定要控制好画面的色彩比例,因为这2个颜色放一起对抗非常激烈,所以一定要选出一个老大当主色调,另外一方作为点缀或者辅助色。②可以降低其中一方的明度/饱和度,这样可以产生一种明暗对比,缓冲其对抗性。③在画面中加入黑/白作为调和色进一步缓冲其对抗的特性。案例赏析:为什么我懂这些还是做不好配色配色黄金比例日本的设计师提出过一个配色黄金比例,是70:25:5,其中的70%为大面积使用的主色,25%威辅助色,5%为点缀色。一般情况下建议画面色彩不超过3种,3种是指的3种色相,比如深红和暗红既可以视为一种色相。三、几种实战配色方案分析:我们做电商就是卖货,因此主要的设计需求都以产品为主,所以我们就可以根据产品的颜色以及客户的要求的风格基调这2个方面来配色。用一句话来阐述就是:以产品的颜色为基准(基色),以客户要求为方向(目标)。最终的图片效果与客户初始要求基调相匹配。

如何选色?可以从产品图中直接取色,这个方法很多朋友做过一段时间工作之后都会自行领悟,在一些设计书中也是不约而同的提到。因为从产品选出的色彩可以很好的与产品色相呼应,视觉上可以相互关联。是最简单的选色方法。

解析:采用邻近色的配色方案,背景取用人物衣服的蓝色。蓝色做为主色调,部分文案采用人物衣服上的青绿作为点缀色。画面格调整体冷静丶稳定丶柔和。

解析:采用间隔色的方案,蓝+黄。黄色为主色,以蓝色为辅助色,青绿色为点缀与模特肩上那一抹颜色相呼应,间隔色的搭配比邻近色多了一些明快,更富有视觉冲击力。

解析:经典红蓝搭配,一冷一暖,极具视觉冲击力,让人过目不忘,还可以传递出一种力量感和气势,还可以把潮流二字改为黄色,就变成了红黄蓝三色搭配,大家可以自己尝试下。

解析:选取模特身上较深的蓝色作为背景色,采用大量的白色作为中间和色,减少互补色激烈的对抗性。注:白色是万能百搭的调和色。

解析:上面几张案例基本都是用的高纯度的颜色,而高纯度的颜色会给人一种廉价促销的感觉,相比于前几张这张海报降低背景的明度之后可以很好的体现出一种高端的格调,在暗色背景上加一些炫光,也是一种常用的设计表现手法。

解析:深色的背景搭配高饱和度的颜色,既有高端的格调又有一些促销的感觉。副标题可以适当降低不透明度更好的突出主标题,达到主次分明的效果。我们总是在思考为什么我的产品性价比高、推广费也花了,销量就是提不上去?那是因为现在的人们实在太忙了,忙到不会花上多余的时间去考究你的产品是否符合他的要求。因此,我们要征服用户的眼睛,让他们一见钟情。配色基础

配色就是通过色彩的色相、明度、纯度的对比来控制视觉刺激,达到配色的效果。

你还需得处理好色彩的明暗关系关于明度

明度就是色彩的明暗程度。颜色越深明度越低,颜色越浅明度越高。明度就是该颜色的明亮程度,在拾色器中最上端的位置的选色皆为明度最高的,反之最下端就是明度低的。低明度的含义与格调上面这些淘宝广告图整体都是低明度,从中可以发现低明度的颜色搭配可以很好的表现出产品的品质感、品牌感、价值感,还可以体现出一种力量感,运动感,对抗性、商业感,奢华感,大气有档次。常见的国际大牌的官网基本都采用低明度暗色调的颜色搭配。淘宝常见的一些有气质格调的高端产品,比如家电类,科技数码类,化妆品,运动器械,或者和男性相关的的一些产品经常会采用低明度的搭配来表现产品的品质与价值感。因为低明度深重富有力量,较偏向男性的性格特点。高明度的含义与格调明度较高的可以表现出产品的清爽、透气性。还可以给人一种年轻、干净、纯洁、优雅的感觉,画面中会有一种平静、舒适、惬意祥和的氛围。高明度也可以展示出产品的品质感。这种品质感不同于低明度的图片,比如上方案例中的化妆品,低明度的图可以展示化妆品的价值感,有一定视觉冲击力。高明度的则可以体现出化妆品的清爽、透气和阳光的感觉。高明度的色彩搭配常见于淘宝的厨房家居行业、中国风相关产品,还有服装行业,零食行业、数码类和化妆品类也非常常见。相比较于低明度,则高明度的轻而淡、浮动而飘逸的感觉多适用于女性。学会用颜色体现页面的高级感下面大家先看两张图,看看哪个图更有高档的感觉?处理后对比案例二:下面这支口红的海报,用了中饱和度的适合小女生的粉色,又加了很多圆形泡泡点缀。这显然不够高逼格,高逼格必须要高冷!最后总结下:优雅有高级感的配色,主底色在明度方面要么很低,要么很高。饱和度方面是都很低,不然太鲜艳就会显得活泼没有高冷的感觉。关于饱和度饱和度也就是纯度,指的是色彩的鲜艳程度,饱和度越高代表颜色越鲜艳有很强的视觉冲击力,饱和度高低取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大,饱和度越大;消色成分越大,饱和度越小。饱和度就是色彩的鲜艳程度,颜色饱和度最高的就是纯色。拾色器最右侧的颜色皆为饱和度最高,反之左边就是最低。高饱和度配色海报是电商设计最为常见的一种手法,为什么呢?因为高饱和度海报会给人以热情,活力,健康,刺激,年轻的感觉而且有非常直接的视觉冲击,与电商受众人群匹配。而且还带有非常强的廉价促销感!

▌配色协调方法一

不同色相搭配,把不同色彩的亮度和饱和度调成一致或者近似,这是最基本的配色原则。▌配色协调方法二

同一色相搭配,只调该颜色的亮度和饱和度,也能达到和谐的效果。案例赏析:不同色相,明度饱和度相似同一色相关于色相色相,即各类色彩的相貌称谓,如大红、普蓝、柠檬黄等。色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。最初的基本色相有六种为:红、橙、黄、绿、蓝、紫。不同的色相会给人传递不同的感觉。世间万物的颜色都是由这六种调配而成,所以我们只讲这六种颜色的色相。红橙黄是暖色调,绿蓝紫是冷色调。下面通过大量的优秀案例让大家更好的理解这六种颜色代表的含义。红色:代表热情、活泼、热闹、温暖、吉祥、幸福、女性。橙色:代表光明、华丽、甜蜜、兴奋、快乐。黄色:代表高贵、明朗、富有、愉快、希望。绿色:代表植物、生命、升级、和平、柔和、安逸、新鲜、青春。蓝色:代表天空、清爽、沉静、理智、诚实、深远。紫色:代表浪漫、优雅、魅力、自傲。黑色:代表严肃、夜晚、沉稳、刚健、坚强、崇高。白色:代表纯洁、简单、纯真、朴素、神圣、明快。灰色:代表消极、阴暗、谦虚、平凡、沉默、中庸、寂寞。冷色暖色

红色首先可以体现出一种节日气氛,喜庆、热闹、狂欢,激情。

红色还代表着女性的性感、妩媚、高贵,天猫的logo也是用的红色。暗红色可以体现女性的妖娆性感和妩媚。而且有高贵、品质、知性的感觉。天猫的首页整体就采用的略暗的红色,既有一定的促销感、又带有一定的品质感。上文已经说过低明度都可以表现出品质感.红色还可以体现出产品的力量感和能量感,红+黑的搭配还有一种古典的感觉,比如汉服。

红色是中国人民最喜爱的颜色,当然会有一种历史、文化的格调,同时也代表一定的权威。

红色还经常用于表现美食,食品。给人以味觉刺激。红色总结:红色的格调有喜庆,热闹的节日气氛;可体现女人的妖娆,妩媚,知性,性感;产品的力量能量感;历史文化的气质;还可以用于表现美食食欲。同时红色也是一种警示色,例如红绿灯,各种交通标识,有一定权威性。纯红色有很强的刺激感,降低红色的明度也就是暗红色可以体现出产品的奢华的品质感。

橙色的格调有一种廉价的促销感,最典型的例子就是淘宝的网站配色。

橙色是一个很生活化的颜色,可以表现家庭,生活的格调,也是常见水果的颜色。

橙色还可以体现卡通、童趣、快乐、轻松的氛围。

橙色还经常用于零食和水果产品,属于一种食品色,可以诠释一种家庭的氛围,有一种幸福的感觉。橙色总结:橙色比红色少了一些视觉冲击,可以体现一种廉价促销的感觉,橙色可以表现在餐饮,水果,食品行业,有一种卡通,童趣,趣味感,橙色还可以体现年轻活力,家庭的幸福感,橙色也是秋天的颜色。黄色黄色与黑色搭配有很强的视觉刺激性,黄黑搭配在生活中经常当做警示标志。黄色还可以体现一种文艺范,略有一丝高傲的感觉。黄色可以体现出年轻、活泼、轻时尚的感觉黄色还可体现一种卡通、童趣、趣味的格调。黄色总结:黄色的格调童趣、好玩、卡通、年轻活泼、时尚文艺范、警示醒目,另外黄色和橙色一样也常用于夏季水果类的产品。绿色绿色本身就有绿色环保的特征,因此常见于家装,家居,户外用品等行业或者说只要想表现自然,环保,纯净,卫生的产品多少都会使用到绿色系。绿色还可体现生命、健康,因此化妆品或者保健药品也经常使用绿色。

绿色也是春天的颜色,还代表着青春岁月!绿色总结:绿色格调有自然环保、清新、卫生、生命、健康、春天、青春。蓝色蓝色是使用非常广泛的颜色,在生活中银行,警察,商务公司,都经常会采用蓝色。蓝色是一个很大气的颜色,因为宇宙和地球都是蓝色,因此在淘宝上也经常看到非常大气的蓝色基调页面。蓝色也是天空和大海的颜色,因此补水化妆品经常采用这类海底表现手法,即可突出品质感,又可以给人以干净,清爽,冰凉的补水感觉。蓝色即可用于夏天也可以用于冬天,夏天用蓝色体现产品的清爽,冬天用蓝色体现产品抗寒性。蓝色是冷色调的代表色。蓝色即是深海颜色也是暗夜的颜色,因此也会给人一种幻想,秘密的感觉。蓝色因其本身所具有的商务,稳定,安全的格调,所以在淘宝上也是科技、数码家电类产品的最爱。蓝色总结:安全,稳定,商务,科技,大气,寒冷,清凉,冰爽、品质,幻想。紫色紫色是很多女性喜欢的色彩,可以表现女性的优雅,高贵的气质,并且带有魔幻梦幻神秘的感觉。紫色所带有的神秘梦幻的感觉,较常见于淘宝女性内衣等较为私密的产品。因此多用蓝+紫的搭配方式。紫色经常与粉色搭配用于表现爱情婚恋主题。紫色与粉色都是偏女性的颜色。总结紫色:紫色可代表女性的优雅、高贵气质。有魔幻、梦幻、诱惑、神秘的格调。粉色最后在说下粉色,因为粉色在淘宝里几乎所有和女性相关的产品都会用到,是女性的专属颜色,相比紫色,粉色的受众则更年轻些。粉色和蓝色搭配会有一种情侣的格调。思考:

为什么香奈儿、LV都用黑色做主色?▌

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论