零基礎(chǔ)新手配色指南

色彩是十分重要的。色彩是設(shè)計(jì)的表現(xiàn)手法之一摔桦,色彩的不同搭配可以改變商品給人的印象社付。我們生活在這個(gè)五彩繽紛的世界里承疲,雖然每天都在享受大自然給予我們的視覺盛宴,但輪到我們自身來運(yùn)用色彩時(shí)鸥咖,是不是又覺得束手無策燕鸽,不知所措呢?

真正擁有豐富色彩感的人只占極小的一部分啼辣,利用有限的色彩營造視覺沖擊效果的專家更是寥寥無幾啊研。作為對(duì)配色苦手的大多數(shù)人,有什么方法可以提高配色能力鸥拧,避免嚴(yán)重的配色錯(cuò)誤呢党远?

這篇文章相對(duì)基礎(chǔ)和簡單,將會(huì)介紹基礎(chǔ)的配色理論和一些實(shí)用的配色工具富弦,可能對(duì)于配色苦手的新人會(huì)有一些幫助沟娱。當(dāng)然也包含了自己的配色喜好,顏色是沒有責(zé)任的腕柜,岡本一宣這么說济似,不同的人對(duì)于顏色的喜好各不相同,如果這篇文章能在閱讀完之后給于你在配色方面提供一些經(jīng)驗(yàn)和幫助于我來說便是非常榮幸的事情了盏缤。這次的文章是結(jié)合了《配色設(shè)計(jì)原理》以及《設(shè)計(jì)的細(xì)節(jié):日本經(jīng)典設(shè)計(jì)透析》兩本書的部分內(nèi)容砰蠢,在這里推薦大家在工作之余閱讀。以下是正文內(nèi)容唉铜。

一台舱、需求做完了總感覺哪里不對(duì)

不管是設(shè)計(jì)師做需求還是運(yùn)營為公眾號(hào)新寫了一篇推送文章,又或者是是自己需要做一份ppt來向合作商展示產(chǎn)品打毛∈辽蓿花了大半天時(shí)間終于折騰完了。大呼一口氣幻枉,正打算交付的時(shí)候碰声,仔細(xì)一看,總感覺哪里不對(duì)熬甫。

配色一般發(fā)生在需求制作之前的思考胰挑,或者是作品完成之后的檢查,也就是“頁面做完之后總覺得哪里不對(duì)”椿肩。當(dāng)然出現(xiàn)這樣的事情自然是在顏色方案上出現(xiàn)了一些問題瞻颂,那么我們可以從哪些方面著手來進(jìn)行修正呢?

從這張圖中我們可以感覺到確實(shí)有很多的違和感郑象,那么我們分開來討論贡这,到底是哪些部分出現(xiàn)了問題,如何改善才會(huì)合適些厂榛。我們把頁面的內(nèi)容分為:背景(底色)盖矫,圖片(形狀)丽惭,文字。來分別描述在顏色上的問題辈双。

1.背景责掏,背景顏色過于重了,在體現(xiàn)寧靜湃望、穩(wěn)重風(fēng)格的版面時(shí)换衬,利用白色去表現(xiàn)寫真是表達(dá)主題的一條基本原則。在背景選擇時(shí)往往需要同時(shí)考慮角版圖片的背景证芭,不至于在完成時(shí)出現(xiàn)較大的顏色反差瞳浦。

2.圖片(圖形),其實(shí)是較為統(tǒng)一的木色檩帐,但是上下兩部分的“圓形”卻使用了比較亮眼的橙色术幔,抹殺了寫真本身的顏色,雖然達(dá)到了吸引人的亮眼氛圍湃密,卻給人一種輕率不穩(wěn)重的印象。

3.文字四敞,如果仔細(xì)看的話泛源,文字的顏色似乎過于多了,在寫真介紹中分別使用了三種顏色忿危。同時(shí)达箍,在深色背景上使用的黑色標(biāo)題產(chǎn)生了讓文字不容易閱讀的感覺。

下面就針對(duì)這個(gè)簡單的例子铺厨,我們進(jìn)行一些修改:

need-to-insert-img

修改后:

