search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

12個透明背景使用技巧,助你快速提高設計水平

PS.當你看完這篇文章覺得急不可耐的想來練練手了不妨參加【每日/海報】練習成長活動,結合每日主題設計創作,參與方式及每日主題在公眾號回復每日即可加入練習

平面設計的背景在某種程度上有點像牆上的油漆或壁紙...

做對了,你將會得到一個非常棒的背景,充分融合併發掘有吸引力的空間;

弄錯了,就是一場視覺災難,它會把注意力分散在房間精心挑選的傢具和藝術品上。

雖然網站、傳單或社交媒體圖片的背景看起來是相對較小的細節,但您不希望它像出錯的油漆或胡亂的選擇的壁紙,讓受眾無法聚焦。

那我們就來看一些靈感創意,並學一些能充分利用到設計背景中的技巧。基本的白色或純色沒有任何問題,但本文專門研究如何為背景增加透明度,這將是一個行之有效、用途多樣的工具

01. Simplify a Busy Background 簡化雜亂的背景

圖示或圖案背景能讓設計更具個性化,但也可能讓設計更複雜或遮住文案。如何解決?在圖層頂層覆蓋一個次要的半透明背景。

這張活動海報的背景是一張美麗的復古風插圖,但是如果沒有頂層的白色透明圖層,背景就會搶了其他部分的風頭,文字將很難讀取(特別是小號字體)。請注意白色部分不是全透明的,這樣可以柔和插圖的細節,但它的透明度又足以讓紋理顯現出來。大多數設計軟體可以通過不透明度設置調整透明度級別,通常範圍在0%(完全清除)和100%(完全不透明)之間。

再看如下案例,明信片上的圓形背景遮住了下面風景照的一部分,給排版增加了一個簡單而多彩的背景,這又是一個全新的設計技巧…

02. Make Text More Visible 讓文字更顯眼

攝影照片是印刷和網頁背景的普遍選擇—無論是產品廣告、網站標題還是社交媒體圖形。但是,根據照片的組成以及顏色、亮度等的純度,它可能並不一定都適合將文字放在頂部。

這張圖中,一系列的透明形狀在彼此頂部疊加,為文字創建背景(不然,下面黑白照片的細節就看不到)。紅色背景的透光度從輕度到中度的漸變也會帶來非常有趣的視覺效果。

再看如下案例,正是因為網頁上的透明白色背景,才讓黑色文字放在較暗的照片上仍然清晰可見。

同樣地,這個技巧也可以反轉使用:彩色照片、深色透明背景和白色文字。

03.Create a Clean, Airy Appearance 打造清新、輕快的風格

如果能透過設計看到部分細節,它就給整體布局營造一種簡單寬敞的感覺。例如,下面的網站設計圖就是由一系列若隱若現的背景圖,配合乾淨的字體和整潔的布局,形成極簡風格。

這一系列目錄封面以不同的方式實現極簡化,以透明背景和三原色為基礎,再用一張照片和幾段文字來削減布局的一部分。

04. Direct Viewers』Focus 引導受眾的注意力

透明背景不一定要從設計的這一邊覆蓋到另一邊,甚至構成實體形狀。通過透明度獲得創意很容易 - 您可以為受眾創建不同的形狀切口或窗口,或利用透明度來提高(或模糊)受眾對特定部分的注意力。

這些電影海報將彩色透明背景和切割字母形狀結合,創建有效的視覺焦點,幫助受眾在每張海報中迅速聚焦到主角上。

在下圖的設計中,透明三角形在背景中的方向和位置將視線引導至美女的臉部。

05. Show What』s Inside 展示內部信息

對於包裝、容器、封面或任何其他封閉物的設計,透明度可以很好地展示內部或底部內容,讓產品自身說話。

下圖的雜誌將標題排在全透明的背景上,不僅讓封面增添額外光澤,更具柔和觸感,也讓底層照片得到進一步的強化。

接下來的兩個例子表明,透明背景對於食品包裝特別有效。僅僅第一眼,就能通過這些透明的「豆袋」,直截了當的看到豆子的顏色和形狀:

這個專為一個叫做Voyageur du Temps的咖啡館(法語為「時間旅行者」)設計的簡單包裝,並不能隱藏麵包的美味,通過半透明材料讓麵包美味立現,同時還用與時間旅行主題相關的復古天文圖案來增添品牌感和額外的視覺興趣點。

