編按：

    扁平化圖標(biāo)已經(jīng)是現(xiàn)在的設(shè)計(jì)趨勢(shì)，擬物化圖標(biāo)正在一點(diǎn)一點(diǎn)的淡出我們的視線。不得不承認(rèn)在“顏值即正義”的今天，時(shí)尚好看簡(jiǎn)單的扁平化圖標(biāo)確實(shí)有它火的道理。不過(guò)，時(shí)尚是個(gè)圈，誰(shuí)知道什么時(shí)候又反流行起來(lái)擬物化圖標(biāo)了呢。今天我們就以IOS最經(jīng)典的Siri圖標(biāo)為例，教你如何制作擬物化圖標(biāo)，一起來(lái)學(xué)習(xí)吧！

就個(gè)人而言，練習(xí)制作圖標(biāo)我非常喜歡iOS以前的擬物化風(fēng)格，因?yàn)閮?nèi)容比較豐富，當(dāng)然扁平化不是不漂亮，它注重的是設(shè)計(jì)理念，但是制作太過(guò)于簡(jiǎn)單，所以不在我的選擇范圍，而且關(guān)于設(shè)計(jì)理念這個(gè)話(huà)題也超出了我的能力范圍。

下面我臨摹的是一個(gè)SIRI圖標(biāo)，iOS里標(biāo)志性的icon，非常漂亮?？戳嗽瓐D后我認(rèn)為臨摹過(guò)程中最麻煩的地方就是麥克風(fēng)中的一組鏤空和它的發(fā)光效果，在膠囊型的麥克風(fēng)里怎么能整齊科學(xué)排列它們的確有點(diǎn)難，如果隨便畫(huà)幾個(gè)圓形敷衍了事另當(dāng)別論。

這是我們的最終效果：

這個(gè)是原圖：

下面開(kāi)始我的制作過(guò)程。為了后面的工作更加輕松便捷，所以我把新建的畫(huà)布尺寸設(shè)成一個(gè)比較好計(jì)算的整數(shù)~

原圖的背景過(guò)于簡(jiǎn)單，我畫(huà)蛇添足，制作一個(gè)iOS風(fēng)格的背景。新建一層純黑色填充層。

新建一層，填充白色。執(zhí)行“濾鏡-雜色-添加雜色”，參數(shù)如圖~

“濾鏡-模糊-動(dòng)感模糊”

把這個(gè)動(dòng)感模糊層的透明度調(diào)到45%。

復(fù)制一層，CTRL+T自由變化旋轉(zhuǎn)90度，把透明度調(diào)回100%，圖層混合模式改為“疊加”。

畫(huà)布四周的“毛邊”看著很不和諧，選中這兩個(gè)動(dòng)感模糊層，CTRL+T自由變化，放大一些，直至毛邊不見(jiàn)為止，背景完成。

ctrl+r開(kāi)啟標(biāo)尺，在標(biāo)尺上右鍵選擇百分比。按ALT+V+E快速布置水平和垂直兩條處于中心位置的參考線。

為了圖層欄的簡(jiǎn)潔以及照顧到以后臨摹方便起見(jiàn)，我把屬于背景的三個(gè)圖層打包成組且隱藏。選擇“編輯-首選項(xiàng)-參考線.網(wǎng)格和切片”，把間隔單位設(shè)為20個(gè)像素，子網(wǎng)格設(shè)為2，單純?cè)O(shè)為10像素的話(huà)覺(jué)得密密麻麻的不舒服。

用“橢圓工具”畫(huà)一個(gè)直徑為840像素的圓形。為了讓它跟白色的背景區(qū)分開(kāi)來(lái)，我給它設(shè)了一個(gè)85%的灰色。

按ctrl+’隱藏網(wǎng)格。雙擊這個(gè)形狀層，添加投影。我稍微調(diào)整了一下“等高線”，讓這個(gè)投影是邊緣收縮一些，再加一點(diǎn)點(diǎn)雜色。

再加一個(gè)人見(jiàn)人愛(ài)的角度漸變，用它來(lái)模擬圓形金屬是最好用了~

最后是這個(gè)金屬圓盤(pán)的倒角，斜面浮雕是不二之選~

我仔細(xì)觀察了原圖，金屬圓盤(pán)上似乎有“拉絲”的效果，但不是我們大家習(xí)慣使用的雜色+徑向模糊的那種。而是類(lèi)似于很細(xì)很密的同心圓。按D恢復(fù)前景色和背景色。新建一層填充白色。選擇濾鏡素描中的半調(diào)圖案。

然后極坐標(biāo)，一個(gè)同心圓的拉絲效果出來(lái)了。

