@伯毅狼?：這個文章有點(diǎn)長，大家請耐心看。先來一段索然無味又老生常談的話吧，呵呵~~~嫌麻煩的朋友可以直接跳過。當(dāng)我們看到一個教程的時候，大家會想到些什么呢？馬上開練？做完之后呢？本狼建議：在做之前，先看看效果圖，想想自己能不能在沒有教程的前提下把這個案例做出來？眼前的這個圖形由幾部分組成，在軟件里該怎么實(shí)現(xiàn)？步驟是怎么樣的？好好思考一番后，再動手做，有目的的去看教程。

看教程的目的是什么？無非就是熟悉軟件+繪制技巧（或方法）這兩個了吧？吸收別人分享的經(jīng)驗(yàn)轉(zhuǎn)化成自己的知識，這樣才算達(dá)到了臨摹教程的目的了。所以，我會先去自己思考，然后嘗試著去做，遇到難題了不會了再去看教程，這樣吸收的快進(jìn)步也快。

作者其他投稿：
《PS教程：夢幻星空海報制作》
《PS教程：創(chuàng)建可愛的哆啦A夢風(fēng)格字體》
《PS教程：教你制作絢麗的萬花筒背景》

設(shè)計思路

首先我們得想好，這玩意該怎么做？先來看看手機(jī)的效果圖吧：

從這張圖里我們可以看到，手機(jī)由上下兩部分組成，上面是屏幕，下面是翻蓋和翻蓋上的音樂播放按鈕。那么我們畫草圖的時候就思路就很清晰了，也把圖標(biāo)分成上下兩塊。為了增強(qiáng)效果，我又加了頂部的厚度部分（手機(jī)我有，厚度部分我是照著手機(jī)做的）

先別急，不要忙著打開PS，我們先拿出紙和筆，畫個草圖出來并簡單區(qū)分下明暗，比如這樣：

······ 你們心里一定在想：臥槽！這特么是什么玩意？這二貨作者真的能畫出效果圖那樣的圖么？他不會是抄襲的吧？我能解釋的是：我手繪退步了，要不是為了說明下設(shè)計思路，我才不會自曝不足，哼╭(╯^╰)╮??！

需要注意的是，手機(jī)原型是長寬比例大概是1:3，而圖標(biāo)是1:1，那我們該怎么做呢？那有些地方變形是難免的，但是變形也不是盲目的變形，得知道會牽扯到哪些組成部分，該怎么變，和其他組成部分怎么組合才和諧？需要變形的部分內(nèi)部有沒有元素要跟著變，該不該變？這都要考慮好。

 

繪制圖標(biāo)

整個好看又能突出主體的背景。

我發(fā)布的相關(guān)作品中，背景太暗，圖標(biāo)也是灰色系，而且比較暗，這就沒了對比，無法突出主題，犯了個低級錯誤。得虧美女大白（芷云白兔）同學(xué)一針見血的指出，所以這里改進(jìn)下。背景不用浮夸，能突出主體又不搶鏡就行。具體怎么樣，大家隨心所欲。

Part1：用形狀和顏色來區(qū)分各區(qū)域

主體

頂層厚度

屏幕

按鍵

翻蓋的軸

翻蓋的把

Part2：豐富各區(qū)域的細(xì)節(jié)

然后根據(jù)手機(jī)效果圖，我們把細(xì)節(jié)部分（不加圖層樣式）豐富起來

看著是不是有種扁平化風(fēng)格呢？原諒我一下子就到了這一步，因?yàn)槲矣X得……就添加么，實(shí)在沒什么好說的，不懂的同學(xué)請來私聊我。

注意給中間那層灰的加個1像素的內(nèi)描邊

以上所有的細(xì)節(jié)建議用各種形狀工具來畫，包括那個鑰匙圖案也是

Part3：逐個添加圖層樣式

接下來，我們從上到下，分別給各組成部分添加圖層樣式并豐富細(xì)節(jié)。有點(diǎn)無聊，閑話少敘，開整！

頂層的部分：

頂層厚度

添加并調(diào)整不透明度的節(jié)點(diǎn)中間2個節(jié)點(diǎn)不透明度為0,外面2各節(jié)點(diǎn)的不透明度為60（位置哥們幾個是不是覺得很難調(diào)整啊，左右很難控制對不對？沒關(guān)系，本狼偷偷你，你把鼠標(biāo)放到位置的數(shù)值那，點(diǎn)一下然后滾動鼠標(biāo)滾輪就可以很方便的調(diào)整了，這個方法之后我們也會用到，我一直用這樣的方法來微調(diào)，或者用鍵盤的上下鍵也行。）

頂層的金邊

（中間亮點(diǎn)的黃色，兩邊深一點(diǎn)的橙色，方法跟之前一樣）

鎖頻鍵

鎖屏鍵由兩部分組成，按鍵和槽，這部分其實(shí)挺簡單的。按鍵用一個個圓角矩形組合起來就可了，然后添加圖層樣式。槽就顏色暗一點(diǎn)就可以了。

槽的顏色：#212121；

飾品圓孔的顏色：#191919；

陰影顏色為：#000000；

投影顏色為#FFFFFF

頂層部分算是繪制完成了，有些地方寫的不詳細(xì)，因?yàn)槲矣X得小伙伴們應(yīng)該可以自行腦補(bǔ)出來對么？

