近年來(lái)，在背景圖上添加文本的方式變得越來(lái)越流行，融入文本在圖片中滲入情感。在早期，圖像不得不做得很小以適應(yīng)明顯低速的帶寬，隨著網(wǎng)速和顯示屏的快速提升，我們可以在設(shè)計(jì)中自由地使用更多圖片。

在這里我們將與你分享5個(gè)文本與圖片搭配的小技巧，希望能幫到你。

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

一、色彩與亮度的對(duì)比

使用與文本有鮮明對(duì)比的圖片很有重要，比如深色背景搭配亮色文本，或者深色背景使用濾鏡或疊加元素處理，這樣就能確保有足夠?qū)Ρ榷取?/p>

獲取合理色彩與明亮對(duì)比的小技巧：

• 第一看不出字形，說(shuō)明對(duì)比度偏低了；
• 對(duì)比不只是深淺之間，互補(bǔ)色也可提供自然對(duì)比；
• 如果圖片復(fù)雜全焦，利用疊加或編輯圖像應(yīng)該是最有效的選擇。

想利用色彩對(duì)比，得先了解一點(diǎn)色彩的基礎(chǔ)知識(shí)：《設(shè)計(jì)師配色寶典！教你從零開(kāi)始學(xué)配色》

本例中，通過(guò)WebKtit濾鏡巧妙的放置以及使用額外的<div>. 來(lái)處理圖像的明亮對(duì)比，請(qǐng)看下例：亮度（40%）對(duì)比度（70%）；

辨識(shí)度差，文本與圖像均無(wú)焦點(diǎn)。

使用CCS濾鏡后，易于辨識(shí)。

優(yōu)秀實(shí)例

Ayr

Geckoboard

Anodpixels

Obakkifoundation

二、尺寸與位置的對(duì)比

色彩不是唯一增強(qiáng)圖片與文本對(duì)比度的方法，選擇圖片的尺寸也很重要。

本例中，選取一個(gè)相對(duì)均勻，開(kāi)闊的天空區(qū)域，這是放置文本的極佳位置。相反，將文本直接放置在圖片中間，有地平線的位置，將致使文本的辨識(shí)度差。

失敗案例：差的對(duì)比度和錯(cuò)誤的位置。

優(yōu)秀案例：對(duì)比度明顯且位置更加合適。

優(yōu)秀實(shí)例：

Eup.volkswagen

Dtelepathy

三、利用景深

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

優(yōu)秀實(shí)例：

Une.ch/creation

Gloriasrestaurants

Atelier

四、圖片選擇

圖片會(huì)傳遞情感，所以選擇圖片的時(shí)候，要聯(lián)系設(shè)計(jì)中的場(chǎng)景，文本也要切合圖片。

小建議:

• 一句話表達(dá)內(nèi)容，讓訪客知道點(diǎn)擊圖片會(huì)發(fā)生什么。
• 不要選擇有聚焦有問(wèn)題的圖片
• 圖片要高清大圖，如果有必要，可以選擇濾鏡或者磨砂。

超多高清大圖的資源站：《免費(fèi)高清第二波！12個(gè)無(wú)版權(quán)限制的大圖特供網(wǎng)站》

優(yōu)秀實(shí)例：

Pixelgrade

Formula1data

五、層次感

具體是文本相對(duì)于圖像中其他元素的位置，是在圖像之后，還是圖像之前？是融入其中？還是獨(dú)占一方？進(jìn)一步分析，如何將文本關(guān)聯(lián)到圖像的聚焦元素？

經(jīng)驗(yàn)法則：文本越小，空間上顯得越遠(yuǎn)。

本例中，盡管背景圖細(xì)節(jié)豐富，但我們的視覺(jué)會(huì)停留在超長(zhǎng)的文本上，忽略了圖像。同時(shí)人物與文本看起來(lái)像在同一水平線上，層次感弱。

將文本放大后，層次感立刻就出來(lái)了。

優(yōu)秀實(shí)例：

Danielladraper

Vivaco

平面排版通俗易懂好教程！

想突出中文美感？資深廣告人+設(shè)計(jì)老手來(lái)幫你！
《平面排版時(shí)，教你突出中文美感的幾種方法》
《平面排版時(shí)，教你突出中文美感的幾種方法第二集（基礎(chǔ)篇）》

給相片添加水印？專業(yè)攝影師有招！
《超全面教程！給照片添加文字有哪10個(gè)高大上的方法？》

原文地址：webdesign.tutsplus
譯者：程遠(yuǎn)、Alvin

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量76萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：