利用Photoshop cs6网格对齐功能绘制高清icon

ico,经常制作ico的朋友应该发现了：一些本来尺寸很大，质量很不错的高清png图片，经过缩小转为ico时却变得惨不忍睹（图标的细节损失严重）而当我们去看那些专业人士制作的icon时，却发现，对方制作的ico尺寸虽小，但是细节却保持的非常好，这里面难道有什么技巧么…

经常做ICOs的朋友应该都发现了，一些原本尺寸很大，质量很好的高清png图片，在缩减成ICOs后变得很可怕(图标的细节已经严重丢失)。我们去看那些专业人士做的ico，发现对方做的ico体积很小，但是细节保存的很好。这里面有什么技巧吗？今天给大家分享一篇关于用Photoshop cs6网格对齐功能绘图的文章…

经常做ICOs的朋友应该都发现了，一些原本尺寸很大，质量很好的高清png图片，在缩减成ICOs后变得很可怕(图标的细节已经严重丢失)。我们去看那些专业人士做的ico，发现对方做的ico体积很小，但是细节保存的很好。这里面有什么技巧吗？今天给大家分享一篇关于用Photoshop cs6的网格对齐功能绘制高清图标的文章。掌握了这个技能，说不定我们还能做出高清图标呢！

Photoshop cs6自发布以来广受好评。细心的朋友可能会发现，最新的PS CS6在绘制和变换矢量对象时，支持自动像素与网格对齐，非常好用。PS CS6的像素自动网格对齐功能在绘图过程中无疑要方便很多，我们也不用担心图形边缘模糊的问题。但是，在实际的图形设计过程中，我们会经常发现，我们仍然需要调整一些路径没有完全与网格对齐的半透明过渡像素，以平滑图形边缘，减少锯齿感，或者使图形看起来更加饱满细腻。我们称之为亚像素(或子像素，一般用于屏幕显示技术等领域。).

图1-抗锯齿子像素

一、像素对齐网格

1. 对象绘制时像素对齐网格

像素网格对齐最大的作用是避免绘制图形时出现虚边，解决图形模糊的问题。尤其是在画布放大数倍挖掘出界面和图标细节的时候，精度可以达到像素级，让设计师可以更专注于创意表达层面，不必因为害怕图形模糊而谨慎操作，提高工作效率。

在PS CS6的初始状态下，只有画布处于100%比例，即实际像素比例时，绘制的图形才不会模糊。当画布放大或缩小到其他比例时，即使打开网格辅助，绘制的图形也会模糊。如图2所示，蓝色图形和紫色图形是随意绘制的相同大小的矩形，分别不打开100%画布下的网格和100%缩放画布下的网格。我们可以看清楚。

图2-对齐像素模式和未对齐像素模式的比较

？此时，的网格不起作用，因为在PS CS6的初始状态下，网格的参数不是以像素为单位，而是以毫米为单位，如图-3所示。可以通过主菜单中的“编辑首选项常规”或快捷键Ctrl K打开首选项窗口。

图3-初始状态下的网格参数

在绘制规则图形(矩形、圆角矩形、圆形)的过程中，如果想让像素在任何情况下都与网格对齐，只需在PS CS6的首选项窗口中设置“参考线、网格和切片”选项卡的网格参数，配合快捷键即可。

从图3可以看出，网格线间隔的默认值是25mm。当单位改为像素时，单位前面的值将自动变为1。此时网格线与画布上的像素网格没有对齐，需要手动重新输入值，网格线间隔值必须等于子网格值。图4显示了两种不同的数值网格在3200%时的效果，可以根据自己的喜好进行调整。网格可以通过主菜单“视图显示网格”来显示或隐藏，快捷键是Ctrl '(Enter左边的引号键)。

图4-不同网格参数呈现的效果

完成了如上设置，最后确保”主菜单>视图>对齐”及”对齐到>网格”两个选项已勾选，”对齐到>网格”选项在打开显示网格的情况下才可编辑。

图5-对齐功能及相关选项

像素对齐网格设置完成，以后在非100%视图下绘制常规图形，只要打开网格辅助，就不会出现模糊情况。像素对齐网格在PS CS6中还是存在一定的局限性，受到图形形状的约束，当使用线条工具、多边形工具、自定义形状工具绘制一些带有倾斜边缘或非直角的图形时，还是无法保证所有角点和边缘对齐网格，当然这里的模糊更多的是防锯齿效果，可以利用网格手动调整。

2. 对象变换时像素对齐网格

PS CS6中，长宽都是奇数或都是偶数时，进行90°变换时都可以对齐像素，当长宽数值分别是奇数和偶数时，再进行顺时针或逆时针90°变换就会使图形模糊，无法对齐到像素，这时可以先旋转，然后打开网格进行辅助，不要退出自由变换模式，拖动对象，这时边缘就会自动吸附对齐网格，如下图：

图6-变换图形时对齐网格

二、利用次像素让图形更饱满

举个小例子，看看次像素在图形设计中的作用，抛砖引玉。

在界面设计中，经常会绘制下拉菜单等控件上的三角形箭头形状，最常见的做法就是用铅笔工具点象素画出来，如图7-a所示，看上去很清晰，但在分辨率较小的屏幕上看，会稍显生硬、有锯齿感，影响界面的细腻度；用路径对齐网格绘制箭头，如图7-b所示，解决了锯齿问题，但看上去体量感被削弱了，不够饱满；图7-c中所示的效果，是对次像素微调后的效果，既消除了锯齿，而且在体量感上不输第一种方案的效果。

图7-三种不同方法绘制的箭头

没看出差别？我们将三种方案放在一起对比下，见图8，从左至右依次为图7中的a、b、c方案，我们看到中间的b方案虽然没有了锯齿，但体量上明显小于a、c方案，而c方案同时具备无锯齿、相等的体量感两个优点。

图8-下拉箭头效果对比

通过放大图片我们可以看到在次像素上的差别，要达到方案c的方法其实很简单，看看下图放大的效果和路径你就明白了。

图9-使用路径改善后的次像素

只要将角点上的路径锚点分别向外移动一点，让原本颜色比较淡的次像素稍微加深就可以了，操作时，放大画布让调节更细微和精确，选中锚点，轻点多次键盘上的方向键来移动即可，这个方法不局限于箭头形状，大家可以开启像素眼去发现更多的应用场景。

原文：http://www.shejidaren.com/icon-pixel-tutorial.html