12個(gè)透明背景使用技巧，助你快速提高設(shè)計(jì)水平

平面設(shè)計(jì)的背景在某種程度上有點(diǎn)像墻上的油漆或壁紙...

做對(duì)了，你將會(huì)得到一個(gè)非常棒的背景，充分融合并發(fā)掘有吸引力的空間; 

弄錯(cuò)了，就是一場(chǎng)視覺(jué)災(zāi)難，它會(huì)把注意力分散在房間精心挑選的家具和藝術(shù)品上。

雖然網(wǎng)站、傳單或社交媒體圖片的背景看起來(lái)是相對(duì)較小的細(xì)節(jié)，但您不希望它像出錯(cuò)的油漆或胡亂的選擇的壁紙，讓受眾無(wú)法聚焦。

那我們就來(lái)看一些靈感創(chuàng)意，并學(xué)一些能充分利用到設(shè)計(jì)背景中的技巧?；镜陌咨蚣兩珱](méi)有任何問(wèn)題，但本文專門研究如何為背景增加透明度，這將是一個(gè)行之有效、用途多樣的工具

01. 簡(jiǎn)化雜亂的背景

圖示或圖案背景能讓設(shè)計(jì)更具個(gè)性化，但也可能讓設(shè)計(jì)更復(fù)雜或遮住文案。如何解決？在圖層頂層覆蓋一個(gè)次要的半透明背景。

這張活動(dòng)海報(bào)的背景是一張美麗的復(fù)古風(fēng)插圖，但是如果沒(méi)有頂層的白色透明圖層，背景就會(huì)搶了其他部分的風(fēng)頭，文字將很難讀取（特別是小號(hào)字體）。請(qǐng)注意白色部分不是全透明的，這樣可以柔和插圖的細(xì)節(jié)，但它的透明度又足以讓紋理顯現(xiàn)出來(lái)。大多數(shù)設(shè)計(jì)軟件可以通過(guò)不透明度設(shè)置調(diào)整透明度級(jí)別，通常范圍在0％（完全清除）和100％（完全不透明）之間。

再看如下案例，明信片上的圓形背景遮住了下面風(fēng)景照的一部分，給排版增加了一個(gè)簡(jiǎn)單而多彩的背景，這又是一個(gè)全新的設(shè)計(jì)技巧…    

02. 讓文字更顯眼

攝影照片是印刷和網(wǎng)頁(yè)背景的普遍選擇—無(wú)論是產(chǎn)品廣告、網(wǎng)站標(biāo)題還是社交媒體圖形。但是，根據(jù)照片的組成以及顏色、亮度等的純度，它可能并不一定都適合將文字放在頂部。

這張圖中，一系列的透明形狀在彼此頂部疊加，為文字創(chuàng)建背景（不然，下面黑白照片的細(xì)節(jié)就看不到）。紅色背景的透光度從輕度到中度的漸變也會(huì)帶來(lái)非常有趣的視覺(jué)效果。

再看如下案例，正是因?yàn)榫W(wǎng)頁(yè)上的透明白色背景，才讓黑色文字放在較暗的照片上仍然清晰可見(jiàn)。

同樣地，這個(gè)技巧也可以反轉(zhuǎn)使用：彩色照片、深色透明背景和白色文字。

如果您正在尋找在設(shè)計(jì)中使用的照片，我們建議您選擇免費(fèi)的照片資源。

03. 打造清新、輕快的風(fēng)格

如果能透過(guò)設(shè)計(jì)看到部分細(xì)節(jié)，它就給整體布局營(yíng)造一種簡(jiǎn)單寬敞的感覺(jué)。例如，下面的網(wǎng)站設(shè)計(jì)圖就是由一系列若隱若現(xiàn)的背景圖，配合干凈的字體和整潔的布局，形成極簡(jiǎn)風(fēng)格。

這一系列目錄封面以不同的方式實(shí)現(xiàn)極簡(jiǎn)化，以透明背景和三原色為基礎(chǔ)，再用一張照片和幾段文字來(lái)削減布局的一部分。

04. 引導(dǎo)受眾的注意力

