圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
本篇教程通過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:首先是展示效果圖
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,得到的圖形再?gòu)?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;再?gòu)?fù)制一回,更改大小40*20和38*18,文字改為START。
b:再?gòu)?fù)制步驟10,更改大小28*20和26*18,多復(fù)制出3個(gè),畫出相應(yīng)的圖形,如下圖。
學(xué)習(xí) · 提示
相關(guān)教程
- 圖標(biāo)設(shè)計(jì),設(shè)計(jì)一款心形的APP圖標(biāo)
- 圖標(biāo)設(shè)計(jì),在PS里制作小清新風(fēng)格的天氣圖標(biāo)
- 圖標(biāo)制作,用PS制作時(shí)尚的郵件圖標(biāo)
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 插畫制作,用PS繪制簡(jiǎn)約沙漏插畫效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
推薦教程
- ps設(shè)計(jì)甜甜面包圈UI圖標(biāo)教程
- APP圖標(biāo),設(shè)計(jì)縫線風(fēng)格主題APP圖標(biāo)
- ps設(shè)計(jì)水果UI圖標(biāo)
- 玉石教程,設(shè)計(jì)太極主題玉石圖標(biāo)
- UI圖標(biāo)教程,設(shè)計(jì)元宵節(jié)燈籠主題ICON教程
- ps設(shè)計(jì)小鳥UI圖標(biāo)教程
- ps日歷圖標(biāo)
- UI知識(shí),圖標(biāo)的認(rèn)知與設(shè)計(jì)步驟
- UI知識(shí),制作icon到底是用AI還是用PS?
- UI教程,ps設(shè)計(jì)擬物瀏覽器圖標(biāo)。