如果你對(duì)上面的半調(diào)圖案有異議我認(rèn)為很正常，因?yàn)榘胝{(diào)圖案里有“圓形”的選項(xiàng)，可以直接制作同心圓。但是直接制作出來(lái)的同心圓的線條比較粗，我想要一個(gè)線條很細(xì)，很精致的同心圓，所以選擇直線選項(xiàng)再用極坐標(biāo)后它的效果比較符合我的要求。最后把這個(gè)同心圓的透明度調(diào)到8%左右，隱隱約約能看到就行，繼續(xù)把它剪切蒙版到金屬圓盤(pán)。或者給它一個(gè)蒙版也行。

接著我要用圖形工具制作圖標(biāo)中間的麥克風(fēng)，按ctrl+’開(kāi)啟網(wǎng)格，先用橢圓工具畫(huà)一個(gè)15%灰色，比“金屬圓盤(pán)”小1.5個(gè)網(wǎng)格單位的圓形。

繼續(xù)用“減去”模式再畫(huà)一個(gè)小1.5間隔單位的圓，這樣我得到一個(gè)邊寬為1.5間隔單位的圓環(huán)。

制作里面的麥克風(fēng)。打開(kāi)網(wǎng)格，選用圓角矩形工具，把圓角的直徑盡可能的設(shè)得大一些，比如現(xiàn)在我就是500，用“添加”模式以膠囊狀下半圓直徑為中心畫(huà)一個(gè)的麥克風(fēng)支架。

繼續(xù)用“減去”模式再畫(huà)一個(gè)小1.5間隔單位的膠囊，因?yàn)榫W(wǎng)格的“吸附”功能，精確的完成這些都不叫事。

用鋼筆裁去上半部的膠囊。不要用矩形工具去裁剪，那樣會(huì)把外圍的圓環(huán)也破壞掉。

在裁斷的位置再布置一條參考線作為話(huà)筒的中心點(diǎn)。畫(huà)一個(gè)小1.5網(wǎng)格單位的膠囊作為麥克風(fēng)的話(huà)筒。

還有下面的底座。

添加“內(nèi)陰影”。

以及白色的投影~

用“創(chuàng)建”模式畫(huà)一個(gè)小于麥克風(fēng)話(huà)筒半個(gè)單位間隔的膠囊。

添加圖層樣式中的漸變。

最后斜面浮雕是必須的，不過(guò)我選用外斜面。

畫(huà)一個(gè)25%灰色大小適中的圓形，ctrl+alt+t移動(dòng)一段距離后，ctrl+shift+alt+t垂直方向復(fù)制一組。

橫向錯(cuò)開(kāi)一段距離復(fù)制一組。

繼續(xù)移動(dòng)復(fù)制。

不用理會(huì)下面的鏤空孔，重新安排一下上面的鏤空孔的位置，多余的可以刪除掉，逐個(gè)移動(dòng)位置不科學(xué)的孔，使它們位置符合話(huà)筒的半圓形。

框選右邊的三排鏤空。把中心點(diǎn)移到垂直參考線上水平復(fù)制。

雙擊這個(gè)圓圈鏤空層，進(jìn)入圖層樣式，把混合模式改為正片疊底，透明度調(diào)到65%左右。把“圖層蒙版隱藏效果”打鉤。

簡(jiǎn)單的斜面浮雕。

給這個(gè)鏤空層添加一個(gè)蒙版，讓下半部分漸隱。

新建一層，按ctrl點(diǎn)擊鏤空層的矢量蒙版獲得選區(qū)，用畫(huà)筆涂抹上面一小部分。

取消選區(qū)，ctrl+t自由變化，把中心點(diǎn)設(shè)在話(huà)筒的中心水平位置，垂直翻轉(zhuǎn)。

高斯模糊1.0，感覺(jué)不夠的話(huà)可以稍微增大這個(gè)數(shù)值。

漸漸調(diào)小畫(huà)筆的大小和硬度，在鏤空孔的位置點(diǎn)幾下，模擬燈光逐級(jí)減弱的效果。

新建一層，添加矢量蒙版，把下面的麥克風(fēng)話(huà)筒的路徑復(fù)制進(jìn)來(lái)，再用鋼筆刪去一部分，填充白色，減少透明度。模擬玻璃鏡面反光的效果。如果你覺(jué)得矢量蒙版麻煩的話(huà)完全可以用圖層蒙版。

最后一步，新建一層，用硬度為0的400像素大小的畫(huà)筆在中心位置點(diǎn)一下，把混合模式改為“濾色”，透明度調(diào)到50。

完成！

本文配套的練習(xí)素材請(qǐng)加QQ群：143686347下載

做PS高手，快速提升工作效率，部落窩教育《 Photoshop全面精通班》視頻和《 AI平面與電商設(shè)計(jì)從零到精通》直播課全心為你！

掃下方二維碼關(guān)注公眾號(hào)，隨時(shí)隨地學(xué)習(xí)PS：

相關(guān)推薦：

PS布爾運(yùn)算巧妙繪制圖標(biāo)，這個(gè)QQ有點(diǎn)方！

用PS制作有質(zhì)感的時(shí)尚漸變按鈕圖標(biāo)

圖標(biāo)那么多,你該怎么做?先從瀏覽器做起

版權(quán)信息：

原標(biāo)題：PS繪制經(jīng)典的SIRI圖標(biāo)

來(lái)源： P大點(diǎn)S  作者：Projava