電子遊戲和設計的等距藝術

10,929

Mattlamp

Mattlamp

大家好!在本教程中,我將解釋如何使用 Clip Studio Paint Ex 的一些特殊功能來幫助我們以簡單的方式創建等距藝術,重點是視頻遊戲的舞台設計和藝術,但這些技術可以應用於設計或插圖.

● 我不是這方面的專家,所以我一直在嘗試,我想與您分享對我有用的方法和技巧。我希望它對你有用

 

■ 注意:我使用Clip Studio Paint Ex。某些功能在其他版本中可能不可用。

 

這是我使用我們將要學習的技術繪製的一些示例▼

 

1. 介紹 |等距透視或投影

■ 讓我們來看看不同類型透視之間的差異:

 

• 兩點透視:如果我們以透視方式觀察物體,我們會注意到它們隨著向消失點移動而變小。人眼以這種方式感知。

 

• 等距透視:與傳統透視不同,等距透視是一種軸測投影。我們總是看到 3 個面,它們的測量尺度是相同的。無論“相機”的位置如何,物體都不會顯得更小或更大。側面與垂直軸成 30° 角。

這種投影的好處是,即使是初學者,我們也可以輕鬆地進行透視構建,但必須考慮到可能會產生感知物體深度和高度的問題。

 

• 2:1 透視:另一種廣泛用於視頻遊戲和設計的軸測投影。在這種情況下,兩側具有大約 26.6° 的相同角度。

如果我們將其與等軸測圖進行比較,則可以看到物體的俯視圖不太明顯,因此對眼睛來說,它們的感知方式稍微自然一些。

 

 

2:1 視角因其在 Pixel Art 的視頻遊戲中的使用而變得流行,與等距視圖相比,該角度允許生成乾淨的直線。▼

 

■ 注意:最合適的投影取決於我們正在尋找的風格,對於策略遊戲和建築設計,等距透視非常有用,對於設計和像素藝術,我們可以使用 2:1。

個人覺得2:1視角提供的視角比較愉快,但最好根據每個項目的需要和個人的口味進行正確的實驗選擇,我們甚至可以探索其他角度來獲得不同的視角。

2.第一種方法:變換

• 我們將使用剪輯工作室中的轉換工具來創建等距投影:

 

■ [1] 例如,我使用正方形。首先,我們轉到 [編輯]> [變換]> [縮放/旋轉] 或使用鍵盤快捷鍵 CTRL + T。

■ [2] 我們使用手柄或在 [工具屬性] 面板中將圖層旋轉 45°,然後按 OK 或 Enter 鍵確認轉換

■ [3] 我們再次應用轉換。

• [3.1] 我們確保禁用 [維持比率]

• [3.2] 我們改變高度以實現透視。對於等距投影,經常使用 60,但個人 58 給了我實現 30° 角的最佳結果。

我們通過按 OK 或 Enter 鍵確認轉換,我們現在有一個可以用作基礎的圖塊。

▼如何通過這種方式創造銷量?

 

■ [4] 我們可以很容易地使用基礎來創建體積。首先,我們將使用移動工具(快捷鍵 V)複製圖層,按住 ALT 進行複制,按住 SHIFT 進行垂直移動。我們把它放高一點來定義我們對象的高度。

■ 注意:我們也可以使用快捷鍵CTRL+J或[圖層]>[複製圖層]的下拉菜單進行複制,這些方法中我複製圖層的頻率很高,所以我建議使用鍵盤快捷鍵效率更高:D

 

■ [5] 使用我們最喜歡的線工具,我們連接垂直軸上的點以創建體積。

• [5.1] 在形狀工具中,我使用了 15° 的角度步長,這允許我創建 30° 的垂直線和側面

■ 注意:在這個例子中,我也連接了邊,我將頂層設置為幫助我填充的參考,這一步是可選的。

■ [6] 我使用底層的油漆罐填充側面,然後使用快捷鍵 CTRL + E 組合圖層

• 通過這些簡單的步驟,我們的對象的基礎就準備好了。現在我們可以使用它來創建我們想像的對象。

 

▼ 使用基地創造不同的材料

 

■ [7] 根據底座的幾何形狀,我們可以在等距透視中創建不同的材料。

如果我們認為有必要,我們可以在同一層上工作或創建新層。

 

該過程取決於每個人,在我的情況下,我會勾畫一些細節,例如材料中的紋理和裂縫。我嘗試打破邊緣,使物體看起來更有機。 ▼

為了完成,我們只需用我們最喜歡的畫筆繪製材料。

考慮到光線的方向,並試圖從基礎的角度生成有趣的形狀。

 

詳細程度取決於每個人的需求和風格。想像和試驗不同的材料是很有趣的。

 

■ 我們從一塊瓷磚開始,賦予它體積,然後在等距透視中定義一種有機材料。

 