透明背景不一定要從設(shè)計(jì)的這一邊覆蓋到另一邊，甚至構(gòu)成實(shí)體形狀。通過(guò)透明度獲得創(chuàng)意很容易 - 您可以為受眾創(chuàng)建不同的形狀切口或窗口，或利用透明度來(lái)提高（或模糊）受眾對(duì)特定部分的注意力。

這些電影海報(bào)將彩色透明背景和切割字母形狀結(jié)合，創(chuàng)建有效的視覺(jué)焦點(diǎn)，幫助受眾在每張海報(bào)中迅速聚焦到主角上。

在下圖的設(shè)計(jì)中，透明三角形在背景中的方向和位置將視線引導(dǎo)至美女的臉部。

05. 展示內(nèi)部信息

對(duì)于包裝、容器、封面或任何其他封閉物的設(shè)計(jì)，透明度可以很好地展示內(nèi)部或底部?jī)?nèi)容，讓產(chǎn)品自身說(shuō)話。

下圖的雜志將標(biāo)題排在全透明的背景上，不僅讓封面增添額外光澤，更具柔和觸感，也讓底層照片得到進(jìn)一步的強(qiáng)化。

接下來(lái)的兩個(gè)例子表明，透明背景對(duì)于食品包裝特別有效。僅僅第一眼，就能通過(guò)這些透明的“豆袋”，直截了當(dāng)?shù)目吹蕉棺拥念伾托螤睿?/p>

這個(gè)專為一個(gè)叫做Voyageur du Temps的咖啡館（法語(yǔ)為“時(shí)間旅行者”）設(shè)計(jì)的簡(jiǎn)單包裝，并不能隱藏面包的美味，通過(guò)半透明材料讓面包美味立現(xiàn)，同時(shí)還用與時(shí)間旅行主題相關(guān)的復(fù)古天文圖案來(lái)增添品牌感和額外的視覺(jué)興趣點(diǎn)。

06. 打造層次分明的設(shè)計(jì)/讓設(shè)計(jì)更有層次感

使用透明背景的好處之一是你可以用其他設(shè)計(jì)元素疊加多個(gè)背景或疊加透明背景，通過(guò)將不同顏色、照片或形狀分層，讓布局更有深度并打造有趣的視覺(jué)效果。

這一系列活動(dòng)海報(bào)通過(guò)遠(yuǎn)景背景下的透明度，把人像和圖案并列放在一起，同時(shí)在文字底部又額外添加透明背景形狀。這種將顏色和元素的分層讓整體效果具有鮮明的動(dòng)態(tài)感和對(duì)比度，同時(shí)也讓排版布局更有深度。

以下是分層的另一個(gè)案例，它們完美結(jié)合了攝影照片、透明的色塊和圖案。

07. 讓紋理“透”出來(lái)

第一點(diǎn)中我們講到透明背景可以遮住分散注意力的細(xì)節(jié)，稍微換一種方式，它也能讓一些很棒的紋理給你的設(shè)計(jì)增添一些視覺(jué)興趣點(diǎn)。

下面這張服裝零售廣告通過(guò)透明背景中的切口透出紡織格子底紋，形成主要排版。紋理透過(guò)背景隱約可見(jiàn)，讓整體設(shè)計(jì)更具視覺(jué)黏著力。

下面的案例包含了前面講到的一些技巧，比如凸顯文字和設(shè)計(jì)分層。因?yàn)橥该鲌A圈和圖片重疊，透過(guò)綠色透明圓圈也看到圖片中一些有趣的紋理細(xì)節(jié)。

08. 添加一些柔和的色彩漸變

透明度還為設(shè)計(jì)添加顏色提供了多種多樣的可能，與純色背景相比，透明的顏色看起來(lái)更柔軟、更細(xì)膩，尤其是當(dāng)你的顏色不那么出彩的時(shí)候。

下圖采用柔和透明的淺淡色彩，給照片上方的文字創(chuàng)造空間。背景沒(méi)有采用純色形狀而是漸變的方式，隨著頁(yè)面的不透明度逐步降低，圖案最終漸漸完全清晰。透明度和漸變梯度掌握的非常好。

這是APP UI使用透明漸變的另一個(gè)示例。這一次，漸變涉及純度、色調(diào)和透明度的變化，讓設(shè)計(jì)更加活潑有生氣，但又不搶文字風(fēng)頭。

09. 讓混合效果發(fā)揮創(chuàng)意

