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

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

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

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

PSD文檔下載請點擊

效果圖：

主要過程：

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

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

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

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

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

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

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

接下來，用橢圓工具畫一個正圓，這里，圓的位置，我選擇在了右側(cè)，選擇在右側(cè)的原因是因為有參考了一個實際存在的空調(diào)品牌的調(diào)節(jié)器。因為等會的旋紐的位置，是要與圖標(biāo)對齊的，所以現(xiàn)在，圓的位置有超出了圖標(biāo)一點，一會我們再完善，我為這個圓添加了內(nèi)陰影、內(nèi)發(fā)光、漸變疊加以及投影四個樣式。

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

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

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

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

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

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