Under this pompous title I’d like to answer a question 
that was raised in the blog a long time ago. 
The quiestion is well formulated and describes the typical problem faced by many icon designers.
在这个华而不实的标题里，但是我非常乐意解答这个已经提出很久的问题。
问题是：关于图标设计师经常面对和提出的一些经典的问题
Here it is: 
这是一些网友的留言
“Hello, I also do icons, and I have a question: how to reduce an icon competently? 
I do large ones clear and beautiful, but small ones are dirty and horrible, I would like very 
much to rectify the situation”
我也经常设计一些图标，但是问题是，怎样更好的缩小图标？我做大一点的会非常清晰和漂亮，
但是缩小后就会变的难以辨认，我非常想纠正这个情况。
In the process of reducing icons there are at least two points. One of the them is 
concerned with specific characteristics of human perception, and the other has to do with 
screen resolution.
在缩小图标的过程中你必须注意两点，他们之中哪一些是人们关注的细节的刻画，
还有关于屏幕分辨率的一些刻画。

Let’s begin with the first one.
从第一个开始
On a large icon (or other image), we subconsciously sort the sizes of objects, 
picking out large, medium and small ones. On a smaller icon, we can divide more roughly: large (in relation to the icon size) and small objects. Bur a tiny icon has tiny part only, 
and if a designer does not make special efforts to help users to classify them, 
then all will be mixed into one dense spot.
在一些大的图标或者图像上，我们下意识的缩减物体的尺寸，采集出大，中，小的尺寸。
我们可以进行粗略的划分：大的（接近于图标的尺寸）小的（针对较小的图标有一些较小的部分）如
果一个设计师没有作特别的处理来帮助用户将其分类，那么所有的元素将会集结在一起，难以辨认。



Take an abstract image. On a large version we can point out three large objects
 (a circle, a triangle and a square), then several medium-sized objects and some 
small items.Simply reducing the image, we receive only mess.
拿一个抽象的图像来说明，在大的版本我们能够看到三个大的对象（圆形，三角形，正方形），
一些中间大小对象和小的细节。简单的缩小图像，我们只得到一个烂摊子。



To fix the situation, we should clear up all the trivial details from the picture and 
leave only basic shapes (large and medium objects).
在固定的情况，我们应该清楚图片所有琐碎的细节，留下仅仅基本的形状。
We got rid of the small stuff, and now we are faced with a second challenge: 
to restore the subordination between large and medium-sized objects on the icon. 
Indeed, lowering the icon size, we reduce differences between them, therefore we have 
to close that gap with intentional hypertrophying
我们摆脱了小东西，我们所面对的第二个挑战：去恢复图标中，大中型物体的隶属关系。
事实上，降低图标的大小，我们能够减少彼此间的分歧，所以我们要弥合这一差距中的瑕疵.
On a large picture we clearly see the relationship and subordination of elements: 
three green circles are connected with blue stripes.
Those accents disapper when reducing the image, 
so we’re starting to see just a triangle.
在这张大的图像上，我们清楚的看到主次之间的关系：三个圆圈和蓝色条纹相连。
当缩小图片那些的重点便消失了。取而代之，我们只能看到一个三角形。



It’s possible to restore the initial hierarchy by stressing the difference between 
elements: enlarge the circles and reduce the stripes.
通过强调元素间的不同，是能够恢复最初的层次的：放大圆形并且缩小条纹



So, remember: get rid of trivia and emphasize subordination.
所以，请记住：摆脱细节，并强调主次关系
Now let’s turn to the computer screen feature that is a basic reason of the most difficult 
works in the creation of a small icon. Pixel grid.Why does the clear and beautiful icon 
becomes turbid and stupid? Because pixel grid, taking the icon tucked into its fold, 
eliminates all the details, you’ve drawn with such enthusiasm. 
So after that the icon is just like a “Crimes weekly” TV show.
现在我们转去电脑屏幕上的内容，在小图标创作中，最基本也是最困难的工作。象素网格。
为什么清晰漂亮的图标变得很模糊，因为象素网格把图标藏了起来，消除了所有的细节，
你应该得出这样的热情，所以那个图标更像是“犯罪周刊”的电视节目.



What do you do?
You’ve already done one thing: you got rid of small details which would sink into oblivion 
anyway. You’ve already done another one: emphasized basic parts, so now they take more pixel space for themselves.
Third: note that you are not just painting a picture now, but actually building it from the square blocks. Obviously, you’ll have no problems with horizontal and vertical lines as 
well as square shapes. But everything else won’t be so easy to draw and the farther you
 go from the strict geometry, the more difficult you’ll find your difficult difficulties. That’s 
why it’s recommended to turn the icon in such way it would present itself in a frontal 
projection. And surely you need to adjust all the object edges to the pixel grid. 
Now I’ll demonstrate everything said above on a living example:
A handsome owl named Hedwig agreed to assist me.
你都做了什么？你作了第一件事：你摆脱了会以任何方式渐渐遗忘的小的细节。
第二件事：强调基本的部分，所以他们拿到他们自己更多的象素空间。
第三件事：明白你现在不仅仅在画一副图片，实际上你在四方格子里创建了它，
很显然，你能够应付横向和纵向的线段以及四方型，但是，不是每件事情都能构如你所愿去画和在
严格的几何学中走得更远，更困难的事情还在后面。
那是为什么它被建议以这种方式去转换图标，它会以正面立影展现。
而且你当然需要调整所有的物体边缘去象素网格。
现在上面的例子会证明我所说的一切。那个俊俏的猫头鹰（Hedwig）同意帮助我.



So, we have a large snowy owl in 128×128 size and a following task: reduce it into 
first 48×48 and then into 16×16. What does our common sense advises? “Transform it 
proportionally to the minimization of the required values” – it whispers to those who 
prefer complex and clever phrases. “Hit Ctrl-T and reduce with Shift key pressed”, 
— it says to those who’s friendly with Photoshop. «Seize and squeeze!»
— it declaims for those who likes it simple and fast.

Well, let’s follow it’s suggestions and see the result.
这样看来。我们有一个128×128象素大小的雪地猫头鹰和一个任务：缩小尺寸为48×48象素
和16×16象素大小。我们常识性的建议是什么？按比例转换需要的尺寸的值。他低声诉说那些复杂而且
聪明的短语。点击Ctrl-T同时按住Shift键缩小，它倾诉那些和Photoshop有着深情厚意的人们
«抓住和挤压»他高声说那些喜欢它简单和便捷的人。

好的，让我们跟随它的暗示看看结果怎样。



Despite the fact that the 48×48 version seems to be acceptable, 
there is a certain room for improvement.
尽管，事实上48象素大小版本能够被接受。但是，仍旧有一个提升的空间。



Sweet.
But the current 16×16 version reminds more of owl droppings than of an owl itself, 
therefore draw it from a scratch.
但是通常16象素版本比原本猫头鹰需要更多的修饰，所以，先画一个草稿。



This is the result which allows us look into people’s eyes rather shamelessly
这个结果，让我们恬不知耻地看到人们的眼睛.



Fly Hedwig, fly! Fly into the seventh part of Harry Potter,
 I won’t tell what’s there waiting for you, you’ll learn it when time comes!
飞hedwig ，飞！ 飞行到哈利波特第七部，我不会告诉有东西在等着你，时间一到，你便会学习到它。

Article From: 本站原创
Quote Adress: http://www.qingdaostudio.com/simono/trackback.asp?tbID=41
Tags: