[译] 一起来画像素画吧！

Melody

====================================

目的：本教程旨在解释什么是像素画 (Pixel Art)，什么不是像素画，如何迈出像素画创作的第一步，以及如何使你的像素画看起来更棒。本教程试着将一些分散在“菜鸟园地”和其他地方的帖子综合在一起，所以对于那寻求更高级的像素画资料的读者们，我建议你们读一些涵盖范围相对小但是更深入的教程。你们自行上网搜索或者在Pixelation论坛的Ramblethread寻找，他们为像素画的很多方面提供了更为专业的分析，包括像素群（Pixel Cluster），色彩带（Banding），抗锯齿（Anti-Aliasing）和很多与本教程有关的资料。

目录：

Melody

I. 什么是像素画？

光看名字我们可能会觉得像素画就是任何由像素组成的画作，然而不是所有的电子图片都属于像素画。下面这张照片就是由像素组成，但他显然不能算是像素画。

路人：好吧，所以照片不算。那么我在电脑上画的图，这应该算像素画吧？

答案是否定的，因为像素画是一个已经被非常明确规定了的类别，它属于电子艺术下的一个子类。事实上，它由什么组成抑或是如何被创作出来的，都不是那么重要。举个例子来说，下面这幅电子绘图是在电脑上创作出来的，他也是由像素组成的，但是这个不属于像素画。

如果说像素画中没有体现出它的组成部分--“像素”的重要性，那么我觉得它就不能被称为像素画。只有在某一作品本质是由像素所决定的时候，这一作品才能被称为像素画。

------ Alex HW

1.为什么不是所有的数字画作都能被称作像素画？

像素艺术之所以能与其他种类的电子艺术形式区别开来，是因为像素艺术强调控制和精准。

艺术家对于画作的控制必须要精确到每一个像素，并且每一个像素的放置都必须经过深思熟虑。当一幅像素画作被完成后，即使一小部分像素的移动都足以对整个画面产生非常大的影响（如下图，鹦鹉的外貌特征发生了相当大的变化，但实际上作者只改变了为数不多的像素。）

创作像素画不需要很多的工具，不像其他电子画。像素画家不须要这些工具的理由是这些工具处理像素的方式往往是不可控制的。那些自动化的工具会使像素变得模糊不清或者混合在一起。像素画师通常会谢绝任何能够自动放置像素的工具，因为使用它们意味着只有电脑才拥有对于如何放置像素的控制权。读者们要牢记，像素画是一门关于控制的学问。（下图运用了自动化的工具来模糊一块灰色斑点的边缘。）

你很多时候会听到人们抱怨说“这个不是像素画，因为它不该有这么多颜色！”这并不是因为像素画界口口相传着诸如“只有当一副画有X种颜色的时候，它才能被称作像素画”的规定。实际上，你想用多少种颜色就可以用多少种。那些对于色彩数(Color Count)的抱怨主要源于用那些“流氓”工具往往会产生大量的颜色。那些工具会制造出很多新的颜色从而达到模糊或者透明的效果。人们也会提到，很高的色彩数带来的就是更大的调色板，调色板越大就越增加了控制的难度。我将在后文进一步解释。

2.为什么单靠作画工具不能给出像素画的正确定义？

路人：如果我不用任何的模糊效果，过滤器或者酷炫工具，这个应该算像素画吧？所以任何用windows自带画图工具画出来的就算像素画？

答案还是否定的。工具不能决定一幅作品是不是像素画，起决定作用的是这幅画是怎么被画出来的。举个例子，下图是用微软的画图工具画的，而且没有用任何其他的软件。

但是这个不能被叫做像素画，我们称之为网上描绘（Oekaki）。如果你在作图过程中没有用到放大功能，那么这幅图很可能不是像素图。如果你在作画过程的绝大多数时间都在用直线工具或者油漆桶工具，那你并没有把注意力集中到每一个像素上去，你只关心了由像素构成的线段和形状。用铅笔或者笔刷工具画的草图也同样如此。这些方法忽视了仔细认真对待每一个像素的重要性。虽然大多数对于像素画的误解是源于对绘画媒介解释的不严谨，太过于较真有时也会产生问题。

