PS iPhone 4s語音助理Siri圖標(biāo)(4)

"小圖標(biāo)，大智慧" 喬布斯特意為siri圖標(biāo)注冊(cè)了設(shè)計(jì)專利。本教程詳細(xì)講解了矢量形狀工具結(jié)合蒙版的使用和技巧，這是在制作圖標(biāo)時(shí)經(jīng)常要用到的。為讓大家能看到更多的細(xì)節(jié)，我把圖標(biāo)做的很大很大 ：）

版權(quán)所有，

轉(zhuǎn)載問Aman

教程詳情

程序:Adobe Photoshop CS6

難度:中級(jí)

預(yù)計(jì)完成時(shí)間:60 分鐘

最終效果圖

以下是動(dòng)畫效果

具體的繪制步驟如下：

第一步 新建文檔 按ctrl + N，新建一個(gè)文檔，大小 1024x1024

第二步 繪制大圓 1、選擇橢圓工具（U），繪制一個(gè)900x900像素的大圓，并將其居中顯示； 2、雙擊"大圓"打開圖層樣式，選擇"漸變疊加"，"描邊" 參數(shù)如下圖

第三步 繪制中圓 1、復(fù)制圖層"大圓"，命名為"中圓"，設(shè)置形狀的填充色為 #292929， 按ctrl+T將它大小縮小為 836x836 像素 2、雙擊"中圓"打開圖層樣式，去掉"漸變疊加"和"描邊"，選擇"斜面浮雕" "內(nèi)陰影"，參數(shù)如下圖

第四步 繪制小圓 1、復(fù)制圖層"大圓"，命名為"小圓"，按ctrl+T將它大小縮小為 778x778 像素 2、雙擊"小圓"打開圖層樣式，保持"漸變疊加"不變，去掉"描邊"，然后添加"斜面浮雕" "投影"樣式，參數(shù)如下圖

第五步 添加金屬質(zhì)感的雜色 1、點(diǎn)擊圖層面板下方的"新建圖層"按鈕，新建一個(gè)圖層，命名為"金屬雜色"；然后按住ctrl鍵，點(diǎn)擊"大圓"縮略圖獲得大圓選區(qū)；然后填充顏色 #666666 2、添加雜色，點(diǎn)擊"濾鏡 -> 雜色 -> 添加雜色"，輸入數(shù)值 30，將圖層不透明度改 8%，具體參數(shù)如下圖所示

第六步 添加金屬質(zhì)感的紋路 這一步要用Adobe illustrator軟件來制作金屬紋路，很簡單的，不會(huì)AI的同學(xué)可以按教程一下下點(diǎn)，當(dāng)然你也可以跳過這一步；還可以點(diǎn)擊這里下載 金屬紋路.ai 1、打開AI，新建一個(gè)文檔 大小 1024x1024；選擇橢圓工具（L），繪制一個(gè)900x900像素的圓；在外觀面板中設(shè)置填充色為空，描邊為黑色，大小0.25pt 2、按ctrl+C，再ctrl+F，就復(fù)制了一個(gè)圓圈；然后將圓圈縮小到 32x32像素 3、同時(shí)選擇兩個(gè)圓圈，點(diǎn)擊"對(duì)象->混合->混合選項(xiàng)"，在彈出的對(duì)話框中選擇"指定步數(shù)"，輸了值130，然后點(diǎn)擊"確定"按鈕 4、繼續(xù)點(diǎn)擊"對(duì)象->混合->建立"或按快捷鍵 alt+ctrl+B，此時(shí)就建立等間距的環(huán)形紋理，就像不銹鋼器具上的紋理 ok，金屬紋路做好了，很容易的，把它拖到ps中吧

第七步 調(diào)整金屬紋理區(qū)域 1、把上一步的金屬紋路拖到ps中，命名為"金屬紋路"，并將圖層不透明度設(shè)為 25% 2、選擇圖層"金屬雜色"和"金屬紋路"，按ctrl+G 編組，并命名為"紋理" 3、接下來要用蒙版把不需要紋理的區(qū)域遮蓋掉（即圖中黑色圓環(huán)區(qū)域）；首先我們先要獲得圓環(huán)的選區(qū)，按住ctrl鍵，點(diǎn)擊"中圓"，再同時(shí)按住ctrl+alt鍵，點(diǎn)擊"小圓"，則獲取到圓環(huán)選區(qū) 4、選擇選區(qū)工具（M），右鍵點(diǎn)擊圓環(huán)選區(qū)，選擇"選擇反向"，然后點(diǎn)擊圖層面板下方的"添加圖層蒙版"按鈕這一步文字說明比較多，是為了讓初學(xué)能夠明白，操作很簡單用幾個(gè)快捷鍵就完成；