1. 簡單地利用白底缎玫,在簡約風(fēng)格的作品中,一般會(huì)運(yùn)用白底表現(xiàn)效果解滓。白色底色是版面設(shè)計(jì)的基本色赃磨,是可以襯托出任何寫真的萬能色。

2. 修正了圖形的顏色和文字的顏色洼裤,讓畫面更為統(tǒng)一和諧的同時(shí)增加了可讀性邻辉。

二、基礎(chǔ)配色理論

說到這里腮鞍,其實(shí)關(guān)于怎么選擇顏色真的有很多很多的方法和理論值骇,同時(shí)也會(huì)因?yàn)樵O(shè)計(jì)師的性格和喜好,對(duì)同一個(gè)作品又不同的見解移国,真正擁有豐富色彩感的人只占極小的一部分吱瘩。我們能做的只是在可以使用理論方法等情況下,減少不必要的錯(cuò)誤和正確的使用顏色迹缀,僅此而已使碾。接下來的部分是基礎(chǔ)的配色理論蜜徽,可能會(huì)相對(duì)枯燥和乏味,但對(duì)于每一位需要和顏色打交道的設(shè)計(jì)師部逮,這也是必須要交手的對(duì)象娜汁。

色彩是什么?

其實(shí)硬要說色彩是什么兄朋,它是人腦對(duì)于光的強(qiáng)弱和不同波長所產(chǎn)出生的差異的感覺掐禁,與形狀同為最基本的視覺反應(yīng)之一。物體被光線照射并反射光線被人腦接受颅和,形成了對(duì)“色彩”的認(rèn)識(shí)傅事。當(dāng)然還有些物體是直接發(fā)光的,比如說我們的屏幕峡扩。光波是電磁波的一種蹭越,其中人類可以看到的稱之為“可見光”根據(jù)可見光波長的由短到長,我們可以識(shí)別紫色教届,藍(lán)色响鹃,青綠色,綠色案训,黃綠色买置,黃色,橙色强霎,紅色等色彩忿项。

色彩的三屬性

我們把顏色分為“色相”、“明度(亮度)”城舞、“純度(飽和度)”三個(gè)屬性,色彩可以根據(jù)三屬性進(jìn)行體系化的歸類轩触。為了能夠掌握無數(shù)的色彩并運(yùn)用自如,必須充分理解這三個(gè)屬性家夺。

色相:色相是指物理學(xué)或心理學(xué)上區(qū)別紅脱柱、藍(lán)、黃等色感的要素之一秦踪,同時(shí)也指顏色本身褐捻,將色相按照波譜上順序進(jìn)行排列,首位相連椅邓,形成的環(huán)狀圖形柠逞,稱之為“色相環(huán)”。在色相環(huán)上確定了色相之間的關(guān)系后景馁,配色實(shí)踐就變的簡單點(diǎn)多了板壮。

need-to-insert-img

明度(亮度):明度是指色彩的明亮程度,在任何顏色中添加白色合住,明度上升绰精,添加黑色撒璧,明度下降。因此笨使,色彩中明度最高的是白色卿樱,明度最低的黑色。白色-黑色的灰度色標(biāo)示明度差異的表現(xiàn)硫椰。同時(shí)明度也是決定文字可讀性和物體外觀的重要元素繁调。兩種色彩之間的差別,明度方面的對(duì)比越強(qiáng)烈靶草,色彩之間的交界部分越明顯蹄胰。

need-to-insert-img

純度(飽和度):純度是指色彩的鮮艷程度。新鮮水果的那種鮮艷奕翔、顏色的色彩代表的是“高純度”裕寨,樹汁和泥土等天然染料那種樸素、淡雅的色彩代表“低純度”派继。純度越低宾袜,顏色渾濁,純度最低的是灰色(無彩色)驾窟。純度的高低容易形成不同的氣質(zhì)试和,一般來講,純度越高纫普,越有活力,充滿朝氣好渠,純度越低昨稼,則容易給人成熟穩(wěn)重的印象。

need-to-insert-img

色彩三屬性的模式圖(色立體):

need-to-insert-img

其實(shí)可以簡單的理解為一個(gè)以色相環(huán)為基礎(chǔ)變化成的一個(gè)圓柱體拳锚,圓柱體的側(cè)面分布了整個(gè)色相環(huán)假栓;圓柱體的底面到頂面,色相環(huán)的亮度發(fā)生變化霍掺;圓柱體的軸心到側(cè)扁表層匾荆,純度發(fā)生變化。

