第一次看到 Eddie Lobanovskiy 做出的這款icon時(shí)，我感到十分驚艷，他對(duì)于細(xì)節(jié)的把控，讓我贊嘆不已。而通過臨摹 Eddie Lobanovskiy 這款作品，主要也是為了鍛煉自己，在設(shè)計(jì)中對(duì)細(xì)節(jié)的把控和對(duì)圖層樣式應(yīng)用的熟練度。光影方面，和吃喝玩樂團(tuán)團(tuán)長(zhǎng) 一起重新定義了光影的方式，讓L型的背景更加立體。大家在練習(xí)的過程中，也可以結(jié)合自己的光源光感，對(duì)光影進(jìn)行練習(xí)，同時(shí)要注意自己對(duì)細(xì)節(jié)的把控。

教程所需要的素材：立體質(zhì)感的相機(jī)圖標(biāo)PS教程素材

先看看效果圖

步驟1：

新建畫布800*600px 72ppi，繪制一個(gè)圓角矩形，顏色#232225，參數(shù)如圖，命名為【外框】

濾鏡-添加雜色 數(shù)值1

步驟2：

復(fù)制外框，命名為【外框-2】，繪制矩形，用路徑工具減去頂層形狀

圖層樣式-內(nèi)陰影

步驟3：

復(fù)制外框，命名為【外框-3】，繪制矩形，用路徑工具減去頂層形狀

步驟4：

在【外框-3】上，覆蓋上 【附件-2】 并調(diào)整附件-2位置，命名為【貼圖-皮質(zhì)】

步驟5：

為【貼圖-皮質(zhì)】進(jìn)行調(diào)色，使其更加真實(shí)(在智能對(duì)象模式下進(jìn)行調(diào)色)

分別調(diào)整曲線、亮度/對(duì)比度、進(jìn)一步銳化、曲線

步驟6：

為【外框-3】添加圖層樣式 斜面和浮雕、內(nèi)陰影

步驟7：

復(fù)制【貼圖-皮質(zhì)】圖層，調(diào)整最上層曲線的數(shù)值

步驟8：

添加蒙版，用黑色柔邊畫筆使兩層貼圖過度柔和

步驟9：

復(fù)制【外框】圖層，填充為0%，清除智能濾鏡，拖動(dòng)到最上，為其添加圖層樣式，命名為【外框-樣式】

步驟10：

繪制一個(gè)452*11px的矩形，羽化7.0，調(diào)整不透明度 80%，以外框圖層創(chuàng)建剪切蒙版，命名為【外框-高光】

開始繪制內(nèi)框部分!

步驟11：

創(chuàng)建一個(gè)350*300px 圓角45px的圓角矩形，轉(zhuǎn)換為智能對(duì)象，添加光影和雜色，并命名為【內(nèi)框-1】

步驟12：

用柔邊畫筆，點(diǎn)出高光，顏色#c4e9ff，疊加，不透明度49%，以內(nèi)框-1圖層創(chuàng)建剪切蒙版，命名為【藍(lán)色高光】

步驟13：

創(chuàng)建340*290px 圓角42px的圓角矩形，命名為【內(nèi)框-2】

內(nèi)陰影 漸變疊加 #303030-#0a0a0a 添加雜色 1

步驟14：

創(chuàng)建260*4px的橢圓 顏色#b7e5ff 羽化3.5，命名為【內(nèi)框-2-高光】

步驟15：

創(chuàng)建一個(gè)312*264px 圓角15px的圓角矩形，拉出參考線找到矩形中點(diǎn)，運(yùn)用鋼筆工具在中點(diǎn)添加錨點(diǎn)

步驟16：

用直接選擇工具選擇中點(diǎn)錨點(diǎn)向內(nèi)部收縮，得到以下圖形，命名為【內(nèi)框-3】

步驟17：

為【內(nèi)框-3】添加雜色及圖層樣式

漸變疊加 #545454-#131214

步驟18：

復(fù)制一層【內(nèi)框-3】，置于內(nèi)框-3圖層下方，清除圖層樣式，添加顏色疊加和高斯模糊，命名為【內(nèi)框-3陰影】

可以用蒙版將上方陰影適當(dāng)遮蓋

步驟19：

再?gòu)?fù)制一層【內(nèi)框-3】，羽化1.0 ，正片疊底，不透明度10%，命名為【內(nèi)框-3陰影加強(qiáng)】

