图片锯齿.docx

1、图片锯齿1、ctrl+t 类变形导致的锯齿问题1-1 原因：常规选项设置不当(很少有的情况)解决：打开菜单 编辑-首选项-常规。请确保你的图像插值设置为“两次立方(适用于平滑渐变)”。当然你有特殊需要且明确这里选项的含义则另当别论(比如说像素风格的缩放一般用“邻近”来确保不模糊)。1-2 原因：旋转与缩小等产生的锯齿与走形解决：1-2-1 先旋转后缩小，分两步走(把一次ctrl+t 拆分为两次，最后一次再缩小可以减少变形/旋转产生的毛刺)。1-2-2 采用矢量对象(比如常见的文字透视变形，不要选择栅格化，而采用转换为形状)。矢量对象在一般情况下变形更保真，另一个显著优点是经得起反复ctrl+t

2、 而不会产生问题。1-2-3 有多大画多大，最好别ctrl+t (特别适用于简单形状)。同理，能少ctrl+t，就不要反复ctrl+t 。特别忌讳拉大又拉小，转来又转去 结合第一条：如果存在缩小，最好是两次变形，一次形状到位，第二次缩小。1-3 原因：旋转90度/180度时，如果用中点定位则会发生重新运算。导致模糊、锯齿产生。解决：要想最大程度保持原样，最好在90度(180度)旋转时用角点定位(随便哪个角点)。这样可以避免重新运算像素导致的质量损失。2、多次填充选区产生的锯齿问题原因：反复的填充(包括涂画、拉渐变等等)导致原本用于平滑的边缘半透明像素叠加，越来越不透明产生实体锯齿。解决：(首先

3、，将可能需要反复填充的区域弄在独立的层)2-1 填充一次后，立即锁定图层的透明区域。这样你再怎么填充，边缘都不会变实。2-2 纯色改用shift 填充。填充前景色或者背景色的时候，按住shift ，就会保留透明像素。2-3 用不透明区域建立蒙版(ctrl+缩略图选中图层不透明区域，然后点击图层面板下面的添加蒙版按钮);或者使用下一图层(这个图层只填充一次，仅用以定义外形)做剪贴蒙版。由于蒙版不再改动，所以透明区域也不会变化，边缘半透明自然也不会有问题。3、魔棒/磁性套索 等选择工具选出的区域有锯齿原因：由于图片压缩等等原因产生的锯齿(jpg图片常见的矩形色块)，或其他原因导致的软件区分/吸附不

4、准确。解决：最好别折腾质量差的图片，或用路径工具给这种图片作选区。偷懒一点的办法，可以在选择完毕后用ctrl+d 羽化一点选区。具体羽化量参考实际用途及锯齿程度。还可以用调整边缘控制面板调整选区后再作运用。另外也可以用图层蒙版来处理这类对象的边缘(当然只是一个补救措施)，具体：ctrl+缩略图选中图层不透明区域，然后点击图层面板下面的添加蒙版按钮生成蒙版。按住alt键点击蒙版(可以直接看到蒙版);然后用滤镜-模糊-高斯模糊来处理蒙版，使得边缘锯齿消除。然后再用 ctrl+m 打开曲线工具，拉大对比，把模糊的地段区分开来。4、锐化过度产生的局部锯齿解决：4-1 历史纪录画笔。 历史纪录画笔是个好

5、东西，把还原点设定在锐化前，然后使用恰当的设定(笔刷的硬度不透明度等等)，不透明度最好不要设定太高。我们可以根据情况多涂或者少涂两遍。让锐化前后的图象“综合”一下。4-2 涂抹，模糊工具。具体就不多讲了。4-3 渐隐滤镜效果(ctrl+shift+f ，也称“消退”)。单步滤镜产生的效果都可以用消退，令使用后和使用前的效果混合。我们可以用它减弱效果，或者快速完成一些特殊的用途。这个东西放在这里只是顺带提一下，用得多了会发现这个命令很有用。5、图层样式-描边后感觉描边有锯齿原因：描边样式对半透明像素反应比较明显 (所以我们也常用描边样式检查是否存在看不见的游离像素)。解决：5-1 如果是个纯色对

6、象，直接锐化即可让边缘毛刺得到改善;如果是有内容的，为了不锐化到图像本身，只锐化形状边缘，可以如下操作。ctrl+缩略图选中图层不透明区域，再收缩选区1像素，然后再反选，最后菜单-滤镜-锐化-锐化。5-2 如上处理之后，还有不平整。就使出终极大法，硬橡皮擦!用硬度100%的橡皮擦(画笔模式)小心的擦除多余的部分。6、矢量形状 图层样式-描边后感觉描边虚化(主要是横/竖线)原因：矢量对象的路径节点，坐标比像素要精确，精确到小数点后具体几位记不清楚了。所以可能不会落在整数点上。比如说一条水平线，两个节点的y=3.56 这样它就是不清晰的，当然描边也会模糊掉。解决：如果你始终在100%的缩放倍数下绘