當(dāng)然杆烁,現(xiàn)實(shí)中的純度變化會(huì)根據(jù)色相的不同而不同牙丽,并不是規(guī)律的幾何變化,因此兔魂,實(shí)際上的這個(gè)“圓柱體模型”應(yīng)該要復(fù)雜的多烤芦。

關(guān)于色調(diào)

大家應(yīng)該經(jīng)常聽人提起過色調(diào)這個(gè)詞語,在顏色三屬性中并沒有給出“色調(diào)”的定義析校,那么色調(diào)到底是什么呢构罗?色調(diào)是指色彩的濃淡和強(qiáng)弱程度铜涉,是通過色彩的明度和純度綜合表現(xiàn)色彩狀態(tài)的概念。也就是大家平時(shí)感覺的“這幾個(gè)顏色放在一起好像是一個(gè)色調(diào)的”這樣的感覺遂唧,雖然色相芙代,不統(tǒng)一,但是如果調(diào)整好“純度”和“明度”也能讓畫面展現(xiàn)統(tǒng)一的配色效果盖彭。

其實(shí)色調(diào)是日常生活中人們對(duì)于色彩認(rèn)識(shí)非常重要的一環(huán)纹烹,很多時(shí)候我們覺得某個(gè)畫面非常協(xié)調(diào)統(tǒng)一時(shí),往往是色調(diào)一致給人的效果谬泌。在實(shí)際配色過程中滔韵,如果需要選擇使用多種顏色或者使用到彩色的寫真的時(shí)候,使用色相調(diào)和的方法就比較容易達(dá)到效果掌实。

色相差與色調(diào)調(diào)和

need-to-insert-img

在使用色調(diào)調(diào)和的配色方案時(shí)陪蜻,可以使用各種各樣的色調(diào),但顏色的深淺(純度/明度)需要控制在一個(gè)幅度之內(nèi)贱鼻。

三宴卖、利用例子來描述基礎(chǔ)的配色方法

下面會(huì)以一個(gè)范例來作為模板,展示基本的配色類型邻悬。分為“由色相差而形成的配色”和“由色調(diào)調(diào)和而形成的配色”症昏。

A:由色相差而形成的配色

1. 有主導(dǎo)色彩的配色:

這是由一種色相構(gòu)成的統(tǒng)一性配色,體現(xiàn)整體統(tǒng)一性父丰,強(qiáng)烈的色相的印象肝谭。如果不是同一種色相,色相環(huán)上相鄰的類似色也可以形成相近的配色效果蛾扇,這就是“同色系”配色和“類似色”配色的效果攘烛。這種配色展現(xiàn)自然與和諧的印象,但同時(shí)也容易形成單調(diào)镀首、乏味的印象坟漱。

need-to-insert-img

上圖更多的想表現(xiàn)的是同色系的方式

need-to-insert-img

類似色搭配比同色系稍微豐富

2.對(duì)比色構(gòu)成的配色:

由對(duì)比色相互相對(duì)比構(gòu)成的配色「澹可以分為:由“互補(bǔ)色”或“對(duì)比色”搭配構(gòu)成的色相對(duì)比效果芋齿;由白色、黑色等明度差構(gòu)成的明度對(duì)比效果成翩;以及由純度差異構(gòu)成的純度對(duì)比效果觅捆。由于色彩之間的互相襯托,運(yùn)用高明度捕传、高純度的色彩惠拭,可以營造強(qiáng)烈的視覺沖擊效果。

need-to-insert-img

上圖是色相對(duì)比的方式

B:由色調(diào)調(diào)和而形成的配色

這是有統(tǒng)一色調(diào)構(gòu)成的統(tǒng)一性配色。深色調(diào)和暗色調(diào)等類似色調(diào)搭配也可以形成同樣的效果职辅,即使出現(xiàn)多種色相棒呛,只要保證色調(diào)i 址,畫面就能夠體現(xiàn)出整體的統(tǒng)一性域携。

