獨立開發者通常必須同時扮演多個角色：遊戲設計師、程式設計師、作曲家、藝術家。 當涉及視覺效果時，許多人選擇像素藝術 - 乍一看似乎很簡單。 但要做得漂亮，你需要大量的經驗和一定的技能。 我為那些剛開始理解這種風格基礎的人找到了一個教學：以兩個精靈為例描述了特殊軟體和繪圖技術。
背景
像素藝術是數位藝術的一種形式，在像素層級上進行改變。 它主要與 80 年代和 90 年代的視頻遊戲圖形相關。 當時，藝術家必須考慮記憶體限制和低解析度。 如今，儘管像素藝術能夠創建逼真的 3D 圖形，但它在遊戲中仍然很流行，並且作為一種藝術風格。 為什麼？ 拋開懷舊不談，在如此嚴格的框架內創造酷炫的作品是一項令人愉快且有益的挑戰。
與傳統藝術和 3D 圖形相比，像素藝術的進入門檻相對較低，這吸引了獨立開發者。 但這並不意味著這會很容易 結束 這種風格的遊戲。 我在眾籌平台上見過很多開發像素藝術銀河惡魔城的獨立開發者。 他們以為一年內就能完成所有事情，但實際上他們還需要六年。
合金彈頭 3（街機）。 SNK，2000
大多數人想要創作的像素藝術需要花費大量時間，而且簡短的教程很少。 使用 3D 模型時，您可以旋轉它、使其變形、移動其各個部分、將動畫從一個模型複製到另一個模型，等等。 高水準的像素藝術幾乎總是需要花費大量的精力來精心地將像素放置在每個畫面上。
總的來說，我警告過你。
現在談談我的風格：我主要為視頻遊戲繪製像素藝術並從中尋找靈感。 我特別喜歡 Famicom/NES、16 位元遊戲機和 90 年代的街機遊戲。 我那個時代最喜歡的遊戲的像素藝術可以被描述為明亮、自信和乾淨（但不是太乾淨），而不是赤裸裸的簡約。 這是我自己的工作風格，但您可以輕鬆應用本教程中的想法和技術來創建完全不同的東西。 探索不同藝術家的作品並創作您喜歡的像素藝術！
軟件
像素藝術的基本數位工具是縮放和鉛筆來放置像素。 您還會發現“線條”、“形狀”、“選擇”、“移動”和“油漆桶”很有用。 有許多免費和付費軟體都附有這樣的一套工具。 我會告訴你最受歡迎的和我自己使用的。
油漆（免費）
如果您使用的是 Windows，則內建的 Paint 是一個原始程序，但它具有像素藝術的所有工具。
（免費）
一個意想不到的功能像素藝術編輯器，透過瀏覽器運行。 您可以將作品匯出為 PNG 或動畫 GIF。 對於初學者來說是一個很好的選擇。
（免費）
GraphicsGale 是我聽過的唯一一款專為像素藝術設計並包含動畫工具的編輯器。 它是由日本HUMANBALANCE公司創建的。 它自 2017 年起免費提供，儘管 Aseprite 越來越受歡迎，但需求仍然很大。 不幸的是，它僅適用於 Windows。
（$）
也許是目前最受歡迎的編輯器。 ，很多功能，積極支持，適用於 Windows、Mac 和 Linux 的版本。 如果您認真對待像素藝術但仍未找到合適的編輯器，那麼這可能就是您需要的。
($$+)
GameMaker Studio 2 是一款出色的 2D 工具，具有良好的 Sprite 編輯器。 如果您想為自己的遊戲創建像素藝術，那麼在一個程式中完成所有操作非常方便。 現在我在工作時使用這個軟體 ，50 個復古遊戲的集合：我在 GameMaker 中建立精靈和動畫，並在 Photoshop 中建立圖塊集。
($$$+)
Photoshop 是一種昂貴的軟體，透過訂閱分發，並且不是為像素藝術設計的。 我不建議購買它，除非您參與高解析度渲染插圖，或者您不需要像我一樣對圖像進行複雜的操作。 您可以在其中創建靜態精靈和像素藝術，但與專用軟體（例如 GraphicsGale 或 Aseprite）相比，它相當複雜。
其他
我的像素藝術套件。 一切都是黑色的，我現在才注意到。
繪圖板 ($$+)
我建議使用圖形輸入板進行任何數位插圖工作，以避免腕管綜合症。 預防比治療容易得多。 有一天你會感到疼痛，而且疼痛只會加劇──從一開始就照顧好自己。 因為我以前是用滑鼠畫畫的，所以現在我很難玩需要按鍵的遊戲。 我目前使用的是 Wacom Intuos Pro S。
手腕支撐 ($)
如果你買不到平板電腦，至少買一個手腕支撐器。 我最喜歡的是穆勒綠色貼合腕帶。 其餘的要么太緊，要么不能提供足夠的支撐。 卡尺可以在線訂購，沒有任何問題。
96×96像素
最後的戰鬥。 卡普空，1989
讓我們開始吧！ 讓我們從 96x96 像素的角色精靈開始。 舉個例子，我畫了一個獸人並將其放在《Final Fight》（上圖）的螢幕截圖上，以便您可以理解其比例。 這 большой 適用於大多數復古遊戲的精靈，螢幕截圖尺寸：384x224 像素。
在這麼大的精靈上，會更容易展示我想談論的技術。 每像素渲染也更類似於您可能更熟悉的傳統藝術形式（例如繪圖或繪畫）。 掌握了基本技術後，我們將繼續討論更小的精靈。
1. 選擇調色板
像素是像素藝術中比任何其他數位領域更深層的概念。 像素藝術是由其限制所定義的，例如顏色。 選擇正確的調色板很重要；它將有助於確定您的風格。 但一開始，我建議不要考慮調色板並選擇現有的調色板之一（或只是一些隨機顏色） - 您可以在任何階段輕鬆更改它。
在本教程中，我將使用我們創建的 32 種調色板 。 對於像素藝術，它們通常由 32 或 16 種顏色組合而成。 我們的遊戲機是為虛構的遊戲機而設計的，該遊戲機將出現在 Famicom 和 PC Engine 之間。 您可以選擇它或任何其他 - 本教程完全不依賴所選的調色板。
2. 大致輪廓
讓我們開始使用鉛筆工具繪圖。 讓我們像使用普通筆和紙一樣繪製草圖。 當然，像素藝術和傳統藝術有重疊，特別是當涉及到如此大的精靈時。 我的觀察表明，優秀的像素藝術藝術家至少擅長手繪，反之亦然。 因此，發展你的繪畫技巧總是有用的。
3. 輪廓的細化
我們細化輪廓：刪除多餘的像素並將每條線的厚度減少到一個像素。 但到底什麼被認為是多餘的呢？ 要回答這個問題，您需要了解像素線和不規則性。
違規行為
您需要學習如何在像素藝術中繪製兩條基本線條：直線和曲線。 對於筆和紙來說，一切都與肌肉控制有關，但我們正在使用微小的色塊。
繪製正確像素線的關鍵是鋸齒。 這些是單一像素或小片段，會破壞線條的平滑度。 正如我之前所說，單一像素在像素藝術中會產生巨大的差異，因此不均勻會破壞整個美感。 想像在紙上畫一條直線，突然有人敲到桌子：像素藝術中的凹凸看起來就像隨機的曲線。
Примеры：
直接
曲線
當線段的長度不逐漸增加或減少時，曲線中就會出現不規則現象。
完全避免顛簸是不可能的 - 所有您最喜歡的復古遊戲都有它們（當然，除非像素藝術僅由簡單的形狀組成）。 目標：將不均勻性降至最低，同時仍顯示所需的一切。
4.塗上第一種顏色
使用填充或其他合適的工具為角色著色。 調色板將簡化這部分工作。 如果軟體不提供調色板的使用，您可以將其直接放置在圖片中，如上例所示，然後使用吸管選擇顏色。
在左下角我畫了我們的朋友，見面吧，這是鮑爾。 這將使您更容易理解每個階段到底發生了什麼。
5. 陰影
是時候顯示陰影了 - 只需向精靈添加較暗的顏色即可。 這將使圖像看起來是三維的。 假設我們有一個光源位於獸人上方左側。 這意味著我們角色上方和前方的一切都將被照亮。 在右下角添加陰影。
形狀和體積
如果這一步對您來說具有挑戰性，請將您的繪圖視為三維形狀，而不僅僅是線條和顏色。 形狀存在於三維空間中並且可以具有體積，我們藉助陰影來建立體積。 這將幫助您在沒有細節的情況下可視化角色，並想像他是由黏土而不是像素製成的。 著色不僅僅是添加新顏色，它還是建立形狀的過程。 對於一個精心設計的角色，細節不會隱藏潛在的形狀：如果你瞇著眼睛，你會看到一些大的光和陰影簇。
抗鋸齒（抗鋸齒）
每次使用新顏色時，我都會應用抗鋸齒 (AA)。 它透過在兩條線段相交的角落添加中間顏色來幫助平滑像素：
灰色像素柔化了線條中的「斷裂」。 線段越長，AA線段越長。
這就是 AA 在獸人肩膀上的樣子。 需要平滑顯示肌肉曲線的線條
抗鋸齒不應超出遊戲中使用的精靈或顏色未知的背景。 例如，如果將 AA 應用於淺色背景，則抗鋸齒在深色背景上會顯得很難看。
6.選擇性輪廓
先前，輪廓是全黑的，這使得精靈看起來非常卡通。 畫面似乎分成了幾段。 例如，手臂上的黑線與肌肉組織形成過多的對比，使角色看起來缺乏凝聚力。
如果精靈變得更自然且分割不那麼明顯，角色的基本形狀將更容易閱讀。 為此，您可以使用選擇性輪廓 - 用較淺的輪廓部分取代黑色輪廓。 在精靈的發光部分，您可以使用最淺的顏色，或者，在精靈接觸負空間的地方，您可以完全刪除輪廓。 您需要使用為陰影選擇的顏色而不是黑色 - 這樣分割將被保留（以區分肌肉、毛皮等）。
在這個階段我還添加了較暗的陰影。 結果是獸人的皮膚上出現了三個層次的綠色。 最深的綠色可用於選擇性輪廓和 AA。
7. 最後的潤飾
最後，值得添加亮點（精靈上最亮的點）、細節（耳環、耳環、疤痕）和其他改進，直到角色準備好或直到您必須繼續下一個角色。
有幾種有用的技術可以在此階段應用。 水平旋轉繪圖，這通常有助於識別比例和陰影中的錯誤。 您也可以刪除顏色 - 將飽和度設為零以了解需要更改陰影的位置。
產生噪音（抖動、抖動）
到目前為止，我們主要使用大而實心的陰影區域。 但還有另一種技術 - 抖動，它允許您從一種顏色變為另一種顏色，而無需添加第三種顏色。 看下面的例子。
頂部從深到淺的漸變使用了數百種不同深淺的藍色。
平均漸層僅使用九種顏色，但同一顏色的深淺仍然太多。 出現了所謂的條帶（來自英語 band - stripe），其中由於厚而均勻的條紋，眼睛聚焦於顏色的接觸點，而不是顏色本身。
在底部漸層上，我們應用了抖動，這避免了條帶並且僅使用兩種顏色。 我們創造不同強度的噪音來模擬顏色漸層。 這種技術與印刷中使用的半色調（半色調圖像）非常相似； 以及插圖和漫畫中的點畫（顆粒狀圖像）。
在獸人身上，我花了相當多的時間來傳達紋理。 有些像素藝術家根本不使用它，而有些則相反，並不害羞並且做得非常熟練。 我發現抖動在填充單一顏色的大面積區域（看看上面《合金彈頭》螢幕截圖中的天空）或看起來粗糙且不均勻的區域（如污垢）看起來效果最好。 自己決定如何使用它。
如果你想看大規模、高品質抖動的例子，可以看看 80 年代英國工作室 The Bitmap Brothers 的遊戲，或是 PC-98 電腦上的遊戲。 請記住，他們都是 NSFW。
花久星 (PC-98)。 小精靈, 1996
此圖像中只有 16 種顏色！
8.最後一眼
像素藝術的危險之一是它看起來簡單明了（由於其結構和風格的限制）。 但您最終會花費大量時間來完善您的精靈。 這就像一個需要解決的謎題 - 這就是像素藝術吸引完美主義者的原因。 請記住，一個精靈不應該花費太多時間 - 它只是極其複雜的集合中的一小部分。 重要的是不要忽視大局。
即使你的像素藝術不是為了遊戲，有時值得告訴自己，“它已經足夠好了！” 繼續前進。 培養技能的最佳方法是盡可能重複從頭到尾的整個過程，並使用盡可能多的主題。
有時，將精靈保留一段時間是很有用的，這樣您稍後就可以用新的眼光來看待它。
32×32像素
我們首先創建了一個大的 96x96 像素精靈，因為在這個尺寸下它更像是繪圖或繪畫，但帶有像素。 精靈越小，它與應該顯示的內容越不相似，每個像素就越重要。
在《超級瑪利歐兄弟》中馬裡奧的眼睛只有兩個像素，一個在另一個之上。 還有他的耳朵。 角色創作者宮本茂表示，鬍子是用來將鼻子與臉部其他部分分開的。 因此，《瑪利歐》的主要特點之一不僅僅是角色設計，而是務實的策略。 這證實了古老的智慧——「需要是發明之母」。
創建 32x32 像素精靈的主要階段我們已經很熟悉了：草圖、顏色、陰影、進一步細化。 但在這種情況下，作為初始草圖，由於尺寸較小，我選擇彩色形狀而不是繪製輪廓。 顏色在定義角色時比輪廓扮演更重要的角色。 再看看馬裡奧，他根本沒有輪廓。 有趣的不僅是鬍子。 他的鬢角勾勒出了他的耳朵的形狀，他的袖子露出了他的手臂，他的整體形狀或多或少地清晰地展示了他的整個身體。
創建小精靈是一個不斷的妥協。 如果加入描邊，可能會失去陰影的空間。 如果您的角色有清晰可見的手臂和腿，則頭部可能不應該很大。 如果有效地使用顏色、選擇性描邊和抗鋸齒，渲染的物件將顯得比實際更大。
對於小精靈，我喜歡赤壁風格：角色看起來很可愛，有大頭和眼睛。 這是在有限的空間內創造豐富多彩的角色的好方法，總體來說是一種非常漂亮的風格。 但也許你需要展示角色的機動性或力量，那麼你可以給頭部留出更少的空間，讓身體看起來更強大。 這完全取決於您的喜好和目標。
整個團隊集結完畢！
文件格式
這個結果會讓任何像素藝術家感到緊張
你看到的圖片是將圖片儲存為JPG的結果。 由於檔案壓縮演算法，一些資料遺失。 高品質的像素藝術最終看起來會很糟糕，並且將其恢復到原來的調色板並不容易。
若要儲存靜態影像而不損失質量，請使用 PNG 格式。 對於動畫 - GIF。
如何正確分享像素藝術
在社交網路上分享像素藝術是獲得回饋和結識其他具有相同風格的藝術家的好方法。 不要忘記使用主題標籤#pixelart。 不幸的是，社交網路經常在不詢問的情況下將 PNG 轉換為 JPG，這會讓您的體驗變得更糟。 此外，您的圖像被轉換的原因並不總是很清楚。
關於如何以各種社交網路所需的品質保存像素藝術，有一些技巧。
若要在 Twitter 上保持 PNG 檔案不變，請使用少於 256 種顏色或 您的檔案最長邊小於 900 像素。 我會將檔案大小增加到至少 512x512 像素。 因此，縮放比例為 100 的倍數（200%，而不是 250%），並且保留銳利邊緣（Photoshop 中的最近鄰）。
Twitter 貼文的動畫 GIF 重量不超過 15 MB。 圖像必須至少為 800x800 像素，循環動畫必須重複 XNUMX 次，最後一幀的長度必須是其他幀的一半 - 這是最受歡迎的理論。 然而，鑑於 Twitter 不斷改變其圖像顯示演算法，目前尚不清楚這些要求需要滿足到什麼程度。
據我所知，在 Instagram 上發布照片而不損失品質是不可能的。 但如果將其放大到至少 512x512 像素，它肯定看起來會更好。
來源： www.habr.com