30-運(yùn)用對(duì)比打造層次和變化

一、文字組中的對(duì)比

1.字形對(duì)比

比如漢字的黑體和宋體搭配,宋體和書(shū)法體搭配,黑體和卡通體搭配等;

不同字形的中文和英文在同一個(gè)文字組中使用也屬于字形對(duì)比。在同一個(gè)文字組合版面中,切忌使用同一個(gè)字形的不同字體,比如兩個(gè)差別不是很大的黑體,因?yàn)檫@樣對(duì)比不是很清晰,給人一種模棱兩可的感覺(jué)。

使用同一個(gè)字體的情況,給人感覺(jué)很統(tǒng)一,很一致,但是缺少變化

加入宋體和粗襯線(xiàn)體增強(qiáng)對(duì)比,通過(guò)距離和大小的把握,并不會(huì)給人沖突感。整個(gè)文字看上去是一個(gè)整體,而整體中又存在了變化。這就是字形對(duì)比帶來(lái)的效果。

2.字號(hào)對(duì)比


通過(guò)變換字號(hào)來(lái)實(shí)現(xiàn)整體的秩序感。文字有層級(jí)關(guān)系,而表示這種層級(jí)關(guān)系最好的辦法就是字號(hào)對(duì)比。

使用線(xiàn)框或色塊合理調(diào)整字號(hào),也可以讓它變得好看。

字號(hào)對(duì)比可以迅速拉開(kāi)層級(jí)關(guān)系,但是要注意對(duì)比的程度不能太大。

3.字距對(duì)比

這個(gè)文字組看起來(lái)下方的文字有些長(zhǎng),上半部分顯得有些密集。

通過(guò)調(diào)整字距讓文字組在長(zhǎng)短上有對(duì)比,又可以讓文字顯得透氣一些。

4.字重對(duì)比

文字組整體字重偏輕,也就是整體的筆畫(huà)比較細(xì),

第三個(gè)真正實(shí)現(xiàn)了字重對(duì)比,但是很難,做的不好版面容易出現(xiàn)過(guò)多對(duì)比而顯得凌亂。比較保險(xiǎn)的是前兩個(gè),只靠字號(hào)實(shí)現(xiàn)對(duì)比。

二、筆畫(huà)對(duì)比

通過(guò)不同字體筆畫(huà)之間的結(jié)合形成對(duì)比

1.宋體&黑體

將宋體和黑體的筆畫(huà)結(jié)合進(jìn)行交叉替換


出現(xiàn)了一種新的感覺(jué),延伸出的字形存在筆畫(huà)對(duì)比




2.宋體&書(shū)法





將部分文字的筆畫(huà)替換成書(shū)法效果,就可以為版面增加一些變化

[圖片上傳失敗...(image-ee7616-1584630573408)]

筆畫(huà)對(duì)比的設(shè)計(jì)手法可以打破字庫(kù)字體給人平庸的印象,在作為主體形象時(shí)更加具有視覺(jué)吸引力,而且操作難度也不是很大,不像字體設(shè)計(jì)那樣需要扎實(shí)的基本功。所以當(dāng)你覺(jué)得版面有些單調(diào)但又不想添加過(guò)多元素的時(shí)候可以考慮使用此方法。

但是這個(gè)方法對(duì)設(shè)計(jì)主題和風(fēng)格都有一定的要求,并不能在每個(gè)設(shè)計(jì)中都用到。

三、大小對(duì)比


通過(guò)三張圖片大小的對(duì)比,使版面更有沖擊力

四、粗細(xì)對(duì)比

在畫(huà)面左側(cè)將文字信息排版好。

在右側(cè)添加一個(gè)具有粗細(xì)對(duì)比的圖像,這里我們沒(méi)有選擇圖片,而是選擇了一張線(xiàn)稿插畫(huà),最后為其添加背景色,使主體插畫(huà)跟背景顏色有一個(gè)聯(lián)系,而不是彼此孤立的存在。

五、長(zhǎng)短對(duì)比

書(shū)籍封面設(shè)計(jì)

將主標(biāo)題排列在版面上方。


將其他信息做成標(biāo)簽式形式,使用白色塊來(lái)保證文字的識(shí)別。

將中英文的書(shū)名豎排在版面中。

因?yàn)闀?shū)名跟雨有關(guān),所以我們可以添加相關(guān)的圖形元素。這里添加了淺灰色的云朵,然后在上方添加不同的線(xiàn)代表雨。顏色使用較亮的顏色,與整體的無(wú)彩色形成對(duì)比,使版式更加豐富。


還可以將筆畫(huà)處理成空心的形式豐富版面。


最后加入書(shū)封。

六、曲直對(duì)比

選擇圖片作為主視覺(jué)。

在圖片下方加入山的插畫(huà)圖形。

然后將書(shū)籍名稱(chēng)和作者放進(jìn)去?,F(xiàn)在版面中都是橫向和豎向的線(xiàn),而且都是線(xiàn)的形態(tài),為了增加對(duì)比,右上角可以添加曲線(xiàn)文字。

這樣版面中就存在了曲直對(duì)比。


七、輕重對(duì)比

這里我們?cè)O(shè)計(jì)一張海報(bào),首先選擇兩張圖片,因?yàn)槲覀冾A(yù)想是要做輕重對(duì)比的,但是這兩個(gè)圖片明顯不平衡,左邊重很多。

將圖片上下排列,比較重的圖放在上面,輕一點(diǎn)的放在下面,下面的圖有一定的留白空間,所以可以用來(lái)添加文字。

現(xiàn)在這個(gè)版面看上去像是被分割成了兩個(gè)畫(huà)面,為了使其有一定的聯(lián)系,可以將文字組向上移動(dòng),這樣就起到了串聯(lián)的作用。