在營造氣氛或情感時(shí)簇秒,可以通過色調(diào)調(diào)和的靈活運(yùn)用來達(dá)到目的,不同的色調(diào)可以表達(dá)出“柔軟”秀鞭,“明亮”趋观,“樸素”,“穩(wěn)重”锋边,“華麗”等印象皱坛。在確定使用色相前,構(gòu)思好使用的色調(diào)也是配色的基礎(chǔ)理論之一豆巨。

1. 淺色調(diào)調(diào)和

這張圖想表達(dá)的是冬日的風(fēng)景剩辟,冬天清澈,干凈的印象使我選擇了淺色調(diào)調(diào)和往扔,同時(shí)利用了明度的變化來表現(xiàn)層次感贩猎。

need-to-insert-img

△ 淺色調(diào)調(diào)和

2. 深色調(diào)調(diào)和

利用低明度,中高純度的顏色調(diào)和而成的夜晚景象萍膛。畫面表現(xiàn)出安靜吭服,祥和的氣氛。

need-to-insert-img

△ 深色調(diào)調(diào)和

3. 柔和(明亮)調(diào)和

雖然使用了多種色彩蝗罗,但是由于控制好了色調(diào)的波動(dòng)艇棕,使畫面的色彩依舊在一個(gè)相對(duì)和諧的區(qū)域內(nèi)。

need-to-insert-img

△ 明亮色調(diào)調(diào)和

四串塑、“知道了理論方法欠肾,關(guān)于實(shí)踐這件事”

這一個(gè)章節(jié),我講講述一些我自己平時(shí)使用的配色方法和工具拟赊。希望能對(duì)讀者您的日常工作提供一些簡單的幫助。

1.Adobe color CC

它的原名更為著名粹淋,也就是Kuler 吸祟,不知道什么時(shí)候開始改了名字,不過功能沒有發(fā)生太大的變化桃移。這是一個(gè)由設(shè)計(jì)師分享配色方案的一個(gè)平臺(tái)屋匕,已經(jīng)保存了成千上萬的預(yù)制配色方案。在photoshop上自帶了一個(gè)插件借杰,你可以直接調(diào)用上面的色彩方案过吻,并且非常方便的應(yīng)用到你的設(shè)計(jì)稿中去。

2.?Colorgg.com

我經(jīng)常使用這個(gè)網(wǎng)站用于,我只確定了一個(gè)主色的情況下纤虽,它能幫助我擴(kuò)展這個(gè)色彩乳绕,搭配出數(shù)種方案,甚至還有色盲修正方案逼纸。如果你只能確定一個(gè)必須使用的顏色洋措,選擇這個(gè)工具或許能獲得一些靈感。

3.Color Scheme Designer

這是一個(gè)在線的配色工具杰刽,相比于Adobe color 菠发,它擁有詳細(xì)的色彩修改方法,和簡單的顏色演示工具贺嫂。國內(nèi)有個(gè)舊版本的漢化版滓鸠,不過還是建議去官網(wǎng)使用最新的。

4.有趣的日本傳統(tǒng)色

這個(gè)網(wǎng)站專門列舉了250種日本傳統(tǒng)色第喳,且擁有了不錯(cuò)的動(dòng)畫過度效果糜俗。如果你對(duì)日式的色彩感興趣,這里或許能得道一些靈感墩弯。

五吩跋、城里面的配色套路

懂得那么多道理,依然配不好顏色(捂臉)渔工。如果你實(shí)在是對(duì)配色苦手锌钮,沒辦法得心應(yīng)手的獲取想到的色彩,那么或許引矩,是時(shí)候借助一下巧妙的辦法了梁丘。

1. 從寫真中獲取色彩

你總能看到一些非常美麗的圖片,當(dāng)然你的手機(jī)里或許也有一些旺韭,那么何不從中吸取一些顏色用到你的設(shè)計(jì)中去呢氛谜?色彩收集是一個(gè)偉大的靈感源泉,你可以快速在通過自己的素材庫或者互聯(lián)網(wǎng)渠道区端,去尋找你想要的色彩值漫,提高你的設(shè)計(jì)效率。

2. 手動(dòng)保存的顏色(漸變色)

