tft每日頭條

 > 科技

 > 背景透明度教程

背景透明度教程

科技 更新时间:2024-07-30 01:16:26

平面設計的背景其實就像牆上的壁紙一樣,做對了,會有一面漂亮的背景充分融合并發掘有吸引力的空間; 錯了,就是視覺災難,讓你把重心分散到家具跟藝術品上。

雖然網站、傳單或者媒體圖片的背景看起來都是次要的細節,但是錯了就是會影響受衆的聚焦。

下面來看看關于不同情況下,背景設計需要的技巧——如何為背景增加透明度。

01. 簡化雜亂的背景

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

這張複古風插圖,沒有頂層的白色透明圖層,背景就會搶了其他部分的風頭,文字部分将被弱化,造成主題明确。注意白色部分不是全透明的,這樣可以柔和插圖的細節,但它的透明度又足以讓紋理顯現出來。大多數設計軟件可以通過不透明度設置調整透明度級别,通常範圍在0%(完全清除)和100%(完全不透明)之間。

背景透明度教程(了解透明背景的巧應用)1

02. 讓文字更顯眼

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

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

背景透明度教程(了解透明背景的巧應用)2

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

背景透明度教程(了解透明背景的巧應用)3

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

背景透明度教程(了解透明背景的巧應用)4

03. 打造清新、輕快的風格

如果能透過設計看到部分細節,它就給整體布局營造一種簡單寬敞的感覺。

下圖通過利用高斯模糊處理的背景圖,配合簡潔字體排版跟布局,形成極簡的風格。

背景透明度教程(了解透明背景的巧應用)5

背景透明度教程(了解透明背景的巧應用)6

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

背景透明度教程(了解透明背景的巧應用)7

04. 引導受衆的注意力

透明背景可以是創建不同的形狀切口或窗口,或利用透明度來提高(或模糊)受衆對特定部分的注意力。

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

背景透明度教程(了解透明背景的巧應用)8

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

背景透明度教程(了解透明背景的巧應用)9

05. 展示内部信息

在包裝、封面或任何封閉物的設計上,透明度也可以展示在内部、底部或者底部内容,讓産品自身說話。

下圖采用将主題排在全透明的背景上,是封面看起來有光澤感,同時更具柔和觸感,也讓底層照片得到進一步的強化。

背景透明度教程(了解透明背景的巧應用)10

透明背景對于食品包裝特别有效。例如下圖透明的“豆袋”,直截了當的看到豆子的顔色和形狀:

背景透明度教程(了解透明背景的巧應用)11

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

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

這種将顔色和元素的分層讓整體效果具有鮮明的動态感和對比度,同時也讓排版布局更有深度。

背景透明度教程(了解透明背景的巧應用)12

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

背景透明度教程(了解透明背景的巧應用)13

07. 讓紋理“透”出來

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

背景透明度教程(了解透明背景的巧應用)14

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

與純色背景相比,透明的顔色看起來更柔軟、更細膩。

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

背景透明度教程(了解透明背景的巧應用)15

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

背景透明度教程(了解透明背景的巧應用)16

09. 讓混合效果發揮創意

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

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

背景透明度教程(了解透明背景的巧應用)17

10. 強化品牌形象

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

例如,Google年度報告設計,通過透明背景形狀完美融合品牌的鮮豔色彩。

背景透明度教程(了解透明背景的巧應用)18

11. 突出重點

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

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

背景透明度教程(了解透明背景的巧應用)19

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

背景透明度教程(了解透明背景的巧應用)20

12. 創建巧妙組合

透明度和不透明度設置應用非常廣泛,你可以在設計中創造各種有趣的效果。但是别忘了,帶上你的創意構思。

我們來看幾個使用透明背景創意的案例:

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

背景透明度教程(了解透明背景的巧應用)21

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

背景透明度教程(了解透明背景的巧應用)22

關于背景的細節設計,在以上的處理方式中,最重要的是你的創意構思,背景可以決定你的整體視覺效果,但是不是關鍵。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved