safe-color-matching-guideline-1

@Chuckie-Chang :今天對一些配色技巧和方法做一個分享和總結,無論你有美術基礎/色彩基礎還是零基礎,都可以使用此方法創造出安全的配色方案。

所謂安全配色,就是遵循一些設計規范,色彩規范,適應于Web和其它方面的UI設計,在這些色彩的基礎上,只要能控制好比例,就可以大膽的配色,無需參考,無需臨摹,無需借鑒。一種感性的安全配色,一種符合標準的安全配色。

這次分享介入了一些自己學習過總結過的色彩理論,當然如果同學們能夠學習鞏固好自己的色彩理論,扎實好自己的美術功底,對玩轉色彩是非常有好處的哦。本文章由沒位道博主@Chuckie-Chang 分享整理, 歡迎大家交流。

學習配色的3種方法

學習方法 1: 顏料涂鴉

買一點顏料,水彩,水粉,丙烯都可以,學習一點點色彩的基礎知識,然后使用各種顏料大膽的調色,你會發現,原來色彩與色彩之間很神奇,又那么好玩,何為優秀?無需去考慮,跟著自己的喜好走,亂涂亂畫,使用顏料大膽調和。

學習方法 2:觀察生活

比如我們的木質桌子,它由那些相似的棕色組成?雜點,灰塵,晚上使用臺燈或者白天的自然光下,桌子的顏色的飽和度,明暗度會有什么改變。再如外面的大樹,不同的時間,它的陰影的長短,深淺,角度,有什么不同,不同植物的綠色有什么樣的差別,多看看,多拍拍,你會有很多色彩的感覺。

學習方法 3:玩轉軟件

比如使用Photoshop CS以上的插件Adobe Kuler, CC2015版本是Adobe Color Themes. 觀察他們的色彩模式,色環角度,顏色位置,也能大幅度找到很多色彩感覺。

推薦此網站:《缺少靈感?自動生成上千款熱門配色色板的Coolors》

要零配色,不經過任何參考創造UI界面設計的安全配色方案,我們可以通過四個階段來訓練,來學習。

第一階段,色彩知識理解

熟悉一下基本的『常用的色彩常識』,快速熟悉,你可以不去記憶概念,術語解釋,只需要看圖即可?。?!當然如果你學習精神可佳,自己去學習了解下術語概念啦。

(這一階段的圖片多出自互聯網,自己用過的一些配色軟件截圖,其它美術書籍,都是些比較常見的圖片,這里我根據自己學習理解程度,根據自己的喜好做了一定的篩選整理)

如果要對色彩把控準確一些,多一些感覺,我們可以學習一些常用的色彩知識,當然一些不是怎么用的了解一下,我這里也不列出來,下面是我自己常用的一些色彩知識。

(至于很多色彩術語的準確,詳細的解釋,我就不重復寫出來啦,想了解的自己去百度百科或者買點美術書籍學習一下,這里我主要是直觀的觀察色彩,使用感覺去了解基本的色彩原理):

1. 色環、色相、明度、對比色、冷暖色

直接看這種圖,大概你就懂這些色彩術語指什么了

2. 三原色

三原色分為兩種:

a)光源、顯示屏:紅綠藍(RGB),設計常用。

b)顏料、油漆桶、美術:紅黃藍。

3. 無色系

說簡單點,黑白灰,現實生活中,無色系色彩是相當多的。

4. 類比色,相似色

直接看圖,色環中的角度,一目了然。

5. 互補色,對比色

直接看圖,180度對角線即是。

6. 單色

某個色彩的『明度』變化即是。

7. 分裂補色(同時用補色及類比色的方法來確定的顏色關系)

稍微有點復雜的色彩關系,但是也蠻常用的:

8. 二次色(三位一體)

像不像個魔法陣,可以旋轉取色哦。

9. CMYK

CMY是3種印刷油墨名稱的首字母:青色Cyan、品紅色Magenta、黃色Yellow。而K取的是Black最后一個字母,之所以不取首字母,是為了避免與藍色(Blue)混淆。

常用的印刷色,了解一下,做UI我就不怎么考慮這個啦。

10. 色彩心理學

這個是我自己看了美國視覺設計教材后摘下的,也就是大家常說的色彩的內涵,色彩傳達的意義。

11. 偏色調整

當你使用顏料玩色彩的時候就比較常用啦,如果用Photoshop 去玩的話,那是可以反悔的。

偏黃:減黃

偏紅、品:加青(紅色的補色)、減品

偏紫:(多大量藍,少量紅)加黃,減品

偏綠:加品

第二階段,配色軟件運用

快速了解了上面常用的一些色彩知識后,就可以使用軟件進行配色啦,這里我就歸納整理了一些方法,大家可以做參考,由于每個人的配色習慣不同,僅作參考。

(這一階段的圖片是自己親自實操截圖的)