屏幕的部分：

外圍的框

我們給外圍的框添加一個小小的投影

投影顏色：#000000；

屏幕主體

然后加上一個音樂播放器的界面。這里要注意的是，原本手機(jī)屏幕的尺寸是寬＜高，我們因?yàn)樽龀蓤D標(biāo)變形后，變成寬＞高。雖然屏幕的長寬比例、尺寸變了，但是界面還是不能變的，所以得思考怎么做合理。

原本的屏幕及界面是這樣的：

很明顯的分成了上中下3部分，其中上面是信號、時間、電量等是第一部分，中間界面又是一部分，底下又是一部分，3部分被兩條線明顯的分割開來；而中間部分也分成了上中下三部分。所以，我把這3部分設(shè)計成了左中右三部分，進(jìn)度條貫穿左右，效果如下：

索愛英文字樣

色標(biāo)從左到右分別為：#565656、#FFFFFF、#565656，其中白色位置在正中間（知道怎么調(diào)整位置了吧）

聽筒

完成這些后，新建圖層位于之前所有圖層的上方，用圓角矩形+矩形工具組合畫一個和外圍的框所包圍的區(qū)域一樣的形狀：

看，就是紅色這部分。是不是感覺太刺眼了呢？沒關(guān)系，我們把圖層填充設(shè)置為“0”，然后添加圖層樣式：

顏色為白色，主要是調(diào)整透明度。上面4個節(jié)點(diǎn)，從左到右分別為：

不透明度：0%，位置：0%；不透明度：10%，位置：50%；不透明度：0%，位置51%；

不透明度：0%，位置：100%；

嗯，屏幕部分已經(jīng)完成了。這樣我們已經(jīng)完成了一半了。還有翻蓋部分，大家再接再厲，不要嫌麻煩喲！

按鍵部分

我們用橙色和灰色來區(qū)分下按鍵區(qū)域，然后添加圖層樣式。需要注意的是，按鍵的區(qū)域全部是形狀圖層哦！

按鍵底

灰色按鍵

橙色按鍵

漸變的色標(biāo)從左到右顏色及位置分別是：

顏色：#bd5d13，位置：0%；顏色：#c16c29，位置：10%；

顏色：#882d00，位置：20%；顏色：#c66516，位置：27%；

顏色：#e59d59，位置：42%；顏色：#b86827，位置：53%；

顏色：#c16927，位置：62%；顏色：#882d00，位置：72%；

顏色：#ea9c58，位置：88%；顏色：#bd5d13，位置：100%；

看，是不是很漂亮捏

然后還是用鋼筆或自定義形狀工具畫出這些圖形：

顏色為：#5c5c5c；然后添加圖層樣式：

樣子就怎么出來了：

軸的部分

接下來就是翻蓋的軸的部分了我們給這個軸加個漸變，好讓它看起來是個圓柱形,比如這樣：

從左到右顏色及位置分別是：

#333333,0%；#161616,31%；#4c4c4c，51%；

#3d3d3d，73；#4d4d4d，88%；#474747，100%；

從左到右顏色及位置分別是：

#979795，0%；#171717，17%；#171717，45%；#424242，100%；

設(shè)置完后，我們把軸的圖層添加個蒙版，擦出多余的部分，就是底部多出來的地方：

咦？沒反應(yīng)對不對？沒關(guān)系，只要勾選這里就可以了哦！

看！是不是很神奇呢：

底部的LOGO

底部的LOGO先用鋼筆摳圖（或者和你網(wǎng)上找個索愛的素材，這樣連頂部的字都不用摳圖了，現(xiàn)在才說，我是不是很壞捏？咩~~~~哈哈~~~），記得是做成形狀哦！然后添加圖層樣式：

從左到右顏色及位置分別是：

#4e270a，0%；#d86e16，48%；#f5b983，76%；#bb6415，100%；設(shè)置完這些就把LOGO轉(zhuǎn)成智能對象，再添加圖層樣式

嗯，軸就這么畫好了，什么？覺得還有什么沒做？可是就這兩部分啊，真的沒了，別想了。

翻蓋部分

翻蓋的底部呢也是有個弧度的，為了和軸的明暗交界線保持一致，我們只需要復(fù)制軸的漸變疊加就可以了，然后刪除多余的色標(biāo)再調(diào)整下剩下的色標(biāo)，這樣蓋子就變的憑證又有弧度了。

色標(biāo)從左到右的顏色及位置分別是

#333333,0%；#161616,3%；#3a3a3a，6%；

最后給這個翻蓋添加兩個一深一淺的描邊，并用蒙版蓋住多余的部分：

就是蓋住這里，深色邊緣：#232323，淺色邊緣：#535353；這樣做的目的是為了做出翻蓋的厚度。

最后在翻蓋兩邊放兩個橢圓，充當(dāng)翻蓋的把。最后的最后再添加投影和倒影，這樣整個圖標(biāo)算是完成了。

看，是不是很好看呢？告訴大家一個小秘密，本狼在這里等你們喲！

愛UI設(shè)計加群：304171858；愛設(shè)計的加群：3429044
最后和大家說一句話：越努力，越幸運(yùn)！本狼愿和大家一起努力一起進(jìn)步！

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量71萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：