UI設(shè)計,設(shè)計有立體感的手機APP UI展示模板

來源:站酷 作者:ygnh789 學(xué)習(xí):20249人次

本文是教你制作有厚度感和立體感覺的UI展示模板,雖然一般這種效果用3D軟件做比較好,但是并不是所有設(shè)計愛好者都會用,而且有些展示效果要求可能不需要那么高,所以我們今天就簡單用PS來打造這種效果。

之前搜索時發(fā)現(xiàn)網(wǎng)上居然沒有這個教程,所以今天就簡單分享一下自己的制作過程。

供新手們參考,請大神自覺飄過就好。!

首先我們來看一下最終效果,忽略像素,只講步驟(圖片因為縮小了所以不清楚)

 

UI設(shè)計,設(shè)計有立體感的手機APP UI展示模板_m.theoat.com.cn

首先,我們打開PS,因為我們站酷的寬是900px,所以我新建一個寬度900,高度700的畫布,然后隨便設(shè)置一個背景顏色就好,這里設(shè)置為#e0e0e0

 

UI設(shè)計,設(shè)計有立體感的手機APP UI展示模板_m.theoat.com.cn

 

 

然后我們在畫布上根據(jù)自己想要的效果先畫幾個框框,這是方便我們待會排版我們設(shè)計好的頁面,注意近大遠小,用鋼筆工具畫形狀即可,方便后續(xù)調(diào)節(jié),我畫好的框框如下:

(這里我們當(dāng)然也可以選擇從網(wǎng)上下載素材或者直接po一張人家做好的效果圖來打底,因為我們只需要這個形狀而已)

 

UI設(shè)計,設(shè)計有立體感的手機APP UI展示模板_m.theoat.com.cn

 

下面就可以導(dǎo)入一張你做好的界面效果圖,并且ctrl+t將它縮小并旋轉(zhuǎn)一個角度使它與我們畫的形狀一邊對齊

 

UI設(shè)計,設(shè)計有立體感的手機APP UI展示模板_m.theoat.com.cn
UI設(shè)計,設(shè)計有立體感的手機APP UI展示模板_m.theoat.com.cn

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
風(fēng)清月獨隱2017-04-02 01:59
先柵格化,然后智能對象就可以了
NelsonMuntzHAHA2017-03-09 09:48
我想知道 這樣放進去的圖片會失真 怎么弄
彭方濤2016-12-05 08:47
這個教程 有些素描 、結(jié)構(gòu) 都有點問題
會飛的貓2016-08-10 11:47
嘿嘿,挺喜歡這個網(wǎng)站 的
12016-03-28 11:20
:razz:

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

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