來源:站酷 作者:ygnh789
本文是教你製作有厚度感以及立體感覺的UI展示範本，儘管一般這種效果用3D軟體做對比好，然而並非所有設計喜愛者都會用，而且有些展示效果請求可能不需要那麼高，所以咱們今天就簡單用PS來打造這種效果。
以前搜尋時發現網上竟然沒有這個教學，所以今天就簡單分享一下自己的製作過程。
供新手們參考，請大神自覺飄過就好！！！
附PSD下載！
首先咱們來看一下最終效果，忽略像素，只講步驟（圖片因為縮小了所以不清楚）
首先，咱們開啟舊檔PS，因為咱們站酷的寬是900px，所以我開新檔案一個寬度900，高度700的畫布，然後隨意設定一個背景彩色就好，這裡設定為#e0e0e0
然後咱們在畫布上依據自己想要的效果先畫幾個框框，這是利便咱們待會排版咱們設計好的頁面，注意近大遠小，用鋼筆工具畫形狀便可，利便後續調節，我畫好的框框如下：
（這裡咱們當然也可以選取從網上下載素材或是直接po一張人家做好的效果圖來打底，因為咱們只需要這個形狀而已）
下面就能匯入一張你做好的介面效果圖，並且ctrl+t將它縮小並旋轉一個角度使它與咱們畫的形狀一邊對齊
下面咱們ctrl+t然後右鍵選取斜切，拖曳錨點將另一邊重合
然後將另一點也拖曳使上面的邊重合，然後咱們繼續調整這兩點將自己的圖片與畫好的形狀完整重合
（斜切時必定要向同一個方向切，不要亂拉滑鼠，既難動作又容易變形嚴重）
切好後換行獲得咱們的圖片，然後將該層複製一層，並將複製好的層下移一個像素便可
按照同樣的步驟，都是複製新的圖層，然後將新的圖層下移一個像素，咱們這裡複製了四層，這樣圖片就看起來有了厚度感
下面咱們要為它增添暗影來製造空間立體感
選取第一個圖層，也就是最上面的介面圖層，按兩下開啟舊檔圖層型態，為它加入一個距離以及大小為20的投影，不透明度選取50%
效果如下，是否已經有了一丟丟立體感啦
然後咱們右鍵該圖層複製圖層型態，將它貼上給最下面的介面圖層
下面就是咱們獲得的效果啦，神奇有木有
然後咱們就能按照上面的方式一次將圖片匯入並製作，做好後暗藏形狀圖層並調整介面位置，
獲得最終效果
==============================
公家號：春樹鎮
鑽研討論：網際網路技術，php開發，網站建議，app開發，html5開發，設計，視訊製作，小說，電影。
來源:站酷 作者:ygnh789
本文是教你製作有厚度感以及立體感覺的UI展示範本，儘管一般這種效果用3D軟體做對比好，然而並非所有設計喜愛者都會用，而且有些展示效果請求可能不需要那麼高，所以咱們今天就簡單用PS來打造這種效果。
以前搜尋時發現網上竟然沒有這個教學，所以今天就簡單分享一下自己的製作過程。
供新手們參考，請大神自覺飄過就好！！！
附PSD下載！
首先咱們來看一下最終效果，忽略像素，只講步驟（圖片因為縮小了所以不清楚）
首先，咱們開啟舊檔PS，因為咱們站酷的寬是900px，所以我開新檔案一個寬度900，高度700的畫布，然後隨意設定一個背景彩色就好，這裡設定為#e0e0e0
然後咱們在畫布上依據自己想要的效果先畫幾個框框，這是利便咱們待會排版咱們設計好的頁面，注意近大遠小，用鋼筆工具畫形狀便可，利便後續調節，我畫好的框框如下：
（這裡咱們當然也可以選取從網上下載素材或是直接po一張人家做好的效果圖來打底，因為咱們只需要這個形狀而已）
下面就能匯入一張你做好的介面效果圖，並且ctrl+t將它縮小並旋轉一個角度使它與咱們畫的形狀一邊對齊
下面咱們ctrl+t然後右鍵選取斜切，拖曳錨點將另一邊重合
然後將另一點也拖曳使上面的邊重合，然後咱們繼續調整這兩點將自己的圖片與畫好的形狀完整重合
（斜切時必定要向同一個方向切，不要亂拉滑鼠，既難動作又容易變形嚴重）
切好後換行獲得咱們的圖片，然後將該層複製一層，並將複製好的層下移一個像素便可
按照同樣的步驟，都是複製新的圖層，然後將新的圖層下移一個像素，咱們這裡複製了四層，這樣圖片就看起來有了厚度感
下面咱們要為它增添暗影來製造空間立體感
選取第一個圖層，也就是最上面的介面圖層，按兩下開啟舊檔圖層型態，為它加入一個距離以及大小為20的投影，不透明度選取50%
效果如下，是否已經有了一丟丟立體感啦
然後咱們右鍵該圖層複製圖層型態，將它貼上給最下面的介面圖層
下面就是咱們獲得的效果啦，神奇有木有
然後咱們就能按照上面的方式一次將圖片匯入並製作，做好後暗藏形狀圖層並調整介面位置，
獲得最終效果
==============================
公家號：春樹鎮兩岸商貿,在家工作,網路創業,創業賺錢思惟,微商平台,賺新台幣
鑽研討論：網際網路技術，php開發，網站建議，app開發，html5開發，設計，視訊製作，小說，電影。
留言列表
