設計稿看起來很凌亂,用這3個方式搞定!

為什麼你的設計看起來很亂?在此之前我們先了解一個概念,我們怎樣看這個世界?

我們通過眼睛看世界,眼(又稱眼睛,目)是一個可以感知光線的器官。那麼結論來了,我們看到這個世界,其實本質就是看到了光。舉個例子,晴空萬里時我們可以看到很遠很遠的距離,反之在漆黑的屋子裡,我們什麼都看不見。

設計稿看起來很凌亂,用這3個方式搞定!

我們再來了解第二個問題,眼睛是怎樣成像的?眼睛通過調節晶狀體的彎曲程度(屈光)來改變晶狀體焦距獲得倒立的、縮小的實像。簡單來說,成像原理就是晶狀體來改變焦距,簡單一點解釋決定成像的重要因素是焦距。

你的設計看起來很亂,往往在這幾個方面出了問題:

o 明暗關係紊亂;

o 視覺焦點不明確,畫面沒有重點;

o 顏色雜亂,毫無章法。

明暗

設計稿看起來很凌亂,用這3個方式搞定!

明暗是指畫中物體受光、背光和反光部分的明暗度變化以及對這種變化的表現方法。明暗分亮面,灰面,暗面,以及明暗交界線,反光五大調子。單個物體明暗關係,暗部(反光,投影)>灰面>亮面。整體關係,靠近光源暗部>遠離光源……畫畫核心畫的是光,遵循光照的自然規律即可。

去色檢查畫面明暗關係

從上至下三張圖依次是去色之後的黑白圖;運用色相和飽和度給畫面賦予一個顏色的單色圖;原圖。

從下圖可以粗略得出結論,明暗(光源色)+固有色=色彩。調色之前先處理明暗,畫面顏色處理起來就非常簡單了。

最近火爆的國產硬核科幻片海報,即使去掉顏色,黑白關係依舊明確清楚。好的設計即使沒有任何顏色,依舊是一副好的素描畫。我所理解的明暗關係與色彩的關係相當於人體與衣服妝容的關係,對於一個美女是否漂亮,衣服妝容的搭配是你能達到漂亮的上限,然而你的臉型,身高,氣質,皮膚才是你能達到的驚為天人的基礎。

視覺焦點

設計稿看起來很凌亂,用這3個方式搞定!

視覺焦點究其概念,是讓我們的視線多停留幾秒的視覺元素,我們在畫面中第一眼就能看到的元素,畫面中的「主角」。

對畫面的視覺漏斗進行分類:

設計稿看起來很凌亂,用這3個方式搞定!

o 視覺焦點:想看不見都很難,表現突出;

o 重要元素:不經意就能看見;

o 輔助元素:仔細看看也能看見(類似買理財產品的最右下角的小標註,「投資有風險,理財需謹慎」)

高斯模糊法看視覺焦點

設計稿看起來很凌亂,用這3個方式搞定!

眯著眼睛看形,睜著眼睛看細節。把畫面模糊調到一定程度,然後看畫面,如果畫面仍然能看清楚「主角」,那麼畫面的視覺中心就是可以的。下圖畫面即使模糊了,我們依然能看清「男主角」沈騰以及飛馳人生四個大字,雖然原圖背景複雜以及其他裝飾物很多,依然不影響畫面的整體協調感,元素多且雜而不亂。

設計稿看起來很凌亂,用這3個方式搞定!

設計稿看起來很凌亂,用這3個方式搞定!

這上面的兩個例子看出,即使畫面模糊了,還是能清晰看到畫面表達的主題。那麼模糊度多少合適呢,一般調整到上面所說的視覺漏斗中重要元素看起來剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由於光的照射產品漫反射的顏色,可以粗略按色彩元素分為光源色,固有色和漫反射產生的環境色。按照長期的實踐經驗來看,通常比較和諧的配色方式是除了產品的固有色之外,儘量把光源色和環境色統一在三種顏色(黑白灰不算顏色)之內,顏色比例儘量類光源色的主色調佔據畫面百分之八十的面積,其他環境色作為補充。

設計稿看起來很凌亂,用這3個方式搞定!

設計稿看起來很凌亂,用這3個方式搞定!

色彩插件檢查配色

谷歌插件 palette.site 能分析出畫面顏色的狀態以及畫面中幾種主要的顏色,藉助這個插件能很輕鬆檢查畫面是否超過了3種顏色(黑白灰不算顏色),如果超過三種顏色,那麼頁面就需要做減法,或者將顏色統一在一個色系裡,用明度以及飽和度區分。

設計稿看起來很凌亂,用這3個方式搞定!

設計稿看起來很凌亂,用這3個方式搞定!

插件的使用方法:可以直接使用瀏覽器下載,然後也可以在瀏覽器中選擇一張圖片,右鍵「在新標籤中打開圖片」,然後再「點擊右上角的插件按鈕」分析顏色狀態。

從上面的兩個案例中可以看出,兩個 banner 的顏色分析基本都在三種顏色以內,特別是下面的看起來比較複雜的顏色,總共分析的顏色也就紅黃藍,其中藍色還是點綴色的存在。

今天的內容就說到這裡了,我們回顧一下重點內容,解決畫面看起來很亂可以有以下方法:

o 去色檢查畫面明暗關係

o 高斯模糊法看視覺焦點

o 色彩插件檢查配色

設計雖沒有近路,但可以少走彎路。


分享到:


相關文章: