PS圖標(biāo)教程:萌萌噠黑膠唱片機圖標(biāo)制作分享

編按:Charlotte Chen作者發(fā)表的文章都是一些很有風(fēng)格的圖標(biāo)雖然說是小小的一個,但用處卻不小。這樣的圖標(biāo)隨便放在那里都是一個很好看的配件。而且如果你跟著教程做一遍真的會收獲很多,特別是經(jīng)驗還不是很足的同學(xué)們。我們先一起來看看吧!
寫實風(fēng)格圖標(biāo)作為一個歷史悠久的風(fēng)格,自喬幫主的iPhone4問世便火遍設(shè)計界,計師們刻畫了一系列膾炙人口的精美作品。比如追波上dribbble的設(shè)計大神Paco,下圖截取他早年的部分作品,放在扁平化圖標(biāo)大行其道的今日,依舊令人嘖嘖稱道。而寫實圖標(biāo)的練習(xí),不僅可以大幅度提升我們對PS這款工具的熟練程度,對于光影造型能力也會顯著提升。

今天,我們便一起繪制一個寫實風(fēng)格的黑膠唱片機,最終效果圖見下:

一.輪廓
和以往一樣,我們首先打造出唱片機的外形(建議大家先繪制一個十字參考線)。
1、唱片機外殼:使用圓角矩形工具繪制出一個邊長320px,圓角為60px的圓角矩形,色值為#f2f8ff。

2、唱盤、唱片及封面:使用橢圓工具繪制一個234px半徑的圓放置于外殼中央作為唱盤,填充色#ddedff(如圖1);同時復(fù)制一層,ctrl+T進(jìn)入自由變換模式,再同時按住Shift和Alt鍵(同心圓縮放快捷鍵)縮小至206px半徑作為唱片,填充色#ffffff(如圖2);再以相同的步驟得到一個半徑px的圓作為封面,填充色#ffb1b1(如圖3,這里隨便填充個顏色來區(qū)分,后期再修改)。

3.唱盤金屬球:同樣的步驟繪制更小的半徑16px的同心圓,填充色#ffffff。

4、唱臂旋鈕:用橢圓工具分別繪制48px和32px的圓組成同心圓,并將其作為旋鈕凹槽和旋鈕置于右上方,色值請參考第2步。

5、唱針:用圓角矩形工具先繪制長54px寬34px的大矩形(圓角為6px)作為唱針,再繪制長32px寬20px的小矩形(圓角6px)作為唱針唱臂的連接體,相連在一起,并向右旋轉(zhuǎn)90度,置于唱片上。

6、唱臂:唱臂如果單純用形狀工具的話很難描繪出等寬的造型,因此這里只能用路徑形式繪制。繪制路徑作為唱臂,設(shè)置描邊寬度12px,色值為#cdcdcd。將旋鈕和唱針相連,唱片機的形狀打造步驟至此完成。

二、質(zhì)感
唱片機中的質(zhì)感主要分為外殼、金屬以及唱片的拉絲質(zhì)感。(為看清質(zhì)感,我們加一層較深的背景色)
1、唱片機外殼,我們使用圖層樣式中內(nèi)陰影功能打造(假設(shè)光源來自上方)。
注意:CC之前的版本需要三次轉(zhuǎn)換為智能對象
(1)內(nèi)陰影1:填充色#ffffff,作唱片機頂部的高光部分,參數(shù)見第二張圖;
(2)內(nèi)陰影2:填充色#c8d9ee,作背光面的陰影部分,參數(shù)見第三張圖;
(3)內(nèi)陰影3,填充色#ffffff,作背光面的反光部分,參數(shù)見最后一張圖。

注意:圖層樣式中凡是涉及角度的選項中都會有“使用全局光”選項,點上這個會默認(rèn)所有圖層樣式一個方向,一般不要勾選!
2、由于唱盤部分是個凹槽,因此這里同樣選用內(nèi)陰影功能進(jìn)行刻畫,色值為#a1c3ea,一層為90度,一層為-90度,其他參數(shù)一致。

