PS如何制作一個逼真的空調(diào)調(diào)節(jié)器旋鈕開關(guān)UI圖標(biāo)

　　最近，真是越來越熱了，記得上欠我們畫了個空調(diào)嗎?今天，帶大家做一個空調(diào)調(diào)節(jié)器的圖標(biāo)，就圖標(biāo)來說，應(yīng)用最多的依舊是圖層樣式，今天的文章說實在的，新的東西也很少，還是老一套，最多圖層組的知識點(diǎn)，算是一個吧。以下是小編為大家搜索整理的PS如何制作一個逼真的空調(diào)調(diào)節(jié)器旋鈕開關(guān)UI圖標(biāo)，希望能給大家?guī)�來幫�?更多精彩內(nèi)容請及時關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!

　　效果圖：

　　主要過程：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　接下來，我們來做開關(guān)，首先，我畫了一個圓角矩形，將填充修改為0，添加了內(nèi)陰影、內(nèi)發(fā)光、投影三個樣式。

　　下面，畫一個顏色為#edebeb的，小一點(diǎn)的圓角矩形，這個圓角矩形將作為我們的開關(guān)，這里我添加了斜面和浮雕以及投影兩個樣式。

　　同樣的，下面，我們做開關(guān)的陰影加強(qiáng)，復(fù)制一層開關(guān)圖層，清除圖層樣式，下移一層，將圖層填充更改為0，添加一個投影樣式。

　　接著，我畫了一個白色的矩形排列，將填充修改為4%，添加內(nèi)陰影及投影樣式，創(chuàng)建剪貼蒙版，我們增強(qiáng)開關(guān)的質(zhì)感體現(xiàn)。

　　添加開關(guān)下的標(biāo)識文字，同樣的是添加內(nèi)陰影及投影。

　　最后，左側(cè)，我添加了三個標(biāo)志，CECC、3C、LonMark，大功告成!

【PS如何制作一個逼真的空調(diào)調(diào)節(jié)器旋鈕開關(guān)UI圖標(biāo)】相關(guān)文章：

PS如何繪制一個扁平的UI按鈕圖標(biāo)10-14

如何運(yùn)用PS制作逼真的紙張折痕效果10-27

PS制作非常精美的立體木盒圖標(biāo)08-30

fireworks如何制作精致圖標(biāo)06-30

ps怎么設(shè)計一款紅色的UI時鐘元素圖標(biāo)08-24

Ps如何繪制擬物相機(jī)icon圖標(biāo)08-18

如何使用PS圖層樣式制作立體感的網(wǎng)頁開關(guān)按鈕06-09

PS繪制不銹鋼旋鈕的教程09-11

PS如何制作一個漂亮的水晶按鈕10-16