UI教程，設(shè)計筆記本主題UI圖標(biāo)教程

今天跟大家分享一篇筆記本風(fēng)格的UI圖標(biāo)，效果的紋理主要通過圖層樣式制作出來，喜歡的一起學(xué)習(xí)一下。先看看效果：

現(xiàn)在再來回憶一下這個筆記本的畫法吧。它大體可以分為三個部分：body，button，belt。哈哈，3b。那接下來就一個一個的分解一下好了。

First of all, the body.本子的身體這一部分呢，就是個圓角矩形，用到的圖層樣式可以參見下圖：

而效果呢，說實在的，真的愁死我了，我是用吸管吸色來做漸變疊加的，出于當(dāng)時考慮的角度問題，最終添加了以上圖層樣式后的效果并不明顯，如圖：

所以接下來，我為它單獨添加了高光，一層又一層的疊高光，最后成了這個樣子，注意右上角尤其是邊緣的部分：

疊高光用到了圖層蒙版。

然后本子的身體部分還有一圈虛線，中間那個belt的上面和下面一共有四條虛線，都是用描邊路徑畫出來的，它們其實已經(jīng)很小了，我思前想后，糾結(jié)了一下是否有必要為此添加圖層樣式之后，就開始添加起來，圖層樣式如下：

那么到此為止，body部分就算搞定了，接下來先看看body部分的整體效果：