成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

教你巧妙運用漸變色快速提升設(shè)計格調(diào)!

作者:
2016-05-18
1686


漸變是設(shè)計師最簡單的手法之一,也是移動端APP背景設(shè)計常用的設(shè)計技巧。所以今天我來教大家如何巧妙運用漸變,迅速提升界面的格調(diào)。

我們都知道iOS7以后,界面設(shè)計已經(jīng)趨于扁平化。實際界面設(shè)計中我們已經(jīng)很少繪制寫實圖標(biāo)。所以貌似現(xiàn)在的UI界面顯得千篇一律。比較有經(jīng)驗的設(shè)計師會熟練運用插畫設(shè)計還有動效設(shè)計,使自己的界面顯得與眾不同,然而這些技巧都是需要時間歷練,短時間并不容易掌握這些知識。

有沒有一種方法簡單實用,迅速提升界面的格調(diào)了?

Instagram 換標(biāo)的設(shè)計刷遍了大家都朋友圈,對于這個新圖標(biāo)褒貶不一,不管這個設(shè)計好壞與否,你不得不承認(rèn)第一眼看這個彩虹色讓你眼前一亮。也讓我們重新認(rèn)識到在UI設(shè)計中,使用得當(dāng)?shù)臐u變色彩,可以使界面和圖標(biāo)的設(shè)計感得到迅速提升。

ddda57387f3b6ac72580ed25328c.jpg

一、垂直線性漸變

13jb20160516

拉漸變是Photoshop的基礎(chǔ)操作,那么如何運用的好看了?顏色選擇才是關(guān)鍵

我們把一個漸變顏色拆分成A B C三個顏色,每個顏色用HSB標(biāo)注顏色色值。

3jb20160516

這是某App的一組引導(dǎo)畫面,運用了三組漸變顏色,分別標(biāo)注HSB的色值,通過這組色值的變化,分析如下。

4jb20160516

A色 B值非常高,普遍50以上

從A色到B色,H值的變化范圍為正負(fù)30到70,S值減少10,說明B顏色略變淡。

從B色到C色,H值的變化范圍為正負(fù)30到40,S值增加15到50,說明C顏色開始變濃。

以上色值僅供參考,實際使用并非整數(shù)。根據(jù)以上規(guī)律去有規(guī)則的使用漸變色。

二、垂直線性漸變+球形漸變

Web界面面積比較大,在大面積使用漸變的時候。如果只是使用垂直的線性漸變是略顯單調(diào)的,這個時候我們需要加一個球形的漸變。

5jb20160516

A+B+C色構(gòu)成一個漸變,這時候我們再補(bǔ)充一個D色的球形漸變并高斯模糊。D色的圓形矢量形狀要轉(zhuǎn)換為智能對象,這樣調(diào)節(jié)高斯模糊及大小的時候可以無損調(diào)整。如果界面上需要運用圖片,我們再補(bǔ)充一個80%透明度的E色,疊加在去色后的圖片上。這樣界面會層次會更加豐富。

三、多角度球形漸變

想讓界面更加絢麗,這時候我們可以考慮多組球形漸變搭配使用。例如最新改版的instagram就是一組線性漸變,加兩組球形漸變組成。球形漸變也是由多組顏色構(gòu)成。

6jb20160516

四、色塊漸變

漸變的顏色不只可以運用在一個色塊上,還可以運用在一組色塊上。設(shè)計師運用一組近似性色彩,將每個菜單項清晰區(qū)分開,讓界面平衡在一個頻率上,這樣的畫面更有節(jié)奏感和舒適性。

7jb20160516

如何選擇色塊的顏色了?一樣運用HSB,逐級加H色值,H色值越大,S相應(yīng)的色值也要逐漸變小。至于希望你的界面整體顏色跨度大還是小,取決你逐級H色值加的多少。

相信通過我的HSB調(diào)色分析,你可以熟練運用顏色創(chuàng)造各種高大上的漸變。如果有不明白的嗎,也與我互動進(jìn)行討論。

8jb20160516

欣賞案例

最后給大家看一下相關(guān)精彩案例,可臨摹學(xué)習(xí)。

16jb2016051615jb2016051614jb2016051613jb2016051612jb2016051611jb2016051610jb20160516


9jb20160516

1
0
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號