【 設計理論】幫你掌握圖片排版設計的5個技巧

幫你掌握圖片排版設計的5個技巧

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

教學大綱:

近年來,在背景圖上添加文本的方式變得越來越流行,融入文本在圖片中滲入情感。在早期,圖像不得不做得很小以適應明顯低速的帶寬,隨着網速和顯示屏的快速提升,我們可以在設計中自由地使用更多圖片。


設計理論教學開始

近年來,在背景圖上添加文本的方式變得越來越流行,融入文本在圖片中滲入情感。在早期,圖像不得不做得很小以適應明顯低速的帶寬,隨着網速和顯示屏的快速提升,我們可以在設計中自由地使用更多圖片。

在這裡我們將與你分享5個文本與圖片搭配的小技巧,希望能幫到你。

註:本文所講原理同樣適用在選擇視頻與文本的組合。

一、色彩與亮度的對比

使用與文本有鮮明對比的圖片很有重要,比如深色背景搭配亮色文本,或者深色背景使用濾鏡或疊加元素處理,這樣就能確保有足夠對比度。

獲取合理色彩與明亮對比的小技巧:

第一看不出字形,說明對比度偏低了;

對比不只是深淺之間,互補色也可提供自然對比;

如果圖片複雜全焦,利用疊加或編輯圖像應該是最有效的選擇。

 

本例中,通過WebKtit濾鏡巧妙的放置以及使用額外的. 來處理圖像的明亮對比,請看下例:亮度(40%)對比度(70%);

幫你掌握圖片排版設計的5個技巧

辨識度差,文本與圖像均無焦點。

幫你掌握圖片排版設計的5個技巧

使用CCS濾鏡后,易於辨識。

優秀實例

Ayr

幫你掌握圖片排版設計的5個技巧

Geckoboard

幫你掌握圖片排版設計的5個技巧

Anodpixels

幫你掌握圖片排版設計的5個技巧

Obakkifoundation

幫你掌握圖片排版設計的5個技巧

二、尺寸與位置的對比

色彩不是唯一增強圖片與文本對比度的方法,選擇圖片的尺寸也很重要。

本例中,選取一個相對均勻,開闊的天空區域,這是放置文本的極佳位置。相反,將文本直接放置在圖片中間,有地平線的位置,將致使文本的辨識度差。

幫你掌握圖片排版設計的5個技巧

失敗案例:差的對比度和錯誤的位置。

幫你掌握圖片排版設計的5個技巧

優秀案例:對比度明顯且位置更加合適。

優秀實例:

Eup.volkswagen

幫你掌握圖片排版設計的5個技巧

Dtelepathy

幫你掌握圖片排版設計的5個技巧

三、利用景深

利用圖片的景深不同,在失焦的地方置放文本也能突出文字,增加可讀性,達到效果。

幫你掌握圖片排版設計的5個技巧

幫你掌握圖片排版設計的5個技巧

優秀實例:

Une.ch/creation

幫你掌握圖片排版設計的5個技巧

Gloriasrestaurants

幫你掌握圖片排版設計的5個技巧

Atelier

幫你掌握圖片排版設計的5個技巧

四、圖片選擇

圖片會傳遞情感,所以選擇圖片的時候,要聯繫設計中的場景,文本也要切合圖片。

小建議:

一句話表達內容,讓訪客知道點擊圖片會發生什麼。

不要選擇有聚焦有問題的圖片

圖片要高清大圖,如果有必要,可以選擇濾鏡或者磨砂。

優秀實例:

Pixelgrade

幫你掌握圖片排版設計的5個技巧

Formula1data

幫你掌握圖片排版設計的5個技巧

五、層次感

具體是文本相對於圖像中其他元素的位置,是在圖像之後,還是圖像之前?是融入其中?還是獨佔一方?進一步分析,如何將文本關聯到圖像的聚焦元素?

經驗法則:文本越小,空間上顯得越遠。

本例中,儘管背景圖細節豐富,但我們的視覺會停留在超長的文本上,忽略了圖像。同時人物與文本看起來像在同一水平線上,層次感弱。

幫你掌握圖片排版設計的5個技巧

將文本放大后,層次感立刻就出來了。

幫你掌握圖片排版設計的5個技巧

優秀實例:

Danielladraper

幫你掌握圖片排版設計的5個技巧

Vivaco

幫你掌握圖片排版設計的5個技巧

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 幫你掌握圖片排版設計的5個技巧