每一个像素不需要按照字面解释那样真的逐个手动放置。像素画家的工作绝对不是手动放置每一个像素。没有人会期待你像一个机器人那样工作：选中铅笔工具，然后通过成千上万次的鼠标单击把一大块区域填满。你可以用油漆桶工具，直线工具也无妨。重要的是你对整幅图的掌控是精确到像素级别的，但是这并不意味着你一定要逐像素来创作图画。

Melody

II．我该从哪里着手？

像素画是关于像素的学问，很简单不是吗？所有这些小贴士的共同目的只有一个：确保你把精力集中在像素上。

从小做起 —— 你想要完成的画作越大，它所需要消耗的时间和精力也越大。不要和自己过不去，选一块小一点的画布。像素画尺寸虽小，可是一旦你将像素控制得恰到好处，它们能传达的信息量之多会令你咋舌。

只用有限的调色板 —— 如果你只用4种颜色就能画出很棒的精灵（Sprite），千万不要用40种。只用一块小的调色板对于初学者来说很有帮助，因为这迫使你把精力集中在如何放置像素以及考虑像素之间的关系上。最原始的，4色Gameboy调色板对于新手来说是个不错的选择，因为你只需要考虑颜色的值(value)，色相或者饱和度则没有关系。

程序 —— 市面上有很多不错的像素画程序，其中相当一部分还是免费的。我用Grafx2，但是很多人也喜欢用GraphicsGale, Pro Motion, Photoshop, Pixen, 和 微软画图工具。其中有些对于用户是非常友好的。这也是为什么我选择了Grafx2而非微软画图工具，因为我考虑到它的快捷键更为方便，省去了我在工具栏搜索的麻烦，也使控制调色板更加方便。

文件类型 —— 菜鸟画师犯的一个常见错误是把文件保存为JPEG/JPG。虽然这种文件类型对于其他种类的图画影响不大，但是它会压缩原始文件，这会给像素画的质量带来很大的负面影响。不要把文件保存为JPG格式，而是要用PNG或者GIF。但是你要注意，因为有些程序不支持GIF，更有甚者会导致图像的损坏，例如微软的画图工具。这个时候你会用到一些文件格式转换器，例如Giffy，来将你的文件存为GIF格式。

但是我从哪里开始着手作画呢？

你可以完全根据个人喜好。有些艺术家喜欢先画线，然后添加颜色。

有的则喜欢用笔刷一股脑地涂出大致轮廓，然后慢慢细化图片直到像素级别。

两种方法均可，选哪一种取决于你的个人偏好或者某一画作的具体要求。如果你需要勾画扫描图片的轮廓，先画线条可能是一个更好的选择。如果你要开始创作尺寸较大的精灵，第二种方法或许更为适用。

Melody

III．必学术语
抗锯齿（AA）:

抗锯齿是一种将不平整的边缘变光滑的技术。你可能已经看到过这个词，因为很多程序和工具会自动完成这项工作。但是当我们在像素画的语境下提到抗锯齿的时候，它代表人肉抗锯齿(manual anti-aliasing)。这意味着你需要手动将一个个不同颜色的像素放置在图像上来缓和凹凸不平的区域。下面来看一个例子。（左边：没有使用AA。右边：使用AA。）当然AA本身也会有一些缺陷，我们将会在“注意事项”一部分进行讨论。

抖动（Dithering）：

抖动是由不同样式(Pattern)的像素所组成的。它会使两种不同颜色间的转化更为自然，而且这种方法并不会在调色板里增加新的颜色。它也被用作创建纹理(Texture)。在CRT显示器当道的时候，抖动更显得重要，因为屏幕会模糊抖动的区域，并且让样式也变得不甚清楚。现在是高清LCD的年代，隐藏样式变得不像从前那么容易了，这代表了抖动的应用也不如从前那么广泛。即便如此，我们仍然需要抖动。

抖动最常见的形式是50/50 dither, 又可以叫做50% dither，或棋盘样式(Checkerboard Pattern)。

如上例所示，你可以另外创造很多样式作为全色(Full Color )和50%抖动样式之间的缓冲。这些样式常常比50%抖动更容易被发现，你需要记住这一点。

风格抖动(Stylized Dithering) 是另外一种技术，常被描述为在样式中加入小的图形。

交错抖动(Interlaced Dithering)使得两块抖动区域接触在一起。它会有这个名字是因为两个抖动的边缘融合在一起。这一技术令混合多个抖动来制造渐变成为可能。

随机抖动（Random Dithering）是一种不常见的抖动，通常情况下不推荐使用。因为它在图像中加入了很多噪点。虽然适量的运用在某些情况是有益的，但是大多数时候希望你能避免使用。

虽然抖动非常有用，但是经验不足的美工常常会滥用这种技术。我们将会在反面例子中具体讨论。

像素群(Pixel Cluster)：

像素群是由单个像素组成的。但是如果单一的像素不与相同颜色的像素相邻，在绝大多数时间里它将是近乎无用和无意义的。像素画师常会考虑由同种颜色的像素紧密结合而成的图形，并营造一种不透明的、平面的图形。艺术家绘制的像素群往往是决定像素画成败的关键。

——Ramblethread

我强调了处理每一个像素在画面上所处位置的重要性，但是这些像素绝非是相互独立的。单个被孤立的像素就像屏幕上的一个污点，充其量就是一个噪点。单个像素常常是以像素群的组成部分的形式出现的，一组组有着相同颜色的像素共同构建出纯色的区域。虽然单个像素是我们最小可用的构图单位，但是像素群却是我们用来考虑如何放置像素的单位。就像我们已经意识到单个像素并不是独立的一样，像素群之间也不是独立的。就像拼图一样，像素群的边缘决定是了与它相邻的其他像素群的形状。下面来看一个例子。在这个例子中，我们会看到改变一个像素群的形状会对它相邻像素群产生非常大的影响。（下图：注意红色像素群的变化）

虽然单独的一个像素只能算是一个噪点，但是如果一个单独的像素有着与它周围环境不同的颜色，它能够被算作一个（使用抗锯齿技术的）缓冲，它能作为其周围像素群的组成部分。这样一来，单独的像素也有了用武之地。

Melody

IV. 注意事项

AA的反面例子：

使用了太多的抗锯齿。你只应该用适度的AA来让图像边缘看起来光滑。如果你滥用了AA，边缘会看起来很模糊，线条也会变得不清楚。

使用了太少的AA。这个例子中的美工只用了单个像素来让过渡变得自然，但是他只是很有限地减弱了边缘的锯齿感。他本可以用更长的像素线段来得到更加平滑的转化效果。

AA色彩带（AA Banding）。当部分AA和它将要缓冲的线段并列在一起，我们称之为AA 色彩带。下面的章节会详细讨论。

锯齿(Jaggy)：

锯齿会出现在如下一些情况。当一个或一组像素出现在了不该出现的位置，干扰了一条线段应有的走向；当一条线段没有使用AA。任何糟糕的像素技巧都会导致锯齿，但是我们通常将他们和线段放在一起讨论。下面的图片展示了在锯齿出现后如何补救。

改变线段长度（左：有锯齿，右：无）

这一问题通常是由部分线段的过长或过短造成的，这会在图上产生一种难看的间隔。使用长度更为统一的像素能够平缓像素间的过渡，进而改善这个问题。

AA:

除非你的线段是完全和地面平行、垂直或者成45度，你所画的线段总会出现一点锯齿。

这是因为像素本身就是一个个的正方形，而且我们要把像素放置在一个个的小方格里，这种作画方式也让折线和曲线的绘制变得更加困难。AA是解决这种问题的好方法。

