一些視覺知識(shí)點(diǎn)

2022-6-25    純純

視覺空間、字體性格、顏色情緒三個(gè)大方面來談一下我對視覺知識(shí)的部分理解!目錄如下


1. 視覺空間

1.1 什么是空間感

空間感:空間感( sense of space)是指藝術(shù)形象通過一定手法引起的類似現(xiàn)實(shí)空間的審美感受。藝術(shù)家通過特定的瞬間造型和空間深度的追求,使人聯(lián)想到其活動(dòng)、生活的環(huán)境空間。在繪畫、攝攝影藝術(shù)中,形象存在于二維平面中,但通過構(gòu)圖、透視、線條走向、光影和色彩處理,使人感受到空間的整體性、立體性。

而在我理解總結(jié),空間感其實(shí)就是運(yùn)用各種手法,打造出畫面的空間縱深感,讓二維的畫面變成三維,從而提升畫面的品質(zhì)、細(xì)節(jié)、沖擊力。

1.2 空間感的優(yōu)點(diǎn)

我們以人物海報(bào)為例對比幾張圖,直觀感受一下:

無空間感:



有空間感:

我們直觀的可以看到,都是人物海報(bào),下面的兩張明顯更有品質(zhì)感。有空間感的圖,畫面會(huì)更高級。

那是因?yàn)榭臻g感會(huì)讓你的畫面更有層次,更靈動(dòng)和富有場景感。這就是空間感的有點(diǎn)。

1.3 如何打造空間感

空間感,其實(shí)就是打造畫面縱深,讓元素之間形成前后關(guān)系,那有哪些方法來打造畫面縱深呢?我們總結(jié)了5個(gè)方法來分享給大家:

1.3.1 構(gòu)圖

富有極強(qiáng)透視線的構(gòu)圖能很直觀地表現(xiàn)出空間感。

比如




這類

這類擁有很強(qiáng)透視的構(gòu)圖,不用做別的,光構(gòu)圖就能體現(xiàn)出很強(qiáng)的空間感了。

實(shí)際運(yùn)用中,我們還可以利用標(biāo)題文案排列出這種透視構(gòu)圖來打造空間感:


1.3.2 虛實(shí)

虛實(shí)分為:

1.輪廓虛實(shí)

2.顏色虛實(shí)

輪廓虛實(shí):兩個(gè)相同的元素,輪廓模糊的在空間上會(huì)感覺處于輪廓實(shí)的元素后方。



這是兩個(gè)元素,放到一起就會(huì)感覺上是在同一個(gè)平面上的。沒有虛實(shí)關(guān)系。

如果把其中一個(gè)圓的輪廓虛化:



是不是就會(huì)感覺出右邊的會(huì)在左邊的前面,拉出了前后的空間感。這就是我們的輪廓虛實(shí)了。

顏色虛實(shí):越貼近背景色的顏色,在空間上會(huì)感覺處于后方。



還是這兩個(gè)元素,如果把其中的一個(gè)顏色調(diào)成和背景貼近:



兩相比較,顏色更實(shí)的飛碟,會(huì)處于顏色較淺的飛碟前面。

1.3.3 大小

越大元素會(huì)感覺越近,越小的元素感覺越遠(yuǎn)。

在實(shí)際操作中我們一般可以利用不同元素來制作這個(gè)效果。

比如這是一堆元素,如果大小都差不多,就會(huì)感覺是平鋪在一起的,沒有空間關(guān)系。



如果調(diào)整它們的大小, 重新擺放,通過近大遠(yuǎn)小的原理,就可以很輕易地打造出元素之間的前后關(guān)系,從而營造出空間感了。



大小對比空間再其他畫面中的應(yīng)用:



1.3.4 明暗對比

除了虛實(shí)、大小之外,明暗也能對比出前后關(guān)系,從而營造空間感。



通過紋理層次的明暗對比,一明一暗的對比,也能拉出前后關(guān)系。從而營造空間感。



1.3.5 穿插

利用元素相互穿插產(chǎn)生的前后關(guān)系,也能營造出空間感。

這是1個(gè)元素和兩個(gè)圓的平鋪,沒有交集。



如果我給他們穿插重疊在一起:



那就能產(chǎn)生元素之后的疊壓前后關(guān)系,從而也能營造空間感。

利用在海報(bào)中:



以上這五種方式就是我們今天分享給大家的方法啦,

在視覺海報(bào)的打造中,基本都不是只靠其中一種方法去打造空間感,而是3種,甚至5種一起運(yùn)用,可以讓塑造的空間感的更有層次細(xì)節(jié)和沖擊力。

比如:輪廓虛實(shí)+顏色虛實(shí)+大小,或者:穿插+大小+明暗。

大家一定要靈活運(yùn)用,自由組合,以畫面最優(yōu)效果為目標(biāo)去做,不要局限在某一個(gè)框架里。

