如何擬合製作一個 Apple Aperture 圖標？

12-05

特別是多層鏡片的鍍膜和鏡片透明發射光暈效果，及磨砂塑料部分的表現

Source: AppIcon.icns (Copyright ? Apple Inc. All rights reserved.)

已完結 2014.07.25

！！！WARNING：超多圖預警，流量黨請選擇性繞行！！！

==============================================================
有題目的文章好做！

畫鏡頭不難，無非就是「大圈套小圈，漸變疊漸變」。「擬合」一個鏡頭更容易，最終效果擺在那，照葫蘆畫瓢就是了，需要的就是耐心。這樣「擬合」的多了自己也就會畫了。

既然題主問「多層鏡片的鍍膜和鏡片透明發射光暈效果，及磨砂塑料部分的表現」，那旁的廢話就不說了，先大概介紹一下。
----------------------------------------------------------------------------------------------------
「鏡片的光暈」其實就是各種漸變和半透圖層疊在一塊。

大概拆解一下，就是「底層的塑料殼」加「半透疊加彩虹漸變」加「各種白色半透高光」再加「淺淺的鏡頭光暈」。
----------------------------------------------------------------------------------------------------
「磨砂塑料質感」確實可以通過疊加「雜色」層來獲得，但是 Aperture 中的雜色層看起來要講究一些，應該不是用「添加雜色」濾鏡得到的。如下圖。

==============================================================

大大說了，「空談誤國，實幹興邦」。

我忙裡偷閒「擬合」了一下，沒做完，就當是預告片吧（最關鍵的鏡頭部分完全沒做呢）。
註：顏色都是我自己找的，不一定準。

先放效果對比圖（左邊是我畫的）

----------------------------------- STEP 1 最外層的塑料殼 ------------------------------------

一個角度漸變直接把底色確定。
四個顏色#46454c、#23262b、#667380、#333740

外面用 20% ~ 40% 的灰色角度漸變，正片疊底。
裡面用 50% 的灰正片疊底。

找了這麼個醜陋的材質。

經過去色、反相、曲線、閾值、縮放等工序調處來這麼兩張更醜陋的材質

把這兩張圖用顏色減淡模式疊上，不透明度分別是10%（上）50%（下）

外圈就這麼著吧

----------------------------------- STEP 2 中間那層塑料殼 ------------------------------------

角度漸變，顏色是#222226、#2e3033

內陰影：純黑、正片疊底、不透明度75%、角度-45、距離20、大小30

外面疊個20%的圈，正片疊底

然後開始畫那一層一層的東西，這麼一個黑色半月牙，羽化0.5

右下角的白色半月牙，羽化0.5，不透明度30%

為了讓兩個月牙達到這種效果，需要仔細調整兩個月牙內外圓的大小
我的數值是（圖標大小1024*1024，圖標圓形區域782*782）：
黑：外圓直徑728、內圓直徑725、內圓向下偏移3px向右偏移2px
白：外圓直徑730、內圓直徑730、內圓向上偏移2px向左偏移1px
這組數值不好（為什麼不好就不費勁解釋了），但是也能出效果……

用類似的關係做出全部五層

為了加強層次，我又疊了這麼一層圓環套圓環（稍有偏移）的投影，黑色，不透明度40%

覆個黑圓看看效果，在最裡面用白色半月牙加個邊緣高光
好像少了點明暗效果。

在固有色的上一層：羽化25的黑圓，加一個羽化8的矢量蒙版，不透明度80%

再疊一個羽化40的#5d5c66圓，60%透明。
然後我發現顏色還是不大對，又在這層加了個內發光：#a3a3cc，大小160，濾色，不透明度75%。

然後放在一塊看，就有了這個效果。

----------------------------------- STEP 3 裡面層塑料殼 ------------------------------------

還是先漸變，#222426（0%）、#090a0d（28%）、#2e3133（50%）、#090a0d（72%），120°。

外邊疊一層黑邊

靠里再加一圈，30%-60%灰正片疊底

這個黑圈要加1像素的羽化（我就是為了要那個羽化的邊…有點多此一舉…）

添加雜色，用曲線稍微調一下得到這麼個材質

柔光，不透明度10%。

這一步完成就是這樣啦

----------------------------------- STEP 4 鏡頭內部的塑料 ------------------------------------

這部分不寫這麼詳細了，太長了……
這部分的顏色都沒有色調，因為後面要往上蓋彩虹漸變。

一個白色半月牙，羽化3。
為了控制透明度，我用白色透明度漸變，左上到右下20%（50%位置）~60%（100%位置）

