您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> ps教程 >> 瀏覽設(shè)計(jì)教程

Photoshop處理文字讓背景和字體更加鮮明

 Photoshop處理文字讓背景和字體更加鮮明 三聯(lián)

  現(xiàn)在不少網(wǎng)站都喜歡用高清大圖來(lái)裝飾網(wǎng)站,而如何讓網(wǎng)頁(yè)中的文字在漂亮的背景中脫穎而出,讓讀者第一時(shí)間識(shí)別到文字,對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)可是相當(dāng)關(guān)鍵。今天,這期的國(guó)外PS精品翻譯教程就跟大家分享5種簡(jiǎn)單有效的方法提升網(wǎng)頁(yè)文字的顯著度。非常簡(jiǎn)單實(shí)用,適合小白們學(xué)習(xí)。

  1.增加對(duì)比

  如下面的圖片所示,由于背景與文字的顏色相差較小,導(dǎo)致圖片中的文字比較難看清楚。圖片的背景中,特別是菜單區(qū)域的細(xì)節(jié)較多。“Buffalo  Wings”的文字幾乎淹沒(méi)在圖片復(fù)雜的背景中。下一步我們要做的就是加強(qiáng)文字與背景的色彩對(duì)比。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖01

  首先在Photoshop的圖層面板中新建圖層,并重新命名為“顏色疊加”。選擇顏色選擇工具(快捷鍵I),如下圖所示,撿取左邊大叔的藍(lán)色襯衣的顏色,然后按Shift+F5填充在新建圖層中。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖02

  接著,調(diào)整藍(lán)色填充圖層的不透明度為50%,并且拉這個(gè)藍(lán)色圖層到文字圖層的下方。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖03

  如下圖所示,面畫(huà)的對(duì)比度已經(jīng)有了改善。“Buffalo Wings”等文字在畫(huà)面中已經(jīng)顯得更加顯眼和明顯了,這樣就能看清楚文字啦。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖04

  2.添加陰影

  如下面的例子所示。由于文字位于橋梁的陰影部分,文字同時(shí)又設(shè)置為黑色,這樣文字顯得非常不顯眼,容易讓人看不清楚。下面第一步就是設(shè)置文字的顏色與特效,改善視覺(jué)效果。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖05

  當(dāng)文字設(shè)置為白色之后,文字就會(huì)非常明顯地與背景區(qū)別開(kāi)來(lái),有利于第一眼識(shí)別文字。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖06

  接著就是為文字添加圖層樣式和陰影效果啦。設(shè)置陰影的不透明度為52%、擴(kuò)展為16%、大小為100像素、角度為-144°。設(shè)置完成后,文字的右下方就增加了相應(yīng)的陰影效果。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖07

  通過(guò)簡(jiǎn)單地增加陰影效果,就能讓文字完全在背景中凸顯出來(lái)。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖08

  3.添加橫線

  下面介紹的是其中一種最簡(jiǎn)單的方式來(lái)凸顯文字內(nèi)容。通過(guò)在文字上下方添加兩條白色橫線,可以將背景和文字很好地隔離開(kāi)來(lái)。原圖如下所示。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖09

  那么在增加兩條橫線之后,文字內(nèi)容馬上變得很明顯。同時(shí),橫線和文字的間距適當(dāng)可以營(yíng)造良好的設(shè)計(jì)效果。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖10

  4.添加局部半透明背景

  在某些條件下,局部增加半透明的背景來(lái)增強(qiáng)文字效果,也是不錯(cuò)的方法。如下圖所示,白色文字與背景建筑部分顏色比較相似,文字內(nèi)容變得不是很明顯。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖11

  為了增加文字的識(shí)別度,選擇矩形工具,添加圖形。形狀由設(shè)計(jì)需要確定,設(shè)置圖像填充為黑色,然后設(shè)置描邊為白色、3像素。設(shè)置如下圖所示。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖12

  將圖形圖層移動(dòng)到文字圖層下方,然后設(shè)置圖層不透明度為57%。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖13

  下圖是最終效果,文字是不是已經(jīng)被突顯出來(lái)了呢。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖14

  5.文字背景模糊化

  背景微微模糊化,可以突顯文字,就如拍攝中的背景虛化。從下圖可以看到,文字再次融到背景中。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖15

  背景虛化,第一步就是將背景轉(zhuǎn)化為智能對(duì)象,這樣背景的圖像質(zhì)量就不會(huì)因?yàn)槟:脑蚨陆?。在圖層面板中,對(duì)圖像右擊,選擇“轉(zhuǎn)換為智能對(duì)象”。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖16

  然后編輯智能對(duì)象。在主菜單欄中,選擇“濾鏡>模糊>高斯模糊”。操作如下圖所示。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖17

  設(shè)置模糊半徑為3.8像素。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖18

  這樣就能將文字從背景中顯現(xiàn)出來(lái),成為畫(huà)面的焦點(diǎn)。

Photoshop處理文字讓背景和字體更加鮮明,PS教程,素材中國(guó)網(wǎng)

  圖19

[教程作者:么么茶]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/tutorial/ps2720.html
Photoshop制作人像照片創(chuàng)意的大頭漫畫(huà)效果
教你PS洋氣的油畫(huà)效果
圖趣網(wǎng)微信
建議反饋
×