磨砂玻璃質(zhì)感圖標(biāo)動效制作教程

磨砂玻璃質(zhì)感認(rèn)識：

最近很多朋友都有發(fā)一些磨砂玻璃質(zhì)感的UI界面，在設(shè)計表現(xiàn)過程中，方法多種多樣，但同樣要注意以下幾個點：

懸浮感：帶有明顯懸浮感的多個層級表現(xiàn)，可通過投影添加

顏色鮮明：使用鮮艷色彩作為強調(diào)色并且從半透明層中透出

邊緣質(zhì)感：使用輕薄高亮的1像素邊框來強化物理質(zhì)感

我們會先使用繪圖軟件得到基本形態(tài)，然后導(dǎo)入AE中制作動效，一起來試試吧。

操作步驟：

1. PS繪制好ICON的形態(tài)，并分好圖層

先在PS中繪制好IOCN，每個ICON分三層，背景彩色元素，半透明圖形層，上層小圖形。

將文件存儲為PSD格式

2. AE中制作磨砂質(zhì)感圖標(biāo)

2.1 將PSD文件導(dǎo)入AE，選擇“合成-保持圖層大小”

2.2 雙擊積分預(yù)合成文件，進(jìn)入子層級編輯動效

為方便察看效果，將背景色更改為白色

在主圖形上新建一個調(diào)整圖層(ctrl+alt+Y)，添加效果菜單——模糊和銳化——高斯模糊，參數(shù)為30左右。效果如下

復(fù)制一個橢圓圖層，選擇調(diào)整圖層——添加軌道蒙版，注意要檢查復(fù)制后橢圓圖層的不透明度為100。原橢圓圖層不透明度為30左右。

選擇原橢圓圖層，右擊——圖層樣式——添加投影和內(nèi)陰影，設(shè)置如下：

投影顏色選擇對象的主要顏色，并壓暗。磨砂質(zhì)感就出現(xiàn)了。

3. AE中制作動效

3.1 首先安裝Motion2插件，將插件復(fù)制粘貼到AE安裝目錄下：Adobe After Effects CC 2018\Support Files\Scripts\ScriptUI Panels。

3.2 編輯-首選項-常規(guī)，勾選上允許腳本讀寫和訪問網(wǎng)絡(luò)。

將主圖形的位置和不透明度K幀，五角形縮放K幀

選擇圖形的位置幀——motion中添加回彈屬性，并調(diào)整緩入緩出參數(shù)為20，

五角形縮放幀同上設(shè)置。

好了，磨砂質(zhì)感圖標(biāo)的動效就制作好了，依次添加另外三個圖標(biāo)動效，一起練起來吧。

猜你喜歡：

SC4D快速渲染白膜的方法

漸變風(fēng)格插畫設(shè)計：燈塔插畫教程

如何使用PS制作水晶效果字體？

照片轉(zhuǎn)成插畫效果如何實現(xiàn)？速成教學(xué)！

PS如何制作流星雨效果？

傳智教育UI設(shè)計師培訓(xùn)課程