抖动的反面例子：

常见的误用抖动有好几种。但是最常见的是用了太多。如果你的半个精灵都有抖动效果，那么你应该要考虑在调色板里加入新的颜色。理论上来说抖动应该在一块不透明区域的最后部分逐渐收缩。如果你用了太多的抖动，那么抖动区域本身就会变成一块不透明区域。

在这个例子中，抖动不是作为两种颜色之间的缓冲而存在，它带来了很多我们不需要的纹理。虽然创造纹理是抖动的重要功能之一，但也不能滥用。如果你计划用抖动来缓冲不同的颜色，但是最后却画出了新的纹理，那么这是不成功的。

所以有人会问，多少抖动才合适呢？这取决于你的调色板有多大，或者说，你希望过渡的两种颜色之间的对比大不大。如果两个颜色的色相或者值的对比度越小，那么抖动的程度也应该越小。（下图左：对比度过大，下图右：合适）

色彩带(Banding)：

简单的说，当像素并排在一起的时候，就产生了色彩带。当相邻的像素在网格（Grid）上排列的时候，网格就变得更显眼，这对可视分辨率(Apparent Resolution)不是一件好事。下面我给出了几个色彩带的例子，它们都是因为像素并排在一起形成的。这些名字并非通用术语，但是对于本教程是足够用了。

Hugging：

这里有一块不透明的颜色被一串像素勾勒出轮廓。使用轮廓线是可以的，但是需要注意不要将轮廓线和图形并列在一起，因为这会使网格异常明显。

Fat pixels：

这种臃肿的像素会在小方块，线段和更大的色彩带里出现。

Skip-one banding：

虽然两个色彩带之间存在着负空间(negative space)，我们的大脑会自动补足空位，所以色彩带还是存在的。

Degree banding:

虽然像素并列的线条只有一个像素那么宽，但是色彩带仍然存在。

枕式阴影（Pillow-Shading）：

这是一种由内而外不断加深的阴影。枕式阴影是非常不好的例子，因为这种阴影与光源完全没有对应关系。它只和阴影部分的形状有关，而不是和光线如何影响物体有关。枕式阴影经常和彩色带一同产生。处理这种问题的方法很简单，只要注意光线是从哪边投射过来的。（下图左：没有光源，下图右：正确的阴影，光源处于左上方）

这个例子中枕式阴影错误的地方不在于它将光源设置在了物体的正前方（在读者的位置），因为你不一定要把光源放在角落。它错误的原因是没有考虑到三维事物是如何被照亮的，物体只是被当作二维平面来对待。下面我们把光源设置在物体的正前方。

噪点（Noise）：

单独的像素（不属于像素群的像素）往往不能传达足够多的信息，所以它们通常只会带来噪声。噪声或者噪点起到的作用只是在阻碍观画者，除此以外没有任何益处。在像素画中，噪声常由单独的像素构成。为了方便理解，noise在本篇教程里只代表单一的像素所产生的噪点。美工在运用25%抖动（事实上，所有的抖动）的时候需要非常小心由单个像素所带来的噪点。单一的像素占据一个网格的同时，会把整幅图的分辨率暴露出来。切记，假设一幅图是广袤的荒野，像素则是群居动物。像素的天性便是在像素群中找到归宿。因此单独的像素只能在极其特别的场合使用。

你可以使用单独像素的场合有：

作为反射的高光(Highlight)

单独放置的一个细节会引来很多的注意力，但有时候这恰恰就是你所希望的。高光就是这么一个例子。请看下左图怪兽的鼻子。

处理小而重要的细节

你通常会在处理小图片上的细节时碰到这种情况。例如一个很小的精灵身上的眼睛，或者小鸟的喙、小星星，小泡泡之类。

Sel-out(残缺的轮廓线)：

Sel-out（选择性地勾勒轮廓/selective outlining的缩写，也被称为残缺的轮廓线）运用抗锯齿技术把一个轮廓线和背景色融合在一起。这意味着Sel-out是一个AA的反面例子，不过鉴于这个术语现在很流行，我为它留了单独一个章节。（下图左：黑色轮廓线，下图右：被sel-out破坏的轮廓线）

运用颜色更深的轮廓线来达到让精灵与背景区分开来之目的。Sel-out并不是在轮廓上根据某一光源添加阴影。一个完整的轮廓即使加上了明暗变化，也不会像残缺的轮廓线那样破坏图像的边际。（下图左：轮廓线根据在左上的光源有明暗变化，下图右：轮廓线没有反应光源）

下面可能是个更简单的例子，左边的半圆根据光源有了相应的阴影，右边半圆的上半部分运用了sel-out。

在特殊情况下，Sel-out也是有必要的。比如在某一个深色背景的游戏中。

Melody

V. 创建一块调色板(Palette)

什么时候我得担心颜色问题了？

实际上这个问题是这样的，我的作品需要怎么样的颜色？然后我一边画着一边思考我能用现有的颜色创作到哪一步（当燃，直到我需要更多的阴影）。这个时候就要运用混合（mixing）这种技巧。

—-Adarias

这是为一幅作品创建一个调色板的典型步骤，下面来看一个例子。

在作品变得愈加复杂的同时，运用更多的颜色来制造更好的阴影效果，或者增加更多的细节是非常有必要的。

另外一种方法是先用不同色度的灰色(Shades of grey)作画，再添加颜色。在颜色值的关系确定了之后，比起色相(hue)来说颜色间相对的值(relative value)更难改变。这也是为什么这种方法是可行的。

我个人觉得在创作过程中记录下颜色的增加更为简单，所以我倾向于第一种方法。

色彩数(Color Count)：

你可能会发现像素画师通常更喜欢数值低的色彩数。你可以把这个理解成一种习惯的延续，因为以前电子游戏主机只能显示有限数量的颜色。

如果现代计算机能够轻而易举地显示成百上千种颜色，你为什么不把他们全用上呢？事实上使用小的调色板并不是像素艺术史的封建残余，我们可以找到很多强有力的理由来支持这种说法。

统一性

当你使用少量的颜色时，同样的颜色会更多地重复出现。因为不同作品共用一块调色板，这让不同作品显得关系更紧密，风格更统一。

控制

调色板越小，越容易控制。你会希望在日后对于某些颜色进行调整。如果你已经有了200种颜色，你要花大量的时候去做调整，因为你每改变一种颜色，你就改变了它和它相邻颜色间的关系，进而需要改变整个颜色梯度乃至整个调色板。工作量之大是不言而喻的。如果你只有一块很小的调色板，那么改变一种颜色所带来的影响是很容易确定的，因为少了很多颜色之间的相互关系。

色相、饱和度、亮度(Hue, Saturation, Luminescence)

色相：

指颜色的身份。不论一个颜色被认为是蓝色、红色还是橘色，这全都依赖于色相。

就像你能通过改变某一颜色周围颜色的明暗程度来让这种颜色看起来更亮或者更暗一样，对于色相的感知也依赖于它的环境。

这幅图里看起来有点绿油油的树实际上和绿色没有任何关系，只是灰色的。

因为背景的紫色程度很高（紫色在色轮上是绿色的相反色），所以灰色就看起来比它实际上要绿一点。在我们后面讲到色相转换的时候，色相会是一个重要概念。

饱和度：

代表颜色的强烈程度。饱和度越低，颜色和灰色就越接近。

新人美工的常见问题就是用饱和度过高的颜色。这个时候，颜色会显得过于耀眼。虽然这会发生在任何形式的画作中，但是由于像素画中的颜色是由光线所构成而非绘画中的色素，这种问题的发生概率也就大得多。下面第二个图片的颜色就比第一幅要顺眼得多。

亮度（也被称作brightness或者value）