1. 馬賽克配色法

這種方法非常簡單,不需要使用軟件搭建色彩關系,隨便選一張圖片,建議『風景照』,因為大自然的色彩是最和諧的,最安全的,不建議使用別人的插畫或者設計作品來馬賽克。

a)首先要想想自己做的設計的目標是什么?我是要做個人網站?還是要做萬圣節UI?還是要做企業產品站?還是要做女生主題?還是…….

b)然后根據你了解的色彩心理學,如果是要做女生使用的UI,那我們可以使用粉紅,紫色等等女生會喜歡的鮮艷的色彩,那我們嘗試找一張『秋天,落葉,唯美』風景照

下圖是我直接百度找的,小圖大圖有水印無水印無所謂,我們不拿來商用,我們只是拿來『馬賽克』,不會侵犯版權,沒事。

c)然后使用Photoshop把它馬賽克了,濾鏡下的馬賽克,記得要大大的碼。

做到以下的效果:

d)好了,配色方案已經出來了,很安全,你還要怎樣?如果你嫌棄這個顏色,要調整,圖層建立一個飽和度調節層即可,方便快速。

根據需要調整即可,我箭頭標注的都是安全的色彩哦,自己也可以篩選一些。

2. Photoshop 插件法(Adobe Kuler, Adobe Color Themes)

這種方法直接使用高版本的Photoshop配色插件即可,默認都自帶,CS6至以上的版本都默認自帶了其中一種。

a)比如我要設計一個圣誕節的網站,圣誕節有糖果,有圣誕樹,那我就需要定義一個『核心色』,綠色或者紅色,圣誕樹或者圣誕帽的顏色。

然后我就可以直接使用軟件大膽建立配色方案啦。

這里我選擇『綠色』,我不用在意我的綠色的飽和度明度是怎樣選擇的,我只要根據自己的感覺,先選擇一個綠色就行。

好,就它了,選擇了很亮的綠色,也不算自然綠。

b)然后把工具欄的背景色設置成這個色,方便我們直接在插件中調用。

c)打開插件,把我們的背景色應用到插件的『基礎色 base color』中, 點擊箭頭所示按鈕即可

選擇色彩的搭配方式,依次是:相似色、單色、二次色(三位一體色組合)、互補色(對比色)、復合色、暗色(陰影色)、自定義。

選擇后,你可以拖動色彩的控制點變換,確定后點擊如圖的按鈕即可添加到色板中使用

色板如下:

好啦,配色方案已出,如果你需要,可以增加對比色,我自己常用的3種色彩搭配模式是:相似色,單色,對比色(適當)

在你正式設計web或者APP的界面的時候,你就要控制好顏色的比例,這個需要長期積累,但是大家只要記住,對比色適當,特殊的一些風格可以用到1/2,但是大部分時候對比色都占少數,單色鋪大色。

第三階段,色彩記憶感

熟悉web設計中的常用配色,甚至可以多記憶,培養一種下意識的色彩感覺,記憶常用的色彩的英文名稱和中文名稱。

(下圖是引用了美國網頁設計規范中的視覺某部分,由于Web規范顏色有上百種,我們不可能一一記住,我們只需要熟悉這幾種常用的色彩,有一個感覺,背景色和文字色,那我們在配色的時候也可以直接引用,我們只要記住了這些常用色在色板中的位置,它的明度和飽和度的差異,那我們很容易直接調用它們。)

常用背景顏色

常用文字顏色

第四階段,高質量色彩資源探索學習

學習譬如Google design中的Color,Material design等新玩意兒,學習新的色彩思維和創意方法。

Google.com/design

(下圖是網站截圖)

好啦,通過以上4各階段的學習,或者一般情況學習到第二個階段,你就可以運用軟件安全的創造一套配色方案。不需要太深的色彩基礎。

如果你確實很懶,沒關系,只要掌握了第二階段的軟件配色方法,就OK,當然色彩的比例要自己多練習多把控了,并不是說你創造了配色方案就能做出漂亮的作品。這就需要我們掌握以下色彩比例控制??!

未來還會做一篇文章,專門講解色彩比例控制的技巧和方法,希望這篇分享對大家有用哦?。海┍疚恼掠蓻]位道博主@Chuckie-Chang?分享整理, 歡迎大家交流。

【超贊的取色工具大合集】

除了找現成的圖片來配色之外,你還可以試試「彩通配色」:
《大開眼界!那些巧用「彩通配色」的醒目設計》

取色工具多不勝數,不過Kuler應該還是口碑最好的幾個取色工具之一:
《VC教程!教你使用最受歡迎的配色小工具KULER》

當然,行走江湖怎么可以沒有備用方案!所以,這個時候不妨看看:
《碉堡!配色神器第二代!COLOR CUBE免費開放下載》

原文地址:c945
作者:@Chuckie-Chang

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量106萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 2

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