在之前结笨,配色一直都是我的弱點(diǎn)包晰,而且會(huì)在這方面糾結(jié)很久,每次交稿的時(shí)候炕吸,總會(huì)被甲方噴成一坨屎伐憾,我覺得他說的很有道理,于是我花了很多時(shí)間在網(wǎng)上學(xué)習(xí)赫模,然后树肃,我的配色可能比坨屎好了點(diǎn)!F俾蕖胸嘴!
因?yàn)槲铱吹降亩际且恍杭t色代表激情、活力斩祭;藍(lán)色代表科技劣像、冷靜;綠色代表健康摧玫、生機(jī)驾讲;橙色代表溫暖;還有鄰近色席赂,互補(bǔ)色等等
這些理論理論有用嗎?答案是肯定的时迫,但我覺得這種理論看幾遍也就夠了颅停,看多了反而會(huì)很茫然,畢竟實(shí)踐才是王道
顏色認(rèn)知這一塊我也就不做過多的闡述了掠拳,網(wǎng)上的文章有很多癞揉,也可以在文章底部獲取配色書籍,里面講的可以說是非常全面了
下面我會(huì)分享5個(gè)總結(jié)下來的實(shí)用技巧給大家
1溺欧、顏色模式的選擇
2喊熟、永遠(yuǎn)不要使用純黑
3、不得觸碰的禁區(qū)
4姐刁、遵循60 : 30 : 10的的配色原則
5芥牌、巧用別人的顏色
文章最后還會(huì)給大家安利幾個(gè)配色網(wǎng)站和一些經(jīng)典的配色書籍
很多設(shè)計(jì)師通常是使用RGB顏色模式進(jìn)行調(diào)色,我之前也是一樣聂使,好看不好看全靠感覺壁拉,當(dāng)有一天了解到HSB這個(gè)模式后谬俄,就愛上了,而且非常好掌控弃理,做幾個(gè)對(duì)比就清楚了
RGB:是由紅(R)溃论、綠(G)、藍(lán)(B)色彩三原色組成
HSB:是由色相(H)痘昌、飽和度(S)钥勋、明度(B)色彩三要素組成
為什么說HSB模式更容易掌控呢,因?yàn)榍ё內(nèi)f化的顏色都是由飽和度(S)辆苔、明度(B)這兩者控制的
比如我們隨意選三個(gè)色相360算灸、23、280
這個(gè)時(shí)候可以清晰的看出中間的明度和其他兩個(gè)不同姑子,我們思考一下乎婿,換做之前我們使用RGB模式調(diào)整,我們肯定是選中中間的圓圈街佑,在色板上上移一點(diǎn)谢翎,下移一點(diǎn)
但是我們換用HSB模式,就只需要降低中間的飽和度S沐旨,提高它的明度B森逮,看上去就會(huì)和諧很多,不信你看
可以對(duì)比一下色值磁携,就能發(fā)現(xiàn)褒侧,這也就是我所說的HSB好掌控的原因了
還記得高中時(shí)期學(xué)習(xí)美術(shù)的時(shí)候老師就強(qiáng)調(diào)不要使用純黑!可能你覺得黑色不應(yīng)該就是黑色嗎谊迄,難不成還要加入其他顏色闷供?
沒錯(cuò),就是要加入其他顏色统诺,這也叫做環(huán)境色歪脏,我們總是把顏色較深的顏色叫做黑色,實(shí)際上粮呢,馬路不是黑色婿失,這篇文章的字色也不是黑色,就像天上的云也不是白色啄寡,總是偏藍(lán)的豪硅,當(dāng)然烏云除外(細(xì)想下,烏云其實(shí)也是有色相的挺物,哈哈)
同理懒浮,陰影也不是黑色的,比如在藍(lán)色背景上的陰影應(yīng)該就是偏藍(lán)的识藤,黃色背景上的陰影就是偏黃的嵌溢,萬物都會(huì)受到環(huán)境影響
這是Wayne Thiebaud的作品眯牧,我大概看了10遍。他是一位優(yōu)秀的畫家赖草,不拘一格学少,陰影一般都不用黑色,哪怕是連衣裙陰影的最深處也不是純黑
我們?cè)賮砜匆幌吕习娴腇acebbok界面秧骑,為什么Facebook移動(dòng)界面看起來這么贊版确?因?yàn)樗鼈兊幕疑晕诫s了一點(diǎn)Facebook標(biāo)志性的藍(lán)乎折。
當(dāng)你精心挑選了顏色绒疗,準(zhǔn)備開始設(shè)計(jì)時(shí),你又在頁面中加入了純黑骂澄,那很不幸的告訴你吓蘑,黑色會(huì)非常的突出,因?yàn)樽匀唤鐩]有真正的純黑坟冲,會(huì)顯得不自然磨镶。所以不放在黑色、灰色中加入一些其他的顏色健提,這樣顏色看起來就不呆板了
咨詢了很多人發(fā)現(xiàn)琳猫,他們?cè)谟蒙臅r(shí)候有一部分區(qū)域是不會(huì)使用的,但不同的人有不同的說法:三角形禁區(qū)私痹、矩形禁區(qū)脐嫂、扇形禁區(qū)
但不難發(fā)現(xiàn)右下角這塊區(qū)域很難操控,畢竟他們又臟又深紊遵,當(dāng)然什么顏色都能駕馭的大師就當(dāng)我沒有說過這句話
舉個(gè)栗子:下圖是之前做的一個(gè)出差的應(yīng)用入口账千,窗戶位置一開始就使用到了禁區(qū)中的顏色,看上去非常不通透
但是在調(diào)整到了非禁區(qū)顏色的時(shí)候暗膜,整個(gè)都變得通透匀奏,統(tǒng)一了起來
我們來看下實(shí)際效果
最后強(qiáng)調(diào)一下:禁區(qū)中的顏色也不是不可以使用,存在即合理桦山,只是相對(duì)新手不是那么好駕馭,需要慎用
經(jīng)常的時(shí)候醋旦,我們的配色雜亂無章恒水,很有可能是這一個(gè)原因造成的,沒有遵循配色占比饲齐,以及配色數(shù)量
60%的主色使用要點(diǎn)
主色一般使用品牌色钉凌,來加深品牌記憶,但對(duì)于主色有兩個(gè)錯(cuò)誤認(rèn)知捂人,我們要了解下:
1御雕、60%的主色不是指的使用面積矢沿,而是說主色的數(shù)量
2、主色不是說一種色彩酸纲,而是一種色相捣鲸,是可以通過調(diào)節(jié)我們前面說的飽和度(S)、明度(B)去變化的
30%的輔色使用要點(diǎn)
輔色一般和主色一起出現(xiàn)闽坡,用來襯托主色栽惶,使頁面變的更加豐富,一般有以下這幾種配色方法疾嗅,下圖以藍(lán)色為例外厂,可能出現(xiàn)使用的輔色
10%的點(diǎn)綴色使用要點(diǎn)
這是一個(gè)占比最小的顏色,一般在平衡畫面冷暖關(guān)系的時(shí)候會(huì)出現(xiàn)或者是在主色和輔色無法滿足某些信息時(shí)會(huì)用到
點(diǎn)綴一般都是主色的互補(bǔ)色代承,我們來看下示例就清楚了
還有一個(gè)小的知識(shí)點(diǎn)汁蝶,一個(gè)頁面中顏色最好不要超過3種,色相不要超過7種论悴,避免顏色過多產(chǎn)生混亂以及視覺疲勞
第五點(diǎn)掖棉,也是我之前在設(shè)計(jì)過程中經(jīng)常使用的一種方法,巧用別人的配色意荤,這個(gè)方法只適合初期配色時(shí)沒什么頭緒的設(shè)計(jì)師
首先我們像往常一樣打開dribble啊片,然后選擇一個(gè)你喜歡或者覺得可借鑒配色的作品
打開這個(gè)作品你就會(huì)發(fā)現(xiàn)有這樣一個(gè)配色板,那么玖像,你個(gè)色板就直接拿去用吧
或者你還可以像這樣紫谷,挑選一個(gè)你需要的主色,從這里面去選擇一個(gè)合適的作品生成自己的色板
1捐寥、Color Space ——適合給主色找配色
https://mycolor.space/
2笤昨、Color Hunt ——適合找流行、時(shí)尚的調(diào)色板
https://colorhunt.co/
3握恳、Cool Hue——漸變色配色版(有sketch和ps插件)
https://webgradients.com/
4瞒窒、再給大家安利一些配色書
可以在關(guān)注公眾號(hào)【會(huì)設(shè)計(jì)的喵】后臺(tái)回復(fù)【配色】免費(fèi)獲取配色電子書