關(guān)于像素藝術(shù)中的等距圖形，這份總結(jié)超全面！

什么是等距圖形？等距圖形的發(fā)展歷史？如何快速做出等距圖形？這篇總結(jié)全都有了！

一. 等距是什么？

等距視圖是指，繪制物體時每一邊的長度都按繪圖比例縮放，而物體上所有平行線在繪制時仍保持平行的一種顯示方法。

最早是出現(xiàn)在電腦應(yīng)用程式的圖像，以及早期的8位元電子游戲，近幾年來的被廣泛的使用在因特網(wǎng)、GUI(Graphic User Interface)以及行動游戲等等。

二. 等距視圖游戲的歷史

雖然計算機游戲的歷史在20世紀(jì)70年代初期就看到了一些真正的3D游戲，但是第一個使用上述意義上的等距投影的不同視覺風(fēng)格的視頻游戲是20世紀(jì)80年代初的街機游戲。

1. 20世紀(jì)80年代

△ 高速公路遇襲（1985年）

等距視圖是一種把2D游戲偽裝為3D游戲的顯示方法。使用這種方法的游戲有時候會被稱作偽3D或2.5D

△ 蝙蝠俠（1986年）

執(zhí)行等距視圖的方法有很多，但為了簡化，最有效最常用的一種——貼圖法。從上面兩張圖可以看出，其上覆蓋的菱形網(wǎng)格把地形劃分貼圖。

2. 20世紀(jì)90年代

△ 最終幻想III（1997）

△ 文明六世（2016）

在貼圖法中，各個視覺元素都被切分為更小的部件，稱為「貼圖」，都是標(biāo)準(zhǔn)尺寸的。根據(jù)預(yù)先確定的平面數(shù)據(jù)——通常是2D數(shù)組，這些貼圖被組織成游戲世界。

3. 目前2000

△ SOCIOBALL（2015）

△ 紀(jì)念碑谷 （2016）

三. 等距風(fēng)格的圖標(biāo)、插畫及應(yīng)用范圍

這種插畫有一個專門的名字叫「isometric」。應(yīng)用范圍很廣，比如：icon、界面、啟動頁、插畫、游戲、動畫視頻等等。

△ 圖標(biāo)

△ 字體

△ 插畫

△ 海報

△ 啟動頁

四. 常用繪制軟件

目前常用的軟件有PS、AI、C4D。

現(xiàn)在網(wǎng)上有很多教程，比如：

• 《用illustrator制作Isometric風(fēng)格的寶塔》
• 《isometric立體圖形繪制分享 》

五. 干貨

雖然PS/AI都能畫出等距圖標(biāo)，但是現(xiàn)在有一個軟件Affinity Designer 比它們畫等距圖更加輕松。

畫等距圖形，首先我們需要畫參考線。PS/AI都能畫出來，但是方法還是稍稍顯得復(fù)雜了一點，一些基本功不到位的同學(xué)會很頭疼這個參考線的畫法。Affinity Designer 的網(wǎng)格和軸管理器十分人性化的解決了這個問題。

不但對于新手來說是個不錯的選擇，而且它完美的融合了Adobe和sketch兩個原本不相融的軟件。

網(wǎng)格類型選擇等軸測，這樣網(wǎng)格就會自動生成等距所需要的斜線。

并且它的網(wǎng)格還可以設(shè)置吸附功能，也就是畫的每個元素都可以自動吸附在網(wǎng)格邊緣。

另外它還有一個十分便捷的功能，它的圖形變形功能也十分強大。鼠標(biāo)移動到矩形中間節(jié)點的會出現(xiàn)上下重疊的箭頭（→），如下圖：

這樣可以十分輕松的傾斜矩形到任意角度，并且還自動吸附到網(wǎng)格上了。

拖拽矩形長寬的時候也是根據(jù)網(wǎng)格的路徑來，不會影響矩形傾斜的角度。

輕輕松松畫一個小icon。

Affinity Designer這個軟件目前只適用于蘋果操作系統(tǒng)，在App Store商店里有售賣。

案例鑒賞：

△ 軟件：C4D、3D-MAX、MAYA等大部分3D軟件

△ 繪圖手法：插畫

歡迎關(guān)注點融設(shè)計中心DDC微信公眾號：「ID：DR_DDC」

「簡單實用的2.5D插畫教程」

• 《看著高大上的2.5D插畫，輕松5步就可以做出來！》
• 《實戰(zhàn)案例！新功能引導(dǎo)頁設(shè)計思路總結(jié)》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com