ps制作一個(gè)逼真的空調(diào)調(diào)節(jié)器旋鈕開關(guān)ui圖標(biāo)教程

發(fā)布時(shí)間：2017-06-13 14:28:10 作者：佚名

本教程教腳本之家的各位ps按鈕制作學(xué)習(xí)者使用ps制作一個(gè)逼真的空調(diào)調(diào)節(jié)器旋鈕開關(guān)ui圖標(biāo)的方法，教程應(yīng)用最多的依舊是圖層樣式，打造的效果非常逼真，推薦到腳本之家一起分享學(xué)習(xí)

最近，真是越來越熱了，記得上欠我們畫了個(gè)空調(diào)嗎？今天，帶大家做一個(gè)空調(diào)調(diào)節(jié)器的圖標(biāo)，就圖標(biāo)來說，應(yīng)用最多的依舊是圖層樣式，今天的文章說實(shí)在的，新的東西也很少，還是老一套，最多圖層組的知識(shí)點(diǎn)，算是一個(gè)吧。

PSD文檔下載請(qǐng)點(diǎn)擊

效果圖：

主要過程：

下面，正題開始，創(chuàng)建一個(gè)漸變背景，我做了一個(gè)從#c1ccd2到#eaeaea的90度線性漸變。

復(fù)制一層漸變圖層，轉(zhuǎn)智能對(duì)象，添加雜色。

執(zhí)行“濾鏡—風(fēng)格化—浮雕效果”。

將圖層混合模式修改為“疊加”，這時(shí)我們得到一個(gè)類似墻壁的紋理背景。

新建一個(gè)漸變調(diào)整層，顏色設(shè)置請(qǐng)參照?qǐng)D片上的參數(shù)，將這個(gè)漸變調(diào)整層的圖層混合模式更改為“疊加”。

至此，我們的背景完成了，下面，我們開始圖標(biāo)的制作，首先畫個(gè)圓角矩形，我給它添加了斜面浮雕、漸變疊加、投影，三個(gè)樣式。

復(fù)制一層圓角矩形，移到下層，清除掉圖層樣式，將填充更改為0，我們?cè)俅翁砑右粋€(gè)投影圖層樣式，強(qiáng)化陰影。（這里需要說明的，CC2015的版本開始可以添加多個(gè)圖層樣式，但是為了避免低版本的PS打開PSD會(huì)出錯(cuò)，我們的做法都是按照低版本的操作）

接下來，用橢圓工具畫一個(gè)正圓，這里，圓的位置，我選擇在了右側(cè)，選擇在右側(cè)的原因是因?yàn)橛袇⒖剂艘粋€(gè)實(shí)際存在的空調(diào)品牌的調(diào)節(jié)器。因?yàn)榈葧?huì)的旋紐的位置，是要與圖標(biāo)對(duì)齊的，所以現(xiàn)在，圓的位置有超出了圖標(biāo)一點(diǎn)，一會(huì)我們?cè)偻晟?，我為這個(gè)圓添加了內(nèi)陰影、內(nèi)發(fā)光、漸變疊加以及投影四個(gè)樣式。

下面，我們來畫旋紐，同樣的是使用橢圓工具畫個(gè)正圓，圓的右側(cè)，對(duì)齊圖標(biāo)右側(cè)，我為其添加了斜面和浮雕、漸變疊加以及投影，三個(gè)樣式。

跟剛才給圖標(biāo)主體增強(qiáng)陰影效果一樣，現(xiàn)在我們復(fù)制一層旋紐圖層，清除圖層樣式，下移一層，將圖層填充修改為0，添加一個(gè)投影樣式。

接下來，我們添加空調(diào)溫度文本，首先，我以按紐的中心點(diǎn)為中心，利用Ctrl+Alt+Shift+T，我們可以輕易的得到我下圖中的文本位置參考。

以這個(gè)紅色的矩形位置以參考，打上溫度的文本，隱藏或者刪除掉位置參考的這個(gè)圖層。文本我用的顏色是#6cbebb，是為了與剛才我們所做的旋紐圓槽保持一致。我為所有文字添加了內(nèi)陰影和投影，這個(gè)我想不需要再截圖了吧，差不多每一次的圖標(biāo)教程我們都會(huì)用到，如果你還真不會(huì)的話，看看我們提供的PSD吧。

接下來，我添加了我們的P大點(diǎn)S的LOGO在旋紐中，同時(shí)畫了一個(gè)圓，充當(dāng)旋轉(zhuǎn)的指示，同樣的這個(gè)指示的圖層和我們的LOGO，我們都添加了內(nèi)陰影和投影，營造立體感，跟剛才的文本樣式幾乎是一致的，差別只是大小。這里，因?yàn)橹甘緶囟鹊狞c(diǎn)是指向30度，所以我把LOGO旋轉(zhuǎn)了一定位置，將它也指向了30度。

大家可以看到，那個(gè)圓槽還在圖標(biāo)的外面，給它直接添加一個(gè)蒙版的話，它就正常了，但是，它有圖層樣式，添加蒙版后，圖層樣式依舊會(huì)露在圖標(biāo)外面，或許大家會(huì)說，勾選“圖層蒙版隱藏效果”就可以解決了，但是問題是，旋紐也是如此，旋紐的投影增強(qiáng)也是如此，我們需要改好幾個(gè)圖層，作為懶人，這明顯太累人了。在這里，我的做法是，將所有按紐的圖層都選擇中，Crtl+G，創(chuàng)建圖層組，然后為圖層組添加蒙版，搞定，一步完事。