7、制矢量形状，你完全不会碰到这个问题。在100%下你的节点必然落在整数位置上。如果放大到200%绘制，你的节点有可能坐标就是 x=2.5,y=3.0 这样。300%下 就是x=45.33，y=5.66 这样。如果你随便拉动导航器下面的缩放，比如说52.3%，那就更难落到整数位置上了。所以可行的解决方案就是在 类似100%、50% (必然落在2的倍数上)、25%这样的放大倍数下绘制。或者在200%，400%这类的大小下绘制后，用键盘方向键移动位置不对的节点几次来到达整数位。7、压缩图片调亮暗部后出现块状等无必要细节(锯齿)原因：还是压缩算法的问题，把一些层次不明显的东西块状化了。一调曲线，就变得非

8、常明显。解决：7-1 用20%-30%的软边缘图章反复压盖。这也是一些影楼常用的磨皮方法，可以去掉不必要的细节。具体不再赘述7-2 用修补工具。也不赘述，属于修图的范畴7-3 用模糊工具或者选择后用模糊滤镜ctrl+t补充：放大边缘模糊的问题。可以ctrl+缩略图选中图层不透明区域，然后用调整边缘控制面板调整后，再反选，删除多余部分。同理可以用不透明区域生成蒙版后，用曲线调整蒙版。Ps插值运算无损放大图片技巧1.启动Photoshop，然后打开一幅图像。2、选择“图像大小”命令，依下图设置。注意两个地方：一是要勾选“重定像素”，并把插补方法设定为“两次立方”，二是把文档大小的单位设置为百分比，

9、并且只采用110这个百分比，这将把图像增大10%。信不信由您，当以10%的增量增大图像时，由于某种原因，似乎不会使图像变模糊和柔和。很奇怪也很有趣。3、要把图像增大到海报大小需要很多遍，因此最好把上述操作过程定义成一个动作。每执行一次动作，图像增大10%。大概要执行这样的动作10到15遍。4、增大后的图像。大家看看图片质量怎么样？png8图片消除锯齿的方法发现制作完成的图片上传网站后，出现许多锯齿。蓝色理想里的人们认为模糊图片边缘，用绘制工具对锯齿进行涂抹可以解决锯齿问题。但我认为这种方法比较繁琐，而且处理小图片的过程中很容易损害图片的像素，造成精度降低。经反复测试，正确的方法应该为：将制作好

10、的图片保存为“”和设备所用的格式，打开参数控制面板。在预设中选、可选择、扩散、勾选“可选择”复选框，再选“无透明度仿色”。然后选颜色，仿色（视现实情况自定），杂边选与背景相似的颜色，亦可自定，能无痕地填补锯齿为佳。靠色自选，上面的选“”。Gif图片锯齿的消除方法普通的打造手法（字体有粗糙的边）完成图（干净光滑）方法一：给图象加外发光一，双击所在图层二，选取外发光三，调节发光色彩为白色四，确认导出就可方法二：给图象加描边一，选取描边二，调节描边色彩为白色，大小为1三，单击确定做完关于gif图片（或png8）杂边锯齿的问题1.1 索引透明颜色与Alpha透明通道 要说索引颜色透明，首先要讲讲什么是

11、索引颜色，XX百科上有对索引颜色的解释，我觉得很关键的一句是“挑选一副图片中最有代表性的若干种颜色（通常不超过256种），编制成颜色表。”我的理解就是，找一些跟你图片颜色最接近的一些颜色（不超过256种）组成你这张图片。 而且，很重要的是，这些颜色里面有个很特别的颜色，就是索引透明色。这种颜色跟索引绿色，或是索引红色属于性质相同的颜色，这是个颜色。而这种颜色表现的效果就是透明。IE6是支持索引透明色的，所以gif或png8这类索引颜色编码的图片的透明背景在IE6下是可以透明显示的。 至于Alpha透明通道，XX百科上也有相关的解释。Alpha通道一般用做不透明参数，有些情况下用0%-100%表

12、示，有时候用0-1表示，还有时候用0-255表示，两头分别表示完全透明和不透明。我知道的，css里，IE下有个透明度滤镜，使用0%-100%表示的，例如下面：filter:alpha(opacity=50)；而其他浏览器（Firefox，chrome等）是用0-1表示的，例如：opacity:0.5；在as中，透明度可以用0-1表示，例如：test_mc.alpha=0.5;也可以用0-255表示，但是以十六进制的形式表示的，例如：080FF0000就是50%透明的红色。在css3中，颜色的表示也加入了Alpha通道。 平时我们看到的半透明图片都是png32的，都使用了8位（2的8次方为256

