當前位置:首頁>ps實例教程>ps網(wǎng)頁設計>UI設計教程>教程內(nèi)容

圖標設計,用PS繪制索尼PSP圖標

來源:CHEN末 作者:CHEN末 學習:10479人次

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

PART1:首先是展示效果圖

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn
theoat.com.cn

PART2:首先繪制扁平的效果

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

步驟4:給外殼左下角處挖空,畫一個180*180的鋪助圓,對齊到左下角,再畫一個160*160的圓,居中大圓,刪除鋪助圓。再畫兩個矩形,邊緣離表殼各10px,然后進行布爾運算,得出以下圖形。

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

c:畫一個120*120的圓,利用上一步得到的圖形減去圓,得到新的圖形。

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

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

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

a:復制上一步,更改大小為46*20和44*18,文字改為SELECT;再復制一回,更改大小40*20和38*18,文字改為START。

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

b:再復制步驟10,更改大小28*20和26*18,多復制出3個,畫出相應的圖形,如下圖。

圖標設計,用PS繪制索尼PSP圖標_theoat.com.cn

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
單雪途2024-03-27 10:31
我的作業(yè):

1537965792020-06-21 09:27
謝謝老師的分享。
a2708345742020-05-20 02:26
很多東西找不到不理解,做了一個差的

1537965792020-05-15 12:48
謝謝樓主,學習學習。
查查2020-04-26 02:09
Elyvan 發(fā)表于 2020-4-25 13:26
沒看步驟,模仿的,比例嚴重失調(diào).
除了牛逼,說不出別的字了
Elyvan2020-04-25 01:26
Elyvan 發(fā)表于 2020-4-25 13:25
我的作業(yè):
沒看步驟,模仿的,比例嚴重失調(diào).
Elyvan2020-04-25 01:25
我的作業(yè):

沒有任何借口2018-05-24 01:26
必須支持
水瓶NYX2018-05-23 11:51
這個厲害了!
清淡or舊顏2018-05-23 09:54
謝謝大神
攜手明天的希望2018-05-23 06:25
謝謝!樓主提供!好樣的
墓下灬沐夏2018-05-23 06:19
厲害了,學到了
去小樹林里上吊2018-05-23 03:43
學習了,謝謝分享!
那個X男人2018-05-23 03:29
打卡
頂大財主2018-05-23 03:27
厲害

關注大神微博加入>>

網(wǎng)友求助,請回答!