現(xiàn)在很多海報(bào)、Banner、網(wǎng)頁(yè)都喜歡用透明效果作為背景，在增添頁(yè)面的對(duì)照感和可讀性的同時(shí)對(duì)整體的效果妨礙又不大，可謂一舉兩得。如果你只會(huì)最簡(jiǎn)單的圖層+文字，建議來(lái)看看今天@喪心病狂十六夜貓?的這篇好文，列舉了12種透明效果背景的設(shè)計(jì)方法，收！

01.?使亂七八糟的背景變得流暢

利用插圖和有質(zhì)感的模范背景，能加上個(gè)性去設(shè)計(jì)。但是同時(shí)，很可能會(huì)變得亂七八糟，使文字無(wú)法閱讀。作為解決的方法，可以重疊一個(gè)半透明的背景。

下面這個(gè)例子，將漂亮的紅酒釀造圖案作為背景利用的宣傳活動(dòng)海報(bào)。如果，沒(méi)有半透明的白色濾色片的話，設(shè)計(jì)的就很過(guò)分，文字文本（特別小的字體）將無(wú)法閱讀。

即使在顯示背景，白色圖層的使用也要注意，插圖的顏色和調(diào)整下降的點(diǎn)也需要引起注意。PhotoShop或者是Illustrator中將不透明度試著從0%到100%自己調(diào)整看看吧。

還有一個(gè)例子，下面的明信片，將風(fēng)景畫漸隱，添加上樸素而又華麗的圓形背景，將文字文本重疊上去。

02.?嘗試著讓文字更加顯眼

照片是一個(gè)受歡迎的背景，不論是商品海報(bào)還是網(wǎng)站的標(biāo)題、社交媒體用的設(shè)計(jì)，打印印刷和WEB項(xiàng)目這兩方面都可以使用。只是，由于照片的構(gòu)圖，色調(diào)，明度的原因，不是很容易就能找到令人滿意的文字文本放置的位置。

下面的例子，由于文字的原因（黑白照片變得難以看見(jiàn)），半透明的形狀互相重疊。另外，透明度不同的圖層互相重疊，獨(dú)一無(wú)二的效果就顯示出來(lái)了。

接下來(lái)是另一個(gè)參考案例，下面的網(wǎng)頁(yè)設(shè)計(jì)使用了白色透明圖層來(lái)重疊，將文字放在單色照片的上面來(lái)顯示。

這個(gè)手法是利用了色彩的反轉(zhuǎn)。例如，半透明的黑色圖層和白色的文字文本什么的。

03.?像空氣一樣干凈的展示

當(dāng)用于設(shè)計(jì)的配件已經(jīng)決定，可以通過(guò)利用雜志的版面設(shè)計(jì)來(lái)體現(xiàn)出簡(jiǎn)單的空間和范圍。例如下面的這個(gè)網(wǎng)頁(yè)設(shè)計(jì)，占大部分半透明的背景層，流暢整齊的字體組合，通過(guò)有組織的布局，產(chǎn)生簡(jiǎn)約的風(fēng)格。（在這里有一個(gè)下載的鏈接，可以下一些素材，我先把地址放在這里，以后再來(lái)翻譯。http://photoshopvip.net/archives/83925【完全免費(fèi)可商用，60種美麗的字體下載！2015年版】）

下面的一套商品目錄，用三原色的半透明圖層和一張照片相互重疊，然后再加入少量的文字文本，表現(xiàn)出了一種簡(jiǎn)約而不簡(jiǎn)單的風(fēng)格。

04.?將讀者的注意力集中起來(lái)

設(shè)計(jì)成半透明的背景圖層將其全部覆蓋，也不一定非要是四方形。半透明圖層上添加一個(gè)小小的窗戶，通過(guò)調(diào)整透明度，在那里設(shè)計(jì)出特定的部分，將讀者的注意力集中到那里。

下面的這個(gè)例子，就是通過(guò)將純色背景挖出文字的形狀來(lái)達(dá)到集中視覺(jué)（英文：Focal Point）的一個(gè)效果，海報(bào)上的登場(chǎng)人物高明的集中在恰當(dāng)?shù)奈恢谩?/p>

而接下來(lái)的這個(gè)設(shè)計(jì)，全部是由三角形的半透明圖層布置起來(lái)的。將視線誘導(dǎo)到女性的臉部，成為視覺(jué)的焦點(diǎn)。

05.?讓內(nèi)容變得顯眼

包裝箱，罩子上的封面等設(shè)計(jì)，在內(nèi)容上都使用了透明的圖層，這樣就會(huì)使其變得非常的有吸引力。

下面的這個(gè)雜志設(shè)計(jì)，在透明清晰的封面上，添加上了白色文字的LOGO。通過(guò)這種方法，讓他產(chǎn)生光澤，強(qiáng)調(diào)出下面的圖像照片。

下面的兩個(gè)樣品，就是在食品包裝上運(yùn)用到了【透明】效果這樣的一個(gè)技巧。讓人第一眼，就能分辨出各種各樣的豆子在包裝內(nèi)，色澤和豆子的形狀都能不費(fèi)功夫的區(qū)分出的食品包裝設(shè)計(jì)。

下面的這個(gè)設(shè)計(jì)，在法國(guó)的咖啡館café called Voyageur du Temps（法語(yǔ)中【時(shí)間旅行者】的意思）中被利用于樸素的紙袋上。稍稍有一點(diǎn)透明可以看見(jiàn)內(nèi)容，通過(guò)添加具有年份氣息的宇宙地圖，將品牌魅力成功的塑造出來(lái)了。

06.?嘗試著讓圖層重疊

半透明的背景設(shè)計(jì)的優(yōu)點(diǎn)在于，可以使復(fù)數(shù)的背景圖層相互重疊，版面的深度、顏色和照片、形狀等不同的圖層疊加在一起，產(chǎn)生出一種引人注目的效果。

下面的這個(gè)海報(bào)設(shè)計(jì)，具有象征性的人像照片，將版面的層次感給表現(xiàn)出來(lái)了，同時(shí)追加上了文字半透明圖層效果。其結(jié)果誕生出了一種對(duì)比感強(qiáng)烈，有生氣的有層次感的版面設(shè)計(jì)。

下面這一個(gè)設(shè)計(jì)案例，表現(xiàn)出了一種將圖像照片和半透明的顏色層，幾何學(xué)的樣式疊加起來(lái)的設(shè)計(jì)效果。

、

07.?稍稍展現(xiàn)出一點(diǎn)質(zhì)感

亂七八糟的背景細(xì)節(jié)用半透明的圖層覆蓋，這種技巧最初是持反對(duì)意見(jiàn)的，但你可以添加一點(diǎn)點(diǎn)的獨(dú)特的設(shè)計(jì)，來(lái)讓他變得更加有魅力。

下面的這個(gè)服裝商店廣告banne，將主要的文字文本挖空，格子背景的花紋隱約可見(jiàn)。同時(shí)能夠看見(jiàn)整個(gè)背景，表現(xiàn)出一種風(fēng)格整體統(tǒng)一的設(shè)計(jì)感。

下面這個(gè)設(shè)計(jì)案例，圖層文字互相重疊，使其更容易看見(jiàn)，它結(jié)合了一些之前介紹過(guò)的技巧。綠色的圓形與照片互相重疊，照片的細(xì)節(jié)你也可以看到。

08.?添加透明漸變圖層

利用透明圖層，可以添加很多顏色來(lái)進(jìn)行設(shè)計(jì)。相較于單色的背景設(shè)計(jì)，半透明可以給人帶來(lái)一種柔軟的印象。

下面這個(gè)設(shè)計(jì)案例，利用柔和的半透明中間色將其放在文字的下方。特別是半透明漸變的那個(gè)區(qū)域真是絕妙的組合。

在另一個(gè)設(shè)計(jì)案例中，將漸變色利用在移動(dòng)端的用戶界面設(shè)計(jì)上。在這里使用了鮮艷的配色，文字文本和背景透明的保守的方法。

09.?利用獨(dú)特的混合效果

很多設(shè)計(jì)應(yīng)用中，在透明圖層上利用混合模式的功能，將顏色，照片和其他一些設(shè)計(jì)要素混合在一起。通常這種技術(shù)，圖層重疊和照片組合的使用方法，可以和之前的設(shè)計(jì)技巧組合起來(lái)。

