實例教學！12種透明背景的萬能設計方法

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

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

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

下面這個例子，將漂亮的紅酒釀造圖案作為背景利用的宣傳活動海報。如果，沒有半透明的白色濾色片的話，設計的就很過分，文字文本（特別小的字體）將無法閱讀。

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

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

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

照片是一個受歡迎的背景，不論是商品海報還是網站的標題、社交媒體用的設計，打印印刷和WEB項目這兩方面都可以使用。只是，由于照片的構圖，色調，明度的原因，不是很容易就能找到令人滿意的文字文本放置的位置。

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

接下來是另一個參考案例，下面的網頁設計使用了白色透明圖層來重疊，將文字放在單色照片的上面來顯示。

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

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

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

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

04.?將讀者的注意力集中起來

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

下面的這個例子，就是通過將純色背景挖出文字的形狀來達到集中視覺（英文：Focal Point）的一個效果，海報上的登場人物高明的集中在恰當的位置。

而接下來的這個設計，全部是由三角形的半透明圖層布置起來的。將視線誘導到女性的臉部，成為視覺的焦點。

05.?讓內容變得顯眼

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

下面的這個雜志設計，在透明清晰的封面上，添加上了白色文字的LOGO。通過這種方法，讓他產生光澤，強調出下面的圖像照片。

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

下面的這個設計，在法國的咖啡館café called Voyageur du Temps（法語中【時間旅行者】的意思）中被利用于樸素的紙袋上。稍稍有一點透明可以看見內容，通過添加具有年份氣息的宇宙地圖，將品牌魅力成功的塑造出來了。

06.?嘗試著讓圖層重疊

半透明的背景設計的優點在于，可以使復數的背景圖層相互重疊，版面的深度、顏色和照片、形狀等不同的圖層疊加在一起，產生出一種引人注目的效果。

下面的這個海報設計，具有象征性的人像照片，將版面的層次感給表現出來了，同時追加上了文字半透明圖層效果。其結果誕生出了一種對比感強烈，有生氣的有層次感的版面設計。

下面這一個設計案例，表現出了一種將圖像照片和半透明的顏色層，幾何學的樣式疊加起來的設計效果。

、

07.?稍稍展現出一點質感

亂七八糟的背景細節用半透明的圖層覆蓋，這種技巧最初是持反對意見的，但你可以添加一點點的獨特的設計，來讓他變得更加有魅力。

下面的這個服裝商店廣告banne，將主要的文字文本挖空，格子背景的花紋隱約可見。同時能夠看見整個背景，表現出一種風格整體統一的設計感。

下面這個設計案例，圖層文字互相重疊，使其更容易看見，它結合了一些之前介紹過的技巧。綠色的圓形與照片互相重疊，照片的細節你也可以看到。

08.?添加透明漸變圖層

利用透明圖層，可以添加很多顏色來進行設計。相較于單色的背景設計，半透明可以給人帶來一種柔軟的印象。

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

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

09.?利用獨特的混合效果

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

下面這個設計，紙張的紋理是手繪草圖、舊照片、墨水污漬重疊混合起來的，復古風格的數字拼貼海報。因此是將很多的設計要素組合起來，利用半透明圖層，將這些要素全部融合到一起的設計。

下面的這個海報設計，如何將每種顏色融合來引起我們的注意，和文字文本一起使用，也是一種流行的混合方法。

10.?強化品牌推廣

在項目設計的背景下，你是不需要稍候補充的。品牌和顏色作為視覺要素，例如LOGO標志，可以將品牌理念傳遞出來。

下面的這個設計是GOOGLE的年終報告設計，在這里就采用了鮮艷的配色和半透明的背景圖層。

下面的這個網頁設計，如果要通過他的配色方案和幾何形狀可以聯想到它的LOGO，你必須要創建一個半透明背景層和圖形要素。

11.?強調特定的范圍

特別是使用了文字文本和其他設計要素的生動的半透明彩色背景層，可以更好的強調。

在下面的這個廣告設計中，靈活運用半透明紅色圖層，和黑白的人物圖像做出對比，將圖像中的SALE強調出來了。

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

12.?展現有趣的構圖

最后，有可能是很常見的表現手法，但重點是在創意上。透明度的調整方法，透明圖層可以運用在任何設計方法上，他是一個多功能的工具。接下來讓我們看看獨特的設計方案。

下面這些，一個輕微的印象將成為決定性因素，是書的封面的概念設計。通過藍色的漸變圖層只露出文字文本頂端的一部分，來表現出魚翅從海面上露出來的樣子。

下面這張通過在老音樂電影海報下面，強調一個具有代表性的電影畫面，用白色的字符文本作為背景，電影標題創造出雨的形狀，同時傳遞多個意思，將意思組合表達出來。

下面這些是電影節海報設計，顏色鮮艷的半透明圓形添加上去，同時連接上兩個完全不同的照片，組合產生了新的魅力。

最后

你覺得怎么樣呢？這次介紹的技巧還需要正確的使用，今后的設計項目中的半透明圖層也需要正確的使用啊。配色和構圖也需要注意，隨時可以和這12個萬能的技巧相互借鑒。

「優設2月份優秀教程合集」

地圖圖標教程：
《PS教程！手把手教你打造一個配色小清新的地圖圖標》

卡通動物肖像：
《AI教程！教你繪制六個扁平化風格的卡通小動物肖像》

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

原文地址：photoshopvip
優設譯者：@喪心病狂十六夜貓

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com