12-视觉补偿（selout）

"视觉补偿"，简称"selout"，这是一个让我困惑了挺久的技术。如果你读过第九章，你会看到我说：

"我个人不大喜欢给边线上色。Capcom有用到这个技术，但他们用到这个时，效果却会很炫，（咳咳）我还没完全掌握到其中的奥妙（但我可以肯定的一点是你可以用一些很暗很暗的接近于纯黑的颜色来作为边线的颜色）而相对的我还挺满意纯黑边线的效果。给边线上色后，所有的东西都会稍微变得模糊起来，譬如说衣物造型上的色块关系容易因此模糊起来。另外如果你的背景是红色而所有的红色衣物的边线也是红色，这样看起来就挺奇怪的。而如果是用的纯黑色的边线，你只可能会有一个问题：那就是你的角色走进一个纯黑色的背景里头，而这种情况很容易就可以避免；相对的，要考虑避免其他颜色的背景就会难很多。不过需要再次声明的是，这只是我的个人意见而且我还没掌握到给边线上色而效果也很好的技术。"

上面的引言有部分其实是托辞，因为事实上，我是喜欢彩色边线的，现在我终于知道其中的奥妙了。而在上面的引言里我其实想说的是"我不喜欢我自己的边线上色技巧"因为我不知道怎么像专业人士那样用得好看。观察一下上面的图片你会发现边线上了色的那个版本因为缺失了很多造型上的定义而显得模模糊糊的（特别在皮肤的边线上，还有她的鞋子上）但如果你拿一个Capcom制作的角色图来看，你就会发现不管背景是什么颜色，角色都是活灵活现的。我一直都很想象不出这样的效果是如何办到的，直到有一天（在 Pixelation，一个我以前经营的论坛）我们中的一些人开始分解这些角色图来分析其中的原理。我得在这里感谢最初的发现者：（他写了一篇非常棒的关于selout原理的教程，强烈建议阅读）。我记得他在一个帖子里提到了selout这个概念，我们所有人都被震住了：原来原理是这么简单而有逻辑性。然后我们又花了不少时间来分析这个概念和进行大量的测试，这让我想起我曾经的想法："根本没可能只用手点就可以办到这个他们一定使用了某种滤镜或宏"几年后的今天，我发现这种效果确实是徒手点出来的，因为我自己就是徒手点的，而经过一段时间的锻炼，你就会发现，正如在他的教程里所说的那样，"这个就变 成你的第二本能了"。

历史就讲完了，让我们来看看实际的操作首先先快速的复习一下角色制作的步骤，看看下面的那张老图：

最开始先涂一个比较简略的角色剪影图，然后加上基本形，加上姿势，调整人体的比例。然后加上简略的边线，这一步只是为了让四肢分辨开来，并为下一步做准备。下一步是整理边线，这个时候我的同事走过我的屏幕爆了一句"嘿，这个是不是铁拳里的那个家伙？"，我突然发现他长得是很像风间仁，边暗暗诅咒我的同事 外加整个宇宙，我边将他修改成一个完全原创的形象。在此之后，铺上大片的色块只要选择基本的颜色就好了。在色块的基础上，我开始上明暗：

这里我们从基本色块开始上简单的明暗。因为这一篇的目的是解释如何给边线上颜色，那么简单的上一些明暗就好：

现在右边的那个角色看起来就像本章开头的那个女孩一样了，边线看起来很模糊，效果很丑。在这里我是在原有的黑色边线上涂了一层比临近色块暗一些的颜色。皮肤和鞋子的部分是最"丑"的，如果将那个边线上了颜色的版本缩小为原大就可以清楚地看到。那现在问题是，为什么这种情况会发生，还有我们如何解决这个问 题？问题的症结在于一种颜色很适合和其他的一些颜色摆在一起，而和另外的一些颜色摆在一起就会产生反效果。黑色在粉红色的背景上看起来很不错，但棕色的皮肤在同一个背景上的效果就很差。如果你有一个身穿白色衣服的角色，而边线是比之暗一点的浅灰色，如果这个角色走进一个冰天雪地到处是白色和浅灰色的背景 里，这个角色就很难被辨认出来。很简单的一个逻辑。那问题是，我们该如何避免此种情况的发生呢？

让我们假设这个角色决定了要成为一个像素艺术家，但他犯了一个致命的错误：他将地图元件画成一个有明显的边框的样子所以他被关进了监狱，在那里他换上了一套白色的衣服：

这样的话你一眼就可以发现他，他就像那暗夜中的灯塔，直到他走到一道白色的墙之前。突然之间他隐形了，这样他就可以静悄悄地潜到看守后面把他打晕然后脱狱。这样对整个社会的稳定是不利的。所以我们给他换一套黑色的衣服：

绝妙的点子，接下来我们试试给我们的囚犯装扮成忍者。好了，玩够了啊，现在他又现形了，尤其是当他走到那道白色的墙之前。但这次他选择等到夜雾降临再溜过黑色的长廊，又把看守打晕然后再次成功脱狱。那么我们如何保证不管他走过怎么样的背景前都可以被马上辨识出来呢？我们就想到用黑白相间的条纹，我知道他们也 是基于同样的原因来发明囚犯服的：

现在看着他或许会让你觉得有点头晕，但至少不管什么情况下你都可以辨识出他。狱卒们非常感谢你的点子，也因为这个他们可以在巡逻中稍微的休息一下了。成功的运用这个概念的另外一个例子就是默剧演员也会穿上类似的服装，让我们可以很容易的看到他们并将注意力集中在他们的那些神奇的“看不见”的盒子和绳子上。那么我们该如何将这个概念运用到像素艺术上呢？这里我们就该提到视觉补偿了。

从那个有简单边线效果的版本开始，每种颜色有三种明度（我们将重点放在手臂的皮肤上）：最亮的颜色用在皮肤上被光直射的部分，中间的颜色用在皮肤的阴影上，最暗的颜色用在边线上。接下来用中间色作为亮部的边线颜色。也就是说在阴影到边线这个区域，最暗的颜色是用来作为边线的。同样的方法运用到腿，鞋子还有其他的东西上。让我们回到手臂部分，因为这部分最容易观 察。我们给上色的边线又加了点细节，但问题仍然存在。中间色在粉红色背景上显得非常模糊，最暗颜色的情况也只是没那么难看。这里就是我们运用囚犯服这个概念的时候了。在第三张图片里，你可以看到我们在中间色边线上加了暗色像素。右脚上也是一样。在中间明度的绿色边线上添加了暗绿色像素。现在来比较一下，你会发现经过视觉补偿的版本更立体，因为即使某些像素的对比度降低了，另外的一些像素却显现出来，给予你大脑足够的信息自行构想剩下的部分。

在艺术领域里有一条关于"隐性线条"的原理，在一条直线上留有间隙，观者的大脑里会根据获取的信息自行将两条分离的线段连接成为一条直线，就好像从未切断一样。当然这是心理变化而非物理上的（像一条直线不可以自已跃上纸面），但在观者的精神领域里会将形体理解为实在的东西。如果你画出一个正方形的三边，那想象的空间是无限的。但如果你画出一个正方形的三边，在第四条边的两端添上几个像素，也就是第四条边的中间有很大的空隙，大脑就可以将两端的像素连接起来从而建立起一个正方形的印象，因为有了那几个像素的帮助，你的大脑就可以执行"隐形线条"这个原理。断点线可以被理解成为一种直线也就是这种道理。你没有看到整条的直线，但你的大脑可以看到它所暗示的意思。这也就是为什么在他的手臂运用了视觉补偿后你能够认知这个手臂的形体。其中的部分也许没有直接交代清楚，但其余的部分给了你足够的信息来构建这个形体。那么我们如何得知在哪里和怎么样在一条线上作视觉补偿（将这些帮助构建形体的像素添加在原有的线段上）呢？有一个逻辑可以遵循。最简单的办法就是在边线的"两端"添加这些像素。

让我们来看一个例子：

有一个蓝紫色圆放在蓝色背景上。在100%下，形体很模糊，眼睛也看得很累。加上一圈深色的边线后会觉得效果好了许多。你现在可以辨别出来这是一个圆形。但它缺乏"立体感"。在圆的外边缘加上selout的像素，你就会得到一个完美的圆。在考虑在哪里添加selout你可以想象有这么一条充满液体的管子。管子的一端要接触到背景的颜色了，液体就要涌出来了，你要在那一点加上深色的像素来"盖"着管子的出口。而如果管子的另一端接触形体的内部，也就是液体要涌进形体的内部了，这种情况是完全OK的，你不要让液体涌到背景上去。第四个圆是一个没有管子的例子。只是给一些想象的管子封上盖子。接下来第五个圆是一个错误的例子，这是人们在初次尝试selout概念不清时很常见的一种错误。这里面的管子装的都是深色的液体却用的是浅色的盖子。在圆下面是一个不一样的例子，一个比较随意的形体。在你遇到像素对角相连（45度）的情况时，你需要用到分辨力。我个人喜欢在线段长于三个像素的情况下不作改动。而反之（小于或等于三个像素的情况）则将之涂暗。如果你有一条45度的线条而你部分涂暗，部分保留原有的亮色，看起来就很怪，这种情况下你要么全部涂暗要么保留原有的亮色。

但说回来，你不应该在画角色时用大量的纯水平/垂直或像素对角相连（45度）的线条。不要像下图一样：

非常可怕的画法。每次你这样只用八种角度（也就是那些纯水平＋垂直＋各种正负45度）的线条来画角色时，小猫看起来就是被踩扁的。是挺可爱啦，但它属于那些没有手的调皮小孩（因为没有手，所以被踩扁了）。

我们在边线上也加上selout效果（他手臂下面的线条），更增强了他手臂的整体效果。将那排比较小的图形中的第一个拿来和最后一个做比较，差异是显而易见的。然后在脸上还有其他地方我们也运用同样的效果（特别是下巴的线条）。为了测试一下selout的最终效果，让我们将背景改成不同的颜色（包括黑色和白色），将大小也缩回100%，然后比较一下在各种颜色的背景下的表现。当我刚开始试验selout的时候，我会用以下的方式来做测试：

为了展示selout的效果可以运用在各种不同的背景上。让我们将selout进行到底，将所有看得见的都加上这个效果。效果真是好极了，除了加上第四层的颜色（在暗色边线上加的selout）之后总颜色数从15跳到了19。通常情况下，一个游戏角色的用色数要限制在16色以下（15色给角色用，剩下的1色给透明色用）。但我们已经知道selout这个技巧是管用的了！那如何在不增加颜色数的条件下加selout效果？好，我们可以学习 Capcom在Capcom VS SNK这个游戏里用到的技巧，请看下图：

不加边线，而是让色块漫出到边缘上，就像上面的圆圈，然后直接在上面加selout。所以现在浅色的皮肤直接充满至边缘，用中间明度的颜色来做selout，同样中间明度的皮肤也直接充满至边缘，用暗色皮肤的颜色来做selout。这样就可以保持selout的效果，因为你有两种颜色来将你的形体从背景中分离出来。而这种方法并没有增加颜色数。不过要记住这种方法会让你的角色显得比较大，或许并不是你要的效果。这是因为浅色的手臂像素占据了更多 的空间，看起来手臂就比加了暗色边线在边缘的时候大一些（记着当你以像素级为单位作画时，一个像素的不同就会造成很大的差异。如果你角色的手臂是四个像素宽，两个像素就是半个手臂了）。最后一点，selout的风格就好像上明暗关系的风格，取决于你的需要和你需要达到的效果：

两个角色都用了15色，但右边的那个暗部更有"深度"，因为它用了selout。这种风格给人的感觉比第一个来得更"写实"，而那个相对简单一点的版本则看起来有动画"赛路路"的感觉（这正好是SNK角色和Capcom角色的差异。SNK的风格在明暗关系、人物比例还有设计 上都比较写实，Capcom的风格则是比较夸张）。但请记住一点，写实的版本的制作时间要比'赛路路"版本的来得长（因为你要花更多的时间在明暗关系上），有selout的"赛路路"版本的制作时间又比纯黑色边线的"赛路路"版本来得长。所以如果你有一个最后期限要赶，你需要根据某种风格的工作量来调整你的作画风格。