介紹

等距投影是一種在 2D 平面中表示 3D 對象的方法，其中對象邊在三個坐標軸（x、y、z）上等距縮短。對象與水平面成 30° 角繪製，並且它們的三個邊始終呈現給觀看者。相等的透視效果是由軸上的相同縮放引起的。軸之間也有相等的角度，即 120°。

等距一詞來自希臘語“isometria”，意思是“具有相等的測量”。

等軸測投影與二等軸投影和三等軸投影一起歸類為軸測投影。軸測投影是一種平行投影，其中投影線彼此平行。這些平行線在平行投影中永遠延伸，因為與透視投影不同，在平行投影中平行線會聚成一個單一的消失點，因為不存在消失點。

為了比較三個軸測投影，請看下圖。

具有相同顏色的軸線表示相同的縮放比例。此外，相同顏色的邊表示相同的透視。在等距投影中，如開頭所述，由於三個坐標軸上的縮放比例相同，因此所有邊都被同等地縮短。在等距投影中，兩條邊與另一邊的等距縮短（兩個軸具有相同的比例；一個軸具有不同的比例），而在等距投影中，所有邊都彼此不同地縮短（軸具有不同的比例）。

由於不存在消失點，平行投影中的物體相對於觀察者不會顯得更大或更小。這可能會導致失真並產生視錯覺。這種限制在等軸測投影中尤為明顯。看看下面使用等距投影繪製的這種錯覺。你有沒有註意到它有什麼奇怪的地方？

開始之前

什麼是“ shoutengai”？ Shoutengai（商店街，字面意思是“購物區”）是日本的一種購物/商業區。

商店街上有各種各樣的店面，從雜貨等基本需求到愛好商店等特定物品。他們大多位於火車站附近。但是，也有一些靠近旅遊景點並設有專門商店。上面有屋頂的Shoutengai（拱廊shoutengai）通常僅是行人，但沒有屋頂的屋頂（如主要道路旁的屋頂）可以無限期地或僅在某些小時內通行。

在本教程中，我將繪製一個 Shotengai 環境的程式化等距插圖。我將使用的方法是等軸測變換和使用等軸測尺的直接等軸測圖的混合。讓我們開始！

等距尺

首先創建一個新文檔。我在本教程中使用了相當大的畫布尺寸（3000 像素 x 2000 像素，72 dpi）。

在繪圖之前，讓我們先製作一個等距尺。等距尺將幫助我們直接在等距投影中繪製。要製作等軸尺，我們將使用 [透視尺]。

創建一個新的柵格圖層。在[工具屬性]面板中將[過程]設置為[添加消失點]並取消選中[更改透視繪製方法]。

按住 Shift 鍵可使消失點以固定角度對齊，即 0°、45° 或 90°（及其鏡像）。即使角度是固定的，也有一個技巧可以讓它以我們想要的任何角度捕捉，在這種情況下是 30°。這是如何做到的。

為標尺創建一個新層。在 [導航面板] 中，將畫布旋轉 60°。按住 Shift 鍵的同時，垂直繪製標尺兩次，它們之間有一定距離。不要讓消失點匯聚成一個點，否則它只是一個普通的透視尺。

再次旋轉畫布，但這次旋轉 -60°。按 Shift 並再次垂直繪製標尺兩次，它們之間有一定的距離。

之後，重置畫布旋轉。等距尺此時基本上可以使用了。

之所以有用，是因為固定角度不會隨著畫布的旋轉而移動。因此，如果我們將畫布旋轉 60°，然後在 90° 方向（垂直方向）繪製標尺，我們將得到 90° - 60° = 30° 作為結果。

使用【操作】工具類別下的【對象】子工具，使其看起來整潔。之後，將標尺圖層移動到底部，並將其設置為[在所有圖層中顯示]。

等距變換

將多視圖平面（正面頂視圖）轉換為等距投影時，我們需要考慮等距比例。

多視圖平面通常使用真實長度繪製，但在等距投影中，對像在所有軸上縮短了其真實長度的大約 82%（準確地說是 81.6%）。這是因為在等距投影中，對像在其所有軸上旋轉，這使得它同時顯示其三個視圖，這與一次僅顯示對象的一個視圖的多視圖平面不同。旋轉會對物體產生透視效果。

