UI設(shè)計(jì)，設(shè)計(jì)有立體感的手機(jī)APP UI展示模板(4)

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

之前搜索時(shí)發(fā)現(xiàn)網(wǎng)上居然沒(méi)有這個(gè)教程，所以今天就簡(jiǎn)單分享一下自己的制作過(guò)程。

供新手們參考，請(qǐng)大神自覺(jué)飄過(guò)就好�。�！

首先我們來(lái)看一下最終效果，忽略像素，只講步驟（圖片因?yàn)榭s小了所以不清楚）

首先，我們打開(kāi)PS，因?yàn)槲覀冋究岬膶捠?00px，所以我新建一個(gè)寬度900，高度700的畫(huà)布，然后隨便設(shè)置一個(gè)背景顏色就好，這里設(shè)置為#e0e0e0

然后我們?cè)诋?huà)布上根據(jù)自己想要的效果先畫(huà)幾個(gè)框框，這是方便我們待會(huì)排版我們?cè)O(shè)計(jì)好的頁(yè)面，注意近大遠(yuǎn)小，用鋼筆工具畫(huà)形狀即可，方便后續(xù)調(diào)節(jié)，我畫(huà)好的框框如下：

（這里我們當(dāng)然也可以選擇從網(wǎng)上下載素材或者直接po一張人家做好的效果圖來(lái)打底，因?yàn)槲覀冎恍枰@個(gè)形狀而已）

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

下面我們ctrl+t然后右鍵選擇斜切，拖動(dòng)錨點(diǎn)將另一邊重合

然后將另一點(diǎn)也拖動(dòng)使上面的邊重合，然后我們繼續(xù)調(diào)整這兩點(diǎn)將自己的圖片與畫(huà)好的形狀完全重合

（斜切時(shí)一定要向同一個(gè)方向切，不要亂拉鼠標(biāo)，既難操作又容易變形嚴(yán)重）

切好后回車(chē)得到我們的圖片，然后將該層復(fù)制一層，并將復(fù)制好的層下移一個(gè)像素即可

按照同樣的步驟，都是復(fù)制新的圖層，然后將新的圖層下移一個(gè)像素，我們這里復(fù)制了四層，這樣圖片就看起來(lái)有了厚度感

下面我們要為它增加陰影來(lái)制造空間立體感

選擇第一個(gè)圖層，也就是最上面的界面圖層，雙擊打開(kāi)圖層樣式，為它添加一個(gè)距離和大小為20的投影，不透明度選擇50%

效果如下，是不是已經(jīng)有了一丟丟立體感啦

然后我們右鍵該圖層拷貝圖層樣式，將它粘貼給最下面的界面圖層

下面就是我們得到的效果啦，神奇有木有

然后我們就可以按照上面的方法一次將圖片導(dǎo)入并制作，做好后隱藏形狀圖層并調(diào)整界面位置，

得到最終效果

喜歡就點(diǎn)個(gè)贊吧！

您每一次的肯定都是對(duì)我的鼓勵(lì)！