Illustration, Webdev
Jun13
'2009

Pixel Perfection in Adobe Illustrator

Adobe Illustrator CS4

Pixel Perfection in Web/UI Designs 像素级设计

Webpages and software UI are all things that meet your eyes on the computer screen. The minimal unit of the screen is the pixel, just like everything is consisted of atoms. All best designers provide pixel-perfect designs, which means they have already polished all details they could (there is no half-pixel any more). Pixels are small, but they are not invisible. On the screen there are 1-pixel-thin lines everywhere: many of the link underlines, cursor in the text fields, outlines of boxes, etc. You may call them “hairy” but they are useful.

像素级设计在网页和软件界面中是一个经常见到的名词,因为它们是显示在屏幕上的。电脑屏幕上最小的元素就是像素,正如物体的最小元素是原子一样。顶尖的设计师们都会提供像素级的设计,也就是说:他们已经尽力把所有细节都美化了(再没有半个像素了)。像素虽然小,但并非看不见。比如文本框里面的光标,链接上面的下划线,还有很多边框都是1像素。纤细,但是同时有用。

Vector Tool not for Pixels? 矢量vs像素

Adobe Illustrator is a widely loved tool for vector-based designs. Vectors are good for printing because they can be scaled up to any size without losing quality. But they also don’t (or hardly) have a minimal unit so you can scaled down everything without losing information. There is a problem for the screen: it displays things in pixels, but the positions of the vectors are not necessarily constrained by pixels. A line can be 0.5px (for pixel) wide, and a box can have a position at (100.1px, 100.2px). The half-pixels are displayed as semi-transparent, blurry pixels on screen. The freedom is a headache when you really meant to design pixel by pixel.

Adobe Illustrator是一个矢量绘图软件,也可以说是最好的一个。矢量图片非常适合印刷,因为它能保证无论如何放大都能保持清晰。无限制地可放大同时也就意味着无限制地可缩小,这对于屏幕来说就是一个问题。在屏幕上最小就是1像素,如果一个图形比1像素还小,那屏幕上只好用一个半透明的像素去显示它。在矢量软件中,我们是可以画一条半像素宽的线,或者让一个框的位置出现在非整数的像素上的。这样固然很自由,但是如果你真的需要逐像素去设计的时候,就会发现很难保证单个像素显示的效果。

For most designers, they choose to use Photoshop or Fireworks to work in pixels. But every tool has its own advantages, illustrator is still a very sweet 2D graphic designing tool for its numerous shape editing tools, multiple appearance options. And best of all, it’s nondestructive editing and the selection tools are more powerful and convenient than photoshop. — Think if there are 100 shapes!

所以设计者们一般会借助Photoshop和Fireworks去实现像素级的设计。但是每种工具都有它的优点,Illustrator的形状编辑等功能,还有对形状设定多种”外观”以实现复杂的效果都是其它软件不具备的。Illustrator作为矢量软件,在编辑过程中一切是无损进行的,同时还有着最好用的节点和形状选择工具 (如果有100个路径的话,PS尚能饭否?)。

Yes Illustrator Loves Pixels. AI也喜欢像素

You are not alone if you want to use Illustrator to design your website or software icons. Even Illustrator provides built-in templates for Web now. But there are other tweaks which I will show you in this post. So let’s get started.

首先要相信希望用Illustrator做网页和图标设计的人大有其人,现在Illustrator已经自带了Web的一些模板,但是要实现真正的像素级效果,还是需要进行一定的调整。我们现在开始:

Begin with a new document like this, make sure the options are set to pixel and RGB.
首先新建一个文档,注意设定为像素和RGB模式的地方。

New Document

And make some changes in the preferences in Illustrator:
然后还要对Illustrator的软件设置进行修改:

Half Pixel Nudge
This will make your keyboard nudges objects half a pixel each time, we’ll see how this works.
这个选项让每次方向键移动半个像素,接下来会说明为什么。

Pixel Settings
Make sure everything we talk in Illustrator is in pixels.
同时把所有的单位都改成像素。

grids
Same here, even you will not use this most of the time.
栅格的设定也改一下,虽然一般时候用不到。

But we’re not done, you need to turn off the “Snap” options in “View” menu. They will snap your 0.5px nudges to 1px and thus make our tweaks useless.
最后还要把视图菜单中的对齐选项关掉,否则的话我们每次半像素的移动就自动被对齐成一像素,之前的设定就没意义了。

View Menu

Draw Your Shapes at 100% 放大到100%再画

Now you have a pixel to pixel connection from the screen to the document. When you draw something on the screen, the positions and lengths are in whole numbers (integers). See in your “Transform” panel.

现在我们已经把屏幕和文档建立了一一对应的关系,这时要保证你的放大比例在100%,这样所有的长度和位置都会是整数了。在“变换”面板中可以看到这些信息。

Sharpen Our Vectors! 让我们的图形变清晰

It still doesn’t mean nice and sharp pixels, but we are not too far. You’ll still have a god damn blurry line when you draw a 1px line (yes I double checked!).
现在离我们的像素级目标已经不远了,但是你如果画一条1px的线的话,会发现它居然还是虚的!

Fuzzy 1px line

But what if we nudge it 0.5px? (use keyboard)
但是如果我们移它半像素呢?也就是一次方向键

sharpline

It’s nice and sharp now, isn’t it? You may have a think about why it behaves like this, but it does works this simple.
果然它变清晰了,抛却原因,这样确实有效而且简单。

Again, a blurry box out of the box (with integer informations). It has a 1px stroke.
再试一次,一个模糊的1像素矩形,但是所有的信息都是整数像素的。

