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

立體圖標,制作一個立體的UI圖標(7)

來源:站酷 作者:向天 學習:27882人次

這個圖標很簡單,主要學習該圖標的立體制作。先看看效果:

www.theoat.com.cn_0414152251-39.jpg

首先讓我們來新建一個高度為560,寬度為420.

www.theoat.com.cn_041415N58-0.jpg

填充背景為:#fbf5e7

www.theoat.com.cn_041415JG-1.png

選擇圓角矩形工具

www.theoat.com.cn_041415O01-2.png

www.theoat.com.cn_041415H58-3.png

畫一個180*180,半徑為10的圓角矩形

填充顏色為:#a9d0e1

www.theoat.com.cn_0414154039-4.png

www.theoat.com.cn_0414155510-5.png

ctrl+t,然后右擊旋轉(zhuǎn),旋轉(zhuǎn)45°,然后右擊進行扭曲(其中萬萬不可雙擊取消變形哦)

www.theoat.com.cn_04141521c-6.png

可以拉輔助線,按住alt鍵,選中其中一個點,進行水平移動,這樣是以中心為點進行的兩邊的延伸,哎呀,具體怎么個術(shù)語我也不是很清楚,就是這個意思吧,哈哈

www.theoat.com.cn_0414154932-7.png

嗯,最后變成這個樣子

www.theoat.com.cn_0414152R6-8.png

接著我們Ctrl+Alt+↓ 多按幾遍大概十七八次就可以了,這部叫輕移。look,是不是有厚度出來了,具體厚度根據(jù)自己喜好來定,可厚可薄的嘛,嘻嘻(*^__^*)

www.theoat.com.cn_0414152248-9.png

然后我們按住shift鍵點選所有輕移出的副本

www.theoat.com.cn_0414152608-10.png

接著Ctrl+g,這樣這些副本就全部放到一個組里面了

www.theoat.com.cn_0414151B1-11.png

點擊組1圖層的綠色部分的任何一個位置都可以

www.theoat.com.cn_041415B24-12.png

打開圖層樣式,進行顏色疊加,顏色為#63a8c7

www.theoat.com.cn_041415K43-13.png

把組1圖層放到圓角矩形1圖層的下面

www.theoat.com.cn_0414155159-14.png

效果是這樣的,是不是立起來啦,

www.theoat.com.cn_0414155042-15.png

接著復制圓角矩形1圖層放置組1圖層的下面

www.theoat.com.cn_0414153944-16.png

打開圖層樣式進行顏色疊加,顏色為:#345469,往右下方移動,使陰影露出

www.theoat.com.cn_04141542R-17.png

www.theoat.com.cn_04141525R-18.png

把不透明度降低至50%

www.theoat.com.cn_0414155531-19.png

下面我們來制作小爪子,打開自定形工具

www.theoat.com.cn_0414154504-20.png

找到小爪子

www.theoat.com.cn_0414152137-21.png

如果沒有的話,點擊邊上的小齒輪,然后點擊動物,點擊追加,這圖案是自帶的。也可以選擇或者制作自己喜歡的圖案。

www.theoat.com.cn_0414152044-22.png

www.theoat.com.cn_0414155Z3-23.png

填充顏色為:#f3cfd3

www.theoat.com.cn_0414155217-24.png

同樣,我們做一些變形扭曲的調(diào)整

www.theoat.com.cn_0414153131-25.png

從而達到這種效果

www.theoat.com.cn_0414154617-26.png

Ctrl+Alt+↓輕移出多個圖層,shift點選所有副本圖層,Ctrl+g放入一個組里

www.theoat.com.cn_041415O32-27.png

打開組2的圖層樣式,進行顏色疊加,顏色為#efa9b1

www.theoat.com.cn_04141550K-28.png

復制形狀1圖層,放在組2圖層的下面

www.theoat.com.cn_0414152308-29.png

進行顏色疊加,顏色為#eb8894,往右下方移動,使陰影露出

www.theoat.com.cn_041415J34-30.png

不透明度降低至50%

www.theoat.com.cn_0414151295-31.png

選擇橢圓工具,畫個橢圓,填充顏色為#fbf5e7

www.theoat.com.cn_0414152R2-32.png

www.theoat.com.cn_0414153463-33.png

Ctrl+Alt+↓輕移出多個圖層,shift點選所有副本圖層,Ctrl+g放入一個組里

www.theoat.com.cn_0414156260-34.png

對組3進行顏色疊加,顏色為#fe12be

www.theoat.com.cn_0414156020-35.png

復制小肉墊圖層,移至組3圖層的下面

www.theoat.com.cn_041415A39-36.png

打開圖層樣式進行顏色疊加,顏色為#e1c789 往右下方移動,使陰影露出

www.theoat.com.cn_0414152J8-37.png

不透明度降低至50%

www.theoat.com.cn_0414153228-38.png

大功告成啦,超簡單的

www.theoat.com.cn_0414152251-39.jpg

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
陳艷紅2016-11-21 10:38
努力,加油
陳艷紅2016-11-21 10:38
努力,加油
mc2016-11-03 04:28
交作業(yè)
2016-09-22 06:08
柯南天2016-04-16 05:32
yan2016-04-14 02:58

關(guān)注大神微博加入>>

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