縮短長度和真實長度之間的比例稱為等距比例。

您也可以在等軸測投影中使用真實長度，但是當轉換回多視圖平面時，需要相應地縮放它們。

我將通過將立方體的多視圖轉換為立方體的等距投影來演示這一點。我為頂視圖添加了一個小箭頭符號，以便我們知道我們正在朝著正確的方向對其進行轉換。

要開始等軸轉換，請選擇要轉換的視圖，然後按Ctrl + T。

取消勾選[工具屬性]面板上的[保持縱橫比]和[更改矢量寬度]。

仍然在 [工具屬性] 面板上，將正面和側面的寬度設置為 71，高度設置為 82。

前視圖垂直傾斜 30°。為此，將 [Process] 更改為 [Skew] 並拖動變換邊界的右側或左側手柄。

垂直拖動它以使其沿垂直平面變形。注意[工具屬性]面板上的[旋轉角度]以輔助該過程。

對於側視圖，重複該過程，但垂直傾斜 -30°。

對於頂視圖，將寬度反轉為 82，將高度反轉為 71。

由於傾斜變換僅顯示垂直傾斜對象時的角度，因此我們需要將頂視圖旋轉 90°。這也是為什麼我們需要反轉上一步中的值。

之後，垂直傾斜 30°。

然後旋轉-60°。

之後，將它們組裝成一個立方體。轉換過程完成。

至於為什麼將寬度設置為71，我們來看看下面的解釋。

我們可以在 z 軸上使用 82%，因為它是對象的縮放高度，因為傾斜變換不會改變傾斜方向上線的長度。傾斜變換僅更改不在傾斜方向上的線的長度。我們希望將長度更改為原始長度的 82%。為此，我們需要使用簡單的三角學。

如果我們這樣排列，我們會得到一個三角形，它的斜邊 (h) 是真實長度的 82%，b 是要變換的縮放寬度。由於等距投影與水平面成 30° 角，因此我們可以使用 30° 餘弦來獲得 b 的長度。

cos 30° = b/h

b = cos 30° * h

b = 0.866 * 82

b = 71.014

我們得到大約 71% 的縮放寬度值。

繪製個別建築物/商店

在本教程中，我將繪製六家商店作為主要焦點。他們是花店，書店，拉麵店，烏冬麵店，愛好商店，麵包店和咖啡店（都在同一棟樓裡）。我選擇那些商店是因為我認為它們適合插圖的主題。

為了使其不至於太龐大，我不想一次繪製所有建築物，而是一次繪製一個。我還發現一個接一個地繪製建築物比直接將它們繪製為單線藝術相對容易（至少對於本教程而言）。

 

 

1. 花店

我主要使用網格來輔助繪製前視圖。要使用網格，請單擊 [視圖] → [網格] 並選中 [對齊網格] 以啟用線對齊。在 [網格/標尺設置...] 中將 [間隙] 設置為 30 像素，將 [分割數] 設置為 1、2、4 和 8。 30 px 值用作牆壁厚度和建築物高度的基本單位。 [分割數]根據詳細程度增加。例如，我將[劃分數]的主牆繪製為“ 1”，將窗口繪製為“ 8”。我不選擇大於 8 的 [Number of Divisions]，因為插圖中並不真正需要它。

首先，我只畫了商店的正面圖。前視圖將用作等距變換的基礎，也可用作草圖。我主要使用[圖形]工具中的[直線]和[矩形]子工具在矢量圖層上使用4個畫筆大小來繪製它。在繪圖之前隱藏等軸測尺。

為了有效地管理圖層，我將建築物分成幾個部分，每個部分都在自己的矢量圖層上。這些主要部分是“主樓”或建築物的總體形狀、“窗戶”、“門”、“廣告牌”、“遮陽板”和“屋頂”（如果使用屋頂的話）。某些建築物獨有的某些部分也繪製在其自己的矢量圖層中。然後使用[圖層屬性]中的[圖層顏色]對零件進行不同的著色，並將其分組到一個文件夾中。

我只繪製一次可重複使用的部件，例如窗戶和側面廣告牌。

完成的前視圖。

