圖標(biāo)設(shè)計(jì)，用PS繪制索尼PSP圖標(biāo)(4)

本篇教程通過PS繪制一個(gè)寫實(shí)游戲機(jī)的教程，非常逼真的索尼PSP圖標(biāo)，繪制的過程很詳細(xì)，主要用到PS的圖層樣式來完成，說到PSP,手機(jī)盛行的現(xiàn)在，很少有人玩PSP，記得以前拿PSP打游戲、看電影，很是懷念啊，這一次通過PS制作我們青春時(shí)玩的PSP游戲機(jī)圖標(biāo)吧，同學(xué)們一起來學(xué)習(xí)一下吧。

PART1：首先是展示效果圖

tgudhdp.cn

PART2：首先繪制扁平的效果

步驟1：新建一個(gè)800*600的畫布，填充顏色#373738，再畫一個(gè)512*512px，圓角為90px的圓角矩形，填充顏色#f1f0f0，居中于畫布，并命名為外框。

步驟2：繪制一個(gè)512*512的矩形，填充顏色#282828，命名為表殼，然后按照下圖所示建立鋪助線，根據(jù)對(duì)角建立鋪助線并利用鋼筆工具添加錨點(diǎn)，這一步比較繁瑣，給點(diǎn)耐心哈!

步驟3：接下來用到一個(gè)圓角插件神器Corner Editor，這個(gè)插件可在學(xué)UI網(wǎng)-學(xué)習(xí)導(dǎo)航-新手必看-ps常用插件里自行下載，用法也有介紹，當(dāng)然，不嫌麻煩的話可以用布爾運(yùn)算做，哈哈。

步驟4：給外殼左下角處挖空，畫一個(gè)180*180的鋪助圓，對(duì)齊到左下角，再畫一個(gè)160*160的圓，居中大圓，刪除鋪助圓。再畫兩個(gè)矩形，邊緣離表殼各10px，然后進(jìn)行布爾運(yùn)算，得出以下圖形。

步驟5：將它們合并形狀組件，再用布爾運(yùn)算添加4px的圓角。最后再合并形狀組件，與外殼合并圖層并減去。如下圖。(小技巧：在添加圓角的時(shí)候，遇到貼不到邊緣，可在ctrl+k首選項(xiàng)里的工具，把將矢量工具和變化與像素網(wǎng)格對(duì)齊的勾去掉，再利用鍵盤方向鍵可以進(jìn)行微小的移動(dòng)，記得用完后再勾選上，靈活運(yùn)用。)

步驟6：繪制一個(gè)470*240px，圓角為4px的矩形，填充顏色#191919，居中于畫布，離外殼上邊緣90px。

步驟7：現(xiàn)在讓我們畫方向鍵的按鈕，畫一個(gè)36*25的矩形，在下邊添加錨點(diǎn)，然后用直接選擇工具向下移動(dòng)20px，按住shift鍵可以整十地移動(dòng)，然后用上圓角插件，設(shè)置如下。

a：畫一個(gè)120*120的圓，復(fù)制上一步的圖形，貼合在圓的四周，然后把它們合并圖層，讓圓的圖層置頂，選擇與形狀區(qū)域相交，得出下圖形狀。

b：把上一步的圖形復(fù)制到AI中，對(duì)象-路徑-偏移路徑，偏移2px，得到的圖形再復(fù)制回PS，選擇形狀圖層即可。沒有下載AI的朋友，也可以在ps做出來，沒有AI那樣快速就是了。

c：畫一個(gè)120*120的圓，利用上一步得到的圖形減去圓，得到新的圖形。

d：畫一個(gè)124*124的圓作為底層，填充顏色#040404，整合以上得到的圖形，并重新填充顏色，再畫一個(gè)18*9的三角形，設(shè)置內(nèi)描邊2px，色值為#424346，分布在以下位置。

步驟8：接下來繪制功能鍵，畫一個(gè)104*104的圓為底層，填充顏色#050505，再畫一個(gè)100*100的圓，填充顏色#141414。畫4個(gè)44*44的圓為按鈕的底層，填充顏色#050505，其兩端錨點(diǎn)貼合在大圓上，看圖，再畫4個(gè)40*40的圓，填充顏色#181818。

