日本阿v片在线播放免费,成人国产片视频在线观看,日韩黄片毛片在线观看,一区亚洲电影,琪琪秋霞午夜av影视在线,中文字幕在线视频不卡,最新大伊香蕉精品视频在线,亚洲AV无码日韩一区二区乱

      毛玻璃圖標(biāo)的設(shè)計(jì)教程

      2021-11-30    lanlanwork


      1. 一定要注意識(shí)別度

      其實(shí)我一直不敢使用毛玻璃效果的原因,就是害怕有識(shí)別度問(wèn)題,其實(shí)網(wǎng)上現(xiàn)在有很多毛玻璃圖標(biāo):

      圖片

      做概念稿練習(xí)練習(xí)還好,如果真的落地肯定不行,太影響識(shí)別了。

      為了不影響識(shí)別,我們可以有兩個(gè)做法。

      其一:就是毛玻璃的透明度別太低,像騰訊視頻這種:

      圖片

      這樣不影響我們識(shí)別圖形的輪廓。

      其二,我們可以把圖標(biāo)主圖形用顏色填充,毛玻璃的面積只是很小一部分,起到輔助作用即可,比如像喜馬拉雅這種:

      圖片

      這樣整體的識(shí)別度也不會(huì)太受影響。

      以上就是關(guān)于不影響識(shí)別的小方法。

       

      2. 技法

      毛玻璃圖標(biāo)大部分一共分三層,填充層、玻璃層,模糊層(模糊層是嵌入到玻璃層的)。

      其中最重要的一個(gè)關(guān)鍵點(diǎn)就是,玻璃層其實(shí)是假的,并不是透明的,而是100%的填充色。

      舉個(gè)最簡(jiǎn)單的例子,我們先畫(huà)一個(gè)深藍(lán)色的填充層:

      圖片

      然后加一個(gè)玻璃層,這個(gè)玻璃層不是透明的,而是100%填充色:

      圖片

      那有同學(xué)就會(huì)問(wèn)了,毛玻璃效果怎么產(chǎn)生呢?其實(shí)就是把下面的深藍(lán)色圓復(fù)制一個(gè)進(jìn)入到前面的玻璃層:

      圖片

      有人又會(huì)問(wèn),這也沒(méi)效果啊,對(duì),因?yàn)閺?fù)制進(jìn)入玻璃層的圓形和后面的原型位置一摸一樣,如果不做改變,就看不出變化,所以我們先來(lái)模糊下:

      圖片

      區(qū)分的還是不夠開(kāi),我們?cè)俳档屯该鞫龋?

      圖片

      這效果就立馬出來(lái)了。

      所以從技法層面來(lái)說(shuō),并不是很難,主要是要注意識(shí)別度和整體的設(shè)計(jì)感。(當(dāng)然,這只是我個(gè)人制作的方法,可能別人也有其他的方式)。

       

      3. 底色

      前幾天在群里看到一位星友問(wèn),說(shuō)為什么他做的效果是第二個(gè),而不是第一個(gè)那種透透的毛玻璃感覺(jué):

      圖片

      其實(shí)我在最開(kāi)始做毛玻璃效果的時(shí)候和她遇到了一樣的問(wèn)題,這個(gè)問(wèn)題產(chǎn)生的原因就是因?yàn)榈咨F(xiàn)在的底色是黑色,一個(gè)玻璃放在黑色上面,透出來(lái)的顏色肯定是深灰色,而不是淺白色(除非你這塊毛玻璃本來(lái)就是白色的)。

      我在之前的一次練習(xí)時(shí),做一個(gè)黑金配的的毛玻璃效果,最開(kāi)始就做成了這個(gè)樣子:

      圖片

      總感覺(jué)有點(diǎn)奇怪,其實(shí)就是因?yàn)樵诤谏尘吧希A拥念伾昧税咨杏X(jué)沒(méi)透過(guò)去,就感覺(jué)怪怪的,后來(lái)我把玻璃層的顏色變成深灰色:

      圖片

      這樣看起來(lái)就好多了。

      制作的原理和剛才說(shuō)的是一樣的,先把大形畫(huà)完:

      圖片

      然后前面整一個(gè)玻璃層,選一個(gè)深灰色:

      圖片

      然后把下面的形狀復(fù)制一個(gè)剪切到玻璃層中:

      圖片

      現(xiàn)在看不出效果是因?yàn)椴A永锩娴膱D形和后面的圖形位置是一摸一樣的,這時(shí)候我們把玻璃層的圖形模糊:

      圖片

      現(xiàn)在已經(jīng)差不多區(qū)分出來(lái)了,如果想要更明顯的區(qū)分,可以把透明度再降低一點(diǎn):

      圖片

      也還ok,當(dāng)然,我覺(jué)得加不加透明度,還是看具體效果調(diào)整就可以了!

      再?gòu)?qiáng)調(diào)下,大家在做毛玻璃的時(shí)候一定要注意背景色哦,不然可能就會(huì)看起來(lái)很奇怪。

       

      總結(jié)

      好了,以上就是我個(gè)人對(duì)于毛玻璃效果的一點(diǎn)總結(jié),我個(gè)人還是比較喜歡一組毛玻璃圖標(biāo)是多色的,如果是一個(gè)顏色,比如這種:

      圖片

      相對(duì)來(lái)說(shuō)沒(méi)那么耐看,如果是多色的:

      圖片

      就會(huì)耐看很多,希望給大家一點(diǎn)啟發(fā),下期見(jiàn),默默扔!

       

      原文地址:菜心設(shè)計(jì)鋪(公眾號(hào))
      作者:菜心設(shè)計(jì)鋪
      轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》好慘,我竟然被批評(píng)了,問(wèn)我為什么不安排教程?我怕了

      藍(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)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

      截屏2021-05-13 上午11.41.03.png

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

      藍(lán)藍(lán)設(shè)計(jì)m.jjddy.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ù)

      日歷

      鏈接

      個(gè)人資料

      存檔