如何選擇你自己的配色方案
目前為止,你應(yīng)該已經(jīng)很熟悉顏色是什么、每種顏色代表什么,對(duì)于不同配色方案也有很好的理解。但是不管怎樣,你知道這些也沒(méi)什么作用,假如你不知從何下手或如何運(yùn)用
色彩對(duì)你項(xiàng)目的影響
顏色是種看起來(lái)相當(dāng)簡(jiǎn)單,卻非常難處理好的東西。而且,由于它是任何設(shè)計(jì)中極度視覺(jué)化、焦點(diǎn)化的部分(它確實(shí)是),當(dāng)它沒(méi)處理好時(shí)會(huì)如此引人注意。如果你的設(shè)計(jì)中這么重要的部分給人感覺(jué)不好,或者沒(méi)有很好的表現(xiàn)你的公司、服務(wù)或品牌,那么它就能讓停留訪(fǎng)問(wèn)的用戶(hù)消失不見(jiàn)
正因?yàn)槿绱耍x擇配色方案時(shí),你需要非常清楚顏色在你設(shè)計(jì)中可以造成的影響——好的與壞的
摒棄這些默認(rèn)樣式(例如互補(bǔ)色),使用你自己的配色方案,絕對(duì)是件好事,但是當(dāng)你著手開(kāi)始創(chuàng)建自己的配色方案時(shí),可能你最好還是沿襲主流的配色方案。這樣一來(lái),走錯(cuò)路創(chuàng)造出糟糕的配色方案就不容易了,雖然也難以杜絕
選擇適當(dāng)?shù)呐渖桨?/h3>
首先,我們來(lái)看看如何為你的項(xiàng)目選擇一個(gè)適當(dāng)?shù)呐渖桨?/p>
這里你需要全局考慮,什么配色方案適合你的品牌、公司或者行業(yè)。有篇文章 fantastic infographic over at Column Five Media介紹了世界百?gòu)?qiáng)品牌的顏色使用
這個(gè)非常有趣,不僅讓我們一睹世界頂尖品牌與企業(yè)的用色傾向,還讓我們洞悉具體行業(yè)中,哪些顏色效果更好,或使用更廣泛
從信息圖表中可以看出,所有能為你所用的主色都適用于各種不同行業(yè),這些可能適用的顏色都能解讀出常用的含義,之前有文章討論過(guò)
我所喜愛(ài)的方式,是為項(xiàng)目創(chuàng)建思維導(dǎo)圖來(lái)探索我能想到的各種不同色調(diào)和創(chuàng)意,并且上網(wǎng)尋找這類(lèi)符合品牌戰(zhàn)略的信息。然后,把這些思維導(dǎo)圖的創(chuàng)意轉(zhuǎn)換為顏色的含義來(lái)確定哪個(gè)最符合,這可以幫助你找到哪種配色最適合這個(gè)項(xiàng)目或品牌
我該用多少種顏色
有時(shí)候,這個(gè)問(wèn)題真的只是個(gè)人喜好問(wèn)題。不管怎樣,這個(gè)問(wèn)題在Column Five Media的信息圖表中不值一提,因?yàn)榘購(gòu)?qiáng)品牌中,只有5%選擇在配色方案中使用兩種以上的顏色
注:近年來(lái),印刷品的預(yù)算比在線(xiàn)曝光更重要,品牌印刷品中使用的顏色數(shù)量確實(shí)值得慎重考慮
即便如此,用多少種顏色隨你感覺(jué)就好,在一些情況下,你可以用顏色來(lái)在網(wǎng)頁(yè)的不同區(qū)塊中制造差異化。在這種情況下,你可能會(huì)有4、5種不同顏色加入到配色方案中,使網(wǎng)頁(yè)每部分協(xié)調(diào)
盡管最終選擇權(quán)在你,我還是會(huì)建議你在主要配色方案中使用至少兩到三種顏色,這其中不包含文字或背景的明暗中性色。比起用單色配上漸變和陰影,使用兩到三種顏色的配色方案,能夠給你機(jī)會(huì)嘗試在各個(gè)區(qū)塊間創(chuàng)造更豐富的對(duì)比
從照片中選擇配色方案
你是否觀察過(guò)一張照片,并思考它的顏色表現(xiàn)多么奇妙和驚人?有時(shí)候,這些漂亮顏色可以被轉(zhuǎn)換成可用的配色方案,并為你所用。從照片中提取一套非常棒的配色方案,只需要稍加訓(xùn)練和充足的耐心,如果你和我一樣是個(gè)完美主義者,那么你會(huì)花相當(dāng)一段時(shí)間微調(diào)顏色,直到它們剛剛好為止
選擇你的照片
選擇一張好照片上手的關(guān)鍵,是多樣化而且最好能讓你震撼。無(wú)論你的圖片比較復(fù)古或單色系(即整張圖片都貫穿著相近的色調(diào)和色彩),或者更加鮮活色彩豐富,你總能在其中某處找到有用的配色方案
一旦你有了一張或幾張照片,假如你立馬就想試著創(chuàng)造幾種配色方案,那么用你最喜歡的圖像處理軟件打開(kāi)它,然后開(kāi)始瘋狂吧。我在Photoshop中有個(gè)自己愛(ài)用的模板(包含幾個(gè)小矩形)作為切入點(diǎn),來(lái)放置我所選擇顏色
從照片中選取配色方案時(shí),我試著只堅(jiān)持一種(比如單色或互補(bǔ)色),然后在照片中嘗試選取相配的顏色。所以舉個(gè)例子,我會(huì)觀察照片并試著發(fā)現(xiàn)什么顏色對(duì)我而言最突出,這不是指它們要明亮鮮艷,它們可能很柔和或只占照片的一小部分,但我會(huì)試著選出成就這張照片的那些少數(shù)色彩
在這張照片中,由于這些相近的紫色調(diào),我們能夠很容易選出一套單色系配色方案
這張照片非常飽滿(mǎn),因此我們可以花些時(shí)間創(chuàng)造一個(gè)更加個(gè)性化的配色方案,它受制于一些規(guī)則,搭配起來(lái)卻也同樣合適
一旦我開(kāi)始深入觀察照片,我就對(duì)我想要的風(fēng)格有更深的了解,我會(huì)繼續(xù)胡亂嘗試(就用吸管工具)來(lái)看看什么顏色搭配最好。比如只選擇一種顏色作為主體,再選兩種其他顏色來(lái)作為陪襯
然后,開(kāi)始將這些顏色放入模版,將它們來(lái)回移動(dòng),直到你對(duì)顏色的位置與層級(jí)滿(mǎn)意為止。我通常也會(huì)試著在我所選的主色旁邊各放置一個(gè)暗色(接近或幾乎純黑)和亮色(接近白色)。這可以幫助頁(yè)面達(dá)到色彩與結(jié)構(gòu)上的平衡,也可以在配色方案中沒(méi)有適合的文字顏色時(shí)提供一種可能
老實(shí)說(shuō),這里的主要目的就是隨手試試,有時(shí)候你得到的顏色并不合適,也有時(shí)候你在照片中根本找不到一個(gè)得體的配色方案,但是要確保你嘗試過(guò)各種顏色,直到你為自己的設(shè)計(jì)找到了一套感覺(jué)更加統(tǒng)一協(xié)調(diào)的配色方案
iPhone App Adobe Kuler
如果從照片中創(chuàng)建自己的配色方案令你糾結(jié)不已,Adobe最近也發(fā)布一款iPhone app Adobe Kuler,帶來(lái)了一種非常便捷的從照片中創(chuàng)建配色方案的方法。你可以切換到相機(jī)模式從現(xiàn)有照片中選擇一張,或者直接在所在地拍點(diǎn)什么
Adobe Kuler app的妙處,是它提供了一種極為創(chuàng)新的顏色選擇方式。如果你用Kuler app的“現(xiàn)場(chǎng)”視圖直接拍照,你就會(huì)看見(jiàn)照片上四處移動(dòng)的小圓圈。眼前所發(fā)生的,是這個(gè)app在不斷尋找和選出照片中它認(rèn)為最有價(jià)值的配色,就在它停下的位置,然后幫你將它們組合成一個(gè)小配色板
如果你對(duì)于從照片中選取自己的配色方案沒(méi)有信心,那么使用Kuler app是個(gè)好辦法,可以幫助你理解什么造就了照片中的優(yōu)秀配色。隨意拍下大量照片(單調(diào)、樸素色調(diào)和豐富、明亮鮮艷色調(diào)都有),然后用Kuler app認(rèn)真分析為什么這些配色方案起作用,為什么這個(gè)app選擇了它們
然后,你可以適時(shí)開(kāi)始著手從照片中創(chuàng)建自己的配色方案了,并對(duì)于自己的選擇更加自信.
本文地址:http://m.likemindfilms.com/tutorial/ui1670.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線(xiàn)詳解
- banner實(shí)戰(zhàn)技巧-版式平衡構(gòu)圖
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏大視
- 如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)
- 做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解
- [圖趣]色彩搭配的核心原則和聯(lián)想
- 扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)題技巧淺析
- WEB設(shè)計(jì)中的排版
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