第八步 創(chuàng)建麥克風(fēng)架子形狀 這一步要拉出參考線，才能精確繪制形狀 1、選擇橢圓工具（U），繪制一個(gè)320x320像素的大圓； 2、選擇橢圓工具（U），再選擇選項(xiàng)欄中的"減去頂層形狀"，繪制一個(gè)258x258的圓；這樣就繪制出一個(gè)圓環(huán)了 3、選擇矩形工具（U），再選擇選項(xiàng)欄中的"減去頂層形狀"，任意大小，目的是減去上半部的圓環(huán) 4、選擇矩形工具（U），繼續(xù)繪制兩個(gè)左右方形， 大小為 31x105像素，用相同方法繪制剩余的形狀 5、將最后的形成的形狀命名為"架子"

第九步 架子的樣式 1、將架子的形狀填充色改為 #20202c 2、雙擊圖層"架子"，設(shè)置"斜面和浮雕"，"內(nèi)陰影"樣式，參數(shù)如下圖所示

第十步 麥克風(fēng)的外形 接下來我們要制作siri核心部分麥克風(fēng) 1、選擇圓角矩形工具（U），繪制一個(gè)大小190x410像素，半徑100像素的圓角矩形，填充顏色為 #20202c，并命名為"麥克風(fēng)外形" 2、雙擊圖層，添加"斜面和浮雕"，"描邊"樣式，參數(shù)如下圖

第十一步 麥克風(fēng)的內(nèi)形 1、選擇圓角矩形工具（U），繪制一個(gè)大小166x386像素，半徑100像素的圓角矩形，填充顏色為 #1B1227，并命名為"麥克風(fēng)內(nèi)形" 2、雙擊圖層，添加"斜面和浮雕"，"外發(fā)光"樣式，參數(shù)如下圖

第十二步 麥克風(fēng)的網(wǎng)洞 1、選擇橢圓工具（U），繪制一個(gè)20x20像素的圓形，顏色填充為#000000， 命名為"網(wǎng)洞"，并添加"斜面和浮雕"樣式，參數(shù)如下 2、右鍵點(diǎn)擊"網(wǎng)洞"圖層，將它轉(zhuǎn)換成智能對(duì)象；然后按ctrl+G編組，命名為"麥克風(fēng)網(wǎng)洞"； 3、復(fù)制多個(gè)"網(wǎng)洞"將它們均勻的分布在麥克風(fēng)內(nèi)形中

第十三步 錄音狀態(tài)--光點(diǎn) 1、選擇橢圓工具（U），繪制一個(gè)15x15像素的圓形，顏色填充為#ffffff， 命名為"光點(diǎn)"，并轉(zhuǎn)換為智能對(duì)象 2、復(fù)制多個(gè)"光點(diǎn)"將它們均勻的分布網(wǎng)洞上；"光點(diǎn)"大小可以做細(xì)微調(diào)整；按ctrl+G將這些光點(diǎn)編組，命名為"光點(diǎn)集" 3、選擇所有"光點(diǎn)"將它們轉(zhuǎn)換智能濾鏡 "濾鏡 -> 轉(zhuǎn)換為智能濾鏡"，然后點(diǎn)擊"濾鏡 -> 模糊 -> 高斯模糊"，輸入值2.5 4、繼續(xù)添加"外發(fā)光"圖層樣式，參數(shù)如下

第十四步 錄音狀態(tài)--變色 1、復(fù)制"麥克風(fēng)內(nèi)形"，命名為"錄音狀態(tài)--變色"，清除圖層樣式，將形狀填充改為"漸變",并設(shè)置描邊屬性，選項(xiàng)欄的設(shè)置如下，非cs6版本的同學(xué)可以跳過描邊設(shè)置 2、選擇橢圓工具（U），繪制一個(gè)圓在"錄音狀態(tài)--變色"的上方，命名為"強(qiáng)光"；將形狀填充色為漸變，徑向漸變，顏色從白到透明，并圖層混合模式改為"濾色"； 3、按住alt鍵，點(diǎn)擊"錄音狀態(tài)--變色"與"強(qiáng)光"圖層之間

第十五步 添加蒙版，處理細(xì)節(jié) 1、分別在"錄音狀態(tài)--變色"，"麥克風(fēng)網(wǎng)洞"，"光點(diǎn)集"添加蒙版 2、用畫筆工具，顏色 #000000 ，在分別在蒙版上涂抹，涂抹位置在下圖中標(biāo)示考驗(yàn)?zāi)隳托牡臅r(shí)候到了，圖標(biāo)品質(zhì)在于你對(duì)細(xì)節(jié)的處理！

第十六步 添加高光面 1、復(fù)制"麥克風(fēng)內(nèi)形"，命名為"高光面"，按ctrl+shift+]將圖層順序移到最頂層；并清除圖層樣式 2、將形狀填充色改為白色 #ffffff,把不透明度改為 43% 3、用鋼筆工具（P），在高光面上添加節(jié)點(diǎn)和刪除節(jié)點(diǎn)，如圖所示 4、雙擊"網(wǎng)洞"智能對(duì)象，將"斜面和浮雕"中的"陰影模式"的不透明度為 50%

第十七步 制作光圈 1、點(diǎn)擊圖層面板下方的"創(chuàng)建新組"按鈕，建立一個(gè)編組，命名為"光圈"，并在這個(gè)編組中新建一個(gè)圖層，命名為"光圈外" 2、按住ctrl鍵，點(diǎn)擊圖層"紋理"上的蒙版，獲得選區(qū)，然后選擇選區(qū)工具（M），右鍵點(diǎn)擊選擇"選擇反向"，然后填充顏色 #ac33d0 3、雙擊圖層"光圈外"，添加"外發(fā)光"樣式 4、新建一個(gè)圖層，命名為"光圈內(nèi)"，按住ctrl鍵，點(diǎn)擊"光圈外"獲得選區(qū)；然后填充白色 #ffffff；接著雙擊圖層添加"內(nèi)發(fā)光"樣式，參數(shù)如圖所示 5、在新建一個(gè)圖層，命名為"光圈高光"，填充白色，添加"外發(fā)光"樣式

第十八步 光圈細(xì)節(jié)處理 1、分別在圖層"光圈外"，"光圈內(nèi)"，"光圈高光"上添加蒙版，用畫筆工具（B），黑色 涂抹細(xì)節(jié)，涂抹位置如下圖所示 2、新建一個(gè)圖層，命名為"光點(diǎn)"，圖層不透明度 85%，用畫筆工具（B） 顏色#ffffff 硬度0%，在光圈的起始位置點(diǎn)擊。大功告成，Siri圖標(biāo)做好了，工具很簡單，效果不簡單：） 接下來我們來制作siri圖標(biāo)的動(dòng)畫部分。

siri動(dòng)畫效果 光圈轉(zhuǎn)動(dòng)

第十九步 調(diào)整和合并圖層 1、除"光圈"編組外，將其他圖層編為一組，命名為"siri" 2、隱藏"背景"和"siri"，選擇"光圈"，按ctrl+alt+shift+E，然后把蓋印后的圖層命名為"運(yùn)動(dòng)光圈" 3、新建一個(gè)圖層，命名為"同心圓"，按住ctrl鍵，點(diǎn)擊"大圓"，獲得選區(qū)，然后填充白色；然后將圖層不透明度1% 4、同時(shí)選擇"同心圓"和"運(yùn)動(dòng)光圈"，按ctrl+E 合并圖層，然后將它轉(zhuǎn)換成智能對(duì)象 5、復(fù)制編組"siri"，按ctrl+E 合并圖層提示：同心圓的目的是讓光圈用大圓同心轉(zhuǎn)動(dòng)，光圈轉(zhuǎn)動(dòng)就不會(huì)偏移了，這個(gè)一步很重要

第二十步 在時(shí)間軸上做光圈轉(zhuǎn)動(dòng) 1、cs6版本的同學(xué)，可以在"窗口 -> 時(shí)間軸"中打開面板;然后點(diǎn)擊"創(chuàng)建視頻時(shí)間軸" 2、將時(shí)間刻度上的結(jié)束手柄拖到02：00f位置 3、在時(shí)間軸上，點(diǎn)擊"運(yùn)動(dòng)光圈"的"變換"按鈕，設(shè)置起始位置 4、在時(shí)間軸上，拖到時(shí)間手柄到01:00,然后點(diǎn)擊"變換"按鈕；接著按ctrl+T，將光圈轉(zhuǎn)動(dòng)160° 5、在時(shí)間軸上，拖到時(shí)間手柄到01:28,然后點(diǎn)擊"變換"按鈕；接著按ctrl+T，將光圈轉(zhuǎn)動(dòng)到-20° 6、最后按ctrl+alt+shift+S，導(dǎo)出動(dòng)畫gif，在彈出對(duì)話框中的動(dòng)畫循環(huán)選項(xiàng)為"永遠(yuǎn)"

最終效果 本教程到這里結(jié)束了，耐心的按教程做，相信你會(huì)有收獲的 ：）

siri大圖