當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

配色技巧,介紹一些色彩理論(4)

來源:robots.thoughtbot 作者:百度UED 學(xué)習(xí):2677人次

在設(shè)計時,對色彩的使用可以看做是給你的工作媒介創(chuàng)造另外一個維度。選用一套成功的配色,是一個有意義和有層級的設(shè)計的基礎(chǔ)。采用定配色的方法會讓整個設(shè)計過程更流暢,雖然在剛開始進(jìn)行色彩選擇時會覺得比較無從下手。

我發(fā)現(xiàn)其實(shí)只需要三個顏色就已足夠——做這三個顏色的決定也沒有那么難。三個同級的顏色也不會讓你在使用時壓力很大。在本文中我會介紹一些色彩理論和一點(diǎn)兒長久以來我積累的小技巧。希望可以在你色彩的選擇和使用上有所幫助。Enjoy!

色環(huán)

當(dāng)你閉上眼睛去想象一個色環(huán)的時候,你腦海中出現(xiàn)的很有可能是Johannes Itten(約翰.伊頓)設(shè)計的那一個。Johannes是包豪斯和他自己的一系列東方信仰研究的代表。他堅信“我們外在的科學(xué)研究和技術(shù)必須要和我們的內(nèi)在精神與思考的力量相平衡”,正因?yàn)槿绱,他會帶著他的學(xué)生在課前做呼吸,冥想和一些體育運(yùn)動等練習(xí)。(很酷吧!)

配色技巧,介紹一些色彩理論

下面是對約翰理論的分解。在他的色環(huán)里,一共有十二個顏色:三個原色,三個間色,六個復(fù)色-即我們所熟知的色相。伊頓這個設(shè)計的美妙之處在于:無論是復(fù)雜的色彩理論或者是簡單的選擇互補(bǔ)色,這個色環(huán)都可以作為你的基準(zhǔn)。

色彩

原色: 黃,紅,藍(lán)。

間色: 橘,紫,綠。

復(fù)色: 橘黃,橘紅,紫紅,藍(lán)紫, 藍(lán)綠,黃綠。

配色技巧,介紹一些色彩理論

一些名詞釋義

色相——另外還有個名字叫光譜色,還記得小學(xué)時候的赤橙黃綠青藍(lán)紫么?

明調(diào)——往色相顏色中加白色,使其更亮。

暗調(diào)——往色相顏色中加黑色,使其更暗。

飽和度——色相的鮮艷程度,純度的低到高。

配色的選擇

當(dāng)你要選擇配色時,你的選擇不可能僅僅是約翰伊頓色環(huán)的這十二個顏色。這可能會是個比較殘忍的事情。但是伊頓色環(huán)可以作為一個向?qū)。他讓你感覺顏色并不是那么復(fù)雜。不同的級別飽和度的顏色可以飽含上千的明調(diào)和暗調(diào)。但是他們都是源自于這簡單的12個色調(diào);是不是很令人欣慰。

現(xiàn)在,讓我們進(jìn)行實(shí)戰(zhàn)練習(xí)吧。一條很好的經(jīng)驗(yàn)法則告訴我們最好從黑白兩色開始設(shè)計。這會讓你的基礎(chǔ)結(jié)構(gòu)層級鮮明,沒有其他雜亂的元素。我們假設(shè)你現(xiàn)在正在設(shè)計一個版式:帶頭部并且頭部下有刪格化的文章列表。它的線框圖可能看起來是這樣的:

配色技巧,介紹一些色彩理論

你可以看到我們已經(jīng)初步規(guī)劃了幾個重點(diǎn)的展現(xiàn)并且通篇采用了對比的手法。如果這個階段有什么差錯的話,顏色也不會拯救這一切。只有在你已經(jīng)對版式充滿自信的時候,你才可以開始考慮顏色。

我們對這個版式已經(jīng)感覺不錯了,所以現(xiàn)在我們開始給他填充顏色——不要忘記保持簡單。選三個顏色使用并且保持僅使用這三個顏色。我的理念是挑兩個顏色扮演主要角色剩下一個作為跑龍?zhí)椎摹_@個龍?zhí)鬃詈檬强梢越o飽和度高的顏色的延伸的一種補(bǔ)充。另外兩個主顏色可以自由的用來創(chuàng)造層次感,代表意義,引導(dǎo)和品牌識別。可以用過色彩和諧來決定這些顏色或者使用Adobe色彩工具,但是,當(dāng)我開始的時候我發(fā)現(xiàn)其實(shí)我更容易從其他的地方找到靈感。