• 我希望這個簡單的例子能讓你了解這個方法所具有的表達可能性。

2.1 |自動動作

■ 為了減少這些重複性操作的乏味,請準備一組自動操作。

 

您可以在剪輯工作室資產中下載它們以及為本教程準備的其他工具。 ▼

 

■ [1] 如果我們沒有看到自動操作面板,我們可以從菜單 [窗口]> [自動操作] 中激活它

 

• [1.1] 然後我們通過從材料面板拖動來加載動作。

■ [2] 共享分為兩部分。

• [2.1] 等距 30 °(底座、正面、側面)

• [2.2] Dimetric 2: 1(我使用寬度為 141 和高度為 71 的比例)

■ [3] 我們可以使用Isometric 30°的3個動作輕鬆構建一個立方體。不幸的是,我無法為 2:1 的視角定義邊。 ▼

 

• 等距 2:1 動作幫助我們為 2:1 透視圖奠定基礎▼

■ 注意:由於變換選項中缺少小數和傾斜,形狀並不完美。它們仍然可以節省時間,然後我們可以改進基礎。

■ [4] 提示:我們可以為自動操作分配鍵盤快捷鍵,這樣我們可以更加高效並優化工作流程。

 

讓我們轉到 [文件] [快捷方式設置 (H)] 或使用快捷鍵 CTRL + ALT + SHIFT + K

• [4.1] 我們從下拉菜單中選擇自動操作。

• [4.2] 我們選擇一組等距動作,選擇要為其分配快捷方式的動作,然後按編輯快捷方式

• [4.3] 我們添加快捷方式並確認。

 

 

• 現在我們可以通過按鍵盤快捷鍵來應用操作。非常有用和有效。 :D

3. 第二種方法:特殊規則

另一種幫助我們創建洞察力的方法是使用特殊的 CSP 規則。

我將向您展示兩種不同的技術。

■ [1] 對於第一種技術,我們將使用 [平行線] 的特殊規則

 

• [1.1] 我們將角度步長設置為 30 以定義 30° 的等距透視,並在編輯層中激活創建

 

•[1.2]按住SHIFT鍵,我們在右側創建30度的標尺

• [1.3] 然後我們在左邊創建另一個來定義另一邊。

 

• [1.4] 最後我們創建了一個垂直標尺

• [1.5] 在圖層面板中,我們配置標尺,使其在所有圖層中都可見。

■ [2] 現在我們定義了規則,我們可以繪製正確的角度。

 

• [2.1] 活動規則是紫色的規則。我們可以使用命令欄上的按鈕或鍵盤快捷鍵 CTRL + 4 在每個規則之間旋轉。

 

• [2.2] 我們可以使用命令欄上的按鈕或鍵盤快捷鍵CTRL + 2 來激活和停用規則的使用。例如,我們停用規則以添加有機詳細信息。

■ [3] 提示:我們可以利用矢量圖層來構建我們的對象。

• [3.1] 我們畫線而不用擔心它們相交

• [3.2] 我們使用矢量橡皮擦去除多餘的線條。

■ 注意:此方法對於創建 30° 等軸測圖可能是最準確的,但我個人認為它不那麼直觀或高效。

 

解決這個問題,準備一些透視規則和網格,你可以在我在assets中分享的工具中找到它們▼

■ [4] 要使用標尺和網格,我們只需將其從材質面板拖到畫布上。

 

• [4.1] 我們使用對象 | 將網格調整到我們喜歡的大小。手術。

•[4.2]利用透視標尺,我們可以更直觀地繪製。

•[4.3]和以前一樣,我們可以使用快捷鍵CTRL + 2激活/取消使用標尺,這樣,我們可以在不需限制角度的情況下進行繪製。

• [4.4] 使用 2:1 規則,我們可以以與 30° 等軸測相同的方式創建此透視圖

• 希望這些規則對您有所幫助。我們將把它們與自動動作結合起來進行我們的設計。但首先讓我們談談為視頻遊戲創建地圖。 ▼

4. 瓷磚瓦片地圖

在視頻遊戲中創建場景的一種非常通用且流行的技術是使用 Tilesets 和 Tilemaps。

 

■ 什麼是瓷磚?

 

• 圖塊集是一組圖塊或“圖塊”,我們可以使用它們在形成“圖塊圖”的網格中創建地圖,它們是創建地圖的有效方式,通常用於不同的遊戲引擎,例如 Godot 或 Unity .

 

•它們通常以正方形格式創建,並且通常彼此形成圖案以建立模塊化系統。

▼ 我將向您展示如何配置我們的文件以使用圖塊集以及一些用於創建等距風景的有趣技術。

■ 準備文件:

 

• [1] 我們將要 [File]> [New] 創建我們命名為 Tileset 的基礎畫布,

 