13、）的Alpha通道，否则无法表示半透明。或许有人或有疑问，不对啊，我用photoshop保存图片的时候，就是使用的png24，是支持半透明的啊。这里面其实是有一点小猫腻的，看下面这张截图：photoshop保存图片为png24格式时部分界面 观察黄色半透明覆盖的区域，可以看到有个“透明度”选项被勾选了，这个选项被选中表示图片支持Alpha透明通道，如果图片确实是含有透明或半透明的Alpha通道属性的，则保存的图片就会含有Alpha通道，使得保存的图片为透明或半透明，而这个保存的图片其实是png32格式的，如果不勾选这个“透明度”，则保存的图片就是正宗的png24的图片，红绿蓝各8位通道，无Al

14、pha通道。这与fireworks中直接标明png24，png32有所不同。为什么photoshop会以png24加勾选“透明度”选项的方法表示png32的图片呢，我个人观点是（以下为我的推测，仅供参考），让图片的保存更智能些，怎么说呢，如果一张图片不含有Alpha通道（不透明的），但用户却以png32的方式将其保存，则图片中所含的8位Alpha通道则是多余的，而采用photoshop这种方式，如果一张图片不含Alpha通道，即使用户勾选了“透明度”选项，图片依然以png24形式保存，避免了多余的信息，这也许就是photoshop采用png24为头加勾选“透明度”方式保存图片的原因。 1.2

15、photoshop的半透明平滑处理 不知道您注意到没有，在photoshop中，绘制选区或图形时有个“消除锯齿”的勾选项，例如下面截图： 边缘锯齿与边缘平滑可以说是两个相对的概念，勾选“消除锯齿”选项，就意味着对图形的边缘进行平滑处理。在photoshop中，如何对图形边缘进行平滑处理的呢？就是使用半透明！ 使用半透明填塞弧线转角或斜线空隙，形成视觉上的自然过渡，从而产生平滑的效果。例如上图所示，在线条的边缘处使用了半透明，使得边缘与周围环境有了过渡，当图片原始比例显示时，这种半透明的过渡是看不见的，要把图片放大到肉眼可见的像素级别就会清楚了看见这些半透明，这就是上图所展示的。 1.3 gif

16、图片（或png8图片）产生锯齿的原因 gif图片（或png8）产生锯齿的原因一句话总结就是：gif或png8只有透明索引颜色，没有半透明索引颜色，不支持位图中半透明边缘，只好用其他索引色代替（例如白色#FFFFFF），从而产生杂色锯齿。正如上面两点提到了，gif或png8是索引图片，图片中所有的颜色都是索引颜色，而这些所有的索引颜色中有关透明度的就只有一个透明索引颜色，并没有半透明索引颜色，加上photoshop采用半透明实现边缘平滑处理，所以导致photoshop导出的gif图片（或png8）会产生杂边锯齿。 1.4 形状与锯齿之间的关系 杂边锯齿的大小以及有无与图形的形状是有关系的。一般来

17、说，水平线，垂线，矩形是没有杂边锯齿的问题的，因为他们都是完全填充像素的。但是弧线以及斜线就会遇到杂边锯齿的麻烦，尤其当形状不规则时，例如下面这张放大1600倍的图片一条斜线的截图：杂边锯齿 如果这张图片在网页中显示，浅色背景还好，要是深色背景，那就很难看了。参见实例页面图片2。 即使是倾斜的直线也是存在杂边锯齿的问题的，而其中杂边锯齿影响最小的就是45度斜线，这是因为45度的斜线的所有杂边锯齿大小都是一致的，肉眼看到的是一排同样的半像素（半像素之说可能不准确，仅用以说明肉眼所见之感觉）杂边锯齿，只要杂边颜色不是与背景色对比很强烈，这种程度的锯齿是可以忍受的。而其他角度的斜线的杂边锯齿大小则以

18、等差大小排列，在非杂边色背景下锯齿明显，可容忍度大大降低。 2. 如何有效的避免gif图片的杂边锯齿 2.1 绘制带有锯齿的图形或文字避免杂边锯齿 2.1.1 绘制带有锯齿的图片 正如在1.2部分一开始提到的，photoshop中，选区或图像像素填充工具选中后，在上部的选项栏里会出现一个“消除锯齿”的选项，默认是勾选的，意思是说绘制的图形或选区边缘是要平滑的，也就是部分边缘要用半透明的颜色代替，这就会导致保存的gif图片（或png8）的边缘有杂边锯齿。换个角度想，如果不勾选这个“消除锯齿”，则边缘就不会平滑处理，就不会产生半透明过渡填充，也就不会出现杂边锯齿了。事实证明确实如此，例如下面这张不

