AA(抗锯齿)精髓【翻译教程】(翻译完成) 插画中国 - 中画网 - 中画论坛 - 职业插画师社区
插画中国
http://bbs.chahua.org
中画网 - 绘画社区
» 您尚未 登录   注册   找密码 | 插画作品 | 银行 | 精华区 | 论坛首页 | 插画培训 | 转贴工具 | 帮助 | 简洁版
插画作品 - 插画中国首页 - 插画论坛 - 插画网课 - 插画培训 - 插画招聘征稿 - 插画师信息 - 插画技法交流 金画奖大赛 - 插画教程 - 商业插画- 插画欣赏 - 最新更新
奇幻插画 - 概念插画 - 儿童插画 - 时尚插画 - 新锐潮流 - 写实/唯美 - 漫画卡通绘本 - 涂鸦 - 3d - 像素画 - 周边 - 中秋插画 - 七夕插画
插画中国 -> 像素画教程、像素论坛 -> AA(抗锯齿)精髓【翻译教程】(翻译完成)
 XML   RSS 2.0   WAP 

<<   1   2   3  >>  Pages: ( 3 total )


--> 本页主题: AA(抗锯齿)精髓【翻译教程】(翻译完成) 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
imick


imick插画画廊
uid: 7934
级别: 贵宾
精华: 18
发帖: 434
威望: 340 点
积分: 72 分
推广值: 1 点
注册时间:2004-07-09
最后登陆:2022-10-07
查看作者画廊 引用回复这个帖子
AA(抗锯齿)精髓【翻译教程】(翻译完成)


帮你解开AA之迷~~~~