• [1.1] 大小可能會有所不同,但通常以方形格式工作更容易。在我的情況下 512x512px

尺寸可能會有所不同,但通常以方形格式工作更容易。在我的情況下 512x512px

 

• [1.2] 重要提示:我們將激活創建移動插圖並定義若干幀。這一步對我開發的系統很重要。

 

每個框架將代表一個圖塊。 12 是一個很好的開始,我們可以根據需要添加更多。▼

■ [2] 我們的文件已經有一個準備了 12 個單元格的動畫文件夾

• [2.1] 要查看幀,請轉到 [窗口]> [時間軸 (X)]

• [2.2] 正如我們在上一菜單中配置的那樣,我們節省了時間,而且我們已經為每幀分配了一個單元格:D

 

■ [3] 為了在每個圖塊上處理多個圖層,我們將右鍵單擊並[創建文件夾並插入圖層 (F)] 或使用快捷鍵 CTRL + G

• [3.1] 我們為每個 Cell 定義一個文件夾

■ [4]我們從菜單[查看]> [標尺/網格(N)設置...]定義一個引導網格

• [4.1] 標尺/網格原點:中心

• [4.2] 間隔等於畫布的大小,在本例中為 512 像素。 4師

■ [5] 最後,我們將文件保存在易於訪問的位置。

現在我們要繪製我們的瓷磚。為了確保圖案正確重複,我們可以創建一個參考文件。

■ [6] 我們首先在第一幀上繪畫以幫助我們設置文件。

• [6.1] 我們創建一個新文件,以定義我們將要創建的 9 塊網格的大小,因此我們將基本文件的大小乘以 3。在這種情況下,512 x 3 = 1536

• [6.2] 我們從菜單[文件]> [導入]> [創建文件對象] 中將tileset 文件作為文件對象導入

• [6.3] 隨著操作 |對象,我們從“工具屬性”子菜單中配置原因。

 

• [6.4] 我們配置窗口以將其用作參考。當我們保存時,我們對原始 Tileset 文件所做的任何更改都會反映在該層中。

■ [7] 作為示例,我創建了第一個圖塊的變體。我複製圖層並將其放置在與第二幀或單元格對應的文件夾“2”中。

 

• [7.1] 使用 CTRL + U 快捷鍵,我使用色相/飽和度/亮度校正,並更改色相以創建顏色變體。這是一種廣泛用於視頻遊戲的技術,可以利用藝術並節省時間。

• [7.2] 現在我們準備了這個系統中我最喜歡的部分:在工具屬性子菜單中,我們可以從文件對像中選擇顯示的特定幀。

 

這樣,如果我們從 0 變為 1,我們就會從 TILE 1 變為 2!

 

▼ 我們將使用這種方法使用在單個文件中創建的圖塊來創建我們的地圖。我個人覺得使用 Clip Studio Paint 的這個功能是一種非常有趣和有創意的方式:D

4.1 提示 |動機或模式

■ 我不是創建重複圖案或圖案的專家,但我將分享一些我認為在繪製它們時有用的方法。

■注意:2020年3月,本月TIPS的主題之一是動機和模式。如果您願意,可以查看社區中其他作者創建的令人難以置信的教程。在這裡,我分享一些我最喜歡的。 ▼

■ [1] 我們將創建一個“LAVA”瓷磚。第一步是繪製我們想要的紋理,我們仍然不用擔心讓它成為一個圖案。▼

• 使用您最喜歡的畫筆。

■ 注意:一種選擇是先勾勒紋理,將其轉換為圖案,然後對其進行細化,但在這種情況下,我決定製作彩色瓷磚以節省時間。

■ [2] 我們用4 個分區激活我們之前準備的網格。

• [2.1] 我們確保激活[對齊網格](快捷鍵CTRL + 3)並使用矩形選擇工具(快捷鍵M)從一個角到中心進行選擇。

• [2.2] 選擇活動時,CTRL + C 和CTRL + V 複製並粘貼到新層。

• [2.3] 我們重複其他 3 個角,我們已經將“瓷磚”分成了 4 個部分。

■ [3] 使用移動圖層工具(快捷方式 V)我們將每個四分之一移動到對角。

我們可以按住 SHIFT 來保持對角線,一旦我們將圖像放在角落裡,我們就使用鍵盤箭頭來檢查我們是否將其放置在正確的像素中。

 

• [3.1] 我們重複其他 3 部分。

• [3.2] 使用CTRL + E 我們將層合併為一個。

之前和之後 ▼ 現在我們必須糾正中心的關節以完成紋理。

■ [4] 我們開始繪畫以糾正中心的接縫。我們可以在同一層上工作或在必要時創建新層。

 

• [4.1] 在參考文件中,我們使用操作/對象工具和工具屬性面板配置與瓷磚相對應的框架。