之後，使用上面的等距變換方法變換前視圖。

打開等距標尺。使用具有 4 個畫筆大小的 [直線] 子工具繪製它們來完成建築結構。

窗戶和門的線條看起來過於擁擠，因此請擦除其中的一些線條，以顯示零件的 3D 外觀。為此使用 [Vector] 橡皮擦。

擦除隱藏在其他部分後面的部分。

將圖層移動到新的圖層文件夾中。然後在其上方添加一個新圖層並用黑色填充並將其設置為[Clip to layer below]。這將使整個線條藝術具有黑色。您可以通過選擇它們然後按 Shift+Alt+E（[圖層]→[合併所選圖層]）來合併藝術線條及其顏色，或者您可以保持原樣。

在建築顏色的線條藝術下方創建一個新的柵格圖層。要著色，請使用 [填充] 工具類別中的 [參考其他圖層] 子工具。啟用 [Area scaling] 並將其設置為 2。使商店的顏色獨一無二，使其與其他建築物分開。我使用水綠色作為這家商店的圖像顏色。

之後添加商店名稱和側面廣告牌文本。

我為另一個細節畫了一個空調風扇。此圖也可以稍後在其他建築物中重複使用。

因為這是一家花店，所以我在店前畫了鮮花和花盆作為額外的細節。要繪製圓形花盆，請使用與上述相同的方法。

使用內置的花刷在自己的柵格層上繪製花朵和植物。使用 [圖層屬性] 調色板將圖層設置為 1 像素的黑色輪廓並關閉抗鋸齒。繪製完成後，使用[濾鏡]→[模糊]→[平滑]對圖層進行光柵化和平滑處理。

對於變化，我畫了一個立方體花盆。要繪製立方體花盆，可以使用設置為六邊形的[多邊形]工具。這是有效的，因為正六邊形具有等距立方體的輪廓。正六邊形線的角度為 120°，這是等軸測圖中軸之間的精確角度。

畫更多的花盆以增加細節。

店面完了。

這裡的所有圖紙都是用與這家商店相同的方法繪製的。

 

 

2. 書店

我決定在我的舊教程中重繪我以前的書店，但使用等距投影。儘管它並不完全相同（因為省略了一些細節），因為這家商店將成為更大插圖的一部分，而不是獨立繪圖。

我在此圖中重複使用了花店的窗戶和側邊廣告牌。

之後，為圖形添加顏色。我將藍色主題用作這家商店的圖像顏色。

畫完了。

 

 

3. 拉麵店

通常，你會看到許多拉麵店的門前掛著一個暖簾，所以我把它作為這家店的細節添加到圖紙中。

在這幅畫中，我還重複使用了花店的門、窗和側廣告牌。

我使用黃色主題作為這家商店的圖像顏色。對於Noren來說，在拉麵店通常是紅色的，所以我也使用這種顏色。

畫完了。

 

 

4.烏冬麵店

烏冬麵店的門前通常也掛著門簾。為了做出變化，我使用了一個短門簾，並在商店前面添加了兩台自動售貨機。我這裡也用了兩扇門和兩扇窗，使之與以前的商店不同。

我也像拉麵店一樣使用黃色主題作為圖像顏色，但這次我使用白色作為門簾。

畫完了。

 

 

5.業餘愛好商店

為了做出改變，我把這家店改成三層而不是兩層。我還在入口處使用了一個巨大的單窗。

我在這裡重複使用了花店和烏冬麵店的窗戶和側面廣告牌。

我使用淺藍色和灰色主題作為圖像顏色，以將其與書店區分開來。對於屋頂的廣告牌，我使用相同的等距變換方法添加了一個簡單的廣告模型設計。

畫完了。

 

 

6. 麵包店和咖啡店

這兩家店共用同一棟樓。該建築共有三層，只有前兩層用於商店。麵包店位於二樓，咖啡廳位於二樓。

我複制前視圖並使用 [Edit] → [Transform] → [Flip Horizontal...] 鏡像它。之後，我大致繪製了建築結構。

我覺得屋頂太空了，所以我在上面加了一個服務樓層。它不是原始前視圖的一部分，但我們可以使用等距尺輕鬆繪製它。