Blurry Box

So we nudge it in two directions. See! It’s sharp now.
移动两下,它现在马上清晰了。

Sharpbox

Luckily if a box only has fills and no strokes, it’s sharp enough without nudge.
当然如果矩形只有填充的话这个步骤就简单得多,直接画好就行了。

Black Box

Round corner boxes can be sharp enough as demand. I prefer the appearance way because it can always be easily changed.
圆角矩形也能保证它的清晰,我通常喜欢画一个矩形然后加上圆角的效果。

Round Box

Sometimes we need dotted lines (1px by 1px). But you can’t use the “Dashed Line” option in the stroke panel, it simply doesn’t work as promised. So the best way is to use the patten to fake a dotted line.
1像素的虚线也是经常需要用到的,但别指望描边选项里面的虚线功能,你设成1px 1px也会发现它其实还是虚的。最简单的办法是用图案去伪造虚线。

I assume you already how to make this tiny pattern, the black dot is 1px x 1px and the empty box is 2px x 2px.
制作图案的步骤不再多说,黑点是1像素,而图案本身是2像素见方。
Pattern

And the line is indeed a 1px tall box. But it’s not too complex I think.
现在这条虚线实际上是1像素高的矩形,但这并不算什么麻烦的技巧。

Dotted Line

So we have already make things sharp, especially for horizontal and vertical lines (they are often blurry by default). And there is one thing more: the text. But it’s quite easy for us now. We just use the “Rasterize” function from “Effects” menu. It works well for most latin fonts just like the old windows times if you turn off the anti-aliasing. The texts are still editable because the rasterize is only a nondestructive effect.
现在我们已经知道如何保证像素级精确的直线效果,还有一个需要考虑的事情就是文字。但这个设定起来就简单得多,只要有效果菜单中的“像素化”功能针对文字设定就可以,在其中关掉反锯齿的选项。加上这个效果之后,文字还是可以编辑的,但是它们更像是我们熟悉的像素字体了。

rasterize

pixel text
If it looks strange in letter spaces, try to nudge it a bit.
如果文字间距有点奇怪的话,移动一下可能就会正常。

Chinese Font
A very big problem for me before was to find a way to display the bitmap Chinese font in windows. You may need to install a modified “Simsun” from here, and then simply rasterize it.
曾经困扰我的一个问题就是汉字的像素字体如何在AI里面重现,我发现水木上面的这个像素宋体效果很好,其它的设置都一样,美中不足的是粗体还是没法做到。

Now we are ready to make some real things. The blue button is made of two objects, a reflection and a box. I just added multiple appearance for the 1px highlights and shadows. (That’s why I love Illustrator.)
现在可以进行实际的设计了,图中的蓝色按钮有1像素的高光和阴影,我们已经实现了清晰的像素级效果。

Complex

As you expected, the sharpness remains in exported images. Yay!
正如你想象的那样,导出的图片中同样如此清晰。

Test

Good But You’ll Still Use Photoshop? 还是想用Ps

I’d say Photoshop, Illustrator, Fireworks are just tools. A good designer only use them to finish their ideas. I make this tutorial just want to tell those Illustrator lovers, you can make pixel perfect designs in it and this is not compromise. You just export your images and use it directly and expect the sharpness. Hope you find it useful. And thanks for watching!

即使你还是喜欢用Ps也没关系,对于设计师来说软件只是实现想法的工具。我只是想让喜欢用Illustrator的人们知道,用AI做像素级的设计是完全可行的,不需要什么妥协或者转换就能做到。用AI导出来的图片也是直接可用的。

The 0.5px nudge and the preferences things are from this screencast, and I made some additions like the dotted line and the text, etc.

31 Comments

  1. shaunda Mrochek:

    May 7, 2014

    It’s really a great and useful piece of information. I’m glad that
    you just shared this useful info with us. Please stay us informed like this.
    Thanks for sharing.

  2. yacon dr oz:

    December 23, 2013

    All chocolate comes from the seeds or beans of the cacao fruit.
    On the other hand, the ingredients label might be where Shakeology truly shines.
    All of these programs have built respected reputations but understanding each one and finding the one that best fits your lifestyle
    will give you the best opportunity to lose
    and keep it off.

  3. online cash advances:

    November 24, 2013

    I am regular visitor, how are you everybody?This post
    posted at this website is really pleasant.

  4. yacon syrup:

    November 5, 2013

    My partner and I stumbled over here from a different page
    and thought I might as well check things out. I like what I see so i am
    just following you. Look forward to looking at your web page repeatedly.

  5. http://excellentnaturalsleepaid.jigsy.com/:

    August 17, 2013

    naturally like your website but you have to check
    the spelling on several of your posts. Several of them are rife with spelling issues and I in finding it very troublesome to tell the truth then again I will surely come again
    again.

  6. fda approves new sleep drug:

    August 4, 2013

    What’s up, after reading this remarkable post i am also cheerful to share my familiarity here with mates.

  7. locksmith atlanta ga 30331:

    July 27, 2013

    Thank you for sharing your info. I truly appreciate
    your efforts and I will be waiting for your further post
    thank you once again.

  8. frontier cable and internet packages:

    July 6, 2013

    I am truly thankful to the owner of this site who has shared this
    fantastic paragraph at here.

  9. tankstelle-des-wissens.de:

    June 24, 2013

    I’m really loving the theme/design of your blog. Do you ever run into any web browser compatibility issues? A handful of my blog audience have complained about my blog not working correctly in Explorer but looks great in Opera. Do you have any ideas to help fix this issue?

Leave a Comment