（從這一步開始，圓心要向左偏2px 向上偏4px，我也不知道為啥……很奇怪）
加一個中間亮，內外邊緣暗的圓環。
這塊我是分兩層做的，這樣比較好控制：
底下一層用50%的灰，加上浮雕（0%高光）和內陰影做一下大概的體積。
上面一層是一個白色半月牙高光。

往裡再加一個中間亮，邊緣暗的圓環。
同樣是用浮雕（0%高光）和內陰影，這個不加高光。底色是15%的深灰。

然後再往裡，這個好做，一層一層套圈。
最外一圈是5%深灰，依次往裡6%、7%……10%。最裡面純黑。
然後給每一層（除了最外層）都加一個陰影，不用太明顯，不透明度25%，大小10。
最後給這些圈統一加上「漸變疊加」，120°角度漸變，正片疊底，100%-60%-100%-40%-100%的灰。

與上一步類似，再往裡套圈。
這三圈顏色從外到里 4%、5%、8%的深灰。

繼續往裡畫。這部分比較微妙，靈活運用。
由外及內，10%灰（加陰影）、11%（加陰影）、12%（小黑洞洞周圍的那一2px寬的小圓環）、8%（小黑洞洞，稍微加個內陰影）

在裡面區域用雜色增加一下質感。
柔光，不透明度7%就可以。

現在的效果就是這樣啦（點開看大圖~）

----------------------------------- STEP 5 大結局：鏡頭光暈 ------------------------------------

這部分的顏色是要隨著整體效果不斷調整的，以實際情況為準。

用徑向漸變修正一下內部的對比度

「疊加」上一層這樣的彩虹漸變（顏色可以根據效果適當調整）
要稍微加上10px~20px的模糊，讓中間沒有那麼銳利。

在中間疊一層白色的圓，比彩圈要小，加一些羽化，讓邊緣不那麼明顯。

加右下角的反光，這一層是在彩虹漸變的下面。
我分了三層做。
最下面一層是不透明度10%左右的白色。
中間一層是無填充，用內陰影把右下角提亮。
最上面一層是用白色填充的形狀加羽化，局部提亮。

按原圖，用形狀和羽化做出所有反光光斑，偶爾還會用無填充的內發光來提升效果。
圖層位置見上上圖。

然後按照原圖效果，把需要增強的的光斑用白色形狀增強。

用黑色加鏡頭光暈增強效果。
我加了兩層，用矢量蒙版控制效果。

嫌效果不夠，我又畫了些圓來增強。

最後加一層薄薄的雲彩，顏色減淡，不透明度10%，讓鏡頭的反光稍微複雜一點

最後加上文字（可以用Ai的路徑文字，加內陰影得到。當然我是扣出來的……），畫上陰影。大功告成~
========================================================
完~

在我看來，繪製圖標時應該：

做好圖層管理；
盡量使用矢量；
盡量使用原創素材；

＝＝＝＝＝＝＝＝＝＝

＃本文操作基於 Adobe Photoshop CC 2013 版，其他版本不保證能實現以下所有效果；

＃文末有 PSD 原文件的下載地址，一眾陰影高光數值及色值均可在原文件中直接獲取，文中不再詳盡。

【準備】

確定光源角度。原圖標 130? 左右，為了方便，我設定為 135?；
建立分組。預計到會有很多圖層，所以先建組再繪圖，一級分組為「鏡片」和「鏡筒」；
確定圓心坐標，繪製縱橫參考線；

【開始】

1、繪製塑料圈

用橢圓工具＋Shift 繪製兩個圓形，圖層樣式－漸變疊加（樣式選角度）和內發光（黑色），效果如下（點擊可看大圖）：

2、添加粗塑料顆粒

用矩形工具建立覆蓋全畫板的純黑色矩形，轉換成智能對象（為了在矢量狀態下應用濾鏡），菜單欄－濾鏡－雜色－添加雜色，高斯模糊－做兩次進一步銳化（Command/Control＋Shift 可重複最近一次濾鏡操作），將該圖層混合模式改為「變亮」，不透明度 5%，具體參數及效果圖如下（點擊可看大圖）：

3、添加文字

選中橢圓工具，在菜單欄下方的工具選項欄里選擇路徑，繪製圓形路徑；選擇文字工具，在路徑上指針會變為

此時點擊即可在路徑上輸入文字。完成後，設置文本的圖層樣式：浮雕和投影，效果如下（點擊可看大圖）：

