PS教程！手把手教你繪制一枚經(jīng)典的iTunes圖標

編者按：現(xiàn)在扁平化時代，很多同學可能都忘了怎么用圖層樣式塑造擬物效果了，今天這枚教程帶同學們來回顧一下，作者是@P大點S微博?里的高手，對于圖層樣式有很多精辟獨到的見解，讓人大開眼界，來學習一下。

Projava：在Photoshop中，圖層樣式是最為直觀的東西，所有的效果都能量化，以數(shù)值的形式表現(xiàn)出來，就是各種晦澀難懂的等高線也可以用數(shù)字來表現(xiàn)。利用圖層樣式中的混合模式可以得到千變萬化的效果，很多的UI和icon絢麗的效果大多數(shù)是靠圖層樣式來實現(xiàn)的。

今天的iTunes圖標是一個非常經(jīng)典的icon，不過現(xiàn)在你們看不到了。現(xiàn)在的版本只能說是走火入魔，推崇扁平化，說它漂亮也談不上，說難看也不至于~

下面是我完成的效果圖，不過我對它的外輪廓作了一些惡搞性質的變化。這個外形介于正方形和圓形之間，它跟圓角矩形不是一個概念，迎合了現(xiàn)在的“審美觀”：

下面開始制作過程，首先我百度了一張原圖作為參考～

新建一個1000*1000的新畫布~

粘貼剛才復制的iTunes原圖，移動到角落上作為參考~

 

按ctrl+r打開標尺，右鍵標尺選擇百分比~

快捷鍵alt+v+e（按住alt，依次按V再按E）在垂直位置輸入50%~

繼續(xù)橫向位置也是50%~

設置好參考后點擊圖層欄下面的快捷按鈕添加一個漸變調整層。

選擇你認為比較合適的顏色搭配。本來我打算給出顏色的代碼，后來想想還是算了，每個人都有自己的獨好。我認為好看的你不一定也認同，所以這里你大可不必按照我的選擇。

在圖形工具里選擇橢圓工具~

以參考線的交叉點為中心畫一個大小差不多跟畫布大小的圓形。至于它的顏色大可不必在意，任何顏色都可以，我只要的是它的形狀~

右擊“選擇工具”，選擇“直接選擇工具”，也就是白色的箭頭。如果你比較熟悉這個工具的話可以結合ctrl建快速轉換~

框選水平方向的兩個錨點~

右鍵選擇“自由變換點”~

在"設置水平縮放"里輸入80%大小。這時候你看到這個圓形變成一個橢圓。

同樣框選垂直方向的兩個錨點，在垂直方向輸入80%。現(xiàn)在你看到的形狀跟我頂樓的差不多了~

按ESC隱藏路徑。雙擊打開圖層樣式，添加一個漸變。如果你的想象力足夠豐富的話，可以隨意填充你認為漂亮的顏色組合~

繼續(xù)添加描邊。其實用斜面浮雕效果也差不多，不過我認為用線性漸變的描邊來模擬“倒角”更加細膩~

ctrl+j復制一層，ctrl+t自由變換。打開“保持長寬比”，同比例縮小為95%~

重新修改它的圖層樣式數(shù)值，首先是漸變填充~

它同樣也有一個線性漸變的描邊，注意它的顏色要加深~

ctrl+j復制一層，在圖層縮略圖上右鍵清除圖層樣式~

ctrl+t自由變換。同樣要打開“保持長寬比”縮小為95%~

按ESC或者點擊矢量蒙版隱藏路徑。雙擊進入圖層樣式，添加一個徑向漸變。每個人的口味不同，這里我想盡量模擬原圖的風格，所以選擇了接近原圖的顏色~

添加內發(fā)光，我們要摒棄一個概念，“發(fā)光”不一定是亮的，有時候也可以的暗的~

再次添加“投影”，現(xiàn)在我得到一個邊緣看上去比較柔和的效果。其實這里你盡可使用“外發(fā)光"，效果是一模一樣的，不過投影的控制更加靈活，它還有”距離“的選項，”外發(fā)光“相比之下比較死板~