環(huán)顧四周

我喜歡從自然和我的周圍挑選我的配色。當(dāng)你走過大街,試著注意下你周圍的顏色。你是冷漠的,略帶攻擊性的,寒冷的或是堅韌不拔的?從你挑出的三個顏色中就能體現(xiàn)出你正在經(jīng)歷著的,更甚者能傳遞出之所以這樣選的理由。手機(jī)就是個能很好的幫你完成這項(xiàng)任務(wù)的工具。如果你是iPhone用戶,那我強(qiáng)烈推薦Sip, 若是Android的粉絲, SwatchMatic 則能助你一臂之力。

這里有一些來源于我生活的的靈感來幫助我去挑選3個關(guān)鍵色。與此同時我也會記錄下當(dāng)我捕捉到它們那一刻時激發(fā)起的感受。

配色技巧,介紹一些色彩理論

配色技巧,介紹一些色彩理論

配色技巧,介紹一些色彩理論

細(xì)品經(jīng)典藝術(shù)作品

經(jīng)典的藝術(shù)著作是另一個尋找靈感的好地方。如果你看到在博物館墻上懸掛的杰作,他們的色調(diào)是相對清晰的。每一個顏色都在適當(dāng)?shù)奈恢闷鹬陵P(guān)重要的作用。在畫布上的每一處筆觸都表達(dá)的準(zhǔn)確而無一絲多余。讓我們來看一些直觀的例子。

配色技巧,介紹一些色彩理論配色技巧,介紹一些色彩理論

牢記于心

色彩是一門回歸到它本身的科學(xué),它取決于文化因素,性別,癖好,顏色,很容易成為整個學(xué)術(shù)論文的課題。這超出了文章討論的范圍,讓我們言歸正傳。顏色其實(shí)可以被分為兩大類別:冷色系和暖色系。暖色系,如紅,橙和黃是積極的而有活力的。冷色系,如藍(lán),綠和紫是寒冷蕭條的。他們粗略的將色環(huán)分割開來。

這里有一個很關(guān)鍵地事實(shí)去分清他們。那就是視覺層面上暖色系總是比冷色系更為突出,層級更優(yōu)先。試想,一副風(fēng)景圖,一個冷冷地藍(lán)色天空總是被弱化作為背景。暖色風(fēng)景卻躍于畫面最前邊。

配色技巧,介紹一些色彩理論

運(yùn)用配色

經(jīng)過Albert的例子,讓我們再從之前在“環(huán)顧四周“一節(jié)的那些素材中依次提取的三個顏色組成版面再次進(jìn)行練習(xí)。首先來自Burlington的磚和天空。天空藍(lán)因?yàn)樗{(lán)色自身冷色的隱退性被作為了底色。磚紅色以暖色鮮亮的特征被用在藍(lán)色的上層。最后,碳黑色的標(biāo)題在底色的強(qiáng)烈對比下使信息更為明顯。

配色技巧,介紹一些色彩理論

對于來自New Jersey的鐵路發(fā)動機(jī),我們以銀灰色為底色,它是一個很自然的顏色,中庸而不出挑。中性色是一種襯托其他顏色的類型。而深蔓越莓紅作為主色調(diào)和標(biāo)題色,奠定了整體色調(diào)的同時也強(qiáng)調(diào)和突出了信息。碳黑色在最后被運(yùn)用在了頁腳和按鈕,也是希望通過強(qiáng)烈的色彩反差來引起用戶注意。

配色技巧,介紹一些色彩理論

最后的一個案例,同樣也是冷色——森林綠做了底色。將灰色定為主色調(diào),亮橙色被作為了聚焦點(diǎn)用在了按鈕和標(biāo)題以及頁腳。同時又因?yàn)樗母唢柡投仁沟庙撁嫫教砹艘恍┗盍Α?/p>

配色技巧,介紹一些色彩理論

保持簡潔

選擇和運(yùn)用你自己的配色時不要太過拘謹(jǐn)。保持簡潔,選擇三個適合你設(shè)計的顏色來創(chuàng)建起一個能表達(dá)你設(shè)計的通道。并用它們來表現(xiàn)界面的層次。最重要的是能用智慧運(yùn)用屬于你的配色。

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!