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

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

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

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

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

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

　　大家可以看到下圖的左邊是我們?cè)?a href="http://lb577.com/ui/2081.html" target="_blank">ps里最常見(jiàn)的色框，右邊是對(duì)應(yīng)的色相帶，仔細(xì)看右邊的這條色相帶，我們會(huì)發(fā)現(xiàn)色相帶上有三處十分刺眼的高亮顏色，這三個(gè)刺眼的高亮色叫做高溫色。
 

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

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

　　根據(jù)光感的特性，在視覺(jué)設(shè)計(jì)中，如果我們希望光或由光構(gòu)成的某種信息容易為人們感覺(jué)到，就應(yīng)提高它與背景的差別，增大光的面積，反之，如果不希望如此則應(yīng)相反處理。問(wèn)題的關(guān)鍵不在于光的絕對(duì)亮度，而是與“背景的對(duì)比度”和“光的面積”。為什么上面的圓圈有發(fā)光的效果，是因?yàn)樗麄冋故驹谏钌谋尘鞍迳稀?br />  

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

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

　　1、光效可以豐富視覺(jué)層級(jí)，為畫(huà)面增添細(xì)節(jié)。
 

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

　　2、光效使畫(huà)面飽滿(mǎn)，立體感強(qiáng)。
 

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

　　3、突出主要視覺(jué)，吸引用戶(hù)目光。
 

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

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

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

　　光效設(shè)計(jì)的最常見(jiàn)的四種設(shè)計(jì)形式為：漸變、光暈、色階、高光。每一種光感設(shè)計(jì)樣式都有不同的效果，接下來(lái)我們通過(guò)實(shí)際的例子來(lái)看一下每一種光效的視覺(jué)效果。
 

　　1、漸變
 

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

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

　　2、光暈
 

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

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

　　3、色階
 

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

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

　　4、高光
 

　　樣式：營(yíng)造高光點(diǎn)，通過(guò)對(duì)物體點(diǎn)綴高光，模擬物體的高光面，使其看起來(lái)像是置身一個(gè)三維空間當(dāng)中。
 

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

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

　　第一種方法就是用畫(huà)筆工具進(jìn)行繪制：
 

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

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