以上便是鏡筒的前端，接下來是中端。

4、繪製塑料圈層

這部分麻煩在要複製多次並調整大小，但實現擬物並不困難，主要是圖層效果的應用：內陰影和內發光來模擬塑料圈間的層級效果，投影（白色）來模擬塑料圈邊緣的高光，具體設置都可以在文末原文件里查到，效果如下（點擊可看大圖）：

5、繪製鏡片圈塑料和鏡片組

這一圈塑料顆粒很細膩，不再需要高斯模糊和銳化。矩形工具繪製覆蓋全畫布的黑色矩形－轉化為智能對象－濾鏡－雜色－添加雜色（數量 100%），混合模式調整為柔光，不透明度改為 10%即可，其他塑料葉片做法同步驟四相同。效果如下（點擊可看大圖）：

6、繪製鍍膜光暈

這一部分也完全可以矢量實現，依然是圖層好基友——圖層樣式的表演時間。比如以下三種鏡頭光效的實現分別靠：

內陰影、投影
內陰影、內發光、外發光、投影
內發光、外發光

（點擊可看大圖，具體設置詳見文末 PSD 原文件）

其他光暈無非就是橢圓和圓形在不同大小、不同羽化、不同透明度下的組合了，

如開頭提到，所有的光照角度均為 135?，所以橢圓形也均旋轉 135?；
推薦鏡片邊緣用大橢圓、中間小橢圓；
羽化：菜單欄－窗口－屬性，調出屬性窗口，選擇任意橢圓形，即可在屬性窗口設置羽化，如下圖：

為了看起來更有玻璃質感，我在所有光暈之上添加了一個白色空心圖層，如下圖左一，以及所有光暈的參考效果（點擊可看大圖）：

7、鍍膜上色

這其實是最簡單的一步了。還是老規矩，好基友圖層樣式。用橢圓工具繪製圓形，疊加彩色漸變（Photoshop 默認彩色即可），如下圖（點擊可看大圖）：

但是遇到一個問題，我們需要更改這個彩色漸變的混合模式，來對我們之前的光暈上色。但是混合模式只針對圖層本身，對圖層樣式不起作用，這裡就需要轉換成智能對象，把圖層樣式和圖層「合體」，這樣把混合模式改為顏色，調整不透明度，大功告成啦！

＝＝＝＝＝＝＝＝＝＝

以上方法基本為全矢量繪製，主要是對圖層樣式和智能對象的運用，希望對設計濕們有所幫助。

PSD 原文件下載地址：Aperture-icon.psd

轉載請保留署名和出處。

更新。。。→_→看他們都那麼認真，只好自己也做一個了。。。

還是那樣一層一層疊。用的是PS。
重點說一下就是疊加漸變。。。我發現我一直在干這個。。。

蘋果的這個圖標我沒做過，但是我做過類似的鏡頭圖標。
圖是手機照片所以不大清楚，其實也是有彩色光暈的，是紫色到綠色，做的不明顯，在這張照片里基本看不出來。。。
軟體是AI。
彩色光暈效果可以通過疊加不同顏色的低不透明的扇形來實現。
鏡頭反射也可以通過疊加白色透明層來實現。
不過說一下，鏡頭的邊緣我並沒有用磨砂的效果，而是用的同心圓紋路，就是在漸變和疊加的基礎上加上比較密集的圓形描邊。
至於這個磨砂質感，我只知道可以在PS里通過添加雜色來實現。

照著做一個基本上沒什麼多大難度。
但要是自己憑空做一個就比較麻煩了。
首先你要在真實和抽象裡面找一個平衡點。
仔細觀察鏡頭，就會發現鏡頭的反射光線其實是很多層的，並不像這個圖標只是表面的一層。諸如此類的很多。
然後就是自行處理了，鏡頭的光暈確實很漂亮，但是基本上不會有這麼誇張的什麼顏色都有的。
但是這個圖標就是很好看。
沒必要做的多麼逼真，只要用戶或者觀看者能看出來這是個相機鏡頭就可以了。在保證能看出來的前提下，盡量做的好看一點。

畫了一個通宵，終於完成了，但還是有瑕疵尤其是玻璃部分，光斑處理得不好，哈哈~

1、盡量運用矢量工具進行繪製（方便適應不同尺寸）
2、盡量用圖層樣式去實現效果（所見即所得調試效果）
3、為圖層命名，切勿合層（方便更新、修改、迭代）
4、好的工作方式只能錦上添花，技法是基礎，需牢固，在配合好的工作習慣，歸總為經驗。