好看的幻燈片漸變效果教程

色彩,作為視覺的顏值擔當,在構圖中的地位不言而喻。在幻燈片之中,所用色彩的部分比較多,這篇文字主要聊聊漸變。

漸變概述

漸變所呈現的設計感在很多的作品之中有所體現,怎麼樣去用好漸變確實考驗我們的審美能力。多個顏色,或交融,或疊加,或區分或其他,通過本身的色彩層次讓視覺上區分這種效果,在幻燈片的應用中,漸變的效果數量保證不多,在某個界面給人一種不同的視覺感。

幻燈片中的漸變效果主要包括:線性射線路徑矩形。在日常幻燈片製作之中,前兩者使用較多,因此這篇文字主要是圍繞線性漸變射線漸變進行說明。漸變光圈的數量決定了漸變的色彩種類,其數量為兩個或以上。

好看的幻燈片漸變效果教程

線性漸變:主要預設8個方向,當然這個漸變角度可以自己去進行定義,根據實際的顯示效果,選擇合適的漸變角度。

好看的幻燈片漸變效果教程

射線漸變:主要預設5種效果,漸變角度不可調。其中包括四種方向效果、一種中心輻射。根據使用射線漸變的心得,五種效果中,中心輻射展示的效果最佳。

好看的幻燈片漸變效果教程

開頭劃重點

對於幻燈片漸變必要條件是兩種顏色以上,也就是對應漸變光圈的數量。對於一些色彩困難症的朋友來說,選擇合適的顏色進行漸變是比較鬱悶的,因而先來說說在漸變之中的顏色選取的一個很重要的方法。

通過設置透明度來實現同色代替

PowerPoint組件中的漸變是可設置透明的,因此對於同色系顏色漸變的時候,可以設置不同的透明度來實現同色系中不同顏色。如果是不同色調漸變的時候這種方法就沒那麼好用了,但是也是可以用來細微調整顏色的深淺,達到自己預想中的效果。

這時候如果你用取色器去選取已設置透明度的顏色區域,你會發現這個顏色的RGB值已經改變。

好看的幻燈片漸變效果教程

-----------------------

下面開始今天的正文部分

1 背景同色調漸變

漸變的背景設置在色彩的選擇上更加慎重,相較於純色背景的單一色調。漸變的色彩種類兩種或者兩者以上。顏色處理較好的話,會給幻燈片的展示增加張力;如果處理不佳,將會造成整個版面設計的失衡。

1.1 同色系的線性漸變

這裡選取幾種常見的顏色舉例輔助說明,為了顯示的效果,就不放其他的文字、圖片等圖層了。下面是 線性漸變的實現步驟

好看的幻燈片漸變效果教程

上圖中看不出漸變的顏色層次,現在讓我來換個方式,大家就能夠看的清楚了。

將兩個漸變光圈的位置都手動設置為50%,就能夠看著顏色均等分割版面,這就是使用同一種顏色、不同透明度的顯示效果。

好看的幻燈片漸變效果教程

現在將這兩個漸變光圈分別移到兩邊,顏色已經均勻分佈。如果覺得漸變的角度不佳,可以通過設置角度或者選擇一個漸變預設效果。

好看的幻燈片漸變效果教程

如果你覺得效果仍然不是很好,比如漸變的太突兀了,可以繼續添加一個漸變光圈,根據實際顯示情況看是否需要改變其透明度、或改變光圈的位置。如下圖

好看的幻燈片漸變效果教程

幾種顏色的漸變舉例

下面這幾種顏色都是經得起組織考驗的,或者說大家用的比較多的。當然如果你想自己去選擇一個喜歡的效果去進行線性漸變處理,只要色彩選擇不是太另類,這種方式調出的效果一般都是不錯的。具體的參數設置,最後會提供源文件,可以查看具體顏色的RGB和透明度

1.1.1 青/綠色線性漸變

好看的幻燈片漸變效果教程

1.1.2 深藍線性漸變

好看的幻燈片漸變效果教程

1.1.3 藍灰線性漸變

好看的幻燈片漸變效果教程

1.1.4 紅色線性漸變

好看的幻燈片漸變效果教程

1.1.x 以後補充。。

1.1.z 文字圖片圖層加入顯示舉例

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

1.2 同色系的射線漸變

顏色選取和1.1中的一致,只是漸變的樣式不一樣。前面說過,射線漸變之中有5種效果,其中中心輻射效果最具漸變的表現力。

1.2.1 射線漸變的實現步驟

下圖中就是用了中心輻射的預設效果,呈中心發散的線性變化

好看的幻燈片漸變效果教程

將兩個漸變光圈的位置都手動設置為50%,就能夠看著顏色以圓周擴散方式分割版面,這就是使用同一種顏色、不同透明度的顯示效果。當然也可以添加漸變光圈,來調整最合適的狀態。

好看的幻燈片漸變效果教程

1.2.2 幾種舉例

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

小結一下:無論是線性漸變、射線漸變,使用同一種顏色作為標準色,將其透明度改變作為輔助漸變色彩。這一種方式的好處在於,只要保證選取的標準色不是很不搭的前提下,最終所呈現的漸變效果能夠滿足美觀和合適

2 背景不同色調漸變

不同於單一色調的漸變,不同顏色的漸變通過色彩的高辨別,使得整個頁面的層次感更強。在網站設計或者作品之中,經常會碰到這種不同顏色漸變。

現在就不同圖層數目進行說明

2.1 單一圖層不同色調

這種漸變和「1」之中介紹的添加方式類似,通過添加、刪減漸變光圈實現顏色的漸變,主要實現方式主要是線性、射線漸變

2.1.1 紅、黃色漸變

