這一篇主要是平面圖到2.5D視圖轉變的基本過程演示并說明一下原理。

當然2.5D視圖制作之前，最基本的就是等角網格線的繪制，這個是平面圖到2.5D圖等比轉變的基礎。

2.5D視圖目前在電商網站海報上越來越多應用了，沒有了解過2.5D視圖的話，可以仔細這篇基礎原理哦。

目前做這類海報用ai比較多，不過原理都是一樣的。

對比圖：

2.5D視圖：

平面圖：

現在說一下詳細的操作步驟，主要分為等角網格線制作、平面圖制作和2.5D圖轉化三部分。

2.5D圖區别于3D圖，也叫等距側軸圖，能看到的隻有3個面，頂面和左右兩個側面；我們要做的當然不是随意畫出一個2.5D圖；而是根據平面圖做出一個長寬和原圖相符的等距側軸圖。那麼我們就需要一個參考點和參考線，去确定比例，所以我們首先做一個等角等距網格線。

第一部分、等角等距網格線的制作

1.新建一個文件，大小根據自己的要求就可以。

2.首先要做一排鋪滿畫布的直線，點擊工具欄>直線工具；

填充顔色自選，好分辨的顔色就可以，粗細1像素；

畫直線之前，可以先按ctrl和-，縮小畫布，這樣直線可以畫長一些，要不然後面旋轉後邊緣會有缺；

先在左邊，按住shift，向下拉出一條直線；

直線拉好後，點擊工具欄，用直接選擇工具；

按住ctrl alt，用鼠标去拖動直線，這樣就可以複制并移動出一條新的直線；（不用在意位置和高度，後面可以一起調整）重複上一步，不斷的拉出新的直線，直到畫出足夠的直線，如下圖。

3.調整直線的間隔和位置。

用直線選擇工具拖拽選中所有直線；

點擊上方對齊工具，選擇垂直居中；

這樣所有直線就上下對齊了；

再點擊對齊工具，選擇按寬度均勻分布；

完成後，就有一個間隔相同，長度相同，上下對齊的直線群圖層，為形狀1。

4.複制組合成等角網格。

複制形狀1圖層，得到形狀1副本圖層；

點擊編輯>變換>旋轉（或者按ctrl T）；

上邊欄的角度改成60度；（就是順時針旋轉60度）

改好後按enter确認修改；

得到如下一個順時針60度斜線群；

再複制形狀1圖層，得到形狀1副本2圖層；

同樣ctrl T到旋轉界面，角度填-60度（逆時針旋轉60度）；

按enter确認後，我們的等角等距網格線就完成了。（這個網格線的組成，應該都能看出來了，其實就是無數個正三角形組成的，等距就是正三角形的邊長，等角就是等三角形的60度角。）

最後點擊圖層欄下标，右起第三個，建立網格線組，将網格線的三個圖層拖進去，和後面要做的圖區别開來。

到這裡網格線部分就完成了，接下去我們要先做出平面圖。

第二部分、平面圖制作

平面圖可以先做一個簡單的，後期做複雜一些的，這個先熟悉一下。

1.首先新建一個圖層，在網格組下一層，建立新圖層，這樣可以清晰看到網格參考線。

然後點擊矩形工具，按住shift，在畫布上脫出一個正方形，顔色用藍色漸變色，如下圖。

2.矩形圖層上加一個文字圖層，這裡用PS兩字母，顔色淺藍色。

這樣我們的平面圖就做好了，這是很簡單的平面圖，接着我們要讓它變得不簡單。

第三部分、2.5D圖轉化

1.将底圖轉變成等角側軸圖。

當然不會讓你用自由變換工具，手動旋轉斜切，這樣不準确；

首先選中矩形1圖層，按ctrl T（或 編輯>變換>旋轉），将上方的H值改為-30度；（H值即水平斜切值，可以理解為水平中心軸（黃線）不動，所有水平上的長度不變，整個平面，順時針方向向兩邊，拉開30度）

角度改為30度。（即圖形中心點不動，整個圖片順時針旋轉30度）

然後需要将H即高度設置為86.6025%；這一步是為了将斜切後的兩邊邊長（原正方形左右兩邊）變回原先的邊長，這樣才是等比例的變換。至于為什麼是這個值，可以根據30度直角三角形去換算，高度應該變換成原先的二分之根号3（也就是0.866025），才能讓拉長後的邊長變回原先的長度。

到這裡，正方形的變換就完成了；

接着選中PS字體圖層，用同樣的設置将字體也變換好，如下圖。

字體層的寬度沒拉好，所以稍微拖動到中間；嫌麻煩，可以格式化字體後，再選中就不會有多餘的部分。

移動到上面一點，因為要做正方形2.5D的3面。

3.複制一個矩形1副本，鍵盤方向鍵向上移動一定距離，作為頂面；

4.側面沒有做，（一般來說在剛開始做平面圖，就會畫好側面需要的圖）可以複制一個矩形1圖層，一條邊旋轉到水平，然後用矩形工具，做一個寬度一樣的小矩形，即矩形2圖層。

别忘了删掉或屏蔽複制的那個多餘圖層。

将小矩形圖層複制一個，得到矩形2副本圖層；

4.将矩形2副本變換成左側邊；按ctrl T，将V值改為30度（V值即垂直斜切值，可以理解為垂直中心軸（黃線）不動，所有垂直長度不變，整個平面，順時針方向，向上下拉開30度），w值即寬度改為86.6025%。這樣左側面就做好了；

将做好的左側面移動到貼合好矩形1圖形左側邊；

5.将矩形2變換成右側邊；按ctrl T，将V值改為-30度（V值即垂直斜切值，可以理解為垂直中心軸（黃線）不動，所有垂直長度不變，整個平面，逆時針方向，向上下拉開30度），w值即寬度改為86.6025%。這樣右側面就做好了；

将做好的右側面移動到貼合好矩形1圖形右側邊；

最後，将左側面（矩形2副本）的顔色變換到淺一度的顔色；

這樣正方形的2.5D圖就做好了

6.到上一步，基本過程就完成了；

為了讓PS文字也加入進來，所以重新輸入PS正面文字，按照上一步中左側面的設置，制作好PS側面效果，如下圖；

複制一次PS側面圖層，移動一定的距離，這個移動一定要沿着網格線的斜線移動，才會達到準确的視圖效果。

7.接下來要做文字的右側面，因為是曲面，隻要将一個最外面的兩點鍊接填充顔色就可以，連接線一定要與參考線平行。（當然最好還是做矩形，再根據第5步中的右側面變化，複制幾次，移動到下圖相應的幾個地方，這樣最為準确）

做好之後，可以得到如下圖；

移動到相應位置，就完成了。

我們來看一下最終對比圖：

看完一遍，立馬動手做一下哦！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!