独立开发者通常必须同时扮演多个角色：游戏设计师、程序员、作曲家、艺术家。 当谈到视觉效果时，许多人选择像素艺术 - 乍一看似乎很简单。 但要想做得漂亮，你需要大量的经验和一定的技能。 我为那些刚刚开始理解这种风格基础知识的人找到了一个教程：以两个精灵为例描述了特殊软件和绘图技术。
背景
像素艺术是数字艺术的一种形式，在像素级别上进行改变。 它主要与 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 像素，它肯定看起来会更好。
来源： habr.com