可視化設(shè)計的科技感光效設(shè)計教程

　　之前我們分享關(guān)于可視化工具網(wǎng)站，可以讓我們方便快速的做出漂亮的圖標(biāo)。有的設(shè)計師給我說，希望分享更多關(guān)于可視化設(shè)計的內(nèi)容。今天AAA教育的武老師又給大家?guī)黻P(guān)于可視化設(shè)計的分享，今天主要是講光效設(shè)計在可視化設(shè)計中的應(yīng)用。光效可以讓我們的設(shè)計內(nèi)容變得更豐富，讓作品有一個精彩的視覺呈現(xiàn)，更好的吸引目光。
 

　　在平時數(shù)據(jù)可視化的設(shè)計工作中，為了渲染畫面科技感的氛圍，我們經(jīng)常會用到“光效”的元素。
 

　　設(shè)計“光效”一般有兩種方法，第一種是自己用PS里的工具進行繪制，第二種是將光效素質(zhì)通過圖層濾色效果進行疊加，或者使用ps的插件燈光工廠(自帶一些光暈效果)。
 

　　但是我發(fā)現(xiàn)很多時候我們畫的光都不夠透亮，不夠有層次，沒錯，光也是有層次的。想要解決光的問題，我們必須了解光的基礎(chǔ)知識。
 

　　一、光的基礎(chǔ)知識
 

　　大家可以看到下圖的左邊是我們在ps里最常見的色框，右邊是對應(yīng)的色相帶，仔細看右邊的這條色相帶，我們會發(fā)現(xiàn)色相帶上有三處十分刺眼的高亮顏色，這三個刺眼的高亮色叫做高溫色。
 

　　大家一起回憶下我們初中的物理課，在講到火的時候，老師會告訴我們火分內(nèi)焰+外焰，溫度最高的是藍色的。那么光也是一樣的，光不是單單一層，光有三層。如下圖，我們隨便選取一個色板上的顏色，然后加上高溫色與白色，進行高斯模糊可以得到一個光感效果的圓圈。
 

　　同理我們可以得到其他顏色的光。藍色光，高溫色就往青色走，紫色光，高溫色就往玫紅色走。如下圖，綠色我們都知道它是中間色，可冷可暖。所以做暖光的時候高溫色就往黃色走，做冷光的時候就往青色走即可。
 

　　根據(jù)光感的特性，在視覺設(shè)計中，如果我們希望光或由光構(gòu)成的某種信息容易為人們感覺到，就應(yīng)提高它與背景的差別，增大光的面積，反之，如果不希望如此則應(yīng)相反處理。問題的關(guān)鍵不在于光的絕對亮度，而是與“背景的對比度”和“光的面積”。為什么上面的圓圈有發(fā)光的效果，是因為他們展示在深色的背景板上。
 

　　二、光效設(shè)計的作用
 

　　那么光效設(shè)計在可視化中的實際運用意義有哪些呢，下面我們可以來欣賞幾張光效在可視化設(shè)計中的應(yīng)用。
 

　　1、光效可以豐富視覺層級，為畫面增添細節(jié)。
 

　　下面這張圖是很典型的FUI風(fēng)格設(shè)計，我們可以看到具有光效設(shè)計的界面，在視覺上層次更加豐富，畫面更加飽滿，能夠讓平平無奇的設(shè)計組件看起來更具科幻感，為界面增添設(shè)計細節(jié)。
 

　　2、光效使畫面飽滿，立體感強。
 

　　通過光效加強了視覺的層級感，均勻的呈放射性進行過度，讓左右兩側(cè)的公里數(shù)和耗能的圓環(huán)看起來更加立體飽滿，近幾年車載設(shè)計中很多優(yōu)秀作品里都會使用光感效果。
 

　　3、突出主要視覺，吸引用戶目光。
 

　　光感的特性之一就是與背景之間的對比度，通過光感設(shè)計可以有效的將主體物或視覺中心與周邊的環(huán)境進行區(qū)分，例如下圖用戶第一眼獲取到的視覺信息便集中在中間主視覺上，另外在左側(cè)，交互上通過為設(shè)計控件增添光感，視覺上明顯的與周圍環(huán)境產(chǎn)生明顯的差異，能夠清晰的告訴用戶當(dāng)前的狀態(tài)，進行實時的信息反饋。
 

　　因此，光效在視覺和交互上對畫面都有著提升界面質(zhì)感和實時信息反饋的作用，但切勿頻繁使用，否則界面全都是發(fā)光點，界面會變得雜亂無章無重點。
 

　　三、如何在可視化設(shè)計中制作光效
 

　　光效設(shè)計的最常見的四種設(shè)計形式為：漸變、光暈、色階、高光。每一種光感設(shè)計樣式都有不同的效果，接下來我們通過實際的例子來看一下每一種光效的視覺效果。
 

　　1、漸變
 

　　樣式：以內(nèi)發(fā)光和線性漸變?yōu)橹鳌?br />  

　　技巧：色彩通常會選用與主體一直的同類色，明度偏高;我們會利用漸變工具，內(nèi)發(fā)光工具來營造發(fā)光的效果。
 

　　2、光暈
 

　　樣式：以外發(fā)光、徑向漸變?yōu)橹?，通過光向四周進行均勻的擴散。
 

　　技巧：選擇同類色;工具上會用到外發(fā)光、模糊工具和徑向漸變工具等等。
 

　　3、色階
 

　　樣式：色階遞進，是通過色階的遞進或遞減模仿光源擴散的效果，我們可以把光想象成水波紋一樣，慢慢向四周擴散。
 

　　技巧：在色階的遞進或遞減上，我們可以按照10%的差異值進行調(diào)試。
 

　　4、高光
 

　　樣式：營造高光點，通過對物體點綴高光，模擬物體的高光面，使其看起來像是置身一個三維空間當(dāng)中。
 

　　技巧：利用徑向漸變工具，對橢圓進行壓扁，透明度之間的彌散的距離進行壓縮。
 

　　這些光效看起來是不是很酷炫，瞬間get甲方爸爸“高大上科技感”的需求，那么這種光效素材該如何制作，具體看看下面的教程步驟吧~
 

　　第一種方法就是用畫筆工具進行繪制：
 

　　第二種方法是使用矢量圖形以及羽化的效果：
 

　　以上就是關(guān)于可視化中光效的知識以及應(yīng)用，光效是可視化設(shè)計中很重要的一部分，但是也不要過渡使用光效，濫用光效反而會使得畫面雜亂無章而沒有重點。更多內(nèi)容請持續(xù)關(guān)注AAA教育。