06. 打造層次分明的設計/讓設計更有層次感

使用透明背景的好處之一是你可以用其他設計元素疊加多個背景或疊加透明背景,通過將不同顏色、照片或形狀分層,讓布局更有深度並打造有趣的視覺效果。

這一系列活動海報通過遠景背景下的透明度,把人像和圖案並列放在一起,同時在文字底部又額外添加透明背景形狀。這種將顏色和元素的分層讓整體效果具有鮮明的動態感和對比度,同時也讓排版布局更有深度。

以下是分層的另一個案例,它們完美結合了攝影照片、透明的色塊和圖案。

07. 讓紋理「透」出來

第一點中我們講到透明背景可以遮住分散注意力的細節,稍微換一種方式,它也能讓一些很棒的紋理給你的設計增添一些視覺興趣點。

下面這張服裝零售廣告通過透明背景中的切口透出紡織格子底紋,形成主要排版。紋理透過背景隱約可見,讓整體設計更具視覺黏著力。

下面的案例包含了前面講到的一些技巧,比如凸顯文字和設計分層。因為透明圓圈和圖片重疊,透過綠色透明圓圈也看到圖片中一些有趣的紋理細節。

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

透明度還為設計添加顏色提供了多種多樣的可能,與純色背景相比,透明的顏色看起來更柔軟、更細膩,尤其是當你的顏色不那麼出彩的時候。

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

這是APP UI使用透明漸變的另一個示例。這一次,漸變涉及純度、色調和透明度的變化,讓設計更加活潑有生氣,但又不搶文字風頭。

09. 讓混合效果發揮創意

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

這張設計的背景層次感非常豐富,由舊照片、含有筆跡的紙質紋理、墨跡、巧妙的顏色水紋交織拼接一起,形成生動活潑的復古風作品。

這麼多設計元素的組合,效果有趣卻不壓抑,很大程度上得益於透明度的使用,它讓各個部分有效地融合一起,形成和諧的整體。

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

10. 強化品牌形象

設計時,背景不一定要事先考慮。事實上,可以將它們作為另一種途徑,通過品牌顏色或其他可識別的視覺元素,將公司的身份或風格表達更透徹更清晰。

例如,下面的概念項目是為Google年度報告構思的一個新設計,通過透明背景形狀完美融合品牌的鮮艷色彩。

以下網站設計採用類似的方法,從公司標誌中提取顏色和幾何形狀,形成透明的背景和圖形。

11. 突出重點

透明的背景,尤其是顏色醒目的透明背景,更能突顯重要的文字內容或其他設計元素。

這個平面廣告圖使用透明的紅色橫幅,在整體黑白設計的托下,突出強調了特價促銷的信息。

這個設計也使用紅色透明形狀(常見的吸人眼球的好選擇)來選擇性地吸引注意網站的特定版塊。

12. 創建巧妙組合

最後,老生常談的提個醒:一定要有創意!

透明度和不透明度設置應用非常廣泛,你可以在設計中創造各種有趣的效果。

來!試一試,說不定你就能創造一個非常獨特的設計方案。

首先,書封面的概念延展性非常豐富。如下圖:一個簡單透明的藍色長方形代表海洋,與標題排版相互配合,暗示水面上方有一個危險的鯊魚鰭。

接著再看一個例子,在經典音樂電影的個性海報中,透明背景即刻就能展現多種創意用途:它突出了電影的關鍵時刻,為白色標題排版提供背景,並且象徵著降雨,這一切又都緊扣本段主題即所有這些與其他設計元素相結合,就能創造一個巧妙精簡的設計作品

從電影主題談到電影節海報,下圖設計中的透明圓圈,為背景添加一抹亮色。同時,用同樣的形狀配上不同的顏色,突出顯示了兩個對立圖像之間的差異。

結語

是不是倍受啟發?我們希望這一系列的設計案例能讓你了解透明背景在設計中的潛力。從顏色到構圖,他們隨時給你的設計提供有效的解決方案。現在,是時候讓他們物盡其用了- 一如既往,享受設計的樂趣!



熱門推薦

本文由 yidianzixun 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