很多設(shè)計(jì)軟件都自帶混合模式或混合工具，您可以創(chuàng)造性地將顏色、照片或其他元素進(jìn)行融合和分層，還可以用透明度和其他設(shè)置創(chuàng)造各種視覺(jué)效果。這種方法通常都涵蓋了我們講過(guò)的一些技巧，如分層、使用紋理和攝影。

這張?jiān)O(shè)計(jì)的背景層次感非常豐富，由舊照片、含有筆跡的紙質(zhì)紋理、墨跡、巧妙的顏色水紋交織拼接一起，形成生動(dòng)活潑的復(fù)古風(fēng)作品。

這么多設(shè)計(jì)元素的組合，效果有趣卻不壓抑，很大程度上得益于透明度的使用，它讓各個(gè)部分有效地融合一起，形成和諧的整體。

下圖的背景主要集中在如何將顏色相互融合、相互作用，這種顏色混合效果廣受歡迎。

10. 強(qiáng)化品牌形象

設(shè)計(jì)時(shí)，背景不一定要事先考慮。事實(shí)上，可以將它們作為另一種途徑，通過(guò)品牌顏色或其他可識(shí)別的視覺(jué)元素，將公司的身份或風(fēng)格表達(dá)更透徹更清晰。

例如，下面的概念項(xiàng)目是為Google年度報(bào)告構(gòu)思的一個(gè)新設(shè)計(jì)，通過(guò)透明背景形狀完美融合品牌的鮮艷色彩。

以下網(wǎng)站設(shè)計(jì)采用類似的方法，從公司標(biāo)志中提取顏色和幾何形狀，形成透明的背景和圖形。

11. 突出重點(diǎn)

透明的背景，尤其是顏色醒目的透明背景，更能突顯重要的文字內(nèi)容或其他設(shè)計(jì)元素。

這個(gè)平面廣告圖使用透明的紅色橫幅，在整體黑白設(shè)計(jì)的托下，突出強(qiáng)調(diào)了特價(jià)促銷的信息。

這個(gè)設(shè)計(jì)也使用紅色透明形狀（常見(jiàn)的吸人眼球的好選擇）來(lái)選擇性地吸引注意網(wǎng)站的特定版塊。

12. 創(chuàng)建巧妙組合

最后，老生常談的提個(gè)醒：一定要有創(chuàng)意！

透明度和不透明度設(shè)置應(yīng)用非常廣泛，你可以在設(shè)計(jì)中創(chuàng)造各種有趣的效果。

來(lái)！試一試，說(shuō)不定你就能創(chuàng)造一個(gè)非常獨(dú)特的設(shè)計(jì)方案。

我們來(lái)看幾個(gè)使用透明背景創(chuàng)意的案例：

首先，書(shū)封面的概念延展性非常豐富。如下圖：一個(gè)簡(jiǎn)單透明的藍(lán)色長(zhǎng)方形代表海洋，與標(biāo)題排版相互配合，暗示水面上方有一個(gè)危險(xiǎn)的鯊魚(yú)鰭。

接著再看一個(gè)例子，在經(jīng)典音樂(lè)電影的個(gè)性海報(bào)中，透明背景即刻就能展現(xiàn)多種創(chuàng)意用途：它突出了電影的關(guān)鍵時(shí)刻，為白色標(biāo)題排版提供背景，并且象征著降雨，這一切又都緊扣本段主題即所有這些與其他設(shè)計(jì)元素相結(jié)合，就能創(chuàng)造一個(gè)巧妙精簡(jiǎn)的設(shè)計(jì)作品

從電影主題談到電影節(jié)海報(bào)，下圖設(shè)計(jì)中的透明圓圈，為背景添加一抹亮色。同時(shí)，用同樣的形狀配上不同的顏色，突出顯示了兩個(gè)對(duì)立圖像之間的差異。

結(jié)語(yǔ)

是不是倍受啟發(fā)？我們希望這一系列的設(shè)計(jì)案例能讓你了解透明背景在設(shè)計(jì)中的潛力。從顏色到構(gòu)圖，他們隨時(shí)給你的設(shè)計(jì)提供有效的解決方案?，F(xiàn)在，是時(shí)候讓他們物盡其用了- 一如既往，享受設(shè)計(jì)的樂(lè)趣！