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