旋鈕部分與唱盤同樣也是凹槽,因此同樣適用2層內(nèi)陰影功能(色值參考唱盤)。

3、而唱片拉絲質(zhì)感的打造,是需要重點講解的部分。
(1)首先,我們Ctrl+N,新建一個240*240的項目,填充色#121212。

(2)在PS上方菜單欄中,點選濾鏡菜單中的“雜色”選項,選擇“添加雜色”功能,在彈出的窗口中選擇“平均分布”,數(shù)量設(shè)置為20.13%(記住點選“單色”選項,否則會有很多彩色顆粒)。

(3)得到充滿雜色的圖層后,再次點選濾鏡菜單中的“模糊”命令,選擇“徑向模糊”,默認(rèn)的“10”數(shù)量就好,確定后得到了拉絲質(zhì)感。

(4)得到的拉絲感覺不是很明顯,這里我們選擇濾鏡菜單中的“銳化”濾鏡,選擇“進(jìn)一步銳化”即可。

(5)我們將圖層拷貝到唱片圖層的上方,建立剪切蒙版;

(6)
打造唱片光澤:在此圖層上方新建一個矩形,用直接選擇工具選取右下角錨點向上拖動一個寬度的距離。居中對齊,并建立剪切蒙版,設(shè)置不透明度20%。

(7)屬性面板中設(shè)置5.7像素的羽化值,即得到一個光澤??截惞鉂蓤D層,旋轉(zhuǎn)一定角度。兩個光澤層讓光澤更真實。

4、封面的質(zhì)感就很簡單了,與外殼一樣,套2層內(nèi)陰影分別作高光和陰影,色值分別為#ffafaf和#9e2424(將原本封面隨便填充的色值改為#db4c4c);

5、金屬小球的質(zhì)感有個很簡單的辦法:首先增加由色值#adadad到#5a5a5a的漸變疊加,然后再用橢圓工具繪制一個圓形,填充#ffffff。用直接選擇工具拖動圓形的錨點改變形狀,做為高光。同樣的方法在繪制一個白色圓并進(jìn)行形狀編輯,設(shè)置45%的不透明度,做為反光。

再對金屬小球刻畫兩層投影(色值為#7a1d1d)制造更強的立體感:
投影1:最接近小球的投影,更暗更實;
投影2:散射狀,相比1來說暗度和實度偏低

6、唱針的打造同樣簡單,兩層內(nèi)陰影分別做高光和陰影,色值分別為#ffffff和#84a8d3;唱針和唱臂的連接頭可以用同一個樣式,這里可以偷懶,直接右鍵唱針圖層選擇“拷貝圖層樣式”,粘貼圖層樣式到連接體圖層即可。

7、唱臂的金屬質(zhì)感打造也是需要重點講解的部分。
首先我們將唱臂改為#ffffff作為底色,在之前的教程中,我們知道金屬明暗對比非常強烈,高光、反光及陰影的表現(xiàn)更強,存在明顯的分界線。因此,這里可以直接拷貝一層唱臂,描邊改為8px,并換個較深的色值#151515建立剪切蒙版;再拷貝一層填充#7a7a7a,加上1.4像素的羽化值,建立剪切蒙版;再拷貝一層,描邊改為3px,填充#fffff,建立剪切蒙版。

8、刻畫旋鈕、唱臂以及唱針的投影,色值均為#6e98c8,參數(shù)分別如下:

9、最后一步,刻畫唱片機整體的投影,色值均為#6591d2,兩個投影的參數(shù)分別如下:

10、寫實風(fēng)格的黑膠唱片機至此完成。
教程講解的還是很詳細(xì),希望大家都能認(rèn)真練習(xí)一下。當(dāng)然,分享的只是過程和方法,創(chuàng)意還得由自己來——想一個喜歡的圖標(biāo)制作一下吧!
****部落窩教育-ps寫實圖標(biāo)制作技巧****
原創(chuàng):Charlotte Chen/部落窩教育(未經(jīng)同意,請勿轉(zhuǎn)載)
更多教程:部落窩教育(www.itblw.com)