彌散光感的形成,一般由單色或者多色模糊漸變混合,形成虛實集合的模糊效果。在這其中還可以加入不同的元素使其具有新奇和記憶點,來豐富單調(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è)計服務