還有這個形狀下面的反射效果，以前我在別的網(wǎng)站見過PS愛好者臨摹這個icon的時候比較拘謹，他另外使用選區(qū)的減除來實現(xiàn)這個效果，這里我覺得可以鄙視一下，相比之下他對圖層樣式的理解沒有我透徹，我就這樣吹一下牛大概不會影響到我的光輝形象吧？開啟內陰影模擬下面的反射效果，這里我要提醒各位注意”使用全局光“的選項~

繼續(xù)復制一層，在圖層上右鍵清除圖層樣式~

ctrl+t把這個形狀縮小至98%~

單獨選擇下面的錨點往上移動~

結合shift選擇左右兩個錨點，右鍵選擇”自由變換點“編輯這個·····形狀的外形~

雙擊這個結果編輯的形狀進入圖層樣式，添加線性黑白漸變，注意混合模式的變化~

還有白色的”內陰影“模擬高光~

接著是icon中的音符，這里要使用到圖形工具。先畫一個橢圓，大小隨意，到時候我們可以編輯~

用”疊加模式“畫一個矩形，記得要用第二個的疊加按鈕，這樣能保證它們在一個圖層里~

選擇”路徑選擇工具“，框選這兩個形狀后按ctrl+alt+t復制移動到合適的位置~

同樣還是選擇”路徑選擇工具“，點擊任意一個矩形，ctrl+alt+t自由變換，把它設為音符橫向~

點擊上面的”組合“合并~（合并形狀組件，不同版本顯示不一樣，勿糾結）

選擇鋼筆中”刪除錨點工具“，刪除右邊多余的錨點~

選擇”添加錨點工具“，在橫條中間增加兩個錨點~

ctrl+t 編輯這個音符，在垂直斜切里輸入-11度，這里沒有硬性規(guī)定必須要11度。我只是目測它大概是這個角度~

使用”直接選擇工具“選擇這兩個剛剛添加的錨點，往上移動一些距離~

雙擊這個音符圖層打開圖層樣式，先添加一個徑向漸變~

添加斜面浮雕效果~

外發(fā)光，我使用了”柔光“模式以強化它的通透效果~

這個音符的外發(fā)光還有更深的一層，既然我已經(jīng)用過了”外發(fā)光“，只好使用投影來實現(xiàn)，不過我前面說過了，用投影來實現(xiàn)一點也不遜色于外發(fā)光~

接著用一個內發(fā)光來強化這個音符。這里我墨跡幾句，個人認為圖層樣式里最強大的功能不是投影，也不是斜面浮雕，而是等高線。如果你的觀察力足夠強的話你會發(fā)現(xiàn)我使用了一個很特別的等高線~

選中所有可移動的圖層，往上一動一段距離~

最后一步，我用Photoshop力最基礎的畫筆來制作它的陰影，畫筆是Photoshop里最強大的功能，而且沒有之一。如果沒有畫筆你什么都干不了，在漸變背景層上新建一層，用一個硬度為0，差不多120大小在底下點一下~

ctrl+t自由變換，水平拉伸~

不要確認這個操作，繼續(xù)右鍵選擇變形，仔細的把它調成這個形狀~

稍微往上移動~

選擇這個陰影層，開啟圖層欄上面的”鎖定像素“按鈕，給它填充比漸變背景上更深的顏色~

選擇畫筆，減少透明度和流量，在最接近圖標的地方涂抹更深的顏色~

完成！

「優(yōu)設2月份精品教程合集」

巖石效果：《PS教程！手把手教你創(chuàng)建酷炫赤焰的巖石字效》

網(wǎng)格本效果：《PS教程！30分鐘教你快速打造紙邊撕裂的網(wǎng)格本字效》

音箱圖標：《PS教程！手把手教你繪制一個雅致潔白的音箱圖標》

棒棒糖：《PS教程！手把手教你臨摹一枚卡哇伊的棒棒糖》

原文地址：pdadians

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com