• [4.2] 使用參考檢查紋理,我們繼續繪畫和細化,直到我們對結果滿意為止。▼

■ 注意:在更改紋理以更新參考畫布上的文件對象時,請記住保存文件(快捷鍵 CTRL + S)。 (“圖塊集檢查”)

■ [5] 在 Clip Studio Assets 中,我們可以找到出色的圖案和圖案。要使用它們,我們只需從材料調色板拖到畫布上。

 

• [5.1] 為確保正確配置,我們使用對象工具並在工具屬性面板中,將調整位置配置為“畫布”。

通過這種方式,圖案在我們畫布的邊緣是完美的。

 

■ 注意:理想情況下,我們使用資產材質作為基礎來幫助我們創建瓷磚,然後我們以自己的風格進行繪製以生成一致的視覺系統。每個人都可以自由探索不同的技術以獲得好的結果。

▼ Tiles 的一些示例,每個示例都在其各自的框架中。

 

▼ 我在例子中使用的一些材料。

4.2 提示 |使用 Tilesets 創建地圖

我將向您介紹一些使用我們在上一節中創建的tileset 並動態創建地圖或場景的技術。

■ [1] 我們創建一個新的 Canvas,在本例中為 1920x1080px

• [1.1] 我們將使用 2:1 網格和標尺材料來定義透視。

• [1.2] 我們從菜單 [File]> [Import]> [Create File Object] 中將 Tileset 作為 File Object 導入並選擇文件“Tileset”

 

■ [2] 我們使用自動動作“Isometric 2: 1”來定義透視中的“Tile”

我們使用控件來重新定位和縮放 Tile ▼

• [2.1] 我們更改工具屬性面板中的框架以選擇正確的平鋪。

• [2.2] 我們激活 Motif 將其變成重複模式。通過這種方式,我們定義了場景的地板。

• [2.3] 要創建其他元素,我們複製文件對象並通過更改框架選擇另一個 Tile。

• [2.4] 在“原因”選項中,我們可以選擇重複的方式。如果我們選擇水平或垂直,我們將只在兩個方向之一創建一行瓷磚。在這種情況下,我們用 Water Tile 定義了一種河流。

• [2.5] 我們再次復制,這次我們改變了主題的方向。

然後我們通過修改框架來定義瓷磚。

■ [3] 我們的地圖看起來仍然很平,讓我們給它一些深度。

我們可以使用標尺輕鬆創建尺寸並手動繪畫。

首先,我們在塊下創建一個層。

 

• [3.1] 使用活動標尺和我們最喜歡的畫筆,我們繪製瓷磚的側面。

• [3.2] 提示:如果我們創建瓷磚的變體,我們可以使用圖層蒙版來創建有趣的混合和紋理。

首先,我們複製並更改框架。

 

• [3.3] 按住ALT 我們按下按鈕來創建一個圖層蒙版,這樣我們就隱藏了整個圖層。

• [3.4] 我們使用軟筆刷在兩種變體之間創建過渡。顏色顯示和透明隱藏。

• [3.5] 最後,我們將所有圖層組合到一個文件夾中。

• [3.6] 我們將創建一個陰影來定義我們創建的元素的高度。

我們在組下面創建一個新層。

然後按住 CTRL 我們單擊文件夾以創建選擇。

我們用深藍色填充選區並向下移動圖層以創建瓷磚和地面之間的距離。

• [3.7] 我們用畫筆填補缺失的部分。

我們將圖層置於乘法模式並降低選項。

•[3.8]要完成效果,請轉到[濾鏡]> [模糊]> [高斯模糊],然後調整該值以柔化陰影的邊緣。

■ [4] 現在我們要給河流一點深度。

我們在水瓷磚上創建一個新層。

我們在透視標尺的幫助下繪製邊緣。

▼ 在這種情況下,不用擔心在水中重疊的部分。然後我通過按 CTRL + 單擊圖層縮略圖加載水層作為選擇,並擦除剩下的部分以獲得乾淨的邊緣。

 

• [4.1] 我們可以停用標尺並手動繪製更多有機邊緣和細節。

•[4.2]要在水中創建陰影,我們首先再次加載該圖層作為選擇,然後轉到[選擇]> [減少所選區域]菜單,並將其值設置為10px

• [4.3] 我們從[Select]> [Blur edge] 菜單中柔化選區,並賦予它40px 的值。

然後我們用任何顏色填充一個新圖層,因為它稍後僅用作選擇。

• [4.4] 我們複製水層並將其置於乘法混合模式

• [4.5] 最後,我們加載之前創建的選區並將其用作圖層蒙版。

我們通過使用軟刷手動繪製來優化蒙版。

▼如果我們比較,與微妙的陰影我們有更多的體積。這些類型的細節很容易製作和豐富作品。

