@李少伏ted?：?怎樣用1個圖層搞定相機圖標？

花一周的業余時間，邊想邊擼邊寫，由淺入深教你怎么玩PS的圖層樣式！
提供PSD下載，希望對小伙伴們有所幫助。

• 相機PSD下載

接下來是教程時間！

先詳細講解一下第一個圖標的教程，感興趣的同學可以做一下哦。效果圖如下：

在這個圖標誕生之前，我一直在想，怎樣用一個圖層來體現鏡頭內部的色彩變化，讓鏡頭成為視覺焦點，而不是相機機身。

我先做了個實驗，我把一個圖層加滿樣式，目的是觀察每種樣式的前后順序，最后得出結論，除了外發光和投影這兩個無法應用于內部的樣式外，由前到后的順序分別為：

額，結果我發現原來這是跟我用的CS6版圖層上樣式的顯示順序是一樣的，我記得至少CS4不是這樣的。

理解完圖層樣式的順序，大致有了方向。我需要用漸變疊加來增加鏡頭的質感，那么圖案疊加和底色順序在其后首先被排除掉，顏色疊加和光澤則無法達到我想要的遮擋并透出中間部分，漸變疊加的效果也被排除掉，而斜面浮雕我需要用她來體現鏡頭的明暗高光，剩下只有描邊、內陰影、內發光可供選擇。

對，最后我選擇了內發光！因為內發光是可以帶漸變的！不但能遮住并露出和中間的漸變疊加，還能給鏡頭外圈加點料~

OK，讓我們開始吧

1、畫底板

首先用圓角矩形工具再畫布上畫一個200px*200px，圓半徑為40px的圓角矩形。這一步我就不截圖了，完不成的朋友面壁吧。

至于為什么要200px*200px，我后面會解釋得啦，嘻嘻。

2、漸變疊加

灰常簡單，可以照著做，也可以按照自己喜歡的顏色來，但漸變必須是縮小的，因為這層漸變最終只有中間部分顯示出來。

3、內發光

前面說過，內發光的思路是靠它來遮住鏡頭以外的漸變，并以此增加一圈徑向的漸變色。

這里參數很重要，并且尺寸不同，效果也會不一樣，這就是為什么我第一步需要指定大小哈~

?4、帶等高線的斜面和浮雕

最關鍵的一步來了！我們現在要畫出鏡頭的輪廓及高光，用什么畫，當然是斜面浮雕呀！斜面浮雕真是個好東西，他只要兩個等高線就能做出復雜的結構樣式，想要學UI的童鞋最好研究下哦，后面我有相關的詳細講解~

PS：這里若自己調整參數可能需要回頭調整一下內發光，因為兩者的尺寸是呼應的。

5、增加其余效果

其實完成這一步，相機已經成型了，所以下面的參數沒有那么重要，童鞋們可以依據自己的喜好和理解來完成最后的潤飾，為了照顧新手和教程的完整性，我還是貼出了參數（作者：我是不是廢話很多- -？）（小編：絕對沒有，這才是業界良心啊！）

終于貼完了一個相機的教程，原來做教程這么麻煩！向各位勤于貼教程的大神們致敬！
同時童鞋們不要忘了交作業哦~謝謝！
作者在后續推出了進階版，大家可以右轉 → zcool? 繼續學習，若是大家喜歡，我們也會繼續推出圖文版教程，謝謝閱讀。

原文地址：www.zcool.com
作者：@李少伏ted

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量47萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：