我在這裡也重複使用了花店和烏冬麵店的窗戶。其餘部分來自這家商店的原始正視圖。

對於面向觀察者的窗口，您只需將它們的高度縮放到 82。這是因為寬度不在任何軸上，因此它沒有被縮短。

我使用棕色主題作為圖像顏色。對於麵包店，我使用棕色，對於咖啡店，我使用深棕色。兩種都代表了他們產品的顏色。

畫完了。

繪製壽騰蓋

在現實生活中，大多數人天街都有他們獨有的大門，所以我決定在插圖中添加一個。

我使大門至少有一條車道的寬度和三層樓的高度。因為大部分的門設計都是對稱的，所以我在繪製時使用了[對稱尺]，將[線數]設置為2。

嘗試使澆口設計盡可能獨特。

之後，將文本添加到標題符號。結果看起來像一個科幻門。

要完成澆口，請使用與上述相同的方法，但這次將其傾斜 -30°。

之後，添加門的顏色。我使用藍色作為上面的標題標誌，其餘使用灰黑色。

繪製雜項道具（路燈和交通燈）

為了便於管理，我分別繪製了路燈和交通燈，而不是以後直接繪製它們。

下面是正面和背面路燈的繪製過程。

下面是交通燈的繪製過程。

通常你會在很多沒有屋頂的商店裡看到電線桿，但我決定不在這裡添加它們，因為我認為它會阻礙主要商店的注意力。

安排建築物

首先，將蘇騰蓋門的各個層、每個建築物和道具合併到自己的層中。

之後，將它們排列起來，使其看起來像一個shoutenai。這些建築物將是插圖的焦點，因此請確保它們的佈置能夠吸引觀眾的眼球。

然後，畫出主要街道和人行道。

之後，將道路排水系統繪製到路面輪廓。

我畫了更多細節，並在主交叉路口增加了兩個行人過路處。

之後，使用[參考其他圖層]子工具為街道著色。我為人行道選擇了淺鮭魚橙色，為街道選擇了淡黃色的淺灰色

我畫了自行車道，使街道不那麼平整。

之後，佈置道具，以免它們過多地阻礙商店。

添加背景建築。您可以重複使用其他建築物，或者如果您喜歡，也可以繪製它們。我選擇重複使用其他建築物並重新繪製它們以適合作為背景建築物。

給背景建築上色，這樣它們就不會分散觀眾對主要 Shotenengai 建築的注意力。

最後，在插圖中添加澆口圖。

關閉等距標尺的完成排列。

精加工

對於這個插圖，我假設射向建築物和物體的光線是平行的，這意味著投影的陰影也是平行的。

為了可視化，請看下圖。朝向物體的光線（紅線）設置為 30°，陰影邊緣（黑線）平行於 y 軸。

在主插圖上方創建一個圖層文件夾。將其設置為 90% 的不透明度，並將模式設置為 [Multiply]。在該圖層文件夾中創建一個新的柵格圖層。這一層將是我們的主要陰影層。

通過追踪被物體阻擋的光線來繪製陰影。您可以使用任何不透明的圓形畫筆甚至直線子工具來繪製它們。使用灰藍色作為陰影顏色。

對於大門，我避免在標題標誌上繪製陰影以使其突出。

為了增加一點真實感，在另一個光柵層上為麵包店和咖啡店的水平部分繪製陰影，但不透明度較輕。這樣做是因為水平部分沒有完全被光源照亮，也不完全在主陰影中。

這是陰影層的排列。

之後，讓我們為環境創建燈光效果。

複製陰影層文件夾並將不透明度設置回 100% 並將模式設置為 [Normal]。通過右鍵單擊圖層文件夾並選擇[合併所選圖層]來展平復制的圖層文件夾。

使用 [濾鏡] → [模糊] → [高斯模糊...] 將生成的圖層模糊 20。

選擇合併圖層。然後Ctrl+單擊陰影層文件夾上的文件夾圖標。這將根據它創建一個選擇。之後，按刪除。

取消選擇。通過選擇顏色然後使用[編輯]→[轉換為繪圖顏色(H)]將圖層顏色更改為橙色。將光效不透明度設置為 20%。

插圖完成。

希望本教程有用。謝謝閱讀！