■ [5] 我們繼續創造元素。在這種情況下,我使用木瓦來創建一座橋樑。

首先,我像之前一樣複製文件對象,然後選擇與樹林瓷磚相對應的框架。

• [5.1] 按住ALT 鍵,我們創建一個隱藏整個圖層的圖層蒙版。

然後我們繪製僅露出水周圍的區域以創建木橋。

我們通過手動繪製來細化圖層蒙版以獲得有趣的形狀。

• [5.2] 我們複製下面的層。下一步是柵格化並應用圖層蒙版。

然後我們稍微向下移動以創建橋樑的體積。

(CTRL + U) 色相/飽和度/亮度使圖層變暗,以便您可以看到輪廓。

• [5.3] 根據輪廓的形狀,我們手動繪製了橋的邊緣以賦予其體積。我們嘗試定義照明。 (不一定要完美)

• [5.4] 最後,我們以乘法模式在橋下創建一個新層,並在地板和水面上繪製陰影以將對象整合到場景中。

▼ 橋是這樣的。

▼ 通過結合這些技術,我們可以創建不同的對象並定義我們的風景或地圖。

■ [6] 此示例中的一些最後細節:

在強光模式的圖層上,我繪製了一些燈光效果,以使用軟噴槍增強氣氛。

• [6.1] 我再次復制“tileset”對象並選擇Tile,但這次我停用了Motif,以便只有一個tile。

• [6.2] 在瓷磚下的一個新層中,我在尺子的幫助下繪製一側以定義體積。

• [6.3] 我複制側面並使用快捷鍵CTRL + T 進行自由變換。然後我右鍵單擊它並選擇[水平翻轉]

最後,我將副本定位到立方體的另一側並將圖層分組到一個文件夾中。

■ 提示:我們可以遮擋透明像素並繪製燈光/紋理,而無需擔心變形。

• [6.4] 我創建了組的副本並更改圖塊以獲得顏色變體。

• [6.5] CTRL + T 進行自由變換。我縮小對象並定義它的位置。

• [6.6] 最後,為了將它們集成到場景中,我以乘法模式在對像下方創建了一個層,並手動繪製了陰影投射。

▼我決定改變綠色瓷磚的圖層蒙版中的紋理,以在過渡中生成更有趣的紋理。

▼ 這是我的例子的最終結果。我希望你對這個系統的可能性有所了解。通過將手工繪畫技術與 Tilesets 相結合,我們可以以創造性和高效的方式創建無數場景。

(比起繪製這個例子,我花了更長的時間來解釋這些步驟)

■ 注意:如果我們不光柵化文件對象,我們仍然可以對圖塊集進行更改,它將反映在最終的等軸測佈局中。這使我們能夠很好地控製作品,在我看來,它是一個非常強大的創意工具。

▼ 例如,將瓷磚從“水”更改為“熔岩”,其餘的調整幾乎都是色相/飽和度/亮度(CTRL + U),並且在5分鐘內我就有了場景的環境變體。

5.繪製等距場景2:1

結合所呈現的技術,我們將繪製一個更複雜的場景作為視頻遊戲概念。

■ [1] 本示例中的畫佈為 4k (3840x2160px)。

 

• [1.1] 我選擇的視角再次是2:1。

 

• [1.2] 這是我準備的 Tileset,用於使用 Tiles 調色板。如果您可以注意到,我有一些“岩石”圖塊的變體,可以生成各種變化。

• [1.3] 分解空白畫布繪製一個基本環境,沒有太多細節,因為我將涵蓋大部分內容。這一步是可選的,但我認為它有助於從一開始就整合場景。

• [1.4] 我使用標尺創建了場景草圖。這是一場與蜘蛛老闆的戰鬥。我試圖定義我們的角色可以在遊戲中與之交互的不同平面和元素。

■ [2] 我開始定義元素。首先,我將Tileset導入為文件對象。

[文件]> [導入]> [創建文件對象]

• [2.1] 我選擇了具有正確框架的“岩石”板塊之一。

• [2.2] 在自動操作的幫助下,我將平鋪轉換為 2:1 投影,就像我之前在上一個示例中所做的那樣。

• [2.3] 以網格和草圖為參考,我將平鋪縮小到適當的比例。

• [2.4] 在瓦片下方的新層中,我使用網格作為參考來定義塊的高度。在這種情況下,塊是 1 高 x 4 寬。

然後我將圖層分組到一個我命名為 Tile Roca 1 的文件夾中,並給它一種顏色來組織自己

• [2.5] 我鎖定側層中的透明像素並開始繪製細節,使用Alt 鍵從瓷磚中選擇顏色。因為它是岩石紋理,所以我遵循輪廓使其具有更逼真的體積。透視不一定是完美的,足以創造材料的錯覺。

