這個(gè)效果原來是這樣做出來的

2022-8-18    seo達(dá)人


圖片

 

正文

經(jīng)常使用愛奇藝刷劇的同學(xué),有沒有發(fā)現(xiàn)愛奇藝的應(yīng)用圖標(biāo)又變了。前段時(shí)間愛奇藝針對(duì)品牌設(shè)計(jì)進(jìn)行了較大的調(diào)整,最近又悄悄地將應(yīng)用圖標(biāo)的背景色換成了這種多彩色混合漸變的形式。

圖片

針對(duì)這個(gè)視覺效果估計(jì)大家各有看法,我們就不討論這個(gè)話題了,今天黑馬哥是來出教程的~O(∩_∩)O~。

這個(gè)類似于極光/彌散漸變的風(fēng)格最近也比較流行,在 UI 場(chǎng)景中的運(yùn)用也是比較普及的,被運(yùn)用到應(yīng)用圖標(biāo)的案例中相對(duì)較少。大概的回憶了一下,也有一些產(chǎn)品會(huì)使用,特別是比較知名的 Instagram 很早之前就使用了,也成為了流行趨勢(shì)中的優(yōu)秀案例之一。

圖片

通過極光/彌散漸變(混合漸變)的形式強(qiáng)化應(yīng)用圖標(biāo)外輪廓背景,不僅可以提高視覺感,也是體現(xiàn)年輕化趨勢(shì)的一種色彩表現(xiàn)形式。不過漸變中的色彩本身也是關(guān)鍵性的因素,如果色彩不夠年輕活潑,帶來的效果也是千差萬別的。

圖片

 

一、漸變的表現(xiàn)形式

漸變色在我們的設(shè)計(jì)中是非常普及的,漸變色分為線性漸變、徑向漸變、角度漸變、混合漸變、流體漸變等形式。不同的漸變形式可以營(yíng)造不一樣的視覺體驗(yàn),可以豐富色彩環(huán)境、強(qiáng)化光影質(zhì)感、增強(qiáng)層次感和空間感等。

1、線性漸變

這是最常見的一種漸變方式,具備明確的方向性,由兩種或者多種顏色組合形成。相較于單色來說,線性漸變可以使得畫面更加豐富,色彩營(yíng)造出的層次感更強(qiáng)。

圖片

2、徑向漸變

徑向漸變是以中心向外擴(kuò)散而形成的圓形漸變,可以作為立體感的表現(xiàn),也可以營(yíng)造向中心聚攏的光影效果。

圖片

3、角度漸變

角度漸變形成類似于雷達(dá)掃描的效果,屬于運(yùn)用相對(duì)較少的漸變形式。在一些應(yīng)用圖標(biāo)的外輪廓背景中會(huì)被使用,也可以作為營(yíng)造產(chǎn)品的光影變化。

圖片

4、混合漸變

混合漸變就是多種顏色隨機(jī)混合,色彩形成不均勻的自然彌散開,也可以成為彌散漸變或者極光漸變。是最近比較流行的視覺風(fēng)格,可以呈現(xiàn)出豐富的色彩變化和隨性自然的年輕化趨勢(shì),被廣泛應(yīng)用到平面設(shè)計(jì)、UI 設(shè)計(jì)、電商設(shè)計(jì)等眾多視覺設(shè)計(jì)領(lǐng)域。

圖片

5、流體漸變

流體漸變就是多種顏色漸變組合,形成帶有流動(dòng)感的視覺效果,通常作為背景來豐富設(shè)計(jì)的視覺感。也有動(dòng)態(tài)形式的流體漸變,在 APP 和一些屏幕壁紙中出現(xiàn),帶來的感官體驗(yàn)也是非常不錯(cuò)的。

圖片

隨著視覺感官體驗(yàn)的不斷追求,設(shè)計(jì)師已經(jīng)不滿足于趨于平面化的漸變形式,探索出造型多變、色彩豐富、刺激感官的視覺體驗(yàn),以更加豐富的表現(xiàn)形式來探索漸變方式。

 

二、漸變小教程

