Skip to content

基本技巧:抗锯齿

画好的像素画边缘锯齿状很严重……

抗锯齿技术就是为了解决这个问题而开发的。

它需要大量的颜色可用,但它绝对必不可少,所以一定要掌握它!

这里的图片比较多比较杂,而且有些长得很像,可能会有传错,请以原版为准

基本用法

抗锯齿是一种旨在减少像素画边缘锯齿(也称为“锯齿”)的技术。通过将图像的主线与背景融合,并降低主线的可见度,像素画的边界看起来会更加平滑。实际上,像素的最小单位仍然是正方形,但这种视觉错觉可以使它看起来不那么像正方形。这就是抗锯齿技术。

image.png

要使用抗锯齿,你需要了解颜色的影响。首先,这里有一个从黑色到白色的渐变调色板。主线是黑色的,背景是白色的。顶部的灰色比底部的黑色更接近白色,因此看起来更容易融入背景。抗锯齿正是利用了这种效果。

image.png

即使背景颜色发生变化,接近背景的颜色也会融入背景。通过融入背景,接近背景的颜色不再突出。

image.png

我在这里画了长度相同的线条,但底部线条应用了渐变,使用了与背景融合的颜色。即使它们长度相同,使用与背景融合的颜色也会使它们看起来更短。如果你先了解这些颜色效果,就更容易理解抗锯齿。

抗锯齿效果:模糊

让我们来学习模糊效果,这是一种可以使用抗锯齿实现的效果。

image.png

在黑色背景上画了一个白色圆圈。即使在全尺寸下,圆点的锯齿状边缘也清晰可见。这里,我们将模糊白色部分,使其与黑色背景融合。我们将使用上一节中用到的八种颜色。

image.png

我们将使用比黑色更接近一个色调的颜色来创建完美的轮廓。

image.png

使用相同的方法,我们将创建一个渐变轮廓,过渡到黑色。轮廓完成后,它看起来会像这样。然而,顶部、底部、左侧和右侧似乎都有细线。此外,它比原来的圆大得多。

image.png

当我们放大它时,这些细线变得更加明显。将这种效果用作一种有趣的技巧,但如果我们想要平滑地模糊圆的边缘,应该怎么做呢?

image.png

问题在于这些渐变之间的边界。通过不断添加轮廓,我们在相同的位置创建了一个阶梯,这就是最终结果的原因。如果我们创建相邻的灰色渐变来模糊这个边界,那么它就永远无法结束。

image.png

为了避免这种情况,我们需要改变绘制方式。这次,我们将使用比内部原始颜色色号低一个色阶的颜色来添加轮廓。我们将创建一个纯粹的内部轮廓。

红色框是选定的颜色。

image.png

放大后,效果如下。在这种状态下,白色和灰色之间以及灰色和黑色之间的边界,由于颜色差异,使得点清晰可见。

image.png

image.png

如果您像之前那样混合白色和灰色,并用介于白色和灰色之间的颜色勾勒内部轮廓,最终会得到类似的结果。因此,对于中间色,请填充灰色并留出一些空白。使用这种中间色时,您唯一需要注意的是,它混合了灰色和白色。

image.png

放大后,效果如下。这是抗锯齿效果。浅灰色的位置取决于艺术家的喜好和直觉。要想在全尺寸下获得平滑的视觉效果,唯一的办法就是反复调整并记住它。

image.png

image.png

现在我们继续模糊到黑色。再次选择之前用于勾勒轮廓的颜色,每隔一个点点点。用这个颜色勾勒出外轮廓。

image.png

image.png

使用与之前相同的方法,在介于两种灰色之间的颜色中放置点,使边界融合在一起。

image.png

重复此过程,最终效果会类似这样。完成后,在观察原始尺寸的同时进行调整。没有规定“必须将这种颜色放在这个位置”,所以根据你的直觉进行操作。

image.png

这是原始图像。它与上面的图像相比如何?你可以看到尺寸变化不大,但边界模糊了吗?

抗锯齿效果:线条融合

让我们使用抗锯齿来融合线条。

image.png

抗锯齿在处理这类线条时效果尤为显著。图像中有主线,这些主线的颜色与背景不同。这就是为什么虚线看起来锯齿状的原因。不过,我想让你注意的是,左侧图像中的线条并非全部都呈锯齿状。

image.png

在红色圆圈标记的区域内,锯齿状的点在原始尺寸下并不明显。如果这些点是垂直或平行的,则无需应用抗锯齿。如果它们是均匀的对角线,也无需应用抗锯齿。我们需要的是其他直线。

image.png

首先是这条对角线。它也是一条相对干净的直线,看起来并不锯齿状,但它确实比垂直的点略细一些。这是由于点呈对角线排列时形成的阶梯状结构造成的。这一个点的阶梯状结构导致线条中含有白色,使其看起来更细。这类似于图块图案。

添加一种中性色来填充这些阶梯状结构。如果你像上次模糊处理那样在这里涂抹,线条会显得模糊且过粗。修正线条时,你只需要像模糊处理时那样混合颜色即可。

image.png

根据线条角度的不同,点的位置也会有所变化,使得修正变得困难。过度使用抗锯齿来弥补这一点,也会导致线条模糊且变粗。要调整线条粗细,可以利用浅色看起来更细的特性,改变一些主线的颜色。相反,如果全部使用黑色,线条往往会变粗。更糟糕的是,这会形成一个恶性循环,线条粗细会随着角度的变化而变化。调整时,要像调整主线颜色一样。始终注意原始尺寸,并在操作过程中检查线条粗细是否发生变化或变形。

减少错误的一个技巧是使用一种深色完成整个图形,而不是专注于某个部分,然后再过渡到下一个颜色。此外,在放置第一个点时,选择一个在原始尺寸下步长较大的位置,这样步长就不会显得突兀。

由于很多操作都基于直觉,练习抗锯齿可以平滑你随意绘制的线条的锯齿边缘。曲线也是由许多角度各异的细直线连接而成,所以如果你能掌握直线的绘制,也能掌握曲线的绘制。

抗锯齿效果:混合边界

让我们像混合主线一样混合颜色之间的边界。

image.png

颜色之间的边界不仅会出现在线条中,例如图案和阴影中。颜色差异越大,边界就越明显。

![img](file:///E:/03-%E6%96%87%E6%A1%A3/%E3%83%89%E3%83%83%E3%83%88%E7%B5%B5%E8%AC%9B%E5%BA%A7%EF%BC%88%E5%90%AB%E7%9B%AE%E5%BD%95%E9%A1%B5%EF%BC%89/1nen/image/04/25.gif)

创建一个介于背景色和绿色之间的颜色。

image.png

使用这种颜色绘制差异显著的区域。这应该可以消除一些锯齿边缘。

image.png

创建一个介于之前创建的颜色和背景色之间的颜色,并绘制它来混合边界。

image.png

通过简单地添加这两种颜色,我们就能显著减少锯齿边缘。


重要的是不要在这里使用过多的颜色。使用过多颜色进行抗锯齿处理,会导致绿色看起来模糊,而不是过渡到色彩边界。为了使色彩边界过渡自然,请注意避免使用过多颜色,这样可以减少错误。

一年级结束了!

抗锯齿是一项需要练习才能熟练掌握的技巧,一开始你可能会过度使用抗锯齿,或者难以去除锯齿边缘。这项技能无法快速掌握,所以不要着急,多画各种类型的图画,让它成为你的本能反应。如果你始终渴望“画出优美的线条”,我相信你会进步很快。