•[2.6]為了增強照明效果,我複制了圖層,將其置於乘法模式並降低了不透明度,然後刪除了不需要的部分。

•[2.7]我將瓷磚加載為選區,並在“屏幕”模式下的新圖層中進行繪畫以增加塊頂部的亮度。

• [2.8] 我創建了文件夾的副本,然後移動它以查看塊如何重疊。連接感覺有點緊張,所以我創建了一個新層並在邊緣周圍繪製體積以改善塊之間的過渡。我們有點偏離網格並不重要,因為它是一種有機紋理。

•[2.9]重要的是要了解這些塊是如何重疊的。為了達到正確的效果,在圖層面板中,畫布右側的塊必須位於圖層的頂部。反過來,從下到上的“行”必須是有序的。

■ 注意:當我創建“岩石”瓷磚的變體時,我確保只修改中心,因此只需更改帶有框架的瓷磚,我們已經有 3 個可以使用的“岩石”塊。

 

我們將復制我們創建的塊以輕鬆定義地形。

■ [3] 我們繼續定義元素。

重複相同的步驟,我們用其他“瓷磚”創建塊。

在這種情況下,我修改了音高以創建塊變體。

• [3.1] 在文件夾中使用CTRL + T,我們通過修改塊的比例來輕鬆定義場景其他元素的基礎。

• [3.2] 在標尺的幫助下,我將瓷磚的紋理展開到兩側。

• [3.3] 我創建了一個副本並將它們放置成一個包含 2 個塊的台階。

• [3.4] 我將 2 個塊分組在一個文件夾中,然後再創建 3 個副本。通過修改垂直位置,我為台階定義了不同的高度,無需太多努力即可實現更有趣的結構。

• [3.5] 為了改進它們重疊的方式,我們在乘法模式的新層中繪製陰影。為了避免留下邊緣,我們只需加載塊作為選擇(CTRL + SHIFT +單擊圖層縮略圖)並創建一個圖層蒙版。然後我們刪除不需要的部分。

• [3.6] 我們重複其他塊中的步驟。在屏幕模式下在圖層上使用相同的蒙版,我們可以在最頂層繪製一些光線。

最後,我們將所有步驟放在一個文件夾中。

• [3.7] 我們繼續創建定義地圖的“岩石”塊的副本。如果調整位置我們可以獲得更好的視覺結構,則沒有必要完美地粘在網格上。

• [3.8] 為了改善極端塊中的邊緣,我們創建了一個圖層蒙版並按照岩石的形狀擦除了部分結構。

• [3.9] 我定義了第二行,然後我將所有塊分組到一個文件夾中,這樣我可以輕鬆地複制行並完成地板。

• [3.10] 我使用 3 個方塊高,以便吊燈的地板位於更高的平面上。

• [3.11] 我完成了地板,我隨機調整瓷磚,使其不那麼重複。

• [3.12] 通過簡單地上下垂直移動一些塊,我們可以打破網格並給場景更多的音量。

這些類型的細節很微妙,但可以使場景栩栩如生,並且不會花費太長時間來完成。

它們還幫助我們講述一個故事或解釋遊戲概念的機制。當角色踩到它們或激活陷阱時,一些方塊可能會掉落。

■ 我們完成了這個場景的地板。我們可以重用這些元素,用網格和塊系統創建無數場景。

■ [4] 為了將梯子與岩石塊結合起來,我在組中創建了一個圖層蒙版,並用透明顏色塗抹以擦除部分邊緣,使它們看起來不那麼完美。

•[4.1]根據草圖並在網格的幫助下,放置先前創建的圖塊以創建浮動曲面。

• [4.2] 在乘法模式的圖層中,我們在第一個塊與石地板接觸的地方繪製陰影。這樣我們就整合了場景。

• [4.3] 我們加載Tile 的形狀作為選擇並用陰影的深色填充它。

使用網格,我們確保陰影位於正確的位置,以免破壞透視錯覺。

我們修改圖層的不透明度來調整陰影的強度。

• [4.4] 我們複製該層並將其放置在下一個塊的下方。

對於構成結構的 4 個塊的陰影,我們將每個 tile 作為選區加載並填充在同一層中。然後我們將陰影放置在網格後面的地板上。

• [4.5] 我們對每個陰影應用[濾鏡]> [模糊]> [高斯模糊] 以柔化邊緣。最後,我們將所有圖層分組並對其應用圖層蒙版以優化最終結果。

▼ 這種透視的主要問題之一是難以感知物體的高度。使用陰影我們創造深度的錯覺,它不必非常逼真。

■ [5] 我們繼續創建草圖元素。下一步,熔岩河。

步驟仍然非常相似。首先我複制tilset。

我選擇熔岩磚並將其放置在岩石塊後面的正確位置。

這次我激活“原因”以創建一行。

