無論大家在平時的拍照中是否接觸過美顏濾鏡,都應該聽過「濾鏡」的強大作用。但大家有沒有想過,將濾鏡運用設計配色中,可能會讓您的作品變得與別不同。當然,這裡我們所說的濾鏡並不是真的濾鏡,而是在配色中通過特殊的技巧掩蓋UI設計中的配色瑕疵,同時又能達到濾鏡的效果。
如果您現在對自己的配色能力尚不自信,擔心無法製作出如濾鏡般的作品,掌握「雙色調」是不錯的選擇!
什麼是雙色調?
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
雙色調(Duotone)是指由兩種顏色組成的創作。與它名字一樣,「雙色調」這個詞帶有「二重奏」(Duet)——兩種顏色和「音調」(Tone)——色調的意思,即將圖像通過灰度分離出暗部、亮部和中間調,用一種顏色代替暗部,另一種顏色代替兩部,而中間調則是用這兩個顏色的過渡色代替。
為了讓大家更深入地了解什麼是雙色調,小編特意將兩種與雙色調非常相似的配色技巧作比較:
① 雙色調與雙色的區別
雖然雙色調和雙色僅有一字之差,但兩者在表現形式大不相同:雙色指的是畫面中只有兩種顏色;雙色調則是除了這兩種顏色外,還有它們之間的過渡色。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
以上面兩種海報為例,雖然它們所使用的色相差不多,但左側的是雙色調,海報中暗色和亮色部分分別填充這兩個顏色,而中間調部分則是它們之間的過渡色;而右側的是雙色,因為海報只有兩種顏色。
② 雙色調與漸變色的區別
雖然雙色調和漸變色都有中間調部分,但雙色調效果相當於給圖片換了顏色,給人一種不真實的效果;而漸變色只是對顏色產生影響,但對圖片細節並沒有發生改變。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
左側圖片就像圖片上放了一塊從紅色到綠色漸變的玻璃,透過玻璃看圖片,顏色上會有所改變,但圖片細節幾乎沒有太大變化;而右側圖片更像是直接給圖片換了顏色,與現實生活中所看到不太一樣。
雙色調設計有哪些用途?
● 背景圖像
大多情況下,背景添加雙色調效果,並在背景圖像中添加Logo、Slogan、按鈕以及其他重要信息,能減少UI設計的配色方案,並瞬間捕捉用戶的視線,引起用戶的關注和興趣。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
● 突出圖像焦點
利用雙色調的明暗特點,能完美地突出圖像中的關鍵元素,吸引用戶的注意力。大多數情況下,雙色調突出圖像焦點的方式非常適合書籍封面和海報,這種與現實生活中截然不同的視覺效果,會給用戶帶來特別的新鮮感。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
● 為圖片切片
雙色調效果雖然獨特,但難免會因為圖像顏色的改變而影響整個設計的視覺效果。為了避免這種情況發生,嘗試用雙色調為圖片切片。這種設計方式既不會對整個設計的視覺效果造成什麼影響,而雙色調的部分卻又讓整個界面看起非常吸引。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
● 分裂圖像
雙色調雖然歷史悠久,卻無阻設計師對它發揮無限的創造力,例如利用雙色調分裂圖像,不僅讓整個設計更富有創意,同時還打破了外界對傳統雙色調設計的觀念,給用戶帶來前所未有的視覺效果。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
如何創建雙色調設計?
首先,將圖像轉為灰度,並提高對比度,目的是消除圖像中大部分中間灰調,並保持高光和陰影差。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
然後,借用基本色彩理論,使用合適的配色方案,製作我們想要的效果,並將所選顏色添加到圖片上。
* 哪種顏色是映射到暗部或亮部,可以根據實際情況而定,如果暗部顏色較為鮮艷飽和,可嘗試反轉漸變映射或調整飽和度值,獲得所需效果。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
另外,我們也可以在雙色調設計上適當添加適當的純色和白色,突出UI設計的焦點或作為裝飾效果。但在選擇色彩方面要保證不與雙色調的兩種顏色發生衝突,更不會掩蓋它們。
UI設計技巧:什麼是雙色調?雙色調設計的用途有哪些
UI設計技巧
很多人總認為雙色調設計只能凸顯作品的復古一面,其實只要您加多少少創意,就能將雙色調變成無限的可能,增加整個設計的視覺吸引力,給用戶帶來耳目一新的感覺。
香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。
聯絡電話: 37499734
電郵地址:
[email protected]網址: www.hkweb.com.hk