AI和PS中怎么做到像素级绘制图标

AI

一、建立一个新文件

当建立一个完美的文件时有三个关键的方面:

文档尺寸(宽度和高度):当设置画板尺寸时应该输入整数值,不能输入带小数的值(例如高度值为200.58px)-如果你输入一个带小数点的值是不对的。(这取决于你输入的值:高度或宽度)它的下侧和右侧朝向像素的内侧而不是不同像素的交叉点。

小提示:如果你不小心把文档的值给设置错了,你可以按快捷键Shift+O进入设置页面修改,会出现一个新的页面可以让你修改画板的宽度和高度。当你设置完正确的值之后,你需要进入像素预览模式以确定这个画板是正确对齐到网格了,如果你发现它不对准,抓住画板工具再单击并拖动鼠标直到它对齐为止。

单位:始终确保单位是”像素“。

将新对象对齐到像素网格复选框:必须要选中状态。

小提示:将新对象对齐到像素网格只有在创建对象时显示选项才能起作用,如果你从文件中复制和粘贴一个对象但是这个操作没有选中对象,它是不会对齐的,直到你设置让它这样做。

:首选项设置

在这里,我们将进行一些基本的设置。为了获得首选项设置窗口,点击编辑-首选项,然后单击常规,你现在可以看到一个窗口有一些构造子集和标签,我们将重点关注以下:

. 一般设置

. 单位

.参考线和网格

2.1、键盘增量值设置

大多数情况你是要用箭头去移动图形,但是你是否有考虑过按一下箭头键所代表的值是多少呢?

在首选项的设置窗口里面有个一般设置,在右上角里面有一个键盘增量的设置。

输入1px,这样我们就能1px的移动对象,这样能确保它们对齐到像素网格。

小提示:键盘增量用了pt值而不是px值,别担心,这个问题我们后面会说到的。

2.2、设置单位

下一个重要步骤是把【单位和显示性能】里面的一些单位值设置为像素。导航到【单位和显示性能】标签(在首选项窗口),从下拉菜单中做出正确的选择。

你也许会问,为什么我们不让文字单位也是px呢?这是因为我发现文字通常很难对齐到网格,你最好的做法是把文字单位设置成pt。同时,在得到正确的尺寸上面它是非常奇怪的,例如,如果你做OS或Android的应用程序线框图中,12px≠12pt。

2.3、参考线和网格

网格可能是最少被解释的设置,但是正确的解释网格是很重要的。

网格让我们可以把一个对象放到固定的位置,但是这个值是怎样工作呢?如果你有注意相关操作,我们有可能设置一个网格线(垂直和水平线)的距离值,但是最重要的是网格本身之间的距离。

为了让事情更加容易被理解举个例子来说明,假如你要每1000px设置一个网格线并且对齐细分,这意味着每1000px(水平和垂直)你将设置一条线,这样就会形成一个正方形,里面有四个小正方形,每个小正方形的宽度和高度为250px(1000/4=250px)。但是这对我们像素完美有什么意义呢?

小提示:为了能看到网格,我们需要通过视图-显示网格进行设置。

假设你有一个1000×1000px的画板,你创建一个250×250的正方形,最重要的是你有对齐到网格(视图-对齐网格)。如果你用键盘去移动小正方形,你将看到它会按照你给的方向去走,它将一个网格一个网格的移动。

但是这只是一个理想的情形,在画板上面的是一个完整的正方形,宽度和高度和网格匹配,最重要的是蓝色的正方形刚好是一个网格的大小,如果将它们设置成完全不同的情况呢?它们肯定是不行的,你把网格设置成不一样的情形。

有一个通用的解决方案是,用一个复杂的网格,在首选项参考线和网格的设置中次分割线设置成1,我保证如果你用了这个设置,你画板上面的每个对象将对齐到像素。

三、了解对齐网格的功能

在AI中最重要和最有用的工具就是对齐网格的功能,当你在像素预览模式中该选项也是可用的,你根据网格对齐和对齐网格是不一样的。

你使用它可用视图-对齐网格(Shift+Ctrl+”),它可以指挥任何新的对象到它的固定锚点到最近的网格像素交互点。例如,如果你不用这个操作时,无论何时你向四周移动对象时,它将自己定位在一个正方形的像素内,这正是它不应该的,但是,如果你不小心移动周围的对象时,你已经注意到它是不会正确对齐的。然而选择对象,激活对齐网格功能,然后前进后退,它就会迅速对齐到网格了。

四、神奇的像素预览

像素预览对于制作完美像素的设计是非常重要的,你可以通过视图-像素预览找到它(Alt+Ctrl+Y),一旦你打开它,你可以放大你的作品去查看它是否正确对齐了,我强烈推荐你使用它。

五、测量工具

正如我在步骤二中指出的一样,创建一个对象的尺寸也必须是整数的值,如果有小数会使得对象不会对齐到像素,这样就会让你的设计看起来模糊不清了。

如果你不小心输入了一个带小数的值,大多数情况下你是可以调整它的,例如我创建了一个60×60.68px的小正方形。

你可以看到这个底部边缘是没有对齐到网格的,第一步我们要做的是,禁用链接宽度和高度比这个功能,把高度改成整数值60,然后用键盘上下移动对象把它移到原处。

另一个例子,如果你开始创建对象的尺寸采用了偶数(如2,4,6),那么其他对象也尽量采用偶数;如果以奇数(如1,3,5)尺寸开始,其余对象也尽量采用奇数。为啥?试想当你创建了一个20x40px(偶数)的矩形,然后又创建一个5x20px(奇数)的矩形,而这时候你想要他们居中对齐,就会出现以下半像素的情况。

六、处理从非像素对齐文档

还有一个最大的问题,使用不同的文件时,你会发现许多无像素方案的设计,有一个解决方案,复制这些对象到你的工作画板(译者注:你根据此文设定好尺寸,网格对齐的文档)中,用Ctrl+A选择所有的对象,在变换面板中勾选对齐到像素网格。

PS

  1. ctrl+k设置下参考线里面默认网格的间隔是毫米,换成像素。
  2. 主菜单“视图>显示>网格“来显示或隐藏,快捷键为Ctrl+’。
  3. 完成了如上设置,最后确保”主菜单>视图>对齐”及“对齐到>网格“两个选项已勾选,“对齐到>网格“选项在打开显示网格的情况下才可编辑。
  4. 像素对齐网格设置完成,以后在非100%视图下绘制常规图形,只要打开网格辅助,就不会出现模糊情况。
  5. 像素对齐网格在PS 中还是存在一定的局限性,受到图形形状的约束,当使用线条工具、多边形工具、自定义形状工具绘制一些带有倾斜边缘或非直角的图形时,还是无法保证所有角点和边缘对齐网格。当然这里的模糊更多的是防锯齿效果,可以利用网格手动调整。
  6. 如果遇到怎么看都好像对不齐的样子,重新Ctrl+K,在网格线间隔那里重新设为1.0(单位不变),即可解决

我要分享

huhu

作者: huhu

胡胡是我的女票,她以前有个网站,运行两年多后停掉了。她写了一百多篇设计心得,现在全部导入到了我的网站,如此,她称之为“强强联手”。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据