2.5D等距插畫全攻略

關於2.5D插畫的製作方法

是不是被封面成功的欺騙了呢...這廝和作品集可沒半毛錢關係，而是一篇又臭又長，拖延了半年之久才下定決心，嘔心瀝血寫出來的關於2.5D插畫製作的全方位、無死角、不殘留的文章。

不管寫的精或臭，但他足夠的長~還請各位客官老爺耐心閱讀，不要怒砸電腦、怒摔手機...廢話不多說，下面開始正文...

本文打算透過現象看本質，而不單單是講一些軟體實現方面的東東，首先我們要明白什麼是2.5D插畫。2.5D插畫又叫等距插畫：他的特點是同方向的平行線永不相交（傳統的透視原則遵從近大遠小，同方向的線最終會相交一點。）傳統的透視原則如下圖所示：

圖片來源：百度圖片

2.5D插畫透視原則

巴拉巴拉講了一堆，也許沒有美術基礎的小夥伴聽得雲裡霧裡，不明覺厲...好吧，我們還是講軟體吧~

下面主要講我們常用到的兩款軟體PS、AI，我們以一個立方體為例來進行講解。

首先是PS的操作步驟：在畫布上建立一個正方形，然後按照以下三步來執行

1.ctrl+t對正方形進行變換，具體數值為寬度86.6%（W） 、 角度-60°、 斜切（V）30

（如圖中紅色區域標記的數值）

2.建造與上一步相同大小的正方形，ctrl+t變換寬度與斜切數值，角度不變；變換數值與上一步數值相同

（如圖中紅色區域標記的數值）

3.複製第二步所得圖形進行垂直對稱，然後將三個圖形拼接起來得到正方體

（正方體繪製的過程）

我們還可以使用布林運算，靈活的對圖形進行裁剪得到長方體等圖形，這等簡單操作自然難不倒各路英雄好漢，我就不在這裡多做贅述

（布林運算對圖形進行變換）

只會一個立方體能幹什麼？

（圖片來源：花瓣）

比如我們熟知的紀念碑谷插畫型別就是基於一個簡單的立方體搭建的，我們需要的是一個搭積木的思維（沒錯就和小孩子搭積木，拼拼圖的感覺是一樣的，我們需要的只是玩一般的心態，放飛你的想象力的同時加點耐心）感覺不太明白，我們就再舉個例子來操作一下。

下面我們以紀念碑谷城堡上的拱形門為例：首先我們還是現在畫布上畫出一個拱形，之後ctrl+t進行變換，數值如下。

仔細看的話一定不難發現，這與畫正方體的第二步是完全一樣的，有點懵的客官老爺可以繼續往下看，也許按照步驟來會茅塞頓開~接下來，我們可以給拱形門裡豐富一下畫面構成，比如新增一個通道，要點只是向拱形門中加入同方向的一個切面既可，圖中的這個切面和製作正方體的第一步道理是一樣的，然後向拱形門裡剪下蒙版，是不是感覺立竿見影，簡單粗暴？

下面見證奇蹟的時刻就要來了，我們按照搭積木的思維把上文做過的一些示例拼接起來如下圖所示：

看到這裡是不是已經有一種茅塞頓開的感覺了呢？所以我決定從他的構圖原理說起，單從軟體講起可能也只是看一招會一招，並不能夠融會貫通，相信各位客官老爺只要稍加耐心，不久之後也可以玩的爐火純青~

看到這裡如果你已經疲憊不堪，還請氣運丹田，靜氣凝神，稍作休息；後面的內容更臭更長...

現在開始講解在AI中關於2.5D插畫的製作技巧：

首先剛剛在PS中的操作思路在AI中也是完全適用的，有興趣的客觀可以自己研究一下；下面我們要講的是AI不同於PS的地方和他的強大之處—3D功能！

我們依然化繁為簡以一個圓形為例來做說明：先在AI中找到3D-凸出和斜角功能

點選後我們看到如下介面

我們一個個來說明一些常用到功能的意義，首先在位置功能裡我們常用的功能分別是等角-左方、等角-右方、等角-上方，我已在圖中用紅色區域標註，那麼他們分別代表什麼意思呢，千言萬語不如一張大圖~

不對圖放錯了，是這個：

圓形經過：等角-左方、等角-右方、等角-上方變形後分別得到以上圖形，相信這樣羅列出規律之後並不難理解，圓形在經過3D-位置變換後變成圓柱體的同時，他們的角度各自不同，具體可以理解為圓形的朝向的角度不同，如果空間感有限的客觀還可以在變換前點選預覽功能，觀看一下是否是自己想要的圖形；下面還要經常調節的一個數值就是我們的凸出厚度

相信凸出厚度的差別通過上圖兩個圓柱體的對比也是一目瞭然了～    同理一個正方形也可以通過上述的步驟快速得到一個立方體，AI在這種基礎立體圖形的建立上明顯效率要高很多有木有~那我們為什麼還要用PS，不直接用AI...