如果你實(shí)在沒辦法從色環(huán)中提取出你想要的顏色织盼,那么在日常的閱圖過程中杨何,收集優(yōu)秀的配色方案,吸取并保存這也是一個(gè)很討巧的方法沥邻。如果你每天都能保存2份色彩方案危虱,或者僅僅是兩個(gè)漸變色,一個(gè)月后唐全,你就能導(dǎo)出一份《我最喜歡的漸變色選集》

3. 正確的顏色設(shè)計(jì)步驟

一個(gè)正確的設(shè)計(jì)步驟必須從開始的時(shí)候就選擇正確的道路埃跷,為了避免“頁面做完之后總覺得哪里不對(duì)”的情況出現(xiàn),我們需要在每一個(gè)步驟都提前為設(shè)計(jì)做好準(zhǔn)備。

設(shè)計(jì)開始時(shí)的問題:

你要制作的是一個(gè)什么樣的內(nèi)容弥雹?

你想要傳達(dá)什么樣的情感垃帅?

顏色在這個(gè)內(nèi)容中的作用和定位。

你設(shè)計(jì)的對(duì)象是誰缅糟,或者說挺智,你為誰設(shè)計(jì)?

這將很大程度的幫助你去選擇一個(gè)合適的設(shè)計(jì)窗宦,顏色設(shè)計(jì)有時(shí)很難確定這個(gè)就是正確的顏色赦颇,或者你調(diào)出來的這個(gè)顏色就是最合適的,所以這時(shí)候你就的在產(chǎn)品目標(biāo)赴涵,用戶群圖媒怯,使用場景等等做出篩選分析。從而確定顏色選擇髓窜。

設(shè)計(jì)進(jìn)行時(shí)的方法

我們通常把一個(gè)作品(這里指移動(dòng)端或者web端頁面設(shè)計(jì)扇苞,當(dāng)然插畫其實(shí)也是適用的)的顏色拆分為幾個(gè)部分分別進(jìn)行色彩的選擇。背景色寄纵、主色調(diào)鳖敷、輔助色、高亮色(提醒色)

在正確的地方使用正確的顏色程拭,想必在這個(gè)時(shí)候定踱,你應(yīng)該有了一個(gè)大致的顏色方案,那么注意不要犯一些常見的錯(cuò)誤恃鞋。比如在正確與錯(cuò)誤的選項(xiàng)上使用了錯(cuò)誤的色彩崖媚,就像是在通行過道上使用了紅色背景的指示牌。

結(jié)語:

其實(shí)我本身也對(duì)于配色也相當(dāng)?shù)目嗍中衾耍翊蠖鄶?shù)人一樣畅哑,在色彩上根本沒有什么稱得上的特長,寫完這篇文章水由,反而對(duì)自己的配色能力更加擔(dān)心了荠呐。希望大家能在文章中得到一些收獲。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末砂客,一起剝皮案震驚了整個(gè)濱河市直秆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鞭盟,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瑰剃,死亡現(xiàn)場離奇詭異齿诉,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門粤剧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來歇竟,“玉大人,你說我怎么就攤上這事抵恋』酪椋” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵弧关,是天一觀的道長盅安。 經(jīng)常有香客問我,道長世囊,這世上最難降的妖魔是什么别瞭? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮株憾,結(jié)果婚禮上蝙寨,老公的妹妹穿的比我還像新娘。我一直安慰自己嗤瞎,他們只是感情好墙歪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著贝奇,像睡著了一般虹菲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上弃秆,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天届惋,我揣著相機(jī)與錄音,去河邊找鬼菠赚。 笑死脑豹,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的衡查。 我是一名探鬼主播瘩欺,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拌牲!你這毒婦竟也來了俱饿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤塌忽,失蹤者是張志新(化名)和其女友劉穎拍埠,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體土居,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡枣购,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年嬉探,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棉圈。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡涩堤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出分瘾,到底是詐尸還是另有隱情胎围,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布德召,位于F島的核電站白魂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏氏捞。R本人自食惡果不足惜碧聪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望液茎。 院中可真熱鬧逞姿,春花似錦、人聲如沸捆等。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽栋烤。三九已至谒养,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間明郭,已是汗流浹背买窟。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留薯定,地道東北人始绍。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像话侄,于是被迫代替她去往敵國和親亏推。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容