AA(抗锯齿)精髓
Copyright: Jason LaPorte(http://www.rpi.edu/~laporj2/
原文地址:http://www.rpi.edu/~laporj2/essays/aa/

--------------------------------------------------------------------------------
前言

这个教程是为所有像素艺术家准备的,主题是AA(Anti-Aliasing)抗锯齿(以下就称为AA啦)。这个可是像素艺术家的杀手锏,可以使一件已经很棒的作品看起来完美(又或者让本来很烂的作品看起来很棒,^0^)。可能有一半人看到这里就昏头了,那么我应该解释一下AA究竟是什么。

名字代表什么?
技术上来说,AA是一种在栅格化图形中次像素精确级的渲染技巧。这时肯定有人要发飚:你他妈的在鬼扯什么?呵呵,大家稍安勿躁,首先,你要知道电脑屏幕的显示单位是像素。像素(pixel=picture element)是你屏幕显示上最小的一个方块。试过非常非常靠近电视而发现一个个红绿蓝的小点吗?像素也是同样的道理。但不幸的是,他们有不利的一面:曲线和角很难用方块的像素表现出来。玩过Lego吗?你知道用它来做有曲面的东西或者架子是多么的困难。AA是一种用来对抗这个的技术,其目的是使图像看起来平滑。锯齿的意思是图形像素排列的方式(因为是对着一个像素栅格对齐的)。所以,AA就等于是消除锯齿的技术。理解了吗?还没,好吧,让我用一个例子来帮助你理解:

插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org
Courtesy of X-G(感谢X-G提供例图)

左边的图是非常平滑的。但右边的则显得一块一块的。左边的图加了AA(在文字和边角加入过渡颜色混合,使图形在100%下显得平滑),右边的图没有加AA。在放大后,他们看起来都锯齿感严重(现在看到了那些像素了吧?),但在小尺寸下,AA使一个本来就不错的作品看起来更棒了,所以这就是应用AA的目的。

圆的平滑过渡...
AA的前提非常简单。请看下面这个图表:

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

看不懂?让我来解释一下。假设你想在屏幕上表现一个圆,如果圆的尺寸够大(也就是说可以由很多很多的像素排列而成),这个不成问题。但如果你想在屏幕上表现一个小尺寸的圆时,问题就出现了。因为你只能控制数量很少的几个像素,成品可能看起来一点都不像一个圆。这时候,AA就可以帮上忙了。如图2所示,我们将这个圆和一个像素栅格对齐。每一个方块代表一个像素。看起来不错,除了每个格里必须填入一个颜色的像素,而这个也就是我们之前讲的没有AA效果的图(请看图3)。观察图2,发现栅格里有很多像素都填不满,而填充的比例也不尽相同(有25%的,有50%的,有75%的,等等等等)。而接下来,我们的目标就是找出这些不完全填充的格子,根据填充的比例挑选基本色(这里是黑色)的相应比例来填充进去(如图4所示)。再仔细分析一下,全填黑色的是那些格子里完全填充的,而某些50%填充的就填入一个50%的灰进去,75%的就填入75%的灰。将最后填好的图缩小为原始大小(100%,也就是最最最右边的那个很小的圆),效果很让人满意,跟图1的效果很相近。

生命里没有免费的东西。
嗯,到这里,大家都知道以上的方法的优越性了,但这个方法只部分适用于像素艺术领域里。因为像素艺术的尺寸通常受到限制(像素艺术家必须与此工作),像素艺术通常都很概括。而另外一个限制就是颜色的数量。在像素艺术里,你很难运用到100种不同的灰度来过渡,事实上可用的只有1,2种。所以你必须用1,2层过渡色来概括性的表达过渡效果。这样下来的作品并不是完美的过渡产品,但有用AA要比没用好得多。看看上面X-G的GBA作品,你会发现他的AA过渡,只用到1或2层的过渡色。有的时候,1层的AA就足够了,有的时候,你需要多余于1层的。(举例说明,X-G用了2层在文字的AA上,但在顶部和右边的边缘只用了1层AA。)而决定于加几层的AA是很主观的,不过当你了解了理论后,你需要的就是多多练习,真正去体验AA的好处和应用的方法。而关于实践,我推荐你将你的作品发到Pixelation论坛上,听取其他高手们的批评指正。
   
提醒一句...
要记着的是AA有正确的用法也有错误的用法。正确的方法是如上面所示造成平滑过渡的感觉。错误的方法是像下面示图的最左边的图般在黑色边线的外围全部加上50%的灰度像素:

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

在左边,你会看到许多新接触AA这个概念会犯的错误:每一“步”都加入一单个浅色像素。这方法不但止不正确,看起来还很糟糕。中间的图是正确的方法,但还不是最佳的方法:只在需要的地方加入适合的过渡像素。弧线看起来圆滑多了,但像素的锯齿感还没完全消除。最右边的图是最正确的:我加了两层过渡色,弧线看起来非常原滑。请注意有几步是完全没有AA的,而有些部分有好几个相同颜色的AA。单个的分离像素通常不是最好的AA过渡,我发现同色线条或像素组可以将效果表达得更好。记着你的最终目标(如果忘记了,跳回圆的平滑过渡重新阅读),用它来指导你的AA。

好了,现在你已经知道AA的基本前提。但我只展示了在黑白的情况下的做法。如果是对付彩色的怎么办?其实方法跟在黑白情况下过渡是一样的,只是不再是检查黑色的百分比例,而是检查每种颜色的比例了。我没有把你搞昏吧?没有?非常好。啊,等等,的确把你搞昏了?嗯,是时候出动另外一张示意图了:

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

好,每一个方块代表着两种或三种不同颜色之间准备用像素来过渡。在顶部一排,是我们准备过渡的颜色,底部一排是我们找到的用来过渡的颜色。左边第一个,是黑色和白色(我们之前探讨过啦!)。我们找到用来过渡黑与白的是一种很不错的,中间灰。这个颜色是靠混合白色所占的比例之白色和黑色所占的比例之黑色得到的。同样混合红色和黄色,我们得到橙色,然后深绿+蓝色=很棒的海蓝色哦。在右边我们有一点点变化:3种颜色在一起。我们用同样的方法来对待,混合之后得到一个有点蓝的紫色。方法是很简单的。但是,正如我在之前说到的(在“生命中没有免费的东西”,忘了的话,请重新阅读那部分),这些只是在可以无颜色数限制下使用。在实际操作中,你不会有一个无限的色盘来做AA过渡(就算你有,要精确计算这些比例肯定浪费你很多时间)。所以最好凭感觉选出AA过渡色,如果不灵,就持续修改到行为止。只是象素画里一个很有用的技巧:不断尝试,直到成功。

我们可以看个例子吗?
当然。我会展示一个简单的灰度例子,但记着这个对彩色的也有效(选择中间色;如果你混合红与黄,那么AA就用橙色)。  

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

看!一个唱歌的小歌手。可爱吗?^_^ ... 嗯,当你放大这个作品,我用箭头指出需要特别注意的地方。你会发现有些时候AA用到多个象素(例如这张图里她的胸部)。其他时候,我选择较暗的过渡色来减少锯齿感。在袖子上,你就会发现有些地方我根本没有AA。那是如何做出这个决定的呢?尝试所有可能,然后看哪个方法最好。你最好的朋友就是“Undo”。尝试一下,如果不错,就保留。如果不行,就“Undo”。如果你分辨不出,尝试在Undo和Redo之间不断比较,直到可以分辨为止。这是我能给的最好建议,除此之外就是实践实践再实践!

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

这是一个半彩调例子,是Konamix出品的DDR。我用了AA在人物的形体上。如果没有AA,许多的地方都会被忽略(举例说明,她裤子的喇叭形状),又或混淆形体(如她的胸部和头发)。同样注意AA是怎么样被运用在手臂和头部的部分。记着,你的目的是取消象素的方块感。

向前!向前!向前!!
嗯,我好像太兴奋了。我希望你能从这个小教程里学到点东西。我建议你开始尝试AA在你的作品里,如果你是个追求进步的像素艺术家,我建议你去展示你的作品,听取高手的建议和意见。记着,不努力的话,永远不会进步。所以从现在开始努力吧!相信我,你会变得越来越猛的。


[ 此贴被imick在2005-05-22 06:26重新编辑 ]


查看个人作品




imick的插画画廊:
http://chahua.com/u/7934

imick插画画廊 http://chahua.com/u/7934
http://cg.chahua.org 中国插画画廊-插画师作品展示中心

[url=http://my.opera.com/imick/blog/](→ܫ← の)~[/url]
[楼 主] | Posted:2005-05-19 02:45| 顶端
cynical


cynical插画画廊
uid: 16642
级别: 三星会员
精华: 1
发帖: 598
威望: 306 点
积分: 319 分
推广值: 1 点
注册时间:2004-12-12
最后登陆:2011-07-18
查看作者画廊 引用回复这个帖子



有这种软件么?~~还是偶们自己调色彩?


查看个人作品




cynical的插画画廊:
http://chahua.com/u/16642

cynical插画画廊 http://chahua.com/u/16642
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
[1 楼] | Posted:2005-05-19 04:07| 顶端
imick


imick插画画廊
uid: 7934
级别: 贵宾
精华: 18
发帖: 434
威望: 340 点
积分: 72 分
推广值: 1 点
注册时间:2004-07-09
最后登陆:2022-10-07
查看作者画廊 引用回复这个帖子



像素里是自己调,一般的作图软件都有自动AA,但用在像素方面的效果不甚理想,所以一般的做像素还是手动加AA效果。


[ 此贴被imick在2005-05-19 07:58重新编辑 ]


查看个人作品




imick的插画画廊:
http://chahua.com/u/7934

imick插画画廊 http://chahua.com/u/7934
http://cg.chahua.org 中国插画画廊-插画师作品展示中心

[url=http://my.opera.com/imick/blog/](→ܫ← の)~[/url]
[2 楼] | Posted:2005-05-19 04:26| 顶端
imick


imick插画画廊
uid: 7934
级别: 贵宾
精华: 18
发帖: 434
威望: 340 点
积分: 72 分
推广值: 1 点
注册时间:2004-07-09
最后登陆:2022-10-07
查看作者画廊 引用回复这个帖子



本篇教程实际教的就是手动AA。


查看个人作品




imick的插画画廊:
http://chahua.com/u/7934

imick插画画廊 http://chahua.com/u/7934
http://cg.chahua.org 中国插画画廊-插画师作品展示中心

[url=http://my.opera.com/imick/blog/](→ܫ← の)~[/url]
[3 楼] | Posted:2005-05-19 04:27| 顶端
cynical


cynical插画画廊
uid: 16642
级别: 三星会员
精华: 1
发帖: 598
威望: 306 点
积分: 319 分
推广值: 1 点
注册时间:2004-12-12
最后登陆:2011-07-18
查看作者画廊 引用回复这个帖子



[s:2] [s:2] 谢谢啦~~~


查看个人作品




cynical的插画画廊:
http://chahua.com/u/16642

cynical插画画廊 http://chahua.com/u/16642
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
[4 楼] | Posted:2005-05-19 06:05| 顶端
sm54




sm54插画画廊
uid: 23332
级别: 新手上路
精华: 1
发帖: 59
威望: 26 点
积分: 266 分
推广值: 0 点
注册时间:2005-04-13
最后登陆:2011-12-02
查看作者画廊 引用回复这个帖子



干了一天活,眼花了,纯顶半夜看。


查看个人作品




sm54的插画画廊:
http://chahua.com/u/23332

sm54插画画廊 http://chahua.com/u/23332
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
[5 楼] | Posted:2005-05-19 17:33| 顶端
夏雨22


夏雨22插画画廊
uid: 22679
级别: 论坛版主
精华: 5
发帖: 303
威望: 240 点
积分: 1392 分
推广值: 1 点
注册时间:2005-04-04
最后登陆:2010-12-07
查看作者画廊 引用回复这个帖子



顶`````````!最近我也开始整理了 [s:2]


查看个人作品




夏雨22的插画画廊:
http://chahua.com/u/22679

夏雨22插画画廊 http://chahua.com/u/22679
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
哇卡卡,我就是夏雨
[6 楼] | Posted:2005-05-21 19:21| 顶端
魔幻橡皮


魔幻橡皮插画画廊
uid: 26132
级别: 新手上路
精华: 0
发帖: 91
威望: 33 点
积分: 104 分
推广值: 0 点
注册时间:2005-05-26
最后登陆:2006-10-19
查看作者画廊 引用回复这个帖子



谢谢........顶


查看个人作品




魔幻橡皮的插画画廊:
http://chahua.com/u/26132

魔幻橡皮插画画廊 http://chahua.com/u/26132
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
[7 楼] | Posted:2005-05-27 10:37| 顶端
wacom80




wacom80插画画廊
uid: 22473
级别: 新手上路
精华: 0
发帖: 14
威望: 7 点
积分: 20 分
推广值: 0 点
注册时间:2005-04-01
最后登陆:2007-03-18
查看作者画廊 引用回复这个帖子



看的晕忽忽,不过我倒希望能有软件把图的过渡象素都弄走,只留锯齿。


查看个人作品




wacom80的插画画廊:
http://chahua.com/u/22473

wacom80插画画廊 http://chahua.com/u/22473
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
[8 楼] | Posted:2005-06-06 12:17| 顶端
苍叶oo




苍叶oo插画画廊
uid: 25420
级别: 一星会员
精华: 0
发帖: 520
威望: 199 点
积分: 573 分
推广值: 0 点
注册时间:2005-05-16
最后登陆:2010-09-10
查看作者画廊 引用回复这个帖子



下面是引用wacom80于2005-06-06 12:17发表的:
看的晕忽忽,不过我倒希望能有软件把图的过渡象素都弄走,只留锯齿。




对对 我也是这么想的


查看个人作品




苍叶oo的插画画廊:
http://chahua.com/u/25420

苍叶oo插画画廊 http://chahua.com/u/25420
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
[9 楼] | Posted:2005-06-06 16:28| 顶端
<<   1   2   3  >>  Pages: ( 3 total )

插画中国 -> 像素画教程、像素论坛




©   all right reserved China Society Of Illustrator   2003-2021
京ICP备05082564号-15  京公网安备11010502043095号
中画网中国插画网&北京中画网科技有限公司 版权所有
中画网 - 中画论坛 - 专注于插画、游戏原画、漫画、油画、卡通动画、像素画等电脑绘画和艺术的专业论坛