步驟20：

創(chuàng)建261*42px 圓角4px的圓角矩形，并添加光影，描邊#2e2e2e，命名為【內(nèi)框線條】

步驟21：

注意圖層順序，并編組為【內(nèi)框】

開始繪制指示框部分!!

步驟22：

新建一個(gè)圓角矩形，利用變形工具收縮下邊兩個(gè)角，以外框圖層創(chuàng)建剪切蒙版，命名為【指示框-下】

步驟23：

為【指示框-下】添加光影效果

步驟24：

復(fù)制【指示框-下】，利用變形工具收縮上邊兩個(gè)角，以外框圖層創(chuàng)建剪切蒙版，命名為【指示框-上】

步驟25：

為【指示框-上】添加光影效果

步驟26：

繪制一個(gè)12*12px的橢圓形，制作錄音孔

步驟27：

為錄音孔添加光影效果

步驟28：

把剛做好的錄音孔復(fù)制出8個(gè)，并排列順序，將所有錄音孔編組，命名為【錄音孔】

步驟29：

在【錄音孔】旁邊繪制一個(gè)28*28px的橢圓形，命名為【指示燈-外圓】

步驟30：

為【指示燈-外圓】添加光影效果

步驟31：

繪制一個(gè)22*22px的橢圓形，居中對(duì)齊指示燈-外圓，命名為【指示燈-內(nèi)圓】

步驟32：

為【指示燈-內(nèi)圓】添加光影效果

步驟33：

繪制一個(gè)16*16px的橢圓形，填充#ffffff，與【指示燈-內(nèi)圓】頂端對(duì)齊，命名為【指示燈-高光】

濾色，不透明度90%，為圖層疊加一層黑白蒙版做出漸隱效果

步驟34：

繪制一個(gè)6*4px的橢圓形，填充#ffffff，與【指示燈-內(nèi)圓】底部對(duì)齊，命名為【高光點(diǎn)】羽化1.5，濾色，不透明度85%，以指示燈-內(nèi)圓創(chuàng)建剪切蒙版

步驟35：

將【指示燈-外圓】、【指示燈-內(nèi)圓】、【指示燈-高光】、【高光點(diǎn)編組】，命名為【指示燈】

將【指示燈】、【錄音孔】、【指示框-上】、【指示框-下】編組，命名為【指示框】

步驟36：

在【內(nèi)框-1】圖層上方創(chuàng)建一個(gè)218*99px的橢圓形，以【內(nèi)框-1】圖層創(chuàng)建剪切蒙版

填充#b63e35，羽化3.0，顏色減淡 做出指示燈的高光

步驟37：

復(fù)制一層【外框-3】，清除圖層樣式，等比縮小，命名為【外框-3-陰影】

羽化30，柔光，不透明度46%，用蒙版調(diào)整一下陰影過渡

步驟38：

復(fù)制兩層【外框】圖層的路徑，移動(dòng)位置，找到合適的光影位置，運(yùn)用路徑混合工具-減去頂層形狀做出高光，命名為【外框-高光】

步驟39：

為【外框-高光】設(shè)置圖層樣式

羽化10，柔光，不透明度40%，用蒙版調(diào)出高光過渡

步驟40：

注意圖層順序，并編組為【外框】

開始繪制鏡頭部分!!

步驟41：

繪制一個(gè)214*214px的橢圓形，居中對(duì)齊內(nèi)框，命名為【鏡頭-1】

步驟42：

為【鏡頭-1】添加光影效果

步驟43：

繪制一個(gè)200*200px的橢圓形，居中，填充#000000，命名為【鏡頭-2】

添加漸變描邊

步驟44：

繪制一個(gè)196*196px的橢圓形，居中，命名為【鏡頭-3】

步驟45：

為【鏡頭-3】添加光影效果

步驟46：

創(chuàng)建一個(gè)矩形，轉(zhuǎn)化為智能圖形，命名為【鏡頭-拉絲】，盡量畫大一些，為其添加雜色50

步驟47：

再用濾鏡-模糊-徑向模糊為【鏡頭-拉絲】添加徑向模糊

對(duì)齊鏡頭中心，模式為疊加，不透明度60%，以【鏡頭-3】圖層創(chuàng)建剪切蒙版

步驟48：

