- 相關(guān)推薦
設(shè)計(jì)中如何巧妙運(yùn)用漸變色
漸變是設(shè)計(jì)師最簡(jiǎn)單的手法之一,也是移動(dòng)端APP背景設(shè)計(jì)常用的設(shè)計(jì)技巧。所以今天我來(lái)教大家如何巧妙運(yùn)用漸變,迅速提升界面的格調(diào)。那么設(shè)計(jì)中如何巧妙運(yùn)用漸變色呢?一起來(lái)學(xué)習(xí)下吧:
一、垂直線性漸變
拉漸變是Photoshop的基礎(chǔ)操作,那么如何運(yùn)用的好看了?顏色選擇才是關(guān)鍵
我們把一個(gè)漸變顏色拆分成A B C三個(gè)顏色,每個(gè)顏色用HSB標(biāo)注顏色色值。
這是某App的一組引導(dǎo)畫面,運(yùn)用了三組漸變顏色,分別標(biāo)注HSB的色值,通過(guò)這組色值的變化,分析如下。
A色 B值非常高,普遍50以上
從A色到B色,H值的變化范圍為正負(fù)30到70,S值減少10,說(shuō)明B顏色略變淡。
從B色到C色,H值的變化范圍為正負(fù)30到40,S值增加15到50,說(shuō)明C顏色開(kāi)始變濃。
以上色值僅供參考,實(shí)際使用并非整數(shù)。根據(jù)以上規(guī)律去有規(guī)則的使用漸變色。
二、垂直線性漸變+球形漸變
Web界面面積比較大,在大面積使用漸變的時(shí)候。如果只是使用垂直的線性漸變是略顯單調(diào)的,這個(gè)時(shí)候我們需要加一個(gè)球形的漸變。
A+B+C色構(gòu)成一個(gè)漸變,這時(shí)候我們?cè)傺a(bǔ)充一個(gè)D色的球形漸變并高斯模糊。D色的圓形矢量形狀要轉(zhuǎn)換為智能對(duì)象,這樣調(diào)節(jié)高斯模糊及大小的時(shí)候可以無(wú)損調(diào)整。如果界面上需要運(yùn)用圖片,我們?cè)傺a(bǔ)充一個(gè)80%透明度的E色,疊加在去色后的圖片上。這樣界面會(huì)層次會(huì)更加豐富。
三、多角度球形漸變
想讓界面更加絢麗,這時(shí)候我們可以考慮多組球形漸變搭配使用。例如最新改版的instagram就是一組線性漸變,加兩組球形漸變組成。球形漸變也是由多組顏色構(gòu)成。
四、色塊漸變
漸變的顏色不只可以運(yùn)用在一個(gè)色塊上,還可以運(yùn)用在一組色塊上。設(shè)計(jì)師運(yùn)用一組近似性色彩,將每個(gè)菜單項(xiàng)清晰區(qū)分開(kāi),讓界面平衡在一個(gè)頻率上,這樣的畫面更有節(jié)奏感和舒適性。
如何選擇色塊的顏色了?一樣運(yùn)用HSB,逐級(jí)加H色值,H色值越大,S相應(yīng)的色值也要逐漸變小。至于希望你的界面整體顏色跨度大還是小,取決你逐級(jí)H色值加的多少。
相信通過(guò)我的HSB調(diào)色分析,你可以熟練運(yùn)用顏色創(chuàng)造各種高大上的漸變。如果有不明白的嗎,也與我互動(dòng)進(jìn)行討論。
【設(shè)計(jì)中如何巧妙運(yùn)用漸變色】相關(guān)文章:
如何巧妙運(yùn)用裝修技巧07-31
演講時(shí)如何巧妙的運(yùn)用肢體語(yǔ)言06-10
平面設(shè)計(jì)中民間藝術(shù)如何運(yùn)用07-18
如何根據(jù)季節(jié)變化運(yùn)用花藝設(shè)計(jì)中的色彩04-23
縮放命令在AutoCAD設(shè)計(jì)中的巧妙應(yīng)用09-30
廣告設(shè)計(jì)中字體設(shè)計(jì)的運(yùn)用09-18