Image may be NSFW.
Clik here to view.
最終效果圖。(裝了 Photoshop CC 2015 後一堆外掛都 GG 了，幸好最重要的幾個都活著。)
設計師 ALEX BENDER
在講步驟前先來介紹這位設計師 ALEX BENDER，相信他的作品很多人都看過。單張 iPhone Mockup 效果圖的前景深效果做得很精緻。
Image may be NSFW.
Clik here to view.
這篇文就是我分解他的效果圖學習筆記。（不要問我說怎麼人家成品這麼漂亮我就只做成這樣，我的程度就只有這樣啊...）
展示用 Mockup 神器：Perspective Mockups
Image may be NSFW.
Clik here to view.
忍了很久，還是買了...超愛這個 PS 外掛跑出來的成果。雖然有很多免費的 PSD 樣版或動作一樣可以辦到這種 3D 傾斜裝酷效果，但沒有一個有 Perspective Mockups 的精緻程度。一分錢一分貨，花錢省時間。
所以這篇文講怎麼用 Perspective Mockups做出「進化版」的效果。
製作步驟
1. 先做好要跑外掛用的 Mockup
我先做一頁 Mockup 出來，隨手抓張照片當底圖，拉幾個形狀圖層做 Logo、打打字，套 iOS8 UI KIT 的 StatusBar。
Image may be NSFW.
Clik here to view.
底圖：Gratisography
狀態列：iOS 8 UI Design Kit for Free
2.使用 Perspective Mockups
有很多種展示方式，挑個喜歡順眼的，點一下就自動跑完，隨便弄隨便漂亮，大概 10~15 秒（依電腦效能）就解決了。
Image may be NSFW.
Clik here to view.
Dribbble 常見基本款，幾位大咖都有貼過這種角度的作品圖。
Image may be NSFW.
Clik here to view.
頁面有文字的話這種效果有點花...
Image may be NSFW.
Clik here to view.
這感覺倒不錯...
3. 基本款加工
為了學習 ALEX BENDER的效果圖作法，選用最基本的單張款來練習。
Image may be NSFW.
Clik here to view.
4. 裁切
Perspective Mockups 跑出來的圖其實很大張，先裁切小一點。
Image may be NSFW.
Clik here to view.
5. 底圖上色
預設的底色是深灰，上點和 Mockup 相關的顏色讓畫面有一體感。（數值參考用）
Image may be NSFW.
Clik here to view.
6. 加光源
拉個圓，光的顏色從 Mockup 抓，飽和度調低、明度調高。羽化、高斯模糊。（數值參考用）
Image may be NSFW.
Clik here to view.
7. 光源位置
光在陰影層下面喔！。圖層樣式改「柔光」，數值自己試，不要對比太強烈。光也可以直接加在最上層，視覺效果更精緻，不過 Mockup 顏色會被光源色改變，龜毛點的客戶可能會 OOXX。（ ALEX BENDER的效果圖 Mockup 上也有壓光源。）
Image may be NSFW.
Clik here to view.
8. 畫面暗角
有光就有影，使用漸層工具＋色彩增值。暗角能讓背景更有層次，突顯 Mockup。
Image may be NSFW.
Clik here to view.
9. 圖層混合模式
感覺用柔光似乎有點濁濁的，調整下圖層混合模式。沒有固定的標準答案，數值、模式可以自己玩看看。
Image may be NSFW.
Clik here to view.
10. 複製、壓成像素
複製全部圖層，然後平面化。一定要複製新的出來喔！不要把原始圖層拿來壓平，萬一要修改會哭的。
Image may be NSFW.
Clik here to view.
11. 決定主要內容顯示範圍
在最新壓平的圖層上拉個圓，正圓或橢圓都可以，這是畫面「清楚」的部份，最好把 Mockup 主要內容都圈到，其於的都要模糊掉，讓使用者視線集中到內容上。記得圓框的邊緣要羽化。
Image may be NSFW.
Clik here to view.
12. 反轉選取
反轉選取，注意現在圈住的地方就是畫面不重要、要模糊化的部份。
Image may be NSFW.
Clik here to view.
13. 製作前景深
高斯模糊。數值自己試，我自己覺得 4~7 px 之間都還可以，要配合前一步圓的羽化程度。
Image may be NSFW.
Clik here to view.
完成
Image may be NSFW.
Clik here to view.
最終效果圖，一定有更聰明的作法來處理「前景深」，不過我最熟的就是高斯模糊，就用這招來製作了。
ALEX BENDER不是用高斯模糊，比較像動態模糊一類，看邊角的晃動感就知道了。還要再研究看看怎麼做。目前的步驟是我覺得能在 5 min 內迅速處理完的操作方式，但離他的成品圖仍有不少落差...（希望他不會覺得我臨摹得太慘。）
細節放大
有羽化和高斯模糊處理失焦的感覺，畫面精緻很多。感覺很像什麼 3D 軟體跑出來的展示圖一樣，很威 XDD
Image may be NSFW.
Clik here to view.
光如果在最上層
補一張「光在最上層」的效果。可以自行比較看看。
Image may be NSFW.
Clik here to view.