但是這樣識(shí)別度又有一定問(wèn)題,所以繼續(xù)調(diào)整。


添加黑色塊增加文字識(shí)別度,同時(shí)凸顯了板塊中的輕重對(duì)比,黑色塊形成了最重的元素,其次是上圖,最次是下圖,這樣也符合了這個(gè)版面的閱讀順序。

設(shè)計(jì)更多的是一種心理感受,一個(gè)優(yōu)秀的版面往往是對(duì)比和平衡共存的,比如這個(gè)版面,雖然具有明顯的輕重對(duì)比,但是通過(guò)對(duì)元素的把控,對(duì)元素位置和大小的調(diào)整,使得這個(gè)版面在視覺(jué)上相對(duì)平衡。

拿炒菜舉例,一道美味通常需要放很多佐料,不能因?yàn)橐粋€(gè)人愛(ài)吃咸,就不放甜和辣,而是在整體咸口的基礎(chǔ)上,適當(dāng)添加一些其他的味道。設(shè)計(jì)在這點(diǎn)上也是同樣的道理。

八、方向?qū)Ρ?/h3>

將主標(biāo)題放到版面中,橫跨版面向下復(fù)制,底部留一些空間編排其他文字。這樣整體畫(huà)面框架就出來(lái)了。

為了豐富版面,我們選擇了一個(gè)圖形元素,變換不同的角度,角度和方向一定是有規(guī)律的,隨意這個(gè)版面在目前為止有一定的方向?qū)Ρ取?/p>

然后刻畫(huà)圖形,增加一些光影。但是這樣它又遮擋了下方的文字,而且圖片和文字沒(méi)有什么聯(lián)系。



將圖片調(diào)整成透明狀,就既有真實(shí)感,又具有圖文的聯(lián)系。文字還有一些透視的感覺(jué)。
這里就使用了圖形的方向?qū)Ρ取?/p>

九、差異對(duì)比

差異對(duì)比指的是在一個(gè)畫(huà)面里邊大部分元素是幾乎一樣的,而極個(gè)別的元素是不一樣的。而這個(gè)不一樣的元素就被凸顯了出來(lái)。

復(fù)制元素填充版面。因?yàn)樵叵嘟?,所以?huà)面中沒(méi)有視覺(jué)焦點(diǎn)。

我們?yōu)槿宋锵路降腛填充一個(gè)紅色,那么有彩色的O在整體白色的文字中就被凸顯了出來(lái),進(jìn)而形成了一種差異對(duì)比。

十、疏密對(duì)比

找到一張和主題相關(guān)的背景作為主視覺(jué)

將內(nèi)容信息兩端對(duì)齊進(jìn)行編排,這樣就會(huì)有大小對(duì)比。

然后我們畫(huà)出網(wǎng)格,橫向劃分5欄。

然后將文字壓扁,占據(jù)一個(gè)橫向網(wǎng)格的位置,這樣就不會(huì)影響背景圖片了。而整張海報(bào)呈現(xiàn)一種簡(jiǎn)潔的風(fēng)格,文字組的排列緊湊,而圖片又很簡(jiǎn)單不復(fù)雜,從而讓版面形成了疏密對(duì)比。

十一、虛實(shí)對(duì)比


創(chuàng)建海報(bào)版面,先編排文字信息

添加圖片背景,雖然圖片不錯(cuò),但是和文字的對(duì)比關(guān)系不是很強(qiáng)。

對(duì)圖片進(jìn)行模糊處理,這樣可以突顯文字,增加虛實(shí)對(duì)比。同時(shí)增加飽和度,增加噪點(diǎn)。但是整體還是有些太順,缺少變化。

將標(biāo)題打散,但是又有些搶眼。

將文字再模糊處理。

將豎向文字加在人臉的位置,既填補(bǔ)了畫(huà)面的空白,又給版面增添了方向的對(duì)比。

十二、動(dòng)靜對(duì)比

動(dòng)靜對(duì)比有很多種,比較常見(jiàn)的是將文字或圖片進(jìn)行角度的傾斜,這樣在視覺(jué)上可以產(chǎn)生一種動(dòng)視。也可以通過(guò)添加簡(jiǎn)單的小元素豐富畫(huà)面,讓畫(huà)面更加靈動(dòng)。也可以通過(guò)點(diǎn)線(xiàn)面的處理,比如用線(xiàn)體現(xiàn)動(dòng)感。

健身的網(wǎng)頁(yè)首屏,選擇一張具有動(dòng)感的圖片

調(diào)整位置,在左側(cè)放置文字。

使用紅色的線(xiàn)條作為文字的強(qiáng)調(diào)。

將其他的信息編排進(jìn)來(lái), 播放按鈕可以使用紅色,與左邊的按鈕形成一個(gè)簡(jiǎn)單的呼應(yīng)。這里具有動(dòng)態(tài)的拳頭和靜態(tài)的文字,二者之間就形成了很好的動(dòng)靜對(duì)比。

十三、色彩對(duì)比

用對(duì)比配色直接將版面一分為二,顏色暫且填充灰色。

選擇小狗的圖片作為版面的主體。

對(duì)版面進(jìn)行分欄。

根據(jù)網(wǎng)格放置文字內(nèi)容。

提取關(guān)鍵信息放大處理,放置到圖片下方,降低透明度。


然后將其它文字放置到版面中。這樣在上方文字和下方文字之間形成了層次感和進(jìn)深感。


選擇對(duì)比強(qiáng)的黃和紫進(jìn)行配色,同時(shí)將文字反白。


每一種配色都很好看

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容