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

12-16

如圖。厚度的地方還不是白色的，而是根據界面內容交相呼應的圖案。

一個效果有千萬種實現的辦法，在這裡只提供一個最簡單的思路，用ps純做。

一、扭曲旋轉
導入界面圖，然後編輯-扭曲，再旋轉，做到如下效果：

二、製作厚度
這一步最關鍵，選中界面圖層，[Ctrl+Alt+T]，然後按一下方向鍵[↑]，再按回車。這樣就複製了一個圖層，並且新的圖層在原來基礎上往上移動一個像素。
來了，狂按[Ctrl+Alt+Shift+T]，這是重複之前的變換操作，這樣就會複製出很多個圖層，每一個都在之前基礎上往上移動一個像素。從而做出厚度效果。

三、改變亮度
保留最上面那個圖層，將其他所有界面的圖層，合併成一個圖層，命名為[厚度]。

然後選中[厚度]圖層，使用矩形選框工具+[圖像-調整-亮度對比度]，對厚度的左邊面和右邊面分別進行降低亮度20和50處理。

四、陰影
複製[app]圖層，改變圖層順序到[厚度]下面，然後使用[高斯模糊]+顏色疊加為黑色+改變不透明度為30%。完工！

=============================

當然，這種做法，厚度那裡沒有更多細節，如果想要樓主你給出的效果圖那樣，厚度也有光影細節的話，建議結合3d軟體做。不過厚度那裡顏色和app界面內容相呼應是做到了。
希望對你有幫助。

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

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

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

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

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

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

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

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

拖入你想要做的界面：

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

複製一個圖層：

按住option(alt)+滑鼠左鍵拖動圖層往下拽，或者command(ctrl)+J，或者直接使用『alt+方向鍵』來快速複製圖層並位移一個像素。
選下面的一個圖層，雙擊圖層進入圖層樣式，選擇斜面和浮雕，設置一下參數：

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

然後，在最後一個圖層上設置一個投影

參數自行解決。

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

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

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

以上，謝謝觀看！

--------------------------------------------------------------
轉載請註明出處，謝謝。

ps的3d功能也可以
如圖，輕快的從平面建立起3d模型

調整厚度

下來調整角度

大概是這樣的
再下來
額生成UV，不管什麼鬼，繼續看

展開選項選擇減少曲度，然後，看上去並沒什麼不同

找到3d面板里的材質選項卡
漫反射里選擇編輯紋理
馬上打開了個新圖片，duang的感覺

你看，火柴盒展開圖誕生了，所以，UV就是把表面紋理在3d模型每個面上的布局拆成個平面圖
然後運用最基礎ps技能選區變形，目的是把盒子的四邊用色塊代替
得到如下圖

然後
ctrl+s 保存，鬼知道保存到哪裡了
再打開之前的3d工作文件
額，側面出來了

陰影有點扯
可以運用ps 3d自帶的陰影調節工具，如下

其實ps 3d還支持渲染，只是效率低些，君可自便。差不多了，沒有列位的方法簡單，算是另一種思路了

不會用ps做這個效果，我用的是ae

做法簡單說來就是，先將一張圖片域合成，合成外打開3d開關，position屬性上添加表達式value+[0,0,index]

然後將這個合成複製幾十遍，除了最上面的合成外，其他合成添加填充效果，顏色灰，再添加攝像機，調整視角，再在最下面的合成添加陰影和模糊效果，完成

始終堅持PPT是萬能的寶貝，做並剪輯視頻，音樂，文檔美化，簡易logo製作....
但是這裡想寫寫超級小白，如何用PS製作！
首先，模板鏈接：鏈接：http://pan.baidu.com/s/1hqsDVBe 密碼：9owu
下載，打開後是這個樣子的

step1：雙擊本圖層

step2：將要換上去的素材直接拖入

關閉，並保存，

step3：適當排版，搞定~~~

11.18 更新：
有人私信我具體方法，想了下還是更新下答案吧~
首先打開下載後的PSD文件~是醬紫的：

然後打開右邊文件夾~是醬紫的：

接著雙擊這個縮略圖，雙擊，雙擊，雙擊~~

然後打開是醬紫的：

接著把要替換的圖片放進去：

然後按【Ctrl+S】【Ctrl+S】【Ctrl+S】~重要的事要說三遍~
按完之後關掉這個文件，回到之前的文件就變成醬紫了：

最後無限重複前面的方法~得到的結果就醬紫了：

PS：百度有各種姿勢的展示模板下載的~原理都是一樣的~

至於其他童鞋的答案，表示我這個應該是最簡單最快捷的方法了吧~~
哈哈哈哈哈哈哈~

——————————————分割線———————————————
1.百度【展示模版】..

2.下載..
3.替換智能對象..
4.完工...

我不想討論如何增加厚度的問題，我只想強調一點：
能不能把透視做好！
能不能把透視做好！！
能不能把透視做好！！！

題主放的圖，還有最高票的回答里的圖，全是對邊平行的.
能不能把透視做好！

至於評論里提到的什麼軸測圖，我不懂什麼工程上的軸測圖，我只知道我看到的是一張展示圖
我只想說做出這些圖的人連最基本的空間透視都不懂嗎？
你們看的時候不難受嗎？你們不會覺得上面那個角好像翹起來一樣嗎？你們不會覺得手機屏幕上粗下細，右寬左窄嗎？
下面圖中，右上角是我調整過的，透視正確的圖，你們對比下。

授人以魚，不如授人以漁
授人以漁，不如受人以魚與漁

不廢話了，先上圖

模板在這裡，psd 格式，你要魚的話直接替換智能對象，要漁的話自己研究一下各個圖層

因為今天上午剛弄，不是太仔細，具體參數自己調下就好

要的留郵箱

cutterman bigger 自動生成

啦啦啦，用PPT做的，又學會一招~ 多謝！

隨手擼了倆張哈哈醜死了

不說原理只說操作：
各種高大上的ui展示模板，都有ps模板可以下載的，換上圖片就可以，炒雞方便。

用ps也可以。複製圖層，左移動一下。再複製。下移動一下。一直重複到你滿意的厚度

沒人覺得這個透視不對嗎

AI裡面可以複製一個表層，然後把透明度設置成0，做位移，然後使用混合工具，選1px的距離作出來陰影效果

Dribbble 上很多設計稿都是貼在傾斜的 iPhone 里，類似這種的展示效果是怎麼做的？ - 用戶界面設計

手機回答，所以就沒有截圖啦，希望能描述得清楚。

首先，這個效果並不是用3D軟體或者photoshop里的3D功能做的，而是每個界面圖層的複製和位移 -- 恐怕大家已經明白了，總之我還是簡略寫一下步驟

1. 三個界面圖事先準備好 - 當然，每個界面在不同的圖層上

2. 通過拉伸改變三個界面的透視效果，再排排好，弄得像立體的似的 -- 只不過這時候他們都是像紙片兒一樣的沒厚度

3. 選中界面1那個圖層，複製10個，每個都向下位移1px。10個都位移了以後厚度明顯就出來了，記住只移動1px哦。如果想再厚一點，只要多複製幾次就好

4. 同理把另外兩個界面也這樣做 -- 記得分組省得看起來混亂

5. 把相同界面的圖層合併起來，加陰影或者其他效果，完成！

用ps 先柵格化圖層然後 ctrl+t 旋轉扭曲再在圖層面板最下面找到混合選項裡面有斜面浮雕和投影勾預覽進行對比調整希望能幫助你

ai可以做到，我只是知道用ai的那個3d效果絕對能做