下面這個(gè)設(shè)計(jì)，紙張的紋理是手繪草圖、舊照片、墨水污漬重疊混合起來(lái)的，復(fù)古風(fēng)格的數(shù)字拼貼海報(bào)。因此是將很多的設(shè)計(jì)要素組合起來(lái)，利用半透明圖層，將這些要素全部融合到一起的設(shè)計(jì)。

下面的這個(gè)海報(bào)設(shè)計(jì)，如何將每種顏色融合來(lái)引起我們的注意，和文字文本一起使用，也是一種流行的混合方法。

10.?強(qiáng)化品牌推廣

在項(xiàng)目設(shè)計(jì)的背景下，你是不需要稍候補(bǔ)充的。品牌和顏色作為視覺(jué)要素，例如LOGO標(biāo)志，可以將品牌理念傳遞出來(lái)。

下面的這個(gè)設(shè)計(jì)是GOOGLE的年終報(bào)告設(shè)計(jì)，在這里就采用了鮮艷的配色和半透明的背景圖層。

下面的這個(gè)網(wǎng)頁(yè)設(shè)計(jì)，如果要通過(guò)他的配色方案和幾何形狀可以聯(lián)想到它的LOGO，你必須要?jiǎng)?chuàng)建一個(gè)半透明背景層和圖形要素。

11.?強(qiáng)調(diào)特定的范圍

特別是使用了文字文本和其他設(shè)計(jì)要素的生動(dòng)的半透明彩色背景層，可以更好的強(qiáng)調(diào)。

在下面的這個(gè)廣告設(shè)計(jì)中，靈活運(yùn)用半透明紅色圖層，和黑白的人物圖像做出對(duì)比，將圖像中的SALE強(qiáng)調(diào)出來(lái)了。

在這里也使用了紅色半透明圖層，將人們的視線集中到網(wǎng)站的特定區(qū)域。

12.?展現(xiàn)有趣的構(gòu)圖

最后，有可能是很常見(jiàn)的表現(xiàn)手法，但重點(diǎn)是在創(chuàng)意上。透明度的調(diào)整方法，透明圖層可以運(yùn)用在任何設(shè)計(jì)方法上，他是一個(gè)多功能的工具。接下來(lái)讓我們看看獨(dú)特的設(shè)計(jì)方案。

下面這些，一個(gè)輕微的印象將成為決定性因素，是書的封面的概念設(shè)計(jì)。通過(guò)藍(lán)色的漸變圖層只露出文字文本頂端的一部分，來(lái)表現(xiàn)出魚(yú)翅從海面上露出來(lái)的樣子。

下面這張通過(guò)在老音樂(lè)電影海報(bào)下面，強(qiáng)調(diào)一個(gè)具有代表性的電影畫面，用白色的字符文本作為背景，電影標(biāo)題創(chuàng)造出雨的形狀，同時(shí)傳遞多個(gè)意思，將意思組合表達(dá)出來(lái)。

下面這些是電影節(jié)海報(bào)設(shè)計(jì)，顏色鮮艷的半透明圓形添加上去，同時(shí)連接上兩個(gè)完全不同的照片，組合產(chǎn)生了新的魅力。

最后

你覺(jué)得怎么樣呢？這次介紹的技巧還需要正確的使用，今后的設(shè)計(jì)項(xiàng)目中的半透明圖層也需要正確的使用啊。配色和構(gòu)圖也需要注意，隨時(shí)可以和這12個(gè)萬(wàn)能的技巧相互借鑒。

「優(yōu)設(shè)2月份優(yōu)秀教程合集」

地圖圖標(biāo)教程：
《PS教程！手把手教你打造一個(gè)配色小清新的地圖圖標(biāo)》

卡通動(dòng)物肖像：
《AI教程！教你繪制六個(gè)扁平化風(fēng)格的卡通小動(dòng)物肖像》

卡通人物肖像：
《AI教程！教你繪制扁平化風(fēng)格的卡通人物肖像（四人組合篇）》

原文地址：photoshopvip
優(yōu)設(shè)譯者：@喪心病狂十六夜貓

【優(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è)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(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