UI培训
美国上市UI培训机构

400-111-8989

热门课程

达内UI培训PS基础教程-17-消除锯齿和羽化

  • 时间:2015-08-26
  • 发布:达内
  • 来源:达内

我们使用椭圆选框工具,分别关闭和打开消除锯齿(也称抗锯齿),创建两个差不多大的正圆形选区,然后填充黑色看看。怎样快速填充黑色还记得吗?先〖X〗然后〖ALT DELETE〗。填充之后取消选择〖CTRL D〗,效果如下左图。
仔细观察着两个圆的边缘部分,就会看到第一个圆的边缘较为生硬,有明显的阶梯状,也叫锯齿。而第二个圆相对要显得光滑一些。在前面的课程#02中我们曾经学习过产生锯齿的原因是点阵图像的特性导致的。因为点阵图像用正方形的小点来描述图像,所以在描述曲线及一些角度的直线时就会产生锯齿。
那为什么第二个圆没有锯齿呢?真的没有吗?我们把图像放大〖空格 CTRL 单击〗或〖CTRL +〗一些来看看。如下右图。

<a style='color:blue' href='http://www.tedu.cn/'>达内</a><a style='color:blue' href='http://ui.tedu.cn/'>UI培训</a>PS基础教程-16-消除锯齿和羽化

可以看到第二个圆其实也有锯齿,但是锯齿的边缘变得柔和了。有一种从黑色到背景白色的过渡效果。因此看起来比第一个圆显得光滑一些。这就是消除锯齿的效果了。所谓消除锯齿并不是真正消除,而只是采用了“障眼法”令图像看起来光滑一些。只要图像是点阵的,锯齿就永远存在。
矢量图像从结构理论上来说是没有锯齿的,但是由于显示器的物理特性是点阵显示,所以矢量图像最终表现在屏幕上的时候也会有锯齿现象。也就是说矢量图象真正的优势并不是体现在最终表现效果上,而是在图像制作过程中可以不损失质量地进行各种拉伸变形等。

如果大家细心的话就会发现,矩形、单行和单列选框工具都是没有消除锯齿的选项的。为什么呢?自己思考一下。答案在本小节最后。

0414说起羽毛大家是否联想到一种柔和的感觉呢?羽化选项也是这个作用。现在使用椭圆选框工具,将羽化设为0和5,依次创建出两个正圆选区,然后填充上黑色(〖D〗,〖ALT DELETE〗),不要取消选区。效果如下左图。看到使用了5像素的羽化后,填充的颜色不再是局限于选区的虚线框内,而是扩展到了选区之外并且呈现逐渐淡化的效果。
放大后可以看到,这个淡化的效果以选区的虚线为中心,同时向选区内部和外部延伸。如下中图。这个时候如果使用10像素大小的画笔工具,选一个红色在选区内绘制,将会出现如下右图的效果。

达内UI培训PS基础教程-16-消除锯齿和羽化

我们在前面说过,一旦选区建立以后,几乎所有的操作就只针对选区内有效,但是为什么现在画笔却可以在选区的虚线框之外还有效果呢?而且之前填充的黑色也并不是完全在选区之内,有一部分超过了选区的虚线。 这是因为选区的虚线框有时并不能完全地表示所选中的范围,这个问题在本篇后面部分将会得到解释。

羽化选项的作用就是虚化选区的边缘,这样在制作合成效果的时候会得到较柔和的过渡。现在在Photoshop中打开如下2图。

达内UI培训PS基础教程-16-消除锯齿和羽化

0415将羽化设置为0,使用套索工具将中间的花朵大致地选择,然后在工具栏选择移动工具(使用选取工具创建选区后在选区内按下CTRL也可以临时切换到移动工具),在选区内移动到另外一幅图像中。如下图 ,从蓝色箭头处拖动到红色箭头处。Photoshop支持在打开的图像之间直接拖动内容,方法就是这样。拖动的起始图像称为源图像,拖动到的图像称为目标图像。
需要注意的是在选区内的时候光标显示为,此时拖动才是拖动选区内的图像,如果在选区之外光标显示为,此时将会拖动整个图像。应看清楚以避免误操作。

达内UI培训PS基础教程-16-消除锯齿和羽化

拖动完成后效果如下左图。可以看到拖动过来的图像边缘较为生硬。现在按〖F12〗恢复目标图像到原始状态(也可以〖CTRL ALT Z〗)。然后切换到原图像,也按F12恢复。F12是将图像恢复到上一次保存后的状态。 将羽化设置为5,再重复上面的过程。可以看到这次拖动到目标图像中的花朵边缘显得柔和得多。如下右图。

达内UI培训PS基础教程-16-消除锯齿和羽化

0416虽然选取工具在公共栏中提供了直接的羽化选项,但不建议直接使用它。因为这样做出的选区羽化效果如果不满意,撤销一步〖CTRL ALT Z〗后选区将消失。更改羽化数值后要重新创建选区。
建议选取的时候都将羽化设置为0,在完成后使用菜单【选择 羽化】〖CTRL ALT D〗,或点击右键(使用选取工具或裁切工具前提下)在出现的菜单中选择“羽化”,将会出现如下 左图的羽化设置对话框。这时输入数值后回车即可。羽化效果和以前在公共栏中设置的效果是一样的。
这样做的好处是如果发现羽化的程度不满意,可以撤销一步〖CTRL ALT Z〗后重新设置羽化数值,而不会导致原先的选区消失。以后内容中所提到的羽化,都建议大家使用这种先创建再羽化的方式。
设置羽化后,选区虚线框可能会缩小并且拐角会变得平滑,如下中图是羽化10像素后的效果。如果输入的羽化的数值过大,可能会出现一个如下右图的警告,同时选区虚线消失。虚线框缩小及过大羽化后警告的原因,大家在后面的内容中将会得到回答。

达内UI培训PS基础教程-16-消除锯齿和羽化

可以看出,羽化使选中的图像边缘呈现半透明过渡的效果,这有利于在不同图像中合成效果。但是羽化的效果实际并不理想,因为羽化的效果是沿着选区边缘平均分配的。而大部分时候我们需要在不同的地方设置不同的透明或羽化程度。因此直接使用羽化 来合成图像的机会并不多。

现在来回答前面的一个问题:为何矩形、单行和单列选框工具都没有消除锯齿的选项?那是因为这3种选取工具所创建的选区边缘一定是水平或者垂直,不可能有曲线或斜线。而锯齿只会在曲线或斜线中出现。这3种选取工具之所以没有消除锯齿的选项,是因为它们根本不会产生锯齿。

在课程#03中我们学习过绘图工具画笔,画笔设定中有一个硬度,改变硬度可以让画笔边缘变得柔和,这种柔和效果实际也就是一种羽化效果。 和画笔工具组合在一起的还有一个铅笔工具。铅笔工具的边缘是生硬的,始终带有锯齿效果。其他的设定和画笔工具相同。
注意铅笔设定中虽然也有硬度的选项但没有画笔那样改变边缘柔和程度的效果。铅笔和画笔的最大区别就是铅笔没有边缘羽化,因此看起来图像较为生硬。如下图左右两个枫叶和波浪线的效果对比,哪个用的是铅笔哪个用的是画笔应该看得出来吧。

达内UI培训PS基础教程-16-消除锯齿和羽化

上一篇:达内UI培训PS基础教程-16-建立规则选区
下一篇:关于设计,苹果教会我们的那些事

设计师好的时代和交互设计差的时代

UI动效设计原来都是这些软件做的

你也可以制作价值10万的LOGO

ui设计培训之工具篇--ps学习笔记

选择城市和中心
贵州省

广西省

海南省