在Adobe Illustrator中为图像做适配像素

What You'll Be Creating

作为初学者，为web做数码图形有时会很棘手，特别是当你为某张图投入大量精力（制作图形，或可能是图标），最后你突然发现结果并不如意。

这是我们最开始使用Adobe Illustrator时候都需要处理的事情，这也是我为什么想写这篇短文来为你找到一些解决方法。

1.矢量 vs. 位图

在开始前，我想先为作为设计师的你，我，其他所有人写一些我们都值得注意的东西。

我们搞创意工作的在工作时会碰到，两种主要的图片类型。 一种是矢量，另一种是位图。

一张矢量图由大量的锚点和路径组成，他们可以被用户随意的缩放大小，然而这些工作都不会使图片损失其质量。

位图呢，是由一系列的固定的像素点对其在网格上，意味着这张图片一旦确定在某个分辨率下，当你试图以任何方式修改它时，将会损失其原本的质量（包括放大或缩小）。 这是因为图片中的像素信息被强制地改变大小，而我们有些项目需要不同的大小来适配不同的用户。

显然使图片质量缩水不能满足需要的效果，试图改变它的大小你将会得到一个模糊的，像素化的图像。 有些软件像Perfect Resize 使用了特殊的算法来优化被放大的细节，但是对我而言矢量对比位图的最大特点在于：大小随意修改，而质量有保障。

位图还是矢量图，都取决于它们被用于何种用途。 你可能有所耳闻，一个图片可以被数字化显示或打印出来，最关键的不同是在于这个图片如何被重现。 打印机是通过像素来工作的，数字屏幕（PC监视器，手机或笔记本屏幕，等）依靠分辨率来处理和输出不同图像，无论是位图或矢量图

这带来了一个棘手的问题，涉及到矢量如何分布在像素网格之上，因此在不同设备之间 ，像素最佳化工作是不同的

幸运的是在我看来有很多标准规则的解决方案，一旦你开始做你的项目，还是你想要发布在web上或是打印，就可以使用这些方案。

1.理解Adobe Illustrator如何工作

在你调整你的图片之前，首先来理解“那些”东西如何工作。 Illustrator 是一个基于矢量的软件，它运用了数学算法来创建并显示路径（无论打开或关闭），包括锚点。 你可以控制这些锚点的位置来调整你的图形。

并非这些锚点很重要，但是你在画板上放置它们的方法和它们所呈现的物体（无论对齐与否）却很重要，这是我为什么在前几步骤中谈论小细节，因为这对于我们创建这样的图形有所帮助。

3.改变Illustrator的设置

默认的，Illustrator有大量的设置和选项，很多都有默认设置了，所以你在安装完软件之后就可以开始使用了。 大多数时候人们的成品都很不错，但一旦你的工作流程中需要更多的细节设置，你就要改变其中一些设置来使得你的设计能够像你所想的那样。 在前几个步骤里面，我带你了解了一些基本的东西，这些东西在我新装完Illustrator后会每次会去修改。

在我们开始前，我要指出，这些是我尝试和失败过程中发展出的个人偏好，并且我不认为这些是“正确”或“错误”的——更像是对于像素最佳化这个项目来说是“合适”的。 没有什么完全相同的情形，但大多数时候你的工作流程里面你可以自己去调节和适应。

第一步

在我们开始调节单位之前，我想先比较一下Illustrator中默认的单位（点）和我们所要选择的（像素）。

点（译者注：这里更确切的术语是“磅”）

从印刷角度来看，点（pt）是衡量字体大小，行距，缩进，空格的最小单位。

像素

根据维基百科的描述，从数码图形的角度来看，像素（px）是在数字屏幕上显示的图片中“最小的可访问元素” 在显示器和其他屏幕上，我们也可以根据不同屏幕的分辨率定义像素为最基本的衡量元素，这样就可以看到不同元素在屏幕上的显示尺寸。

现在，我们有了两种单位，那么我们如何区分它们？ 很多文章描述了，他们是相等的(1 pt = 1 px)，但是仅仅是在(1 pt = 1 px)的情况下才成立，因为1 pt = 1/72 inch，意味着当你的设备分辨率更高时，这个等式则不会成立。 假如你从CSS的角度看，W3 Org 会说：0.75 pt = 1 px。

苹果在他的iOS Developer Library page 中指出，为什么使用磅而不是像素将帮助图片更好地在更低或更高的分辨率设备上显示。

