PS如何製作一個逼真的空調調節器旋鈕開關UI圖標

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

效果圖：

主要過程：

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

複製一層漸變圖層，轉智能對象，添加雜色。

執行“濾鏡—風格化—浮雕效果”。

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

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

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

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

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

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

跟剛才給圖標主體增強陰影效果一樣，現在我們複製一層旋紐圖層，清除圖層樣式，下移一層，將圖層填充修改為0，添加一個投影樣式。

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

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

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

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

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

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

同樣的，下面，我們做開關的陰影加強，複製一層開關圖層，清除圖層樣式，下移一層，將圖層填充更改為0，添加一個投影樣式。

接着，我畫了一個白色的矩形排列，將填充修改為4%，添加內陰影及投影樣式，創建剪貼蒙版，我們增強開關的質感體現。

添加開關下的標識文字，同樣的是添加內陰影及投影。

最後，左側，我添加了三個標誌，CECC、3C、LonMark，大功告成!