線性漸變、徑向漸變和角度漸變實(shí)現(xiàn)起來比較簡(jiǎn)單,軟件自帶的漸變屬性即可滿足。下面重點(diǎn)給大家分享如何實(shí)現(xiàn)混合漸變的效果,以后再單獨(dú)給大家分享關(guān)于流體漸變的技巧。

混合漸變顧名思義就是將多種顏色進(jìn)行混合,形成色彩豐富的過度效果,需要把控的是顏色之間的自然過渡。

方法一:

通過繪制幾個(gè)不同顏色的形狀圖形,然后執(zhí)行高斯模糊形成混合漸變,模糊的參數(shù)值要適當(dāng)大一些,一直到顏色自然過渡為止。

圖片

方法二:

如果想要隨機(jī)性大一些,可以通過畫筆工具隨意涂抹顏色,這樣形成的效果更加隨機(jī)性。然后再執(zhí)行高斯模糊將顏色融合,帶來自然隨性的視覺體驗(yàn)。

圖片

 

三、分享幾個(gè)案例

不能只是紙上談兵,只有反復(fù)磨練和嘗試才會(huì)熟能生巧。根據(jù)以上的方式黑馬哥完成了以下的作品案例,大家也一起來動(dòng)動(dòng)手吧!

1、鄰近色系易把控

混合漸變技法層面來說并不難,配色是相對(duì)具備難度的,很多同學(xué)都會(huì)因?yàn)榕渖坏轿欢霾怀鰞?yōu)秀的作品。針對(duì)應(yīng)用圖標(biāo)設(shè)計(jì)中的配色來說,鄰近色系的搭配是最容易把控的。選擇色相范圍在 60° 以內(nèi)的色值,混合出來的色彩排斥感都是比較低的,融合度比較高,能夠呈現(xiàn)出比較舒適自然的視覺感官體驗(yàn)。

如果選擇了色相角度大于 60° 的色值,只要數(shù)值的增減關(guān)系控制在 30° 以內(nèi)都屬于可控范圍,這時(shí)候如果出現(xiàn)較大的色彩排斥感,可以通過降低不透明度來進(jìn)行視覺平衡。

圖片

2、強(qiáng)視覺感還得對(duì)比色

雖然鄰近色的處理比較容易把控,但是帶來的視覺感也是與顏色對(duì)比關(guān)系成正比的,想要達(dá)到強(qiáng)視覺感還得選對(duì)比色。色相選擇范圍在 120°~180° 之間的色值,容易形成較強(qiáng)的視覺張力,通過增加高斯模糊的值才能稍微過度相互之間的色彩排斥感。

圖片

3、學(xué)會(huì)舉一反三

今天分享的經(jīng)驗(yàn)不局限于應(yīng)用圖標(biāo)的設(shè)計(jì)范疇,我們要學(xué)會(huì)將這個(gè)技法舉一反三,運(yùn)用到更多的設(shè)計(jì)場(chǎng)景中。比如在下面作品中的一組信息卡片的設(shè)計(jì)中,通過混合漸變形成的卡片背景提高了局部的視覺感,配合磨砂玻璃質(zhì)感的運(yùn)用,提高了該部分的視覺感官體驗(yàn)。

圖片

4、其他作品欣賞

為了輔助大家理解和開拓思維,為大家選擇了幾個(gè)類似的案例作品,希望可以帶給大家更多設(shè)計(jì)靈感。(以下作品版權(quán)歸屬原作者,僅作為學(xué)習(xí)交流)

 

 

四、布置一個(gè)小作業(yè)

通過對(duì)混合漸變實(shí)現(xiàn)技巧的學(xué)習(xí)和案例欣賞,相信大家對(duì)于混合漸變有了比較全面的認(rèn)知。學(xué)以致用的目的,下面為大家準(zhǔn)備了一個(gè)小作業(yè),希望以此來強(qiáng)化大家的理解。

圖片

根據(jù)以上示意圖提供的高保真原型圖,以混合漸變的形式增強(qiáng)其作品的視覺感。

以下方案為黑馬哥完成的一個(gè)示意,大家可以轉(zhuǎn)換思維和調(diào)整新的配色方案,輸出不一樣的全新作品。

圖片

 


作者:黑馬青年

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》這個(gè)效果原來是這樣做出來的

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個(gè)人資料

存檔