2. 字體性格

2.1 什么是字體的性格

字體也有字體的性格,不同的字體會(huì)呈現(xiàn)出不同的字體性格特征,比如高矮胖瘦、敏捷、邪惡、可愛、優(yōu)雅文藝等等等等。通過精準(zhǔn)地對字體的結(jié)構(gòu),筆畫粗細(xì),細(xì)節(jié)調(diào)整,字體效果等的處理表現(xiàn)字體的差異化,使字體的性格調(diào)性,與畫面內(nèi)容相匹配。

2.2 性格有哪些

2.2.1 力量感、沉穩(wěn)

特點(diǎn):橫細(xì)豎粗/留白少/重心偏下/轉(zhuǎn)折筆直



2.2.2 可愛

特點(diǎn):圓潤/不規(guī)則/擴(kuò)張



2.2.3 優(yōu)雅

弧度/纖細(xì)/重心偏高



2.2.4 活力

特點(diǎn):傾斜/筆畫延伸/筆畫干脆,轉(zhuǎn)折彎曲很少


2.3 字體設(shè)計(jì)實(shí)操

字體還有各種各樣的性格,比如魔幻、哥特、血腥、恐怖等等。

我們在做項(xiàng)目的時(shí)候,字體的感覺就一定要抓得準(zhǔn),符合整個(gè)畫面的調(diào)性:

比如這種歐式哥特的畫風(fēng), 字體就可以加一下哥特元素,點(diǎn)綴點(diǎn)玫瑰、藤條。



剛硬科技的畫風(fēng),字體筆畫就可以粗一些,添加點(diǎn)科技感和幾何圖形,營造超前科技的感覺:



植物自然的風(fēng)格筆畫就可以柔和一些,帶有弧度,把一些畫面元素圖形化點(diǎn)綴在上面:


2.3.1 字型特點(diǎn)的提取

具體實(shí)操怎么做的呢?我們今天就給大家分享一個(gè)案例,看看是怎么操作的:

這是一張視覺,我們要給他做一個(gè)主標(biāo)題,這個(gè)主標(biāo)題的字型特點(diǎn)應(yīng)該如何從圖里提取呢?


我們要提煉出三個(gè)點(diǎn)出來才能知道如何去做:


1.風(fēng)格

我們先分析這張圖,它的一個(gè)風(fēng)格是有點(diǎn)魔幻+復(fù)古,神話傳說加西域古代的一種史詩感。

我們可以找一些神話類史詩的類似的參考看看:



特征:

1.復(fù)古

2.重心高.

3.不用那么特別復(fù)古可用襯線體變形

2.特征

這個(gè)我們可以從人物身上去提取,人物有盔甲,我們可以把盔甲的特征提取出來:



3.配色

顏色也不是亂選的,一定要和圖能呼應(yīng)關(guān)聯(lián)起來,那顏色怎么選呢?其實(shí)畫面里已經(jīng)幫我們選好了配色。我們觀察一下畫面:



整體偏冷調(diào),墨綠色居多。,對比色有紅色和黃色。

那我們?yōu)榱送怀鲎煮w,又能和畫面呼應(yīng),那黃色就是再好不過的選擇了。

那到這我們的設(shè)計(jì)目標(biāo)就比較明確了:


2.3.2 字型設(shè)計(jì)

1.基礎(chǔ)字型:

雖然是往復(fù)古了去做,但也不是真做成甲骨文,還是結(jié)合一下使用場景,和識(shí)別度。參考中也有部分是使用宋體去變形的,所以我們可以先選一個(gè)宋體的字體出來當(dāng)做基礎(chǔ)字型。


為了保證識(shí)別度,我們可以只做部分復(fù)古。

這里我挑靈下面“火”字,因?yàn)檫@個(gè)字處在中間,比較顯目。



2.調(diào)整重心

參考復(fù)古類型的字體重心都會(huì)往上偏移,讓字體稍顯長一些。



3.加入特征

(1)鋒銳:默認(rèn)字體上有很多圓潤的地方,我們都改成尖銳的感覺。



把每一個(gè)筆畫都改掉:



(2)彎曲的尖角:

圖形提煉:


加入到字體當(dāng)中:



字型到這里就完成啦。

(3)字體轉(zhuǎn)折的厚度:

字型完成了,字體轉(zhuǎn)折的厚度我可以再字體效果上去做。在筆畫中間加一個(gè)層次,以明暗分隔開,以實(shí)現(xiàn)盔甲上這種轉(zhuǎn)折的厚度:



全部加上,看下完成效果:



結(jié)合到畫面中看下:


效果還是很不錯(cuò)的,整體風(fēng)格也比較統(tǒng)一。

這一塊就是關(guān)于字體性格的內(nèi)容,我們繼續(xù)往下看!