創(chuàng)建一個(gè)158*158px的橢圓形，居中，填充#000000，命名為【鏡頭-4】

步驟49：

為【鏡頭-4】添加投影

步驟50：

創(chuàng)建一個(gè)156*156px的橢圓形，居中，命名為【鏡頭-5】

步驟51：

為【鏡頭-5】添加光影效果

步驟52：

創(chuàng)建一個(gè)155*155px的橢圓形，居中，填充#61b6cb，命名為【高光】

步驟53：

為【高光】添加外發(fā)光，建立蒙版擦除高光的感覺

步驟54：

創(chuàng)建一個(gè)142*142px的橢圓形，居中，命名為【鏡頭-6】

步驟55：

為【鏡頭-6】添加光影效果

步驟56：

復(fù)制【鏡頭-6】置于【鏡頭-6】下方，羽化1.2，命名為【陰影】

步驟57：

創(chuàng)建一個(gè)138*138px的橢圓形，居中，命名為【鏡頭-7】

步驟58：

為【鏡頭-7】添加光影效果，適當(dāng)移動(dòng)漸變疊加位置

步驟59：

創(chuàng)建一個(gè)134*134px的橢圓形，居中，命名為【鏡頭-8】

步驟60：

為【鏡頭-8】添加光影效果

步驟61：

創(chuàng)建一個(gè)126*126px的橢圓形，居中，填充#0f0f0f，命名為【鏡頭-9】

步驟62：

為【鏡頭-9】添加內(nèi)陰影

步驟63：

創(chuàng)建一個(gè)114*114px的橢圓形，居中，命名為【鏡頭-10】

步驟64：

為【鏡頭-10】添加光影效果，適當(dāng)移動(dòng)漸變疊加位置

步驟65：

創(chuàng)建一個(gè)110*110px的橢圓形，居中，命名為【鏡頭-11】

步驟66：

為【鏡頭-11】添加光影效果，適當(dāng)移動(dòng)漸變疊加位置

步驟67：

創(chuàng)建一個(gè)104*104px的橢圓型，居中，填充#0f0f0f，命名為【鏡頭-12】

步驟68：

為【鏡頭-12】添加光影效果

步驟69：

創(chuàng)建一個(gè)92*92px的橢圓型，適當(dāng)調(diào)整位置，填充#080808，命名為【鏡頭-13】

步驟70：

為【鏡頭-13】添加光影效果

步驟71：

創(chuàng)建一個(gè)81*81px的橢圓型，適當(dāng)調(diào)整位置，命名為【鏡頭-14】

步驟72：

為【鏡頭-14】添加光影效果，適當(dāng)移動(dòng)漸變疊加的位置

步驟73：

創(chuàng)建一個(gè)69*69px的橢圓型，適當(dāng)調(diào)整位置，命名為【鏡頭-15】

步驟74：

為【鏡頭-15】添加光影效果，適當(dāng)移動(dòng)漸變疊加的位置

步驟75：

創(chuàng)建一個(gè)59*59px的橢圓型，居中，命名為【鏡頭-16】

步驟76：

為【鏡頭-16】添加光影效果，適當(dāng)移動(dòng)漸變疊加的位置

步驟77：

復(fù)制【鏡頭-16】，轉(zhuǎn)換為智能圖形，添加雜色

步驟78：

創(chuàng)建一個(gè)六邊形，適當(dāng)調(diào)整大小，填充#1f1f1f，命名為【鏡頭-17】

步驟79：

為【鏡頭-17】添加光影效果，添加雜色

步驟80：

將所有鏡頭圖層合并，命名為【鏡頭】，注意圖層順序

開始制作光效!!

步驟81：

勾勒出高光形象，填充#ffffff，并添加高斯模糊

步驟82：

創(chuàng)建一個(gè)196*196px的橢圓形，模式為濾色，填充0%，并添加漸變疊加，與【鏡頭-3】對(duì)齊，命名為【青光】

步驟83：

復(fù)制【青光】，改變漸變疊加的混合模式，加強(qiáng)光效，并為兩個(gè)圖層添加蒙版，減弱中心光強(qiáng)

步驟84：

創(chuàng)建一個(gè)196*196px的橢圓形，模式為強(qiáng)光，不透明度22%，填充0%，并添加漸變疊加，與【鏡頭-3】對(duì)齊，命名為【紫光】

步驟85：

