UI設(shè)計(jì)：教你用PS制作筆記本風(fēng)格的UI圖標(biāo)

1、UI設(shè)計(jì)：教你用PS制作筆記本風(fēng)格的UI圖標(biāo)摘要：今天跟大家分享一篇筆記本風(fēng)格的UI圖標(biāo)，效果的紋理主要通過(guò)圖層樣式制作出來(lái)，喜歡的一起學(xué)習(xí)一下。先看看效果：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/1473738259604.jpg * MERGEFORMATINET 本子的身體這一部分呢，就是個(gè)圓角矩形，用到的圖層樣式可以參見(jiàn)下圖：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737382787940.jpg * MERGEFORMATINET

2、 而效果呢，說(shuō)實(shí)在的，真的愁死我了，我是用吸管吸色來(lái)做漸變疊加的，出于當(dāng)時(shí)考慮的角度問(wèn)題，最終添加了以上圖層樣式后的效果并不明顯，如圖：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/1473738304599.jpg * MERGEFORMATINET 所以接下來(lái)，我為它單獨(dú)添加了高光，一層又一層的疊高光，最后成了這個(gè)樣子，注意右上角尤其是邊緣的部分：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737383174045.jpg * MERGEFORM

3、ATINET 疊高光用到了圖層蒙版。然后本子的身體部分還有一圈虛線，中間那個(gè)belt的上面和下面一共有四條虛線，都是用描邊路徑畫(huà)出來(lái)的，然后添加圖層樣式，圖層樣式如下：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737383323047.jpg * MERGEFORMATINET 那么到此為止，body部分就算搞定了，接下來(lái)先看看body部分的整體效果：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737383469797.jpg * MERGE

4、FORMATINET 然后開(kāi)始繪制身體中間的那個(gè)帶子的部分（最上面的那個(gè)扣兒除外，那是第三部分要說(shuō)的哦）。加上那個(gè)belt的效果圖如下，先來(lái)看看：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/1473738356763.jpg * MERGEFORMATINET 下面開(kāi)始說(shuō)belt的繪制。Belt主要是用了圖層樣式、濾鏡和畫(huà)筆工具，畫(huà)筆工具配合圖層蒙版，說(shuō)了這么多，還是看看更方便，效果圖及其方法：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/1473738

5、396656.jpg * MERGEFORMATINET INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737383966844.jpg * MERGEFORMATINET INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737384098567.jpg * MERGEFORMATINET 上面第二幅圖中的第一個(gè)圖層就是剛剛說(shuō)到的畫(huà)筆配合圖層蒙版，主要是高光的修飾，很微弱的高光。然后帶子上面還有一行字，這行字用到的圖層樣式是：INCLUDEPICTU

6、RE d http:/img2.yiihu/upimg/manage/2016/09/13/14737384263435.jpg * MERGEFORMATINET 這樣，我們就將belt這一部分也搞定了，下面就只剩下那個(gè)button的部分了。這個(gè)鈕扣的整體效果圖如下：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737384779168.jpg * MERGEFORMATINET 注意右下角的部分，由于這個(gè)button的右端要長(zhǎng)過(guò)于本子的body，所以長(zhǎng)出的部分的投影，應(yīng)該是看不到的，只有當(dāng)本子放到桌子上的時(shí)候，你可以

7、稍微的添加一點(diǎn)點(diǎn)很淡很淡的投影，是不是這個(gè)道理呢？好了，下面來(lái)說(shuō)說(shuō)這個(gè)button的繪制。投影在最下面一層，由于剛剛說(shuō)到的長(zhǎng)短問(wèn)題，單獨(dú)畫(huà)的形狀圖層來(lái)作它的投影，如圖：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737384955766.jpg * MERGEFORMATINET INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737385081186.jpg * MERGEFORMATINET 然后再畫(huà)上面的那個(gè)棕紅色的細(xì)皮帶：INCLUDEPI

8、CTURE d http:/img2.yiihu/upimg/manage/2016/09/13/1473738520655.jpg * MERGEFORMATINET 用到了圖層樣式和濾鏡，如下：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737385356507.jpg * MERGEFORMATINET INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737385359599.jpg * MERGEFORMATINET 主體部分完成。然后單獨(dú)

9、給這部分加個(gè)高光，就像剛剛body的那部分一樣，疊上幾層或者調(diào)整調(diào)整，但是仍然是微弱的高光，盡管微弱，細(xì)微的地方，畫(huà)與不畫(huà)，最終的效果一定是不同的。這里疊了兩層：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737385465910.jpg * MERGEFORMATINET 最后，扣帶兒上還有半圈虛線，同樣用描邊路徑畫(huà)出來(lái)，然后添加圖層樣式，如下：INCLUDEPICTURE d http:/img2.yiihu/upimg/manage/2016/09/13/14737385536845.jpg * MERGEFORMATINET 最后一步，為它加