3. 顏色情緒

接下來我們來說下關(guān)于顏色情緒的問題!

配色感覺不對?顏色臟?配色不高級?

這些問題一直困擾著我們。應(yīng)該怎么配色呢?其實(shí)顏色也是有規(guī)律可循的,這篇文章就是帶給大家一些顏色方面的啟發(fā),讓你了解配色的底層邏輯,從而更明確快捷地配出想要的顏色。


3.1 飽和度到底在傳遞給我們一些什么

認(rèn)識(shí)色彩飽和度的情緒:

因?yàn)椴煌呐渖珪?huì)帶給觀者不同的情緒感受,只有在先了解不同顏色特性的基礎(chǔ)上才能為我們的配色指明方向。我們做出的畫面想要傳遞什么感覺,這種感覺對應(yīng)什么顏色?

只有搞懂了邏輯,在之后的工作中,才能為我們的配色方案指明方向,而不會(huì)一開始就被難住。

如果我想配一個(gè)積極熱鬧活潑的畫面,顏色怎么配呢? 如果想配一個(gè)溫柔恬靜小清新的畫面顏色又該如何選擇呢?他們都有什么特點(diǎn),為什么會(huì)這樣?往下看

3.1.1 積極活力

我們先來看幾組圖片



用吸管工具提取一下它們的顏色觀察

我們可以看到這類海報(bào)視覺上都能給人一種熱鬧、動(dòng)感、活力的feel。

通過顏色提取,再觀察它們選色的位置,可以發(fā)現(xiàn)它們的的配色的純度和飽和度都非常高。

這是為什么呢?接下來我們降低飽和度看看會(huì)發(fā)生什么:



可以很明顯的感受到畫面中已經(jīng)失去了那種動(dòng)感、熱鬧和活力的感覺了,整體更趨于平穩(wěn)和安靜。

所以,高飽和度的配色會(huì)帶給觀者活力,動(dòng)感,熱鬧的情緒。常常應(yīng)用于一些電商、運(yùn)動(dòng)品牌的視覺項(xiàng)目中,用來渲染or打造年輕、活力、熱鬧、動(dòng)感等氛圍。

3.1.2 溫柔平靜

我們再來看一組:


這一類圖片就會(huì)給人一種文藝小清新的feel,這類配色和熱鬧、運(yùn)動(dòng)的感覺完全不同。

都是低飽和度高明度的顏色。所以,低飽和度的顏色會(huì)給人傳達(dá)平和、放松、舒適的心情。

3.1.3 輕松休閑


這一類的圖片就給人以中正休閑的感覺。飽和度都趨于中性,不過高,也不會(huì)過低。

其實(shí)原理就是在取色器里,



我們看同一張圖片,給我們的感覺:


高飽和度配色給人感覺沖擊力很強(qiáng),具有活力,對比非常強(qiáng)烈。

中飽和度畫面就弱了一級,視覺沖擊力沒那么強(qiáng)。畫面會(huì)放松一些,適合傳遞休閑的感覺。

使用低飽和度的顏色時(shí),我們看到畫面更冷靜了,有些高級灰的感覺。

在以往的實(shí)際工作當(dāng)中,我也是先用飽和度來定畫面的大情緒基調(diào),只有大的感覺對了,后面才不會(huì)出大問題。比如像一些戰(zhàn)斗、pk、熱血類的banner,都用高飽和顏色:


我們可以來吸取他們的顏色看看:



基本都是靠右邊的顏色。

而像我在做下面這種類型的banner時(shí),就會(huì)使用到中飽和度的顏色,給人一種輕松休閑的感覺:



我們再看下他們的色域:



都是趨于中間的位置。

最后一種低飽和的顏色,像下面這種作品,就有一種文藝、清新的感覺:


再來看看他們的顏色色域



都是比較靠左的顏色。

用飽和度來定畫面的大基調(diào),還是非常好用的,可以說是屢試不爽,大家可以好好理解并且用起來!

總結(jié):



高純度,高飽和度的顏色,會(huì)讓人感覺激動(dòng)、積極、動(dòng)感、醒目、記憶深刻等特點(diǎn)感官,常常應(yīng)用于一些電商、運(yùn)動(dòng)品牌的視覺項(xiàng)目中,用來襯托年輕、活力、熱鬧、動(dòng)感等氛圍。



中飽和度的顏色飽和度和純度都適中,顯得中正平和,又不會(huì)有低飽和度那樣的“平緩“,想要視覺年輕一些,但又不想飽和度那么的強(qiáng)烈,可以嘗試選擇中度的顏色。


低飽和度的顏色,會(huì)給人平和,舒適的感受,常常會(huì)結(jié)合大量無彩色一起使用,讓畫面?zhèn)鬟f出簡約,自然,小清新文藝的感覺。


   

作者:菜心工作室      來源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