顏色為暖色調,在表現人物上能夠給其內容加分

好看的幻燈片漸變效果教程

2.1.2 藍、綠色漸變

好看的幻燈片漸變效果教程

2.1.3 淺藍、紫色漸變

好看的幻燈片漸變效果教程

2.2 多圖層不同色調

因為單一圖層的漸變角度無論線性、射線,均是均勻線性變化的,顯然這種出來的效果有限。怎麼去通過多個圖層實現更加複雜的漸變效果,下面先看一張效果圖:

好看的幻燈片漸變效果教程

圖中可以看出,幾種顏色融合在一起,顯然這種效果通過單一的圖層漸變實現不了,下面開始拆解這張圖:

好看的幻燈片漸變效果教程

上圖就是拆解之後的圖層:

1 部分作為底層,使用射線漸變。

好看的幻燈片漸變效果教程

2 部分作為中間層,使用射線漸變。需要說明的是因為圖層疊加的緣故,對於需要表現的漸變色(此處指藍色)將其透明度設置為30-40%之間;對於不需要表現的漸變色(這裡指白色),將其透明調整到80%以上,這樣做是為了在圖層疊加過程中更好的表現底層色彩。

好看的幻燈片漸變效果教程

3部分,具體實現和2部分一致。

最後,各個圖層調整完畢之後,將其圖層進行疊加組合,即可初步得到我們想要的效果。

好看的幻燈片漸變效果教程

2.3 一個小例子

此頁面可以看出用到了:背景圖層的線性漸變、“堅持”文字覆蓋圖層部分的射線漸變、“堅持”文字的布爾運算

好看的幻燈片漸變效果教程

恩,下面是過程:

step1:背景線性漸變不說了

step2:“堅持”文字布爾運算:因為文字部分有兩種,一個是和圖片布爾運算得到,一個是個形狀圖層布爾運算得到。文本框一式兩份,分別運算

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

step3:“堅持”圖層文字射線中心輻射:將藍色的“堅持”文字圖層做漸變處理,然後和“堅持”文字圖片對齊即可

3 遮罩漸變

有人喜歡將這種效果稱作蒙版,但是我覺得還是遮罩比較貼切。因為這兩個字很好的說明了這一節的主題:那就是遮住。

很多朋友喜歡在幻燈片的圖片圖層之上疊加各種形狀色塊,設置很低的透明度,一定程度之上使得圖片在幻燈片展示中的展示大打折扣。色彩作為一種心理視覺,對圖片本身或者顏色塊遮罩,都要有所保留,這樣在欣賞圖片的同時,更加理解文字內容帶來的細節。這一塊內容不敢多說,只想通過幾個例子帶來一點思路。

3.1 漸變示例一

同色調的射線漸變,通過不同透明度設置。將其放置在圖片之上,可以看出不同的層次感,可以移動圖片,將我們想要表達的事物放置在光亮處。

(ps:這張圖選的不是很好,瞭解這個意思就好。。)

好看的幻燈片漸變效果教程

3.2 漸變示例2

漸變,或線性或射線均可,設置好顏色、角度之後即可。覺得換了一個顏色之後,明顯心情就不一樣

好看的幻燈片漸變效果教程

下圖之中的選色是從圖片之中使用取色器取的,這樣使得遮罩和圖片本身一部分協調起來。另外一個漸變色是使用白色,其透明度較高。如此,就不會影響後面的圖片色彩細節

好看的幻燈片漸變效果教程

3.3 漸變示例3

通過一個形狀顏色圖層,設置好漸變之後,放置在圖片的中間位置。色塊的透明度設置不要太高,要考慮到加色塊的目的就是為了文字服務的。

好看的幻燈片漸變效果教程

4 文字漸變

4.1 說明

首先需要確認的事實是,文本框內容不能夠進行漸變處理,這裡的文字指的是基本填充形狀和文本框相交運算,經過運算生成結果得到的形狀,這種文本形狀可以進行填充漸變等形狀格式操作。

我們如果要對文本內容進行漸變顏色操作,有兩種方式:一種是將填充形狀進行漸變處理,然後將文本內容和其進行相交處理,得到的形狀即為漸變(當然也可以對齊漸變顏色的調整,因為它是可編輯的);另外一種就是不對填充形狀進行漸變處理,而對運算生成的形狀進行漸變操作。

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

4.2 一個小例子

我深以為這個小例子的配圖,直接將整個流程都說明了,在此就不重複講了。具體可以參照前面關於“堅持”那一頁的製作過程,也可以參照前面的文字:幻燈片中的布爾運算 - 知乎專欄

好看的幻燈片漸變效果教程

5 漸變的立體感

這部分的內容也是之前文字有說到的。開頭說過,漸變通過色彩體現出的層次感,將漸變部分和漸變部分,或漸變部分和純色部分疊加組合的時候,這種感覺就出來了。當然這種純色要求和漸變顏色同色調。

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

6 漸變的一些好玩的

6.1 漸變劃分界面板塊

下面這個效果是線性漸變,前面有提及到,必須只能有兩個漸變光圈,將兩個漸變光圈的位置調成一致。位置可以通過百分數改變,實現頁面的比例劃分,然後調節角度實現上下、左右、對角等劃分效果。

好看的幻燈片漸變效果教程

好看的幻燈片漸變效果教程

同理,這個效果是射線效果。操作過程和上圖那個一致,設定好位置信息之後,選擇射線預設效果中除了中心輻射之外的其他效果,都可以。

好看的幻燈片漸變效果教程

6.2 用幻燈片漸變來實現

這是早些時候用漸變做的一張頁面,是模仿一位ps大神的。

好看的幻燈片漸變效果教程


分享到:


相關文章: