"小圖標,大智慧" 喬布斯特意為siri圖標注冊了設計專利。本教程詳細講解了矢量形狀工具結合蒙版的使用和技巧,這是在制作圖標時經常要用到的。為讓大家能看到更多的細節,我把圖標做的很大很大 :)
版權所有,
轉載問Aman
教程詳情
程序: Adobe Photoshop CS6
難度:中級
預計完成時間: 60 分鐘
最終效果圖
以下是動畫效果
具體的繪制步驟如下:
第一步 新建文檔 按ctrl + N,新建一個文檔,大小 1024x1024
第二步 繪制大圓 1、選擇橢圓工具(U),繪制一個900x900像素的大圓,並將其居中顯示; 2、雙擊"大圓"打開圖層樣式,選擇"漸變疊加","描邊" 參數如下圖
第三步 繪制中圓 1、復制圖層"大圓",命名為"中圓",設置形狀的填充色為 #292929, 按ctrl+T將它大小縮小為 836x836 像素 2、雙擊"中圓"打開圖層樣式,去掉"漸變疊加"和"描邊",選擇"斜面浮雕" "內陰影",參數如下圖
第四步 繪制小圓 1、復制圖層"大圓",命名為"小圓",按ctrl+T將它大小縮小為 778x778 像素 2、雙擊"小圓"打開圖層樣式,保持"漸變疊加"不變,去掉"描邊",然後添加"斜面浮雕" "投影"樣式,參數如下圖
第五步 添加金屬質感的雜色 1、點擊圖層面板下方的"新建圖層"按鈕,新建一個圖層,命名為"金屬雜色";然後按住ctrl鍵,點擊"大圓"縮略圖獲得大圓選區;然後填充顏色 #666666 2、添加雜色,點擊"濾鏡 -> 雜色 -> 添加雜色",輸入數值 30,將圖層不透明度改 8%,具體參數如下圖所示
第六步 添加金屬質感的紋路 這一步要用Adobe illustrator軟件來制作金屬紋路,很簡單的,不會AI的同學可以按教程一下下點,當然你也可以跳過這一步;還可以點擊這裡下載 金屬紋路.ai 1、打開AI,新建一個文檔 大小 1024x1024;選擇橢圓工具(L),繪制一個900x900像素的圓;在外觀面板中設置填充色為空,描邊為黑色,大小0.25pt 2、按ctrl+C,再ctrl+F,就復制了一個圓圈;然後將圓圈縮小到 32x32像素 3、同時選擇兩個圓圈,點擊"對象->混合->混合選項",在彈出的對話框中選擇"指定步數",輸了值130,然後點擊"確定"按鈕 4、繼續點擊"對象->混合->建立"或按快捷鍵 alt+ctrl+B,此時就建立等間距的環形紋理,就像不銹鋼器具上的紋理 ok,金屬紋路做好了,很容易的,把它拖到ps中吧
第七步 調整金屬紋理區域 1、把上一步的金屬紋路拖到ps中,命名為"金屬紋路",並將圖層不透明度設為 25% 2、選擇圖層"金屬雜色"和"金屬紋路",按ctrl+G 編組,並命名為"紋理" 3、接下來要用蒙版把不需要紋理的區域遮蓋掉(即圖中黑色圓環區域);首先我們先要獲得圓環的選區,按住ctrl鍵,點擊"中圓",再同時按住 ctrl+alt鍵,點擊"小圓",則獲取到圓環選區 4、選擇選區工具(M),右鍵點擊圓環選區,選擇"選擇反向",然後點擊圖層面板下方的"添加圖層蒙版"按鈕這一步文字說明比較多,是為了讓初學能夠明白,操作很簡單用幾個快捷鍵就完成;
第八步 創建麥克風架子形狀 這一步要拉出參考線,才能精確繪制形狀 1、選擇橢圓工具(U),繪制一個320x320像素的大圓; 2、選擇橢圓工具(U),再選擇選項欄中的"減去頂層形狀",繪制一個258x258的圓;這樣就繪制出一個圓環了 3、選擇矩形工具(U),再選擇選項欄中的"減去頂層形狀",任意大小,目的是減去上半部的圓環 4、選擇矩形工具(U),繼續繪制兩個左右方形, 大小為 31x105像素,用相同方法繪制剩余的形狀 5、將最後的形成的形狀命名為"架子"
第九步 架子的樣式 1、將架子的形狀填充色改為 #20202c 2、雙擊圖層"架子",設置"斜面和浮雕","內陰影"樣式,參數如下圖所示
第十步 麥克風的外形 接下來我們要制作siri核心部分麥克風 1、選擇圓角矩形工具(U),繪制一個大小190x410像素,半徑100像素的圓角矩形,填充顏色為 #20202c,並命名為"麥克風外形" 2、雙擊圖層,添加"斜面和浮雕","描邊"樣式,參數如下圖
第十一步 麥克風的內形 1、選擇圓角矩形工具(U),繪制一個大小166x386像素,半徑100像素的圓角矩形,填充顏色為 #1B1227,並命名為"麥克風內形" 2、雙擊圖層,添加"斜面和浮雕","外發光"樣式,參數如下圖
第十二步 麥克風的網洞 1、選擇橢圓工具(U),繪制一個20x20像素的圓形,顏色填充為#000000, 命名為"網洞",並添加"斜面和浮雕"樣式,參數如下 2、右鍵點擊"網洞"圖層,將它轉換成智能對象;然後按ctrl+G編組,命名為"麥克風網洞"; 3、復制多個"網洞"將它們均勻的分布在麥克風內形中
第十三步 錄音狀態--光點 1、選擇橢圓工具(U),繪制一個15x15像素的圓形,顏色填充為#ffffff, 命名為"光點",並轉換為智能對象 2、復制多個"光點"將它們均勻的分布網洞上;"光點"大小可以做細微調整;按ctrl+G將這些光點編組,命名為"光點集" 3、選擇所有"光點"將它們轉換智能濾鏡 "濾鏡 -> 轉換為智能濾鏡",然後點擊"濾鏡 -> 模糊 -> 高斯模糊",輸入值2.5 4、繼續添加"外發光"圖層樣式,參數如下
第十四步 錄音狀態--變色 1、復制"麥克風內形",命名為"錄音狀態--變色",清除圖層樣式,將形狀填充改為"漸變",並設置描邊屬性,選項欄的設置如下,非cs6版本的同學可以跳過描邊設置 2、選擇橢圓工具(U),繪制一個圓在"錄音狀態--變色"的上方,命名為"強光";將形狀填充色為漸變,徑向漸變,顏色從白到透明,並圖層混合模式改為"濾色"; 3、按住alt鍵,點擊"錄音狀態--變色"與"強光"圖層之間
第十五步 添加蒙版,處理細節 1、分別在"錄音狀態--變色","麥克風網洞","光點集"添加蒙版 2、用畫筆工具,顏色 #000000 ,在分別在蒙版上塗抹,塗抹位置在下圖中標示考驗你耐心的時候到了,圖標品質在於你對細節的處理!
第十六步 添加高光面 1、復制"麥克風內形",