使用圖層蒙版和透明色我隱藏了我不需要的部分。

• [5.1] 由於重複部分,“高”塊的側面看起來有點奇怪。我們將手動在新圖層上繪畫,使其看起來更自然。

• [5.2] 我們將方塊分組,並屏蔽部分底座以將其與熔岩整合。

• [5.3] 我們在強光模式下創建一個新層並對塊應用剪貼蒙版。然後我們畫一個橙色的光芒來加強熔岩的效果。

•[5.4]對於熔岩河上的街區,我們可以輕鬆創建一個特殊的變體。首先,我們複製“Tile”圖層並將其更改為 Lava Tile。

然後按住 ALT 我們創建一個隱藏所有內容的圖層蒙版。

我們繪畫以揭示在塊表面上創建熔岩細節。

• [5.5] 在一個新層中,我們繪製陰影以定義裂縫的體積。

我們還在 Add Glow 上添加了帶有圖層的燈光效果

• [5.6] 我複制了方塊並稍微修改了熔岩裂縫。為了整合它們,我再次掩蓋了粉底的一部分,然後添加了柔和的光芒。

最後在一個新層上,我在熔岩表面手動繪製細節。

▼這是熔岩河的結果以及它如何與方塊融合

■ [6] 我們繼續一步一步地詳述場景。我要準備的下一件物品是構成河流的岩石。作為基礎,我使用其中一個塊,但我使用 CTRL + T 增加了它的大小。

我對這些類型的元素沒有太多解釋,我們盡量保持觀點,但沒有必要做到完美。我正在用各種畫筆手動繪畫。

▼ 再次使用Highlights和masks來整合元素。

雖然有些元素製作起來似乎很複雜,但我們只是簡單地分成幾部分並重複相同的步驟,耐心地獲得所需的細節水平。

每當我可以嘗試重用元素以節省時間。

• [6.1] 某些元素在前視圖中更易於使用。我們可以繪製草圖,然後應用透視圖,或者像我們對 Tileset 所做的那樣,我們可以用顏色繪製基礎。

在這種情況下,我使用對稱規則來加快進程並設計地牢入口的拱門。

•[6.2] CTRL + T進行變換,在按住CTRL的同時,我將手柄從中心向下移動以使以網格為參考的透視圖變形。

一旦定義了角度,我複製圖層並移動它以提供弓形體積。

在標尺的幫助下,我完成了側面以定義基本形狀。

•[6.3]使用基礎結構,我繪製細節並定義了不同的平面,同時考慮了材質和光照。

首先使用規則和網格定義基礎的過程使得創建複雜對像變得容易。然後就是用我們想要的風格和細節來打磨這件作品。

• [6.4] 最後,我在強光模式下創建一個圖層並使用剪貼蒙版。在這一層上,我添加了紋理和照明設置。

在乘法模式的圖層中,我像之前看到的元素一樣創建陰影。

• [6.5] 遵循相同的手動過程,我繪製了一塊石頭作為噴泉的基礎和一塊水晶作為“保存點”。

由於重複了相同的技術,因此我不會逐步詳細解釋某些元素。無論如何,我希望它被理解。

• [6.6] 另一種選擇是在前視圖中創建參考線,然後使用我共享的自動操作將它們置於透視中。在這種情況下,我將創建一個字體,因此我繪製了 2 個圓圈和一些分隔線。

我將指南放在透視中(使用單獨的圖層可以進行選擇)並通過自由變換在石塊上定義正確的比例和位置。

•[6.7]我複制該圖層並將其垂直移動以定義字體的高度。這些頂層幫助我們創建選擇。

在較低的層中,我使用選擇繪製體積。

• [6.8] 我畫了內部陰影,並按照指導線將結構分成幾部分。

要在高光模式下使顏色填充圖層上的內圈,請將其垂直向下移動並通過反轉選擇來刪除重疊部分。

• [6.9] 在一個新層上,我手動繪製各個岩石,重點是邊緣和紋理。

• [6.10] 使用從Assets 下載的畫筆繪製水紋理,然後使用自動操作將其置於透視中。我使用內邊緣選擇擦除剩餘部分

• [6.11] 我在乘法模式下完成了一個陰影並調整了顏色。

結合我們之前看到的技術並藉助指南,繪製圓形等距對象並不復雜。

■ [7] 正如我一直在解釋的,對於有機物體,我更喜歡直接繪畫,只採用網格和參考透視圖。有些部分也不需要那麼多細節。

 

對於舞台背景,我只是使用等軸測尺手動繪製了結構。然後我停用它們並使用不同的畫筆添加細節。

• [7.1] 畫幾個怪物蜘蛛蛋。我畫了第一個,然後復制它,縮放它,並調整了一些細節。

雖然它們的透視並不完美,但地板上的陰影將它們融入了場景中。