代表了一个颜色有多亮。亮度越高，这种颜色越接近白色。如果亮度为0，那么这种颜色就是黑色。下面是一个按照亮度排列的调色板。（从左往右依次变亮）

这一个调色板里，你会要用到相当多不同的值。如果你只有同样亮度的颜色，那你是画不出好的对比效果的。只有值的范围够广，你才能用高光，中间色（mid-tone）和阴影。两种颜色亮度间的不同被叫做对比度(contrast)。新手美工常会碰到的问题就是丝毫没有对比。下面是个低对比度的例子。

同一副图，我们修改一下颜色的值来让明暗过渡更加平稳。

虽然颜色的值是固定不变的，但是根据周围背景颜色可以显得更亮或者更暗。因此你不需要总是用最亮的颜色来画高光。在一个物体中的合适高光色可能在颜色更暗的物体上并不适用。

亮度和像素画总是相辅相成的：一个像素或线段的亮度会让它显得更粗或更细。

第一个例子就是一条黑线，宽度自始至终没有变化。下面的一条线里有很多明暗变化的像素，越往中间看起来越细。

颜色梯度(Color Ramps):

颜色梯度就是由一组能够共同发挥作用的颜色，它们根据亮度被排列在了一起。一个调色板可以是一个大梯度，其中包含很多小的不同梯度。

这是同一块调色板，不过按照颜色梯度重新排列了。（有两组）

你不一定要按照上面的例子来创建你自己的调色板（虽然很多艺术家发现这是很有用的方法）。重要的是你理解了你所用颜色间的关系，即你的梯度是什么。

一个颜色不一定只出现在一个梯度中，不同的梯度往往共用一些颜色。最深或最亮的颜色会出现在几乎所有调色板的梯度中，比如上面的例子。

中间色也可能出现在多个梯度中。这些多面手在不同情况下能够充当两个或者更多不同的颜色，这对于管理调色板很有帮助。在多梯度阴影或者高光的绘图中，极端的光亮会让颜色显得更为灵活。因为中间色没有这个优势，所以它们常常充当中立的颜色，即它们更接近棕色或者灰色。

下面这个调色板用了同一个色度的灰色来连接不同的梯度。

你也应该注意不要让不合适的颜色留在一个梯度中。如果这种事情发生了，整个图像很有可能会被穿透(punching through)。某些颜色会产生一种和画作整体分离的感觉，看起来就像这种颜色游离于图像之外。这种情况很可能是因为饱和度过高，或者某一色相和相邻色相冲突。以上的情况都会造成观画者的不适(译注：原文为eyeburn)。下图演示了饱和度过高的情况。

这个是因为绿色和紫色发生了冲突。同一梯度中的相邻色相应该要具有某种符合逻辑的关系。

色相转换(Hue Shifting):

这个术语通常指在一个颜色梯度内的色相间的过渡。如果一个颜色梯度里不存在色相转换，它就是一个直梯度(straight ramp)。这种情况下，只有亮度会发生变化。但是色相转换过程中，色相和亮度都会参与进去。

第一个梯度是一个绿色的直梯度。第二个加入了色相转换。当你在运用色相转换的时候，你的高光通常会趋向于某一种颜色（本例中是黄色），紧接着更深的颜色也会接近一种颜色（本例中是蓝色）。我们用色相转换是因为直梯度没有活力，而且不能很好地反映我们在现实中看到的一系列色相。色相转换能够在一个梯度内加入一些微妙的颜色对比。

仲间小町

这讲得比我的详细多了，有学习到

Elias

新的知识增加了，虽然越到后面约有点看不懂

约定233

正统像素画教程~赞！
关于人肉抗锯齿我推荐个视频
up主：一粒像素
https://www.bilibili.com/video/BV1CE411B7bD
他讲的手工抗锯齿方法还是挺容易的

Melody

约定233 发表于 2020-4-11 13:35
正统像素画教程~赞！
关于人肉抗锯齿我推荐个视频
up主：一粒像素

搬运发到这里也有奖！