配色知識(shí),適合新手的零基礎(chǔ)配色方案

2022-12-26 18:34:22 來(lái)源/作者: / 己有:11人學(xué)習(xí)過(guò)

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

a)比如我要設(shè)計(jì)一個(gè)圣誕節(jié)的網(wǎng)站,圣誕節(jié)有糖果,有圣誕樹(shù),那我就需要定義一個(gè)『核心色』,綠色或者紅色,圣誕樹(shù)或者圣誕帽的顏色。

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

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

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

配色知識(shí),適合新手的零基礎(chǔ)配色方案

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

配色知識(shí),適合新手的零基礎(chǔ)配色方案

c)打開(kāi)插件,把我們的背景色應(yīng)用到插件的『基礎(chǔ)色 base color』中, 點(diǎn)擊箭頭所示按鈕即可

配色知識(shí),適合新手的零基礎(chǔ)配色方案

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

配色知識(shí),適合新手的零基礎(chǔ)配色方案

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

配色知識(shí),適合新手的零基礎(chǔ)配色方案

配色知識(shí),適合新手的零基礎(chǔ)配色方案

色板如下:

配色知識(shí),適合新手的零基礎(chǔ)配色方案

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

在你正式設(shè)計(jì)web或者APP的界面的時(shí)候,你就要控制好顏色的比例,這個(gè)需要長(zhǎng)期積累,但是大家只要記住,對(duì)比色適當(dāng),特殊的一些風(fēng)格可以用到1/2,但是大部分時(shí)候?qū)Ρ壬颊忌贁?shù),單色鋪大色。

第三階段,色彩記憶感

熟悉web設(shè)計(jì)中的常用配色,甚至可以多記憶,培養(yǎng)一種下意識(shí)的色彩感覺(jué),記憶常用的色彩的英文名稱(chēng)和中文名稱(chēng)。

(下圖是引用了美國(guó)網(wǎng)頁(yè)設(shè)計(jì)規(guī)范中的視覺(jué)某部分,由于Web規(guī)范顏色有上百種,我們不可能一一記住,我們只需要熟悉這幾種常用的色彩,有一個(gè)感覺(jué),背景色和文字色,那我們?cè)谂渖臅r(shí)候也可以直接引用,我們只要記住了這些常用色在色板中的位置,它的明度和飽和度的差異,那我們很容易直接調(diào)用它們。)

常用背景顏色

配色知識(shí),適合新手的零基礎(chǔ)配色方案

常用文字顏色

配色知識(shí),適合新手的零基礎(chǔ)配色方案

第四階段,高質(zhì)量色彩資源探索學(xué)習(xí)

學(xué)習(xí)譬如Google design中的Color,Material design等新玩意兒,學(xué)習(xí)新的色彩思維和創(chuàng)意方法。

Google.com/design

(下圖是網(wǎng)站截圖)

配色知識(shí),適合新手的零基礎(chǔ)配色方案

配色知識(shí),適合新手的零基礎(chǔ)配色方案

好啦,通過(guò)以上4各階段的學(xué)習(xí),或者一般情況學(xué)習(xí)到第二個(gè)階段,你就可以運(yùn)用軟件安全的創(chuàng)造一套配色方案。不需要太深的色彩基礎(chǔ)。

如果你確實(shí)很懶,沒(méi)關(guān)系,只要掌握了第二階段的軟件配色方法,就OK,當(dāng)然色彩的比例要自己多練習(xí)多把控了,并不是說(shuō)你創(chuàng)造了配色方案就能做出漂亮的作品。這就需要我們掌握以下色彩比例控制??!

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