19、勾选这个“消除锯齿”选项所绘制的椭圆。虽然说椭圆的边缘不是很光滑，但是同时边缘没有了半透明的过渡，保存的gif图片（或png8）就不会出现杂色锯齿，不会出现图片边缘锯齿杂色与背景不融合的情况了。 2.1.2 带有锯齿的文字 与绘制图形一样，文字也有使用未消除锯齿的显示方式，就是在设置消除锯齿的下拉选项中选择“无”，例如下面这张选项栏截图的标示：下图为未消除锯齿的文字，在实例页面图片3中可以看到此图片（以png8格式保存）在深色背景下的显示，您可以看到没有一点点杂边锯齿。 2.2 通过杂边设置弱化网页中gif锯齿的影响 默认的杂边颜色是白色，通过更改这个颜色可以弱化网页中gif图片（或png8）

20、杂色锯齿的影响。这种改变分为两种情况，一是将杂边颜色设置为网页的背景颜色，但是这不适用于背景经常变化的情况；还有就是将杂边颜色设置为图片边缘的颜色，但是这种情况不适用于图片边缘颜色很多的情况。两种设置各有利弊和局限性，需要根据实际情况进行调整。举例说明，例如，我要保存一个对锯齿进行锐利处理的文字，以png8格式保存（相对于gif，图片更小一些），对杂边颜色进行修改，一个改为字体颜色（#34538b），在保存一个杂边颜色为黑色（#000000）的png8图片。这里设置杂边颜色就不上图了，因为单击“其它”后会出现一个选取颜色的对话框，直接选取颜色或输入相应的颜色参数就行了。蓝色杂边颜色的图片为实例

21、页面中的图片4，黑色杂边的图片为实例页面中的图片5，我们对比图片2可以看到，对杂边颜色进行相应的设置以后，在深色背景下，讨厌的白色杂边锯齿基本上就不见了，整个显示也舒服多了。但是这种处理是有局限性的，如果页面背景经常更换或是图片本身不是纯色或边缘不是纯色，则使用杂边颜色设置的方法就不适宜采用了。还有一个“一劳永逸”、“一了百了”的方法就是设置杂边“无”，这样，您就不用担心背景变化的问题，或是图片本身的问题了。 2.3 使用gif透明图片插件 在photoshop5里面有个GIF89a导出的选项，可以自动导出消除了杂边锯齿的gif图片，而且大小优化的很好。但是后来的photoshop版本中将这一

22、功能给删除了。但是，通过文件移植可以在之后的photoshop版本中实现GIF89a导出的功能。下载移植文件：gif89a.zip。 使用方法如下：解压文件，在文件夹中有个GIF89a Export.8be的文件，将其复制到您现有photoshop安装目录下的Plug-InsImport-Export目录下，例如我使用的是photoshop cs3，安装在C盘下，则需要复制到C:Program FilesAdobeAdobe Photoshop CS3Plug-InsImport-Export目录下。然后重新启动photoshop就可以了。 例如，还是保存对“gif图片锯齿”这几个文字锐利处理

23、的图片，选择文件-导出-GIF89a输出，然后单击“好”就可以了。您可以在实例页面图片6中看到导出的gif图片效果，没有杂边锯齿。 2.4 手工对图片进行像素抠取 看标题您应该知道该方法的意思了，就是采用手工的方法，将图片放大到一定程度，将半透明的像素一个一个删除或颜色填充，这种在png小图标处理或小图标制作的时候比较适应，如果是个很大的图片，兄弟，您要做好打持久战的准备了！具体如何一个一个像素的处理图片，我觉得简单带过就行了，将图片倍数放大到足够大，例如1600倍，这时候，您可以清楚的看到图片边缘的半透明像素格，将其一个一个删除就可以了，删除方法建议用选区。 不过我不推荐这种生产效率低下的方法，如果您对我上面的方法有一定的理解的话，估计就不会对这个方法感兴趣了。3. 如果上面所有的讨论，提供的方法都不适用如果上面所有的讨论，提供的方法都不适用，我想，您可能得使用png24以便支持一些半透明。我也知道，IE6不支持Alpha透明通道，不过没有关系，我之前专门写了篇关于IE6与png图片打交道的文章：IE6下png背景不透明问题的综合拓展。涵盖面很广，写得也比较认真，肯定会对您有所帮助的，两篇文章珠联璧合，相信以后遇到有关图片透明度的问题就不会再难倒您了。