彌散光感的形成，一般由單色或者多色模糊漸變混合，形成虛實集合的模糊效果。在這其中還可以加入不同的元素使其具有新奇和記憶點，來豐富單調(diào)乏味的畫面，增加畫面空間層次感，增添畫面的細節(jié)，還能聚焦產(chǎn)品的記憶點、優(yōu)化信息層級，讓平淡無奇的排版瞬間活了起來，下面我們就來看看彌散光感的一些優(yōu)點。1. 豐富設(shè)計細節(jié)，增添畫面感一側(cè)進行虛化模糊，另一側(cè)保持清晰的輪廓，整體從觀感上多了一些動感變化效果。因此，不管作為版面的主視覺，還是作為輔助部分都能有不錯的效果。將一種或者兩種以上顏色進行全部模糊虛化掉，一般多作為背景裝飾來使用。在此基礎(chǔ)還可以加上不同的元素，再增加一點噪點質(zhì)感，細節(jié)滿滿。使用多種不同模糊方案或手法，以彌散光感為基礎(chǔ)，來達到視覺聚焦和豐富設(shè)計細節(jié)，增添畫面感和空間層次感。看到這里大家都肯定要嚷嚷，光說不練假把式，安排上菜，我們先從簡單的開始，蘿卜要一個一個吃，坑要一個一個的埋，翠花，上酸菜！ 首先我們來設(shè)計一個banner,這個案例就用最簡單的高斯模糊來做，這種全彌散的漸變實現(xiàn)起來比較簡單，顏色我設(shè)置為如圖三個顏色和三個圓形。為了保留模糊參數(shù)的后期可編輯行，模糊之前，先給三個圓形轉(zhuǎn)換為智能對象，可以三個一起起智能對象，也可以單個一個個的智能對象，后者的好處是可以隨時調(diào)整圖形的位置與大小。然后給智能對象一個高斯模糊（濾鏡-模糊-高斯模糊）高斯模糊后，有時候有的顏色融合的不是很好，這個時候我們可以通過調(diào)整圖層疊加模式或者透明度，讓顏色之間融合的更協(xié)調(diào)，案例中我覺得青色過于實了，降低一下透明度70%，到這里，基本的背景就完成了。彌散光感背景就是這么簡單！我根據(jù)之前的梳理和自己的意愿，把文案分為了4個層級，中文英文的主題信息作為最高層級存在；然后我想突出時間，所以把它放在第二層級，其他元素依次往后排。我們先確定大標題，然后再用小字來進行版面的填充與平衡，讓整體的文字排版形成視覺層次變化與平衡。由于圖形位于對角線位置，在文字分布上我順應這個構(gòu)圖方式。英文和中文之間互相疊壓一點，這是壓抑不住都要買的節(jié)奏啊！顏色一黑一白加強之間的對比關(guān)系。為了讓版面的保持視覺上的平衡，二、三層級的內(nèi)容和主題內(nèi)容形成交錯穿插，讓整體的文字排版形成視覺上的一個層次變化。到這一步，整體排版基本完成了，但整體感覺信息之間比較獨立，我們添加一些裝飾元素，讓畫面更整體飽滿緊湊。OK，一張banner完工馬上要過年了，新的一年，換新的工作，所以這次的案例就為大家做個作品集封面，俗話說：作品封面做的好，工資翻番少不了。作品集文案的內(nèi)容并不如一些展覽海報類那么多，所以在整體的編排上難度不是很大，根據(jù)內(nèi)容需要找到自己想要突出的重點即可。信息文案一般大致上可以分為三種類型，①主題信息適合作為主標題存在；②與活動相關(guān)的具體信息則次之，當然，我們也可以根據(jù)內(nèi)容選擇性的突出其中某一項，如價格、時間或是其他；③其他的補充輔助性信息，這類的信息一般作補充說明，相對不是很關(guān)鍵，所以適合作為裝飾性的元素來放在需要的地方。建立4個大小不同的圓形，填充不同的顏色，然后單獨給每一圖層智能對象后，調(diào)整各自的模糊數(shù)值。根據(jù)需要調(diào)整圖層疊加樣式或者透明度①光這樣的話，稍顯單調(diào)，所以我們再加點料。新建一個圓形，填充淺藍色，然后新建2個圖層并創(chuàng)建剪貼蒙板，用柔邊畫筆畫深淺2個大小不一的顏色，然后把3個圖層合并一個智能對象。②給智能對象一個場景模糊（濾鏡-模糊畫廊-場景模糊），場景模糊具有定義不同模糊量的多個模糊點來創(chuàng)建漸變的一種模糊效果。將多個圖釘添加到圖像，并指定每個圖釘?shù)哪：?，從而達到一種虛實模糊不同的模糊效果。本案例定義2個模糊點，一個模糊量0.一個為60，通過一邊模糊，一般不模糊來達到一種虛實結(jié)合的變化，③為了讓背景更豐富有層次感，再用①的方式再新建一個圓形，填充不一樣的顏色，然后執(zhí)行場景模糊，圖層疊加為“色相”，效果如圖。為了體現(xiàn)層次空間感，大標題我用虛實模糊的圓形壓住一部分，交錯穿插，讓整體的文字排版形成視覺上的一個層次變化。細化排版，添加一些輔助元素，填補版面的負空間，這件，一個作品集封面就完成了。“光圈模糊”對圖片模擬淺景深效果，選擇“光圈模糊”（濾鏡-模糊畫廊-光圈模糊），將在圖像上放置默認的光圈模糊圖釘、單擊圖像可以添加其他模糊圖釘，說明:A. 銳化區(qū)域 B. 漸隱區(qū)域 C. 模糊區(qū)域 ，拖動句柄移動它們以重新定義各個區(qū)域。拖動模糊句柄以增加或減少模糊。一個圖片中可以添加多個光圈模糊進行重復疊加來達到不同的效果。基于文案內(nèi)容是港澳臺三地及青年藝術(shù)家，所以在背景上希望能表達出三地的概念，顏色上用淺青+黃色系表達出青年藝術(shù)家這一人群。青年嘛總是要嫩點，鮮點。建立三個大小不一的橢圓，智能對象后，再分別進行光圈模糊，制作方法上除了光圈模糊，當然也有其他的實現(xiàn)方法，只不過個人覺得光圈模糊會更方便一點~海報彌散光感背景基礎(chǔ)完成了，現(xiàn)在復制三份，從上往下排列，體現(xiàn)三地的概念，為了讓每個色塊之間有所差異，在大小排列上做了一些調(diào)整與變化。根據(jù)上面的信息層級，放上主標題，根據(jù)主題意義，對字體做一些簡單的筆畫裁剪，英文用底色做一點點遮擋，點綴點星星，群星閃耀港澳臺。將其它文案分布在海報的下面，注意平衡一下整個畫面。最后用網(wǎng)格規(guī)范下文字信息編排，用網(wǎng)格可以比較精確地將版面編排出來。大家可以清晰地看到，所有的文字的大小和位置都是有依據(jù)的，都卡在模塊網(wǎng)格之中的。旋轉(zhuǎn)模糊通常用于創(chuàng)建圓形或者橢圓形的模糊，比如飛馳中的輪胎，轉(zhuǎn)動的摩天輪等等都是旋轉(zhuǎn)模糊的具象表現(xiàn)。濾鏡-模糊畫廊-光圈模糊，點擊拖動橢圓邊框改變模糊的大小。中間的模糊圈可以用來調(diào)整模糊的量，或者模糊的角度。也可以增加多個模糊點移軸模糊點擊濾鏡-模糊畫廊-移軸模糊，如下圖樣式。虛化的大小可以通過白色圓圈調(diào)節(jié)，虛化位置可以通過移動位置或者旋轉(zhuǎn)進行調(diào)整。這樣就實現(xiàn)了虛實集合的光感設(shè)計。根據(jù)文案的信息內(nèi)容，我想用眼睛和日出來表現(xiàn)這個海報的主題概念。根據(jù)上面方形旋轉(zhuǎn)模糊的特性，我在畫面中建立了一個任意門的圖形，它可以帶去往不同的時空，咳咳咳…傳錯了，還是傳回來寫完這個教程了。先把任意門圖層轉(zhuǎn)為智能對象，然后執(zhí)行旋轉(zhuǎn)模糊，具體參數(shù)所見及所得，根據(jù)實際效果來調(diào)整參數(shù)即可，這一步，可能會有點慢，耐心等候，不急哦。進行到這一步，發(fā)現(xiàn)畫面缺少一個視覺中心來作為視覺聚焦點，然后在眼眶中心新建一個紅色的圓形，轉(zhuǎn)換智能對象，執(zhí)行移軸模糊。太陽出來了！有人要一起看日出嗎？對日出圖層，執(zhí)行濾鏡-液化工具，用“向前變現(xiàn)工具”來回擦，一邊往里擦，另一邊往外擦的的節(jié)奏來回擦，為日出擦出水面倒影，這一步需要耐心，一次不行，可多嘗試幾次，以達到理想效果。根據(jù)畫面的圖形構(gòu)圖，文案信息的編排方式上采用壓四角的編排方式，留出中間的視覺中心點。最后根據(jù)網(wǎng)格來規(guī)范下文字信息編排。最后一個案例我們來用下最近流行的毛玻璃效果，看看彌散光和毛玻璃能碰撞出怎樣的愛情火花，好了，話不多說，直接干貨走起。拉出4個大小不一，顏色各異的圓形，擺放位置按自己想的構(gòu)圖排列就行，把握不好也可以模糊后再調(diào)整都可以，方法不一，效果達到就行。然后把4個園一起轉(zhuǎn)換為智能對象后，并進行高斯模糊。一個彌散光感背景就這么簡單的做好了。新建一個淺藍色圓形圖層，crtl+j復制圖層，2個圖層前后錯開一定的位置，底下圖層填充一個從淺到深色的漸變，確定好厚度位置后，將淺色層和深色層重疊的部分用蒙板遮住，只留邊緣，這樣就可以形成玻璃厚度的效果。將上面淺色層的透明度降低，這樣就形成了玻璃半透明效果。接著對玻璃的轉(zhuǎn)角和邊框高光等細節(jié)進行處理。加上玻璃的受光面和暗面將上面做好的圓形玻璃，復制2個，根據(jù)自己的構(gòu)圖需求擺放，為了不至于形狀都過于統(tǒng)一，把其中一個智能對象，然后ctrl+t進行扭曲變化，做一個傾斜點的毛玻璃，讓整體構(gòu)圖更靈活層次感。添加文案信息，編排好文字信息主次關(guān)系。標題設(shè)計上采用了一個漸變疊加的處理，在呼應主題的“融合、共”的意思，同時，讓標題增加一點細節(jié)，讓它有那么一點點的設(shè)計感。將與玻璃塊疊加部分的內(nèi)容模糊掉，這樣毛玻璃質(zhì)感效果就更像了。至此這個具有UI風格的海報就完成了，如果，覺得背景比較單調(diào)了，還可以繼續(xù)把前面的毛玻璃智能對象復制一個，ctrl+t變形扭曲，或者添加噪點紋理，為背景填充更多的細節(jié)。前面幾款案例中，如果想要更有質(zhì)感，還可以在做完再給畫面增加噪點質(zhì)感，增加方法有2種，①濾鏡-濾鏡庫-紋理-顆粒。②濾鏡-camera raw濾鏡-效果-顆粒。我個人比較傾向后一種，顆粒比較細膩自然。
原文地址：胡曉波工作室（公眾號）
作者：胡曉波工作室
轉(zhuǎn)載請注明：學UI網(wǎng)》快學，簡單出彩的刷屏級彌散光教程來了
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務
