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

發表於2016-03-28

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

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

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

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

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

2japan20160323

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

3japan20160323

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

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

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

4japan20160323

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

5japan20160323

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

6japan20160323

03. 像空氣一樣乾淨的展示

當用於設計的配件已經決定,可以通過利用雜誌的版面設計來體現出簡單的空間和範圍。例如下面的這個網頁設計,佔大部分半透明的背景層,流暢整齊的字型組合,通過有組織的佈局,產生簡約的風格。(在這裡有一個下載的連結,可以下一些素材,我先把地址放在這裡,以後再來翻譯。http://photoshopvip.net/archives/83925【完全免費可商用,60種美麗的字型下載!2015年版】)

7japan201603238japan20160323

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

9japan20160323

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

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

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

10japan20160323

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

11japan20160323

05. 讓內容變得顯眼

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

下面的這個雜誌設計,在透明清晰的封面上,新增上了白色文字的LOGO。通過這種方法,讓他產生光澤,強調出下面的影像照片。

12japan20160323

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

13japan20160323

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

14japan20160323

06. 嘗試著讓圖層重疊

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

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

15japan20160323

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

16japan20160323

07. 稍稍展現出一點質感

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

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

17japan20160323

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

18japan20160323

08. 新增透明漸變圖層

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

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

19japan20160323

在另一個設計案例中,將漸變色利用在移動端的使用者介面設計上。在這裡使用了鮮豔的配色,文字文字和背景透明的保守的方法。

20japan20160323

09. 利用獨特的混合效果

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

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

21japan20160323

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

22japan2016032323japan20160323

10. 強化品牌推廣

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

下面的這個設計是GOOGLE的年終報告設計,在這裡就採用了鮮豔的配色和半透明的背景圖層。

24japan20160323

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

25japan20160323

11. 強調特定的範圍

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

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

26japan20160323

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

27japan20160323

12. 展現有趣的構圖

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

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

28japan20160323

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

29japan20160323

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

30japan2016032331japan2016032332japan20160323

最後

你覺得怎麼樣呢?這次介紹的技巧還需要正確的使用,今後的設計專案中的半透明圖層也需要正確的使用啊。配色和構圖也需要注意,隨時可以和這12個萬能的技巧相互借鑑。

相關文章