現(xiàn)在全屏背景的網(wǎng)站非常流行,如果有同學(xué)想要做類似的網(wǎng)站,那圖片與文字就很關(guān)鍵咯,特別是圖片上的文字,從字體選擇到配色、排版都需要同學(xué)們好好斟酌。
今天帶來10個小技巧,同學(xué)們閱讀完可以小試牛刀,說不定加上文字就成了點睛之筆,學(xué)起來吧!
修圖教程推薦:
PS修圖小教程!漂亮色調(diào)一秒調(diào)出來
PHOTOSHOP CS6鮮為人知的一個調(diào)色功能
你必須首先要有合適的圖片,好的排版,知道如何充分利用現(xiàn)有資源整合出最佳效果。如果你覺得你已經(jīng)做好接受挑戰(zhàn)的準(zhǔn)備了,那么下面的10個小貼士對你會很有幫助的:
1、添加對比
Pack
telegraph
文本必須是可讀的!確保文本在顏色方面與背景圖片產(chǎn)生足夠的對比,如果你有一張暗色調(diào)的背景圖片,那么就選擇白色或者淺色調(diào)的文本。如果你的背景是淺色調(diào)的,那么文本就填充深色調(diào)。
2、把文本變成圖片的一部分
meand my self portfolio
toast
有時候?qū)⑽谋咀兂蓤D像的一部分時它的效率更高。但是這很難實現(xiàn),只是在有限的情況下才工作。你需要一張簡單的圖片加上一串簡單的文字(上圖一),或者直接把文字合理地嵌入到圖片里(上圖二)。
3、讓文字在人物的注視之中
bradhogan
Michael Schmid
處理圖像的視覺流在涉及到文本和圖片共存時是一個非常微妙的技巧。你需要文本符合圖像的一部分邏輯。而且,如果圖片是起到主要視覺效果的,就請不要把文本放在圖片最重要的位置,不要干擾圖片的視覺效果。
所以需要尋找空間去碼上你的文本。上面的兩個例子都很好地引導(dǎo)了你的視線走向。
4、來點高斯模糊
helloniche
wallmob
使用軟件簡單地把背景圖片模糊一下可以最大化地突出你的文本。并且這會提升用戶關(guān)注你的整體概念。
5、 把文本放在一個形狀里面
tradestone
tnvacation
當(dāng)圖片五顏六色并且明暗難以區(qū)分時,把文本放在一個框里面就可以很好地突出了。
選擇一個合適頁面圖片的形狀,然后調(diào)整形狀的顏色使之與整體融合得恰到好處(有時也可以調(diào)整透明度),然后打上字體,完美get~
6、 把文本放在背景里面
squareup
caitlinwicker
有時候反向思考也是很重要的。為什么一定要把文字作為特別的焦點放在前面呢?放在背景也可以啊!在有些背景是單一的純色時,把文本放在背景上更加能夠起到突出的效果!
當(dāng)然了,字體必須擺放在合適的位置。可以適當(dāng)?shù)亟o它來電投影效果用以突出文本。
7、 一個字:大!
plainmade
tiny foot print coffee
當(dāng)你實在是不知道該怎么辦時,干脆就放大字體吧!這個辦法同時也擴大了圖像本身給人的印象,大文本能夠迅速抓取用戶的眼球。
使用大圖片(比如上圖的咖啡豆)可以幫助你提高陰影和對比差異。而添加大文本則可以為頁面添加足夠的重力感。
8、 來點顏色看看
Knucklesindustries
storyandheart
添加一個顏色提示也可以增加視覺效果。上面的網(wǎng)站采取兩種截然不同的方法——第一張字體的顏色直接和背景色相近用以烘托背景主題,第二張字體顏色和背景顏色形成鮮明對比直接突出文本。這兩種方法同樣有效。
9、 添加一些高亮光澤
winshape
brandvillage
偏色處理是越來越受歡迎,它能使文本得到良好的突出。雖然這是一個復(fù)雜的工程,但效果驚人。
選擇一個可以提高視覺效果的顏色,調(diào)整透明度(不要整成完全透明的哦),然后添加上文本!如果你實在不知道如何選取顏色,干脆就直接選一個顏色。
10、簡單化
keepsareal
joshcohen
經(jīng)過時間的重重考驗充分證實保持簡單適用于文本和圖像。現(xiàn)在你想要讓兩者結(jié)合,就要好好考慮簡單化處理。
在處理圖像時,使用簡單的排版和直觀的形象可以創(chuàng)造最好的效果。記得要讓圖像顯示出最重要的部分,保證可以清晰顯示文本。
原文地址:designmodo
優(yōu)設(shè)網(wǎng)翻譯:@sheisjane
本文由優(yōu)設(shè)網(wǎng)uisdc.com原創(chuàng)翻譯,轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處,謝謝各位小編。
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊:網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法,更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博:擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航:全球頂尖設(shè)計網(wǎng)站推薦,設(shè)計師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號:【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計師平臺,提供獎品贊助 聯(lián)系我們
標(biāo)志設(shè)計標(biāo)準(zhǔn)教程
已累計誕生 729 位幸運星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