UI設(shè)計,設(shè)計有立體感的手機APP UI展示模板(4)
本文是教你制作有厚度感和立體感覺的UI展示模板,雖然一般這種效果用3D軟件做比較好,但是并不是所有設(shè)計愛好者都會用,而且有些展示效果要求可能不需要那么高,所以我們今天就簡單用PS來打造這種效果。
之前搜索時發(fā)現(xiàn)網(wǎng)上居然沒有這個教程,所以今天就簡單分享一下自己的制作過程。
供新手們參考,請大神自覺飄過就好。!
首先我們來看一下最終效果,忽略像素,只講步驟(圖片因為縮小了所以不清楚)
首先,我們打開PS,因為我們站酷的寬是900px,所以我新建一個寬度900,高度700的畫布,然后隨便設(shè)置一個背景顏色就好,這里設(shè)置為#e0e0e0
然后我們在畫布上根據(jù)自己想要的效果先畫幾個框框,這是方便我們待會排版我們設(shè)計好的頁面,注意近大遠(yuǎn)小,用鋼筆工具畫形狀即可,方便后續(xù)調(diào)節(jié),我畫好的框框如下:
(這里我們當(dāng)然也可以選擇從網(wǎng)上下載素材或者直接po一張人家做好的效果圖來打底,因為我們只需要這個形狀而已)
下面就可以導(dǎo)入一張你做好的界面效果圖,并且ctrl+t將它縮小并旋轉(zhuǎn)一個角度使它與我們畫的形狀一邊對齊
下面我們ctrl+t然后右鍵選擇斜切,拖動錨點將另一邊重合
然后將另一點也拖動使上面的邊重合,然后我們繼續(xù)調(diào)整這兩點將自己的圖片與畫好的形狀完全重合
(斜切時一定要向同一個方向切,不要亂拉鼠標(biāo),既難操作又容易變形嚴(yán)重)
切好后回車得到我們的圖片,然后將該層復(fù)制一層,并將復(fù)制好的層下移一個像素即可
按照同樣的步驟,都是復(fù)制新的圖層,然后將新的圖層下移一個像素,我們這里復(fù)制了四層,這樣圖片就看起來有了厚度感
下面我們要為它增加陰影來制造空間立體感
選擇第一個圖層,也就是最上面的界面圖層,雙擊打開圖層樣式,為它添加一個距離和大小為20的投影,不透明度選擇50%
效果如下,是不是已經(jīng)有了一丟丟立體感啦
然后我們右鍵該圖層拷貝圖層樣式,將它粘貼給最下面的界面圖層
下面就是我們得到的效果啦,神奇有木有
然后我們就可以按照上面的方法一次將圖片導(dǎo)入并制作,做好后隱藏形狀圖層并調(diào)整界面位置,
得到最終效果
喜歡就點個贊吧!
您每一次的肯定都是對我的鼓勵!
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個獨特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個音樂圖標(biāo)
- 圖標(biāo)設(shè)計,用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡約風(fēng)格的解密游戲圖標(biāo)
- 插畫制作,用PS繪制簡約沙漏插畫效果圖片
- 圖案設(shè)計,用PS快速制作一個心形圖案
- 手機圖標(biāo),用PS繪制華為手機圖標(biāo)
- 相機圖標(biāo),用UI制作簡單的彩虹相機圖標(biāo)