I am inspired by the pink panther, you may already noticed.

So close your windows, it’s snowing!

As every knows, Mac OSX 10.6, the Snow Leopard, has been released.
I’ve already using it, although not too much benefits (I’m using first generation MacBook with a 32bit CPU.)
I draw a hunting snow leopard for everyone, it’s already big enough, hope you like it.

This is for the moon walk 40 anniversary. I started from a photograph (of course).

This girl is also from a photograph. You may wonder why I always like to doodle girls. Actually I need to practice with human structure so I find photographs to start with. I will try boys or men, from now on.

A flower, not too much to mention, but I like the yellow brush touches.

Girl with dog, the color was a new attempt for me to express the pink sky in twilight.

Bus window, I was traveling back in a bus from Guangzhou to Shenzhen, it was a 2 hr journey at night. The lights of the road and the cars inspires me and I like this painting very much.

Two girls from photos. I’m not always doodling girls, I draw other things as you seen.

Library of my university. I was sitting in a chair near a lawn. That was a lot of mosquitos. But I like the lit windows.

But last week, one of my friend showed great interest in doodling with the device, I thought I should do better than before. And now I feel more and more addicted to this. Also a small stylus helped a lot. I bought a cheap one for ￥10 (USD1.5), which of course did not work well at first. But after several days of use and rubbing the tip on the nail file, now it works so much better that I can almost doodle as I wish.

It’s the first ever doodle I feel content about: the cute style is easy for me.

And this is the plane out of the T3 building of Peking Airport when I was waiting for flight today. It was a lovely clear day and the plane looks pretty.

The last one is my favorite because I never had a similar painting before. This girl is from a magazine on the airplane. The color was so vivid that I decided to get it doodled as soon as possible.

On July 22th there will be a eclipse which can be seen in China. Hopefully the weather clear and I will see how the moon take place of the sun.

Someone asked me to design a icon for both iPhone and Mac for their task management icon. Although they finally chose a more time-specific icon, but I like this very much.

And another lesson for me is I know how much to charge, and some necessary things for being a freelancer designer.

It’s crazily hot these days in Beijing. I really wish I can bring a cloud so that it can be cooler in the shade. Of course, I wish the girl on the bike could be lighter. The full size is wallpaper ready, if you really like.

I haven’t made a illustration for a long time. It’s definitely not so interesting in designing commercial things (as I’m doing recently). So I draw something different, although it’s nothing special. It’s also good for keeping my skills. Hopefully it’s refreshing in summer.

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模式的地方。

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

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

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

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.
最后还要把视图菜单中的对齐选项关掉，否则的话我们每次半像素的移动就自动被对齐成一像素，之前的设定就没意义了。

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的线的话，会发现它居然还是虚的！

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

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像素矩形，但是所有的信息都是整数像素的。

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

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

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

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像素见方。

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

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.
现在我们已经知道如何保证像素级精确的直线效果，还有一个需要考虑的事情就是文字。但这个设定起来就简单得多，只要有效果菜单中的“像素化”功能针对文字设定就可以，在其中关掉反锯齿的选项。加上这个效果之后，文字还是可以编辑的，但是它们更像是我们熟悉的像素字体了。

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

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像素的高光和阴影，我们已经实现了清晰的像素级效果。

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

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.