復(fù)制【紫光】，改變漸變疊加的混合模式，加強(qiáng)光效，并為兩個(gè)圖層添加蒙版，減弱中心光強(qiáng)

步驟86：

創(chuàng)建一個(gè)196*196px的橢圓形，模式為濾色，填充0%，并添加漸變疊加，與【鏡頭-3】對(duì)齊，命名為【紫光-范圍】

步驟87：

創(chuàng)建一個(gè)196*196px的橢圓形，填充0%，并添加漸變疊加，與【鏡頭-3】對(duì)齊，命名為【白光】

步驟88：

新建圖層，選擇柔邊畫筆，在圖上畫出右側(cè)紫色反光，模式為疊加，不透明度30%，以【白光】圖層選取創(chuàng)建剪切蒙版

步驟89：

用同樣的方法，在圖上畫出上部的紫色反光，模式為顏色，不透明度18%，以【白光】圖層選取創(chuàng)建剪切蒙版

步驟90：

創(chuàng)建一個(gè)123*85px的橢圓形，填充#ffffff，模式為疊加，不透明度75%，并建立蒙版做出漸隱效果，命名為【光效-高光】

步驟91：

為【光效-高光】添加光影效果

步驟92：

創(chuàng)建一個(gè)橢圓型，旋轉(zhuǎn)45°，填充白色，模式為疊加，命名為【高光-左1】

步驟93：

為【高光-左1】添加模糊效果

步驟94：

用同樣的方法，創(chuàng)建一個(gè)【高光-左2】，模糊效果參數(shù)相同，也可根據(jù)實(shí)際情況調(diào)整，并調(diào)整位置

步驟95：

用同樣的方法，創(chuàng)建一個(gè)【高光-左3】，模糊效果參數(shù)相同，也可根據(jù)實(shí)際情況調(diào)整，并調(diào)整位置，再?gòu)?fù)制一層【高光-左3】，為光效做增強(qiáng)

步驟96：

用同樣的方法，創(chuàng)建一個(gè)【高光-左4】，模糊效果參數(shù)相同，也可根據(jù)實(shí)際情況調(diào)整，并調(diào)整位置，再?gòu)?fù)制一層【高光-左4】，為光效做增強(qiáng)

步驟97：

用同樣的方法，創(chuàng)建一個(gè)【高光-右1】，模糊效果參數(shù)相同，也可根據(jù)實(shí)際情況調(diào)整，并調(diào)整位置

步驟98：

用同樣的方法，創(chuàng)建一個(gè)【高光-右1】，模糊效果參數(shù)相同，也可根據(jù)實(shí)際情況調(diào)整，并調(diào)整位置

開始制作背景部分!!

步驟99：

打開附件，運(yùn)用透視裁剪工具將圖標(biāo)裁剪出來

步驟100：

將導(dǎo)出的圖標(biāo)線稿摳出，去除小雜點(diǎn)，方法有很多，大家可以根據(jù)自己選擇，這里介紹運(yùn)用通道的方法

在通道里-復(fù)制一層藍(lán)色通道-調(diào)節(jié)色階(Ctrl+L) 使得明暗對(duì)比更加明顯 具體數(shù)值根據(jù)情況調(diào)節(jié)

右側(cè)過暗的話可以用減淡工具將顏色提亮，與左側(cè)一致

步驟101：

調(diào)整好后(一定要調(diào)好黑白明暗)，按ctrl選中藍(lán) 拷貝通道的縮略圖，選出選區(qū)并反選(ctrl+shift+i)

步驟102：

選擇RGB通道，回到圖層面板，新建圖層，并填充黑色 #000000，命名為背景線條

在背景線條圖層下，新建一個(gè)圖層，填充白色，命名為觀察層

步驟103：

在背景線條圖層創(chuàng)建一層蒙版，在蒙版上用黑色畫筆將圖上的 點(diǎn)點(diǎn) 黑色雜色等都涂掉，這一步一定要細(xì)心，不然后期背景會(huì)很難看

步驟104：

復(fù)制背景線條圖層，右鍵蒙版，選擇應(yīng)用圖層蒙版

步驟105：

分割背景線條圖層，分別創(chuàng)建出每行單獨(dú)的圖層，方便后期合成圖層

步驟106：

新建畫布50*50px 制作背景中的九宮格點(diǎn)點(diǎn) 畫筆選擇2px 點(diǎn)選五個(gè)點(diǎn) 做出以下形狀

