12個(gè)透明背景使用技巧,助你快速提高設(shè)計(jì)水平
平面設(shè)計(jì)的背景在某種程度上有點(diǎn)像墻上的油漆或壁紙...
做對了,你將會得到一個(gè)非常棒的背景,充分融合并發(fā)掘有吸引力的空間;
弄錯(cuò)了,就是一場視覺災(zāi)難,它會把注意力分散在房間精心挑選的家具和藝術(shù)品上。
雖然網(wǎng)站、傳單或社交媒體圖片的背景看起來是相對較小的細(xì)節(jié),但您不希望它像出錯(cuò)的油漆或胡亂的選擇的壁紙,讓受眾無法聚焦。
那我們就來看一些靈感創(chuàng)意,并學(xué)一些能充分利用到設(shè)計(jì)背景中的技巧?;镜陌咨蚣兩珱]有任何問題,但本文專門研究如何為背景增加透明度,這將是一個(gè)行之有效、用途多樣的工具
01. 簡化雜亂的背景
圖示或圖案背景能讓設(shè)計(jì)更具個(gè)性化,但也可能讓設(shè)計(jì)更復(fù)雜或遮住文案。如何解決?在圖層頂層覆蓋一個(gè)次要的半透明背景。
這張活動(dòng)海報(bào)的背景是一張美麗的復(fù)古風(fēng)插圖,但是如果沒有頂層的白色透明圖層,背景就會搶了其他部分的風(fēng)頭,文字將很難讀?。ㄌ貏e是小號字體)。請注意白色部分不是全透明的,這樣可以柔和插圖的細(xì)節(jié),但它的透明度又足以讓紋理顯現(xiàn)出來。大多數(shù)設(shè)計(jì)軟件可以通過不透明度設(shè)置調(diào)整透明度級別,通常范圍在0%(完全清除)和100%(完全不透明)之間。
再看如下案例,明信片上的圓形背景遮住了下面風(fēng)景照的一部分,給排版增加了一個(gè)簡單而多彩的背景,這又是一個(gè)全新的設(shè)計(jì)技巧…
02. 讓文字更顯眼
攝影照片是印刷和網(wǎng)頁背景的普遍選擇—無論是產(chǎn)品廣告、網(wǎng)站標(biāo)題還是社交媒體圖形。但是,根據(jù)照片的組成以及顏色、亮度等的純度,它可能并不一定都適合將文字放在頂部。
這張圖中,一系列的透明形狀在彼此頂部疊加,為文字創(chuàng)建背景(不然,下面黑白照片的細(xì)節(jié)就看不到)。紅色背景的透光度從輕度到中度的漸變也會帶來非常有趣的視覺效果。
再看如下案例,正是因?yàn)榫W(wǎng)頁上的透明白色背景,才讓黑色文字放在較暗的照片上仍然清晰可見。
同樣地,這個(gè)技巧也可以反轉(zhuǎn)使用:彩色照片、深色透明背景和白色文字。
如果您正在尋找在設(shè)計(jì)中使用的照片,我們建議您選擇免費(fèi)的照片資源。
03. 打造清新、輕快的風(fēng)格
如果能透過設(shè)計(jì)看到部分細(xì)節(jié),它就給整體布局營造一種簡單寬敞的感覺。例如,下面的網(wǎng)站設(shè)計(jì)圖就是由一系列若隱若現(xiàn)的背景圖,配合干凈的字體和整潔的布局,形成極簡風(fēng)格。
這一系列目錄封面以不同的方式實(shí)現(xiàn)極簡化,以透明背景和三原色為基礎(chǔ),再用一張照片和幾段文字來削減布局的一部分。
04. 引導(dǎo)受眾的注意力
透明背景不一定要從設(shè)計(jì)的這一邊覆蓋到另一邊,甚至構(gòu)成實(shí)體形狀。通過透明度獲得創(chuàng)意很容易 - 您可以為受眾創(chuàng)建不同的形狀切口或窗口,或利用透明度來提高(或模糊)受眾對特定部分的注意力。
這些電影海報(bào)將彩色透明背景和切割字母形狀結(jié)合,創(chuàng)建有效的視覺焦點(diǎn),幫助受眾在每張海報(bào)中迅速聚焦到主角上。
在下圖的設(shè)計(jì)中,透明三角形在背景中的方向和位置將視線引導(dǎo)至美女的臉部。
05. 展示內(nèi)部信息
對于包裝、容器、封面或任何其他封閉物的設(shè)計(jì),透明度可以很好地展示內(nèi)部或底部內(nèi)容,讓產(chǎn)品自身說話。
下圖的雜志將標(biāo)題排在全透明的背景上,不僅讓封面增添額外光澤,更具柔和觸感,也讓底層照片得到進(jìn)一步的強(qiáng)化。
接下來的兩個(gè)例子表明,透明背景對于食品包裝特別有效。僅僅第一眼,就能通過這些透明的“豆袋”,直截了當(dāng)?shù)目吹蕉棺拥念伾托螤睿?/p>
這個(gè)專為一個(gè)叫做Voyageur du Temps的咖啡館(法語為“時(shí)間旅行者”)設(shè)計(jì)的簡單包裝,并不能隱藏面包的美味,通過半透明材料讓面包美味立現(xiàn),同時(shí)還用與時(shí)間旅行主題相關(guān)的復(fù)古天文圖案來增添品牌感和額外的視覺興趣點(diǎn)。
06. 打造層次分明的設(shè)計(jì)/讓設(shè)計(jì)更有層次感
使用透明背景的好處之一是你可以用其他設(shè)計(jì)元素疊加多個(gè)背景或疊加透明背景,通過將不同顏色、照片或形狀分層,讓布局更有深度并打造有趣的視覺效果。
這一系列活動(dòng)海報(bào)通過遠(yuǎn)景背景下的透明度,把人像和圖案并列放在一起,同時(shí)在文字底部又額外添加透明背景形狀。這種將顏色和元素的分層讓整體效果具有鮮明的動(dòng)態(tài)感和對比度,同時(shí)也讓排版布局更有深度。
以下是分層的另一個(gè)案例,它們完美結(jié)合了攝影照片、透明的色塊和圖案。
07. 讓紋理“透”出來
第一點(diǎn)中我們講到透明背景可以遮住分散注意力的細(xì)節(jié),稍微換一種方式,它也能讓一些很棒的紋理給你的設(shè)計(jì)增添一些視覺興趣點(diǎn)。
下面這張服裝零售廣告通過透明背景中的切口透出紡織格子底紋,形成主要排版。紋理透過背景隱約可見,讓整體設(shè)計(jì)更具視覺黏著力。
下面的案例包含了前面講到的一些技巧,比如凸顯文字和設(shè)計(jì)分層。因?yàn)橥该鲌A圈和圖片重疊,透過綠色透明圓圈也看到圖片中一些有趣的紋理細(xì)節(jié)。
08. 添加一些柔和的色彩漸變
透明度還為設(shè)計(jì)添加顏色提供了多種多樣的可能,與純色背景相比,透明的顏色看起來更柔軟、更細(xì)膩,尤其是當(dāng)你的顏色不那么出彩的時(shí)候。
下圖采用柔和透明的淺淡色彩,給照片上方的文字創(chuàng)造空間。背景沒有采用純色形狀而是漸變的方式,隨著頁面的不透明度逐步降低,圖案最終漸漸完全清晰。透明度和漸變梯度掌握的非常好。
這是APP UI使用透明漸變的另一個(gè)示例。這一次,漸變涉及純度、色調(diào)和透明度的變化,讓設(shè)計(jì)更加活潑有生氣,但又不搶文字風(fēng)頭。
09. 讓混合效果發(fā)揮創(chuàng)意
很多設(shè)計(jì)軟件都自帶混合模式或混合工具,您可以創(chuàng)造性地將顏色、照片或其他元素進(jìn)行融合和分層,還可以用透明度和其他設(shè)置創(chuàng)造各種視覺效果。這種方法通常都涵蓋了我們講過的一些技巧,如分層、使用紋理和攝影。
這張?jiān)O(shè)計(jì)的背景層次感非常豐富,由舊照片、含有筆跡的紙質(zhì)紋理、墨跡、巧妙的顏色水紋交織拼接一起,形成生動(dòng)活潑的復(fù)古風(fēng)作品。
這么多設(shè)計(jì)元素的組合,效果有趣卻不壓抑,很大程度上得益于透明度的使用,它讓各個(gè)部分有效地融合一起,形成和諧的整體。
下圖的背景主要集中在如何將顏色相互融合、相互作用,這種顏色混合效果廣受歡迎。
10. 強(qiáng)化品牌形象
設(shè)計(jì)時(shí),背景不一定要事先考慮。事實(shí)上,可以將它們作為另一種途徑,通過品牌顏色或其他可識別的視覺元素,將公司的身份或風(fēng)格表達(dá)更透徹更清晰。
例如,下面的概念項(xiàng)目是為Google年度報(bào)告構(gòu)思的一個(gè)新設(shè)計(jì),通過透明背景形狀完美融合品牌的鮮艷色彩。
以下網(wǎng)站設(shè)計(jì)采用類似的方法,從公司標(biāo)志中提取顏色和幾何形狀,形成透明的背景和圖形。
11. 突出重點(diǎn)
透明的背景,尤其是顏色醒目的透明背景,更能突顯重要的文字內(nèi)容或其他設(shè)計(jì)元素。
這個(gè)平面廣告圖使用透明的紅色橫幅,在整體黑白設(shè)計(jì)的托下,突出強(qiáng)調(diào)了特價(jià)促銷的信息。
這個(gè)設(shè)計(jì)也使用紅色透明形狀(常見的吸人眼球的好選擇)來選擇性地吸引注意網(wǎng)站的特定版塊。
12. 創(chuàng)建巧妙組合
最后,老生常談的提個(gè)醒:一定要有創(chuàng)意!
透明度和不透明度設(shè)置應(yīng)用非常廣泛,你可以在設(shè)計(jì)中創(chuàng)造各種有趣的效果。
來!試一試,說不定你就能創(chuàng)造一個(gè)非常獨(dú)特的設(shè)計(jì)方案。
我們來看幾個(gè)使用透明背景創(chuàng)意的案例:
首先,書封面的概念延展性非常豐富。如下圖:一個(gè)簡單透明的藍(lán)色長方形代表海洋,與標(biāo)題排版相互配合,暗示水面上方有一個(gè)危險(xiǎn)的鯊魚鰭。
接著再看一個(gè)例子,在經(jīng)典音樂電影的個(gè)性海報(bào)中,透明背景即刻就能展現(xiàn)多種創(chuàng)意用途:它突出了電影的關(guān)鍵時(shí)刻,為白色標(biāo)題排版提供背景,并且象征著降雨,這一切又都緊扣本段主題即所有這些與其他設(shè)計(jì)元素相結(jié)合,就能創(chuàng)造一個(gè)巧妙精簡的設(shè)計(jì)作品
從電影主題談到電影節(jié)海報(bào),下圖設(shè)計(jì)中的透明圓圈,為背景添加一抹亮色。同時(shí),用同樣的形狀配上不同的顏色,突出顯示了兩個(gè)對立圖像之間的差異。
結(jié)語
是不是倍受啟發(fā)?我們希望這一系列的設(shè)計(jì)案例能讓你了解透明背景在設(shè)計(jì)中的潛力。從顏色到構(gòu)圖,他們隨時(shí)給你的設(shè)計(jì)提供有效的解決方案?,F(xiàn)在,是時(shí)候讓他們物盡其用了- 一如既往,享受設(shè)計(jì)的樂趣!
本文地址:http://m.likemindfilms.com/tutorial/ps3537.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