還是那句話，照貓畫虎並不能讓我們融會貫通，授人以魚不如授人以漁，我們要做的是多觀察，多嘗試，多研究，多總結，最後你會發現條條大路通羅馬，況且每個軟體都有自己的特性，協作運用才能使效率更高，而其他沒有說到的功能就要客官們自己去探索了~

你以為到這裡就完了嗎？

我的至理名言是沒有最臭最長，只有更臭更長；如果HP血條已經油盡燈枯的客官老爺們可以點選螢幕上方的紅色叉叉我們青山不改綠水長流，改天再議。

別...你快回來，我一人承受不來~

咳咳，我們接下來要進入重要的實戰階段了！！！

下面我們用抄現實手法進行2.5D插畫的繪製，相信老司機已經對這個詞毫不陌生了，如果不懂得客觀則可自行百度...這次的主題我們就以“動車”為例~555，為什麼是以“動車”為例？

Line"/>

第一步我們先去百度搜索一些關於“動車”的圖片，我們還可以搜尋“動車簡筆畫”找到一些已經做過“減法”的簡化圖形幫助我們更好的抽象圖形，站在巨人的肩膀上自然事倍功半~

下面我們進入操作介面開始操練，在操練前在說一點額外的小知識—網格，網格的運用就如同參考系一般讓我們繪圖更加規範效率。2.5D插畫的輔助網格我在這裡介紹一種簡單粗暴的方法~

首先用鋼筆畫一條垂直線，然後找到效果-扭曲和變換-變換這一功能

第二步進行引數設定，副本既代表往水平方向變換出多少條相同的線，水平是線與線之間的距離，這個引數就要根據你畫布的大小和構圖靈活調整了，他也是可以提前預覽的。

第三步也是非常重要的一步，變換後得到的線並非真實存在的，相當於一個映象，我們需要通過物件-擴充套件外觀功能將其變成實體

最後右鍵選擇變換-旋轉功能，進行60°旋轉，選擇複製按鈕

然後在進行一次60°旋轉複製即可得到以下網格

下面為了更好的讓大家知道網格的妙用並加以靈活用運，我舉一個簡單的小例子，比如我們只想畫一個正方體的頂面，難倒還需要經過各種變換去得到嗎，這時網格的作用就體現出來了，如下圖我們藉助網格和AI自動吸附的特性完全可以用鋼筆快速的去實現這一操作

剩下的只要按照線條的路徑盡情揮灑你的創意吧~輔助網格我們就先講到這裡，更多的妙用還請各位客觀多加練習定能發現更多的新大陸~

下面我們繼續回到“動車”的構建，將前期找到的簡筆畫用來參照，然後在AI中畫出動車的車身，如圖所示

然後進行之前講到的“凸出斜角”變換，使用預覽看到構圖合適後即可確定

不過這樣直接變換比較粗暴，圖形重疊的部分會產生路徑交叉，產生多餘的圖層，圖形較多時電腦執行會比較吃力，我們可以分層去變換，然後按照搭“積木的思維”去拼接，或者電腦強大的整體變換後去刪掉多餘的圖層，圖形交叉過多時會很亂，但空間感不夠強的小夥伴可以先用整體變換這種粗暴的方式去觀察圖形變換的規律，加深理解，具體的還需要各位客觀上手去加深感悟~

之後同我們剛剛講過的網格系統一樣，現在變換得到的車身還只是個映象，也需要執行擴充套件外觀的功能才可以轉換為可編輯的圖層

然後我們對車身編輯，進行上色等處理，如下圖所示

然後分別按照上述步驟對車頭、車尾、軌道等，進行繪製然後拼接，如圖所示：

剩下的便是無盡的遐想了，可以是正在穿過叢林的動車，也可以是城市，即使是水下也沒關係~相信每個人心中都有屬於自己的“潘多拉星球”

最後在普及一點軟體的小知識，因為AI上色比較麻煩，尤其2.5D插畫圖層量經常是很多的，我們可以根據自己操作習慣，選擇將圖層匯入到PS進行操作，具體的方法是：

1.將所有的圖層各為一層，不要編組~不要編組~不要編組~    重要的事情說三遍，這一步還是很重要的

2.然後選擇全部圖層進行“釋放到圖層（順序）”這一操作，如圖所示：

3.然後我們使用檔案-匯出，選擇PSD格式即可：

最後我們開啟剛剛匯出的“立方體”檔案檢視一下

是不是很完美的分層了呢？然後你就可以為所欲為的上色了~

然而關於2.5D插畫適用的場景真的是太多，比如說：

這麼看我這個封面還是很符（強）合（行）主（加）題（戲）的~

好了，這篇又臭又長的《2.5D等距插畫全攻略》終於全劇終了，寫了整整一天，下次演戲又不知道要猴年馬月了...如果對各位客官老爺有所幫助的話，別忘了給小的點個大大的贊