編輯-定義圖案

步驟107：

新建畫布800*800px 制作背景層

編輯-填充 剛才的點(diǎn)點(diǎn)圖案

步驟108：

將摳出的圖標(biāo)線稿 按順序擺放

步驟109：

Ctrl+alt+shift+e 將下面的圖層蓋印 將得到的圖層按圖中示意 分成上 下兩部分

步驟110：

創(chuàng)建水平600px的參考線，將下部分壓縮

步驟111：

運(yùn)用變形工具制作出 L型的彎曲感，之后合并上下部分 命名為背景

步驟112：

創(chuàng)建畫布800*600px 分辨率72ppi的文檔，將背景拖入文檔

調(diào)整不透明度為72% ，命名為【背景-變形】

調(diào)整色彩平衡 藍(lán)色 +25%

步驟113：

搭建背景光影，做出L型的陰影效果，創(chuàng)建一個(gè)800*600px的矩形，不透明82%，填充0%，命名為【L型-陰影】

圖層樣式-漸變疊加

步驟114：

創(chuàng)建新圖層，用白色柔光畫筆給背景增加補(bǔ)光，讓整體光暗更協(xié)調(diào)，模式為柔光，不透明度20%，命名為【補(bǔ)光】

步驟115：

創(chuàng)建新圖層，用白色柔光畫筆給整體下部添加高光，模式為濾色，不透明度40%，命名為【下部補(bǔ)光】

開始制作主體投影效果!!

步驟116：

只選擇圖標(biāo)主體，ctrl+shift+alt+e蓋印整個(gè)主體，用作倒影

步驟117：

將蓋印出的主體置于【外框】下方，垂直翻轉(zhuǎn)，調(diào)整位置，模式為疊加，不透明度36%，用蒙版做出漸隱效果，現(xiàn)在做出倒影看起來比較實(shí)，我們使用高斯模糊，讓它虛化一點(diǎn)，命名為【倒影】

步驟118：

復(fù)制【外框】置于【外框】下方，下移4像素，不透明度85%，命名為【投影1】

添加投影，建立蒙版將不需要的地方擦去

步驟119：

創(chuàng)建一個(gè)橢圓形，羽化10px，模式為正片疊底，不透明度60%，命名為【陰影1】

步驟120：

創(chuàng)建一個(gè)橢圓形，羽化10px，模式為正片疊底，不透明度80%，命名為【陰影2】

步驟121：

創(chuàng)建一個(gè)橢圓形，羽化10px，模式為正片疊底，不透明度100%，命名為【陰影3】

步驟122：

復(fù)制【外框】置于【外框】下方，下移，不透明度70%，命名為【投影2】

添加顏色疊加，高斯模糊

步驟123：

為【投影2】建立蒙版將不需要的地方擦去

步驟124：

將主體投影部分進(jìn)行編組，命名為【投影】，注意圖層順序

開始制作整體光效部分!!

步驟125：

在【內(nèi)框】編組最上層創(chuàng)建兩個(gè)橢圓形，模式為柔光，不透明度50%，通透感不強(qiáng)的話可以繼續(xù)調(diào)整不透明度或者轉(zhuǎn)換為智能圖形再次設(shè)置模式為柔光，分別命名【左側(cè)高光】【右側(cè)高光】

步驟126：

為左右高光，添加動(dòng)感模糊，角度-45，距離50

步驟127：

創(chuàng)建蒙版，運(yùn)用黑遮白顯，讓光效更自然

步驟128：

在所有圖層最上面，創(chuàng)建新圖層，使用柔邊畫筆，顏色#f54836，涂出右側(cè)紅色高光，模式為疊加，不透明度15%，并創(chuàng)建蒙版，僅顯示外框與內(nèi)框之間的范圍

步驟129：

運(yùn)用同樣的方法，創(chuàng)建左側(cè)藍(lán)色高光，顏色#71cbff，模式為疊加，不透明度15%，并創(chuàng)建蒙版，僅顯示外框與內(nèi)框之間的范圍

步驟130：

蓋印icon主體，模式為柔光，不透明度34%

步驟131：

為icon主體整體添加暗部，使得立體感更強(qiáng)，模式為疊加，不透明度73%

至此，我們整個(gè)icon圖標(biāo)就完成啦，最后再看一次效果圖~~