“举例说明，在高分辨率的屏幕下，一个一磅宽的线实际会在一行由两个物理像素组成的线里面。 结果是，当你在两种设备上绘制相同的内容时，其中一个是高分辨率的屏幕。这两个屏幕上的内容的大小近乎相同”。

他们忘记提到的是如今，生产商的屏幕有着不同的密度，这个数字很重要，造成了我们的工程会有些复杂。

现在你可能想知道，你该如何选择哪一个？ 我趋向于选择像素。 为什么？就拿个人偏好来说，自从我从事图形设计工作，我从未听到有人抱怨他们在iPhone上的同一个图形看起来比在PC上轮廓看起来更厚。

并且，像素并不依靠于ppi，你可以在新建文档时把你的文件设置为更高分辨率来调节ppi以具有不同ppi的设备。 又由于不同的设备的分辨率范围实在太广，我更愿意相信1 pt和2 px在苹果设备上是相等的，从不同生产商出来的同一个设备都可能具有更高的显示密度。

这个选择取决于你。 如果你找到了合适的方法，那么就来修改单位选项吧，在偏好设置 菜单 （编辑>偏好设置>单位）并设置一般和描边的值为像素 类型是基于点的，我推荐使它保持默认值，因为把它设置为像素不能改进清晰度和文字的锐度。

第二步

当你调整了你的单位后，来到网格设置 对于网格我不说很多，因为我另外一篇文章解释了关于他们的所有你需要知道的。 我要说的是如果你要创建一张准确的图像你需要多关注网格的精确设置，并与像素预览功能一起使用（这是我要在下面花几分钟讨论的）。

要改变默认设置，找到编辑>偏好设置>参考线和网格，有两个设置你需要关心：网格线间隔和次分隔线。我有时使用 1 来设置这两个值，现在我认为这是对我的工作最合适的设置，无论我做什么项目。 是的，你应该更留心，如果你想我一样尝试并变得尽可能留意细节方面。

第三步

我们都知道方向键的用法，Illustrator有个特色就是你可以使用你的键盘上的方向键来精确移动一个物体到一个方向。 我们想让所有东西都和像素保持精确，就需要调整每当我们按下方向键时，物体就会往那个方向移动一个像素。

在编辑>偏好设置>一般>常规>键盘增量 可以找到。

当我们想要快速、精确、短距离地移动物体时，这非常有帮助。

4.处理

直到现在，我们已经讨论了一些使Illustrator更为精确的设置，但是作为例子，将教你更多简单的功能描述，我将教你如何处理一张要被发布到Web上的图片。

第一步

我们开始新建文档。 如何过我们多关注一些基本的设置，就可以确保我们的画面能具有良好的像素最佳化基础。

按 Control-N (或 文件> 新建) 并看看现在的设置，开始我们的工程。

既然我们要为web做像素最佳化，配置文件需要更改为Web。 做完之后，Illustrator会自动把单位设置为像素，和颜色模式变成了RGB。

如果你看看文档的大小，你会注意到宽度和高度都成为了近似值（960 x 560px），而不是小数（960.5 x 560.38px）。 这是为什么？如果你新建一个画布，将其宽度设置为960.5px，就会在右侧出现一个对话框：没有占用完整的像素网格。

我们把使新建对象与像素网格对齐打开。 这个功能十分重要，它指使每个新建的对象，让他们的位置正确地对齐于像素网格，使他们看起来锐利。

所以，里个例子，我们创建了一个960 x 560 px的长方形，然后我们想让他对齐在小数画布的中心，但并不能这么做，因为右边和底部边缘不能完整覆盖到他们所处的像素上。

有些人肯能会想，这个选项可能仅用于Web内容，但我认为用于打印也能起到令你的锚点精确定位的效果，而不是在场景中到处都是锚点。

小提示：万一你偶然在一个小数的宽高图像上工作，你可以使用画板工具（shift - O）来把这些值取整，但你应该尝试在一开始就把这些值设置正确，才不会让你后面头疼。

第二步

一旦我确认了我的文档设置无误，我经常通过我自己的方式，确保每一个宽和高都用了整数。

就如我前面所展示的，覆盖完整的像素 规则在此处运用了。 如果我想创建一个看起来锐利的图形，我需要使其具有固定的值（例如200 x 200 px），这样可以确保图形每个像素点都完整覆盖到画布上的像素点。 然后我就可以创建一个可以被缩放任意百分比的图形，并且看起来很清晰。