a：再依次畫出14*14的矩形、16*14的三角形、16*16的圓形、14*2的差號(hào)，都是2px的內(nèi)描邊，色值為#515254，居中于各個(gè)按鈕間。

步驟9：畫一個(gè)52*52的圓為底層，填充顏色#050505，再畫一個(gè)50*50的圓，填充顏色#242424。然后把以上幾個(gè)步驟做出來的東西如下圖排列。

步驟10：現(xiàn)在做其他的按鍵，畫一個(gè)42*20px，圓角為10px的圓角矩形為底層，填充顏色#050505，再畫一個(gè)40*18px，圓角為9px的圓角矩形，填充顏色#181818，然后寫個(gè)字號(hào)為10px的HOME，字體隨意設(shè)置個(gè)，色值為#b1b1b1，居中于按鍵。

a：復(fù)制上一步，更改大小為46*20和44*18，文字改為SELECT;再復(fù)制一回，更改大小40*20和38*18，文字改為START。

b：再復(fù)制步驟10，更改大小28*20和26*18，多復(fù)制出3個(gè)，畫出相應(yīng)的圖形，如下圖。

c：畫兩個(gè)22*14px，圓角7px的圓角矩形作為揚(yáng)聲器，填充顏色#161616。再畫一個(gè)18*10px，圓角5px的圓角矩形作為話筒，填充顏色#101010。

d：將前幾個(gè)步驟得到的圖形按下圖排列。

步驟11：現(xiàn)在繪畫幾個(gè)顯示燈，畫4個(gè)6*6的圓形，其中兩個(gè)填充顏色#b28760，另外兩個(gè)填充顏色#44cda7。然后繪制兩個(gè)圖標(biāo)，色值為#b3b3b3，看圖。

步驟12：排列在以下位置，POWER和HOLD的字號(hào)為10px，色值#b3b3b3。

步驟13：用矩形工具畫出PSP的形狀，大小如圖所示，填充顏色#b1b1b1。居中對(duì)齊，離屏幕15px。再把SONY的logo居中在屏幕上方。離屏幕20px，SONY的logo在最后的資源包下載。

PART3：添加圖層樣式

步驟14：先給外殼添加圖層樣式，設(shè)置如下。

步驟15：在給表殼添加圖層樣式之前，先ctrl+j復(fù)制多一層，留著，先給表殼添加圖層樣式，設(shè)置如下。

步驟16：把我們復(fù)制的那一層轉(zhuǎn)為智能對(duì)象，濾鏡-雜色-添加雜色，再濾鏡-模糊-動(dòng)感模糊，然后剪貼蒙板到表殼，這樣拉絲的效果就完成了，具體設(shè)置如下。

步驟17：多復(fù)制一層屏幕，留著做反光，然后給屏幕添加圖層樣式，設(shè)置如下。

a：剪貼游戲界面(游戲界面會(huì)在資源包給到)。

b：把復(fù)制的那一層添加圖層樣式，也剪貼到屏幕，設(shè)置如下。

步驟18：給方向鍵添加圖層樣式，設(shè)置如下。

步驟19：給功能鍵添加圖層樣式，設(shè)置如下。

步驟20：給某功能鍵加圖層樣式，設(shè)置如下。

步驟21：給下排按鈕添加圖層樣式，設(shè)置如下。

步驟22：給揚(yáng)聲器和話筒添加圖層樣式，設(shè)置如下。

步驟23：給顯示燈添加圖層樣式，設(shè)置如下。

步驟24：最后一步了，堅(jiān)持就是勝利!給表殼制作高光和反光，增加層次感，畫一個(gè)340*14的橢圓，填充白色，再畫一個(gè)矩形減去一截，如圖。

a：羽化1px，降低不透明度為60%，居中在表殼頂部偏下點(diǎn)的位置。

b：畫一個(gè)340*4px的橢圓，填充白色，羽化2px，降低不透明度為30%，作為底部反光，剪貼進(jìn)表殼，如圖。

PART4：總結(jié)

通過這次的練習(xí)，對(duì)于各種圖層樣式的操作應(yīng)該更加得心應(yīng)手，希望大家通過觀察和思考也能原創(chuàng)一些作品。

同學(xué)們?cè)谧龅臅r(shí)候也需要記下來，一步步進(jìn)階，最到最好，相信同學(xué)們都是棒棒的。