PS教程！教你用一個(gè)圖層制作相機(jī)圖標(biāo)

@李少伏ted?：?怎樣用1個(gè)圖層搞定相機(jī)圖標(biāo)？

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

• 相機(jī)PSD下載

接下來(lái)是教程時(shí)間！

先詳細(xì)講解一下第一個(gè)圖標(biāo)的教程，感興趣的同學(xué)可以做一下哦。效果圖如下：

在這個(gè)圖標(biāo)誕生之前，我一直在想，怎樣用一個(gè)圖層來(lái)體現(xiàn)鏡頭內(nèi)部的色彩變化，讓鏡頭成為視覺(jué)焦點(diǎn)，而不是相機(jī)機(jī)身。

我先做了個(gè)實(shí)驗(yàn)，我把一個(gè)圖層加滿樣式，目的是觀察每種樣式的前后順序，最后得出結(jié)論，除了外發(fā)光和投影這兩個(gè)無(wú)法應(yīng)用于內(nèi)部的樣式外，由前到后的順序分別為：

額，結(jié)果我發(fā)現(xiàn)原來(lái)這是跟我用的CS6版圖層上樣式的顯示順序是一樣的，我記得至少CS4不是這樣的。

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

對(duì)，最后我選擇了內(nèi)發(fā)光！因?yàn)閮?nèi)發(fā)光是可以帶漸變的！不但能遮住并露出和中間的漸變疊加，還能給鏡頭外圈加點(diǎn)料~

OK，讓我們開(kāi)始吧

1、畫(huà)底板

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

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

2、漸變疊加

灰常簡(jiǎn)單，可以照著做，也可以按照自己喜歡的顏色來(lái)，但漸變必須是縮小的，因?yàn)檫@層漸變最終只有中間部分顯示出來(lái)。

3、內(nèi)發(fā)光

前面說(shuō)過(guò)，內(nèi)發(fā)光的思路是靠它來(lái)遮住鏡頭以外的漸變，并以此增加一圈徑向的漸變色。

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

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

最關(guān)鍵的一步來(lái)了！我們現(xiàn)在要畫(huà)出鏡頭的輪廓及高光，用什么畫(huà)，當(dāng)然是斜面浮雕呀！斜面浮雕真是個(gè)好東西，他只要兩個(gè)等高線就能做出復(fù)雜的結(jié)構(gòu)樣式，想要學(xué)UI的童鞋最好研究下哦，后面我有相關(guān)的詳細(xì)講解~

PS：這里若自己調(diào)整參數(shù)可能需要回頭調(diào)整一下內(nèi)發(fā)光，因?yàn)閮烧叩某叽缡呛魬?yīng)的。

5、增加其余效果

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

終于貼完了一個(gè)相機(jī)的教程，原來(lái)做教程這么麻煩！向各位勤于貼教程的大神們致敬！
同時(shí)童鞋們不要忘了交作業(yè)哦~謝謝！
作者在后續(xù)推出了進(jìn)階版，大家可以右轉(zhuǎn) → zcool? 繼續(xù)學(xué)習(xí)，若是大家喜歡，我們也會(huì)繼續(xù)推出圖文版教程，謝謝閱讀。

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

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