假如有一个200.4 x 199.9 px的方形，Illustrator则会在图形的右侧和底部那些没有覆盖完整像素的地方应用一个保真效果，这样做之后，这个图形元素最后看起来会有些模糊。

幸运的是，Adobe的优秀人员提供了一个方法来修复这个问题，通过在Transform面板下的对齐像素网格功能可以解决。 如果你的图形大小不合适，那么打开此选项，它会将这个方形的宽和高都设置为200 px。这时是软件自动把形状的大小值设置为最近的整数了。

小提示：如果你看不到这个选项，那是因为你必须线在Transform面板的右上角上的箭头上点击，选择显示选项。

第三步

还有一些是用Illustrator创建像素最佳化图像时必须提出的重要特点。 尽管他们提供相似的功能，不过却具有关键的不同之处。

对齐网格

从名字推测出，这个选项直接与你设置的网格相关 要激活这个功能，来到视图>对齐网格（Shift - Control - ”），它将指使你所有在画布上的物体都与最近的网格边缘对齐。

对齐像素

对齐像素选项的行为有一些不同，它将物体对齐在不能被修改的像素网格上。 在你打开像素预览(Alt-Control-Y) 之前，这个功能是隐藏的，再打开之后，对齐网格功能变成了对齐像素功能。

尽管不同，但在网格分割线为1 px，次分隔线为1的情况下，对齐网格和对齐像素是相等的，也就是可以创建的最小的网格，这个大小与像素网格是相等的。

第四步

预览模式与对齐像素一起使用，将会更好的帮助你处理像素。 它允许你在像素级别进行查看，你可以直接看到你的设计的哪个部分需要处理。 我一直用这个功能，确实帮助很大。 就如我已经提到的，当你打开了视图>像素预览或快捷键 Alt-Control-Y时，可以激活这个功能。

第五步

一旦你完成了你的作品，花一点时间并确保你的锚点正确的对齐在像素网格上。 当你找到了越界的锚点，使用直接选择工具（A）将锚点拖到最近的网格交叉口上。

你也许会想使用对齐像素网格功能可以处理这些问题，但是据我的经验，有些时候会失败，此时我就会手动的用直接选择工具（A）来修复。

第六步

贝塞尔曲线是一个矢量软件中重要的部分，允许用户改变其形状和方位（闭合或打开）。 初学者遇到的问题是如何处理手柄，他们经常会随处拖动他们，这样会造成图形看起来有起伏。

然而秘诀是确保在拖动手柄（按住Shift）时垂直，水平地以45°对角线拖动，这个方法可以使手柄尾部对齐在某个网格的交叉点处。

并且，假如这个路径有一边是平的，试着拖动手柄上半部分不要超过图形的显示区域。

5.处理尺寸

当处理像素最佳化作品时，调整尺寸是一个永远的痛。 如果你试着选择物体并拖动一边的包围盒，那么它会放大或收缩，也会打破本来的面目。

一个解决方案是使用缩放选项（右键>变换>缩放>统一），使用50% ，150%，200%，250%来增大，-50%来缩小。

这就是为什么你需要一直计划好，因为你知道你要做的设计需要什么尺寸。

小提示：这个方法会有问题，特殊别是当你有一个巨大的编组元素的图形并带有圆角和曲线路径时。 当问题发生时，你需要取消编组，再同时进行调整。

6.处理旋转

当你要旋转长方形时，这一步相当简单，你可以将锚点对齐在最近的像素网格上。 但要如何处理圆角的形状？或曲线路径？

这也许是在做像素最佳化图形时遇到的最烦的问题了，在很多案例中锚点不可能对齐像素网格，因为会影响图形总体形状。 很多时候当我有一个圆角的长方形需要旋转，我应用了这个旋转然后随它去。

好了！

如果你按着这么做，那么你在为不同的设备创建漂亮的图形时就没有任何问题了！

来自：Design Tutsplus

不错,谢谢分享.....

不错,谢谢分享.....

谢谢楼主分享

很不错的教程

谢谢楼主分享

非常不错的教程，学习了

6666666666666666666666

非常棒！谢谢分享！！！

谢谢分享谢谢分享

挺好的很详细

感谢分享！

非常感谢的分享。。。。

太棒了，感谢楼主

学习了，谢谢。