讓你網(wǎng)站設(shè)計(jì)配色更加自由自在.....另:方法是死的人是活的配合色階、曲線、色彩平衡等。.
網(wǎng)頁(yè)視覺(jué)層面主要是由形式(或叫布局)色彩、圖片和文字信息組成,形式需要思考發(fā)明。設(shè)計(jì)師通常對(duì)形式感關(guān)注的比較多,因?yàn)橐曈X(jué)沖擊力、設(shè)計(jì)差異性或創(chuàng)新大多都仰賴形式出現(xiàn),而色彩主要影響整體觀感、設(shè)計(jì)品質(zhì)以及受眾情緒,很多時(shí)候我設(shè)計(jì)了一個(gè)不錯(cuò)的形式卻未能做出這個(gè)稿子應(yīng)有的品質(zhì),會(huì)不會(huì)太可惜?
圖片素材需要學(xué)習(xí)處置,文字需要梳理編排,但網(wǎng)頁(yè)色彩是不是一定需要有天生的色感、豐富的理論和多年經(jīng)驗(yàn)沉淀才干運(yùn)用自如?
當(dāng)然不!
關(guān)于網(wǎng)頁(yè)配色
甚至有些泛濫,網(wǎng)頁(yè)配色的文章在網(wǎng)絡(luò)上很多。稍微關(guān)注過(guò)的同學(xué)應(yīng)該都知道“色輪”色卡”等輔助性配色工具,但那更多都是從印刷介質(zhì)上的色彩系統(tǒng)延伸進(jìn)去的不完全適用于網(wǎng)頁(yè),甚至造成很大的局限,比方你會(huì)較真的通過(guò)色輪來(lái)選用網(wǎng)頁(yè)色彩嗎?再比如通過(guò)下面提供的配色組合,能自由的應(yīng)對(duì)一個(gè)又一個(gè)的類型相若的網(wǎng)頁(yè)設(shè)計(jì)需求嗎?
網(wǎng)頁(yè)的色彩呈現(xiàn)數(shù)量要龐大的多,由于CMYK與RGB色彩模式不同。選用也應(yīng)該更自由,但在配色上卻常碰到設(shè)計(jì)作品偏臟、發(fā)灰、花哨等大問(wèn)題,這事兒得解決。
網(wǎng)頁(yè)案例剖析
網(wǎng)頁(yè)配色不宜逾越三種。
這沒(méi)錯(cuò),真理。但更多是從色相(赤橙黃綠青藍(lán)紫等不同顏色)上來(lái)說(shuō)的
主要色彩的選取就比較好辦,色相差異明顯。罕見(jiàn)的有對(duì)比色、臨近色、冷暖色調(diào)互補(bǔ)等方式,可以簡(jiǎn)單設(shè)定,或直接從勝利作品中借鑒主輔色配比都可以,比如罕見(jiàn)的朱紅點(diǎn)綴深藍(lán)、明黃點(diǎn)綴深綠等。
需要面對(duì)的設(shè)計(jì)需求在色彩分配上會(huì)有更多的問(wèn)題呈現(xiàn):但通常。
故案例均以游戲網(wǎng)頁(yè)做示意說(shuō)明,由于自己從事游戲網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)工作。其他網(wǎng)頁(yè)類型可以做延伸思考或僅作參閱)
根據(jù)網(wǎng)頁(yè)信息的多寡,如上所示。會(huì)有更多色彩區(qū)域的層級(jí)劃分和文字信息層級(jí)區(qū)分需求,那么在守住“網(wǎng)頁(yè)色彩(相)不超過(guò)三種”原則下,只能尋找更多同色系的色彩來(lái)完善設(shè)計(jì),也就是飽和度”和“明度”上做文章。
這也就是本文為解決這一問(wèn)題所要分享的天然”配色技巧:疊柔配色法。
上面都是廢話)疊柔配色技巧分享(這里才是正文。
無(wú)需知道三角函數(shù)、四則運(yùn)算,這個(gè)方法非常簡(jiǎn)單。無(wú)需理解色彩指數(shù)和直方圖,甚至不必了解色階曲線和亮度強(qiáng)弱......甚至,可以對(duì)色彩毫無(wú)知覺(jué)。
只需要明白三個(gè)關(guān)鍵詞:疊加、柔光和透明度(填充)
如果連這三個(gè)關(guān)鍵詞都不甚明了那就記住他所在位置
填充不會(huì)影響到混合選項(xiàng)”效果,注意:透明度與填充略有不同。而透明度則是作用于整個(gè)圖層。
花幾分鐘時(shí)間了解一下這個(gè)配色技巧的原理:順便。
即:用純白色(#ffffff和純黑色(#000000通過(guò)“疊加”和“柔光”混合模式(效果類似調(diào)整飽和度和明度)任意一個(gè)色彩上得到最匹配的顏色(然后通過(guò)調(diào)整透明度選取最適合的輔色)
調(diào)整疊/柔模式的黑白色塊的不同透明度(取10%100%整數(shù)值為例)就可以得到差異較明顯的40種配色,上圖示例中。通過(guò)這種技巧,理論上每一種顏色都可以輕易獲得無(wú)窮盡的天然配色”并且是0失誤”!
因此該配色方法對(duì)純黑色和純白色不起作用。由于疊加和柔光模式對(duì)圖像內(nèi)的最高亮局部和最陰影局部無(wú)調(diào)整。
設(shè)計(jì)實(shí)戰(zhàn)演示:
要不要像上面圖示看起來(lái)的那樣復(fù)雜?
只需要理解了上面的方法,不必。就可以忘記圖示,設(shè)計(jì)工作中自由發(fā)揮!
簡(jiǎn)單三步:
或黑白漸變(可以是點(diǎn)、線、面...甚至字體)① 一個(gè)黑或白色。
② 混合模式選擇疊加或柔光
省心的做法是直接鍵入一個(gè)整數(shù)值,③ 調(diào)整透明度(1%-100%隨意。比方:輕質(zhì)感類頁(yè)面可以選擇20%-40%重質(zhì)感感類可以鍵入60%或以上)
用黑白色彩疊加或柔光,無(wú)論你采用何種主色。都可以輕松自如的獲得完美匹配的整套色系)
如下圖:字體顏色、細(xì)節(jié)線條、按鈕漸變、邊角高光、描邊陰影......都可以用黑白色肆意揮灑這并不只僅適用于色域劃分或提取幾個(gè)輔色。!
方法延伸(細(xì)節(jié)篇)
假如將該方法運(yùn)用到一個(gè)按鈕上......
通常在實(shí)際的使用中刻畫(huà)13層即可)通過(guò)混合選項(xiàng)中的陰影、外發(fā)光、描邊(不適用疊柔法)內(nèi)陰影、內(nèi)發(fā)光”可以自由的刻畫(huà)5層像素級(jí)細(xì)節(jié)(當(dāng)然。
這些細(xì)節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細(xì)節(jié)或盲目選取配色的時(shí)間且無(wú)論形狀、色彩如何變化。!
一石三鳥(niǎo),細(xì)節(jié)、品質(zhì)和效率。兼而得之!
假如讓細(xì)節(jié)成為習(xí)慣,近期看到設(shè)計(jì)圈有討論“網(wǎng)頁(yè)雕花不可取”課題。讓美感成為直覺(jué),雕花也便只是普通設(shè)計(jì)行為而已。
案例歷練:
后記:
科學(xué)化進(jìn)行你設(shè)計(jì)。疊柔配色法:無(wú)招勝有招~把抓不住的感覺(jué)交給精密的計(jì)算機(jī)。
更高的品質(zhì),更短的時(shí)間。值得擁有~...... 本文發(fā)布于北京網(wǎng)站制作公司商企云http://m.2182725.com/