磨砂玻璃質(zhì)感ICON+AE動(dòng)效設(shè)計(jì)教程

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

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

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

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

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

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

操作步驟：

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

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

將文件存儲(chǔ)為PSD格式

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

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

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

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

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

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

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

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

3. AE中制作動(dòng)效

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

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

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

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

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

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

猜你喜歡：

Dimension CC渲染啤酒罐視頻圖文教程

如何制作三維ICON圖標(biāo)？C4D制作三維ICON教程

PS怎么制作金屬字體?金屬字體制作教程

AE制作三維旋轉(zhuǎn)文字動(dòng)效教程

AE動(dòng)效資源怎么高保真輸出？

黑馬程序員UI設(shè)計(jì)師培訓(xùn)課程