• [7.2] 為了完成這些有機細節,畫一些蜘蛛網和燈光效果,不要太多細節。足以暗示產生氣候的紋理。我總是可以回去多打磨一些小細節。

■ [8] 等距透視的優點之一是我們可以重用元素來構建其他元素。

在這種情況下,我疊加了 3 個不同大小的塊來定義一列。

我複制該組並將其在垂直軸上向下移動。

然後使用標尺連接邊緣,最後繪製紋理和照明。

• [8.1] 我再复制一次頂部塊並減小大小。我重複前面的步驟來定義小柱子。

• [8.2] 要輕鬆創建球體,請先填充圓形選區。我使用祖母綠材料製作了一個剪貼蒙版以獲得一些細節。

最後,我將圖層弄平並繪製照明細節。

• [8.3] 複製相同的塊,我們可以生成其他結構。首先定義頂部,然後繪製側面。

• [8.4] 我用同樣的方塊建造了一些樓梯。我試圖用陰影創造維度。

▼ 地圖的基本要素已經搭建完成。我們只缺少角色和一些細節。

5.1 3D 元素

我真正喜歡的 Clip studio 繪畫功能之一是 3D 圖層。在漫畫、概念藝術和以復雜角度繪製對象時非常有用。

 

■ 不幸的是,我們不能簡單地在 3d 圖層相機中選擇等軸測視圖。為了解決這個問題,準備幾個空的 3D 圖層,讓相機盡可能接近等距視圖。我也在資產中分享了這個材料

■ [1] 我們放置相應的 3d 層,在本例中為 2:1

它創建一個帶有空 3d 圖層和參考區域的組。

•[1.1]選擇3d圖層後,我們將3d對象拖到畫布上。該對象與我之前配置的相機一起放置。 (請勿修改)

 

• [1.2] 使用3d 圖層控件,我們修改對象的旋轉、縮放和位置。

■ 注意:對象必須位於參考區域上方,以確保盡可能準確地透視。

• [1.3] 當我們對對象感到滿意時,我們複製 3d 層並將其光柵化。

如有必要,我們可以使用 CTRL + T 修改比例和位置。

• [1.4] 我們從第 3d 層消除對象,並用我們感興趣的其他模型重複這些步驟。

▼ 有了各種物體,場景現在就完成了。我們只能使用 3d 對像作為基礎或參考進行繪畫。

▼這裡是我用過的物件

https://assets.clip-studio.com/en-us/detail?id=1726790

■ [2] 我繪製每個元素,我用畫筆和不同混合模式的一些圖層來做所有事情。如果需要,可以參考我的混合模式教程。

首先我畫了“保存點”的玻璃。我試圖打破3d模型的結構,用高光和顏色給它一個神奇的外觀。

• [2.1] 第二個對像是桶,非常簡單。我首先用漸變貼圖修改顏色,然後手動繪製。與其他物體一樣,繪製與地面接觸的陰影很重要,這樣物體就可以融入場景中。

• [2.2] 有色眼鏡我決定讓它們幾乎保持不變,我只是模糊了一些邊緣並修改了部分照明。為了完成我複制了圖層,我對其應用了高斯模糊並將其置於光柵模式。

• [2.3] 雖然看起來更複雜,但“模擬”箱子遵循相同的過程。使用我繪製的 3d 對象的幾何形狀,直到我定義了我想到的圖像。

我改變了“嘴巴”,我添加了一些眼睛和蜘蛛腿。一旦我將投射陰影放在它上面,它就會更好地融入場景中。

• [2.4] 為了給角色上色,我簡單地將不同的元素分成幾層,並像其他元素一樣手動上色。

• [2.5] 最後我們畫蜘蛛。我通過繪製 3d 模型來定義形狀和紋理。

我將身體分成 3 部分,並在強光模式下分層顏色。

所有元素的過程都是相似的,你只需要耐心和繪畫,直到達到必要的細節水平。查看參考文獻始終是一個好主意。

■ [3] 為了完成這個場景,我畫了一些神奇的燈光效果。您可以在我的魔術效果教程中找到我使用的方法。

我通常在添加(光澤)模式下使用圖層,但這取決於所需的結果。

■ 這是最終結果,從草圖到神奇效果。

■ 等距藝術的有趣之處在於我們可以移動元素並創建新場景。

結論

非常感謝您觀看我的教程。

探索專注於電子遊戲的等距藝術非常有趣。

我覺得有些部分我沒有詳細解釋,因為我在重複與前面步驟相同的技術。對不起,如果它有點長。

 

■ 希望我分享的材料對您有所幫助。他們可以將它們應用於插圖和設計,而不僅僅是視頻遊戲的藝術。

 

如果您有任何問題,請隨時給我留言。

照顧好自己,探索你的創造力。

留言

最新

最新官方