[翻译教程]选择性勾边线 

2007-05-09 23:13 发布

2607 8 0

Isometric类的教程翻译得比较多,这回换个口味,介绍一个制作sprite方面比较深入的技巧:

选择性勾边线 (简称SelOut)

注解

“选择性勾边线”这个词是我自己创造的,因为在艺术领域里并没有适合的词来形容这个概念。如果你觉得这个词很长很臭,你可以简称为SelOut(selective outlining)。当我研究了很多很多的像素角色(sprite)后,我发现几乎每个角色都用到一个固定的图案。这是一种运用了“断层线”的外边线,它的作用是帮助平滑角色外边线。这个概念很难光用语言描述清楚,所以我们用了很多例子来帮助说明,跟我一起来学,好吗?

内容

分析角色
例子:管子
从开始到结束:角色创建
一些额外秘诀:先过渡线条
在外边线处理上需要避免的

分析角色

插画中国原创插画 http://bbs.chahua.org

这是一个春丽的角色图形(事实上并不一定要春丽姐姐出场,我可以从无数的游戏中选出任意的角色作为例子,不过我喜欢举我喜欢的例子)。

插画中国原创插画 http://bbs.chahua.org

这里我把她的左边大腿的部分放大,那些小小的黑色的东西应该理解为箭头啊,嘻嘻。注意箭头都指向大腿的边缘部分(更专业的说法是她的大腿的轮廓线)。同样注意到大腿的轮廓线有好几个暗色的像素。试想象一下在她大腿的轮廓线外加一整条黑色的外边线,就好像你用一种不同的上色风格给一个角色上一层普通的黑色外边线。但看看Capcom的角色,我们发现外边线有的部分较亮而有的部分较暗。一开始这会让人非常困惑,通常逻辑上来说外边线都决定用一种颜色,常常是黑色。这个方法在平常的绘画,漫画或动画上都行得通,但在像素艺术领域则并不见得一样行得通。

这是为什么Capcom,SNK还有其他的专业游戏角色看起来这么棒的一个主要原因,就是因为他们在外边线上左了如此巧妙,看起来却又是随机的处理。这里的关键词是“看起来”-在经过我的研究,我找到一些怎么来完成这个步骤的小技巧。我将会在以下的部分尽我所能解释清楚。

我建议大家找很多很多的角色图,然后放大了来研究。你会很惊讶的发现几乎每个专业的角色图都会用到这个技巧。

例子:管子

好,让我来举个例子。首先,我先做好基础的角色,没有用到神奇的“选择性勾边线”技巧,只有基部的颜色,上了色的外边线,还有一点点明暗。然后我会展示正确的上色技巧,而最后会举一个错误的上色例子,然后你就知道在制作角色时应该避免什么。

B Color Smilies

全部评论8

  • zhigu
    zhigu 2007-5-9 23:13:00
    以下是一个弯曲的管子,很简单的一个形体。底色是一个比较亮的蓝色,而外边线是一个比较深的蓝色,还有一个在两个颜色之间的中间色作为阴影的颜色。这里我跳过了几步,不过那些略过的步骤我会在后面详细介绍。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    以下是我竭尽所能给这个管子做选择性勾边线处理。注意到它被处理后,外边线并不是同一种颜色,而且厚度上也有差异。这样的处理之后比平常的单色外边线显得自然些。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    接着让我给展示一下错误的示范。小朋友们~~千万不要在家中尝试这个哦!!!最简单的辨别出这是一个错误的例子的办法是看它的边角,他们都是亮色而不是暗色。这个正好是正确的方法的对立面。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    从开始到结束:角色创建

    现在我们来从头开始创建一个角色。我把PSD源文件包括在内,你可以用Photoshop(或兼容软件)来打开看看我是如何用图层管理的(注:我所摘录的原文并未提供此文件,如需要的朋友可以用上面提供的email地址和原作者联系。-imick)。如果你在我讲解过程中感到困惑了,请参考这个文件。如果我有地方交代不清,请email告诉我,我会尽我所能解释清楚。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    我发现扫描仪(或者再加上压感笔)是用来创作角色草稿的最佳工具。这里的“角色”指的是尺寸比较大的角色图。对于如超级马利之类的游戏里的动画来说,如果全部动画图片都先用纸笔起稿就太没意义了,因为他们的尺寸已经很小很小了。或者适用对象是超极马利欧世界,还有其他的16bit游戏。比较适用于超任游戏,而不是红白机游戏。

    当使用扫描仪时,需要考虑到尺寸问题。如果你打算用钢笔勾线,注意不同的钢笔造成的效果是不同的。厚的钢笔线扫描出来比较清晰,但缩小之后可能会有2到3像素宽。如果那是你追求的效果那就没问题,但更多的时候你需要的很细很清楚的线条。如果你用压感笔(Wacom手写板),你应该选择一个合适的分辨率,使得出来的草稿合乎你的要求。这些都属于相关艺术领域的特别技术,如需详细介绍,请参考相关资料。
  • zhigu
    zhigu 2007-5-9 23:14:00
    如果你没有扫描仪,可以去Kinko's或类似的店里做处理。现在如果你愿意的话,你可以先用我的草稿做练习。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    下一步我们将模糊的草稿转变成像素化的底稿。将草稿的大小定为计划好的尺寸(例图的尺寸是64 x 74)。建一新层(如果你的软件支持层,如果没有,就慢慢的在原稿上修改)。我喜欢用一个纯绿或洋红做为底色,用一种浅灰色做人物的底色,而用深灰色做外边线。这个仅仅是个人口味问题,你可以尝试各种不同的风格,有很多人喜欢用白背景黑边线。关键是将线条处理得平滑(我在这副图里做得不是太好)。你必须斟酌每个填入的像素的去留。不时的缩小图形,这样会帮助你观察线条是否太锯齿化或太摇晃,这些问题在你放大很多倍的情况下工作时是觉察不到的。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    首先第一要注意的是这个鬼娃的左肩膀上的小颜色块。像素艺术师经常采用这个方法,这样在作画时就可以很方便的选取想要的颜色。另外注意到颜色是以明度来排列的,所有的红色,蓝色,和紫色都排成自己的一排。而每一排有多少颜色取决于你想将细节深入到怎样的程度。我在肤色和头发的颜色上选取了4种明度的颜色(我可以选更多或更少的颜色,取决于色盘色数的限制)。在她的角和眼睛部分我分别只选取了3层色,这是因为它们在画面占的比例不高,如果用太多颜色在上面,会显得资源浪费(当然,纯属个人意见)。
  • zhigu
    zhigu 2007-5-9 23:14:00
    用最上也就是最浅的颜色填入图形里的基本部位(就是除却外边线的所有部分)。然后用第三层明度的颜色来画边线。用第三层而不是最深那层来作为边线的颜色是有原因的(紫色的例子除外,它的第三层颜色是它最深的颜色),这个原因我下面会解释。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    现在选第二层色来上明暗。一开始不用搞得太复杂,就大概的将你认为暗部达到的位置上一下。非常重要的提醒:保持一个不变的光源,如果头部部分光是从左边照射过来的,那脚部部分不要把光源搞到右边去(这一点很难记住,因为很多时候轮到你上脚部的颜色时已经过了1个小时,所以作画时要紧记光源的位置)。再一次,不要将暗部上得太过分。一般将暗部保持在角色大小的一半左右,另一半留给亮部。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    接下来,用第三层的颜色继续深化暗部。通常,你在这一步不需要做太多的事情。比较明显的变化是在肩部周围,脖子下面,还有悬在前额的头发这几个部分。我还用了第四层颜色在肩部周围的暗部上来保持边线的形状,在下巴和耳朵的内部这些比身体其他部分暗的地方也是一样。据我所知,明暗关系的渲染没有什么一步到位(一蹴而就)的画法,需要多多练习(练习练习再练习),多多体验。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    好,到时候揭示真相了;我们下一步要做的就是将我们的角色的“平常”外边线进化成“选择性勾边线”。不幸的是,对于制作这样的边线没有一个固定的规律(例如说如果这条线是“多少多少”角度那么就用“多少多少”像素达成“这样”的效果)。唯一的方法就是多参考其他专业的角色图。但我还是会尽我所能解释我是如何做的。
  • zhigu
    zhigu 2007-5-9 23:14:00
    我指出了第二层的颜色,因为我在这一步只用到这些颜色。我觉得一步一步来比较简单。

    好,让我们来观察一下脖子的部分;之前,它的颜色是第三层的颜色。现在我用了第二层的颜色,将线条提亮了一些。我一般都避开转角的地方,虽然有些时候你也可以提亮转角处,但就如我所说,这些都需要自己去体验去掌握。试着在图形6与图形7之间对比,你可以发现图形开始变得更平滑也更立体了。如果你觉得理解有困难,找一些角色图来参考,我觉得街霸Alpha系列可能是你可以找到此类图形的最好地方。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    这一步和上一步很相象,除了我们挑了比上一步下一层的颜色(看到一开始就设定好颜色的好处了吧?)。这里你可以看到我加了一点阴影在眼镜附近,角的部分也变得立体起来。试观察一下,注意到我们对线条做了这么多功夫,线条的颜色多由第三层颜色组成(也就是我们最最开始用作外边线的颜色)。这就是我告诉你用这种颜色作为边线的颜色而不是最暗的颜色的原因,再观察角色的其他部分,你会发现同样的技法在重复使用,一种颜色作为边线的主要部分,一些更深的颜色用来在边角打补丁使外边线更圆滑。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    好,这一步基本上是“修整”。我这边加重一下,那边提亮一下,把某些线条移动一下来美化角色。最重要是要记着不要过犹不及。当达到一个可以接收的地步就停止。你的作品就完成了,如果你喜欢还可以调整一下颜色(我们的下一步),或者就可以开始新的角色创建任务,你可以一直一直修整下去,但有可能修得面目全非,一点都不像原来的图,所以一定要注意,要懂得什么时候停止。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    我最喜欢角色图的一点就是你可以随意编辑它的颜色。这个听起来不算什么,但其实不然。再看看一下新的角色,真正的差别是我将颜色的色调调低了些。我将皮肤的色调调得更柔软些,对比也调小一点。比较这个新的和原来的图的颜色,我想你了解我在说什么。当你在工作时,你也许不能分辨出你正在用的颜色是亮一些还是暗一些。但一旦你完成了角色你就随时可以回头修改颜色,所以不必顾虑太多。不过不要小看这个步骤,它可以对你的作品的气氛和氛围造成很大的不同!

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    最后(经过又一些的色彩调整),我们完成了这个角色。这个步骤可能看起来过于复杂了,但过一阵子就会发现很容易上手。我希望这个能对你有所帮助,如果我找到更好/更快/更简单的方法,我会第一时间更新这个教程的。欢迎你把你的角色发上来,我和论坛的其他人会给你建议和意见的,又或者你遇到问题了,将你的半成品发上来看看是否有人可以你帮你解决问题。祝你好运!

    一些额外秘诀:先过渡线条
  • zhigu
    zhigu 2007-5-9 23:15:00

    好,先来看个例子:

    1.
    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org
    2.
    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org
    3.
    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    没什么特别的,(1)边线是从草稿里描边过来的,没有上色,(2)角色的外边线和底色都上色了,然后(3)交代了一些基本的明暗。在这个角色里,光源是从右上角照射过来,所以阴影是落在左下部。由于我们会用超过一种的颜色在外边线上,我们可以在外边线上活用光的效果。就好像手臂的主要部分上,左上部较亮,而右下部较暗,外边线同样可以一部分较亮而另一部分较暗。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    这里,我将外边线靠近光源的部分提亮了。如果你选择了超过4种颜色,你就可以选择你想要提亮的程度,在这个例子里,我们只能用第2层颜色,否则边线就会消失了。如果你观察一下Capcom的角色图,你可能会发现他们在外边线上运用了这个技巧,在角色图的上部的线条看起来亮一些(因为在游戏里光从正上部来)而下部的线条则暗一些。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    然后我加了一些较暗的颜色在离光源最远的外边线上。角色的边线仍保持之前的模样,但现在多了几个色部

    在上底色前处理好这个可能会容易些,就像这样......

  • zhigu
    zhigu 2007-5-9 23:15:00

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    两种方法各有其利弊(譬如说,先把底色和明暗关系上好,然后在修饰外边线,或者先将外边线修饰好,在上底色和明暗关系),试验一下,看哪个方法适用于你。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    接下来,我用到第3层颜色,这个代表我将会用第4层颜色来强调外边线的形状。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    最后这个角色完成了,步骤是从用第1层色将它靠近光源的外边线截断开始的。然后我用第2层颜色,提亮部分的边线,将一些转角的部分调暗(如果一开始处理好边线,之后就不用担心这个了)。最后用第3层和第4层颜色修饰暗部。

    在外边线处理上需要避免的
  • zhigu
    zhigu 2007-5-9 23:15:00
    这个问题经常会遇到,所以我把它在这里着重提出。一个得到平滑,锯齿感不明显的线条的关键是避免将同色的两个像素摆在一起(大多数情况下)。这个很难用语言解释清楚,让我们来看一个例子。

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

    观察她右边的腮帮(我们的左边),看到那个小小的突出的色块没有?它看起来就像一个字母"M"。这个是由于把太多像素接连着摆在一些奇怪的角度下造成的。解决方法如下:

    插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org


    是不是觉得很神奇,一个小小的像素具有如此的破坏力?很多情况下,删掉那个角落上多余的像素可以解决问题,但正如很多事情一样,总是有例外存在。通常,在衣服上或附件上如此的线条是可以接收的,但对于身体或头发来说,这种线条还是要避免的好。

  • CG.忧伤远逝
    CG.忧伤远逝 2012-4-25 15:35:03
    感谢分享!

你可能喜欢

[翻译教程]选择性勾边线 
联系
我们
快速回复 返回顶部 返回列表