好看的小说完本推荐,我吃西红柿,盗墓笔记第二季

如何做出有厚度的 APP 界面圖片？

作者：

分類：教程

2016-02-22

11321

舉個栗子：

假設，你要做一個5S的尺寸的效果展現圖。

步驟：

1、新建一個畫布尺寸為：640x1136

Image title

然后保存為，隨便命名如：5S效果圖模板

Image title

2、再新建一個畫布，隨便命名如：效果圖展現 Image title

尺寸隨意，可以大點，自己看情況吧。
3、將剛才保存的那個5S效果圖模板.psd拖到這個畫布中 Image title

command(ctrl)+T變換到合適的尺寸，傾斜到合適的透視效果。

Image title

4、然后雙擊"5S效果圖模板"這個圖層

Image title

這就是智能對象的好處。
跳到這個畫面后

Image title

拖入你想要做的界面：

Image title

圖片來自dribbble：Dribbble - GIF for the Timeline App by Sergey Valiukh
然后保存：command(ctrl)+s ，關閉：command(ctrl)+w
5、回到這個展示頁面

Image title

復制一個圖層：

Image title

按住option(alt)+鼠標左鍵拖動圖層往下拽，或者command(ctrl)+J
選下面的一個圖層，雙擊圖層進入圖層樣式，選擇斜面和浮雕，設置一下參數：

Image title

參數自行調整，其中，陰影角度45°可隨大環境光線可根據情況自行調整，陰影模式透明度隨意，自己看情況調整。
6、然后，從第二個圖層開始連續復制多個該圖層，每復制的一個圖層都在上一個圖層的下方，每復制一個圖層都往下移一個像素，按住option(alt)+鼠標左鍵拖動圖層往下拽，可使用鍵盤上的下方向鍵來控制。

Image title

然后，在最后一個圖層上設置一個投影 Image title

參數自行解決。 Image title

最后調整下整體環境。
完工！

以上的好處便是使用了智能對象，它可以讓你想展示的界面可以隨意替換。
如需展示多個界面的效果，只要多拖進幾次那個PSD，然后平面排好后，統一調整透視效果。

當然表現的手法很多，以上只是一種。
比如，也可以再建好的大畫布上，畫一個矩形的尺寸為640x1136，然后轉成智能對象，再雙擊智能對象，進入調整。