Under this pompous title I’d like to answer a question that was raised in the blog a long time ago. The question 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. But 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 situatuation, 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. |
|
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.
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.
Despite the fact that the 48×48 version seems to be acceptable, there is a certain room for improvement.
Sweet.
But the current 16×16 version reminds more of owl droppings than of an owl itself, therefore draw it from a scratch.
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!
Насчет седьмой части… Ты ее в оригинале читал или заглотил свежий неофициальный перевод?
p.s. Как всегда здорово.
В оригинале. Я эти переводы не перевариваю.
p.s. Спасибо :)
понравилась 16х16)
Никак не могу прочитать. Все-время при загрузке пишет “Sorry, but this post is not available in English”. И что можно с этим сделать???
Хм, а вы как на такую ссылку вышли (http://ikonka.ru/blog/43/lang/wi)?
Это ошибочная ссылка, если она на сайте, то мне нужно исправить.
Должна
http://ikonka.ru/blog/43/lang/ru - на русском языке
http://ikonka.ru/blog/43/lang/en - на английском
Сообщение поменять надо, да, а то путает :)
Пасиба!
Вопрос. А вот версию 48х48 правили в фотошопе или же в векторе?
В векторе же столько деталей убирать надо (на крыльях в частности).
BTW: Очень нравятся ваши работы.
все в векторе, фотошоп тут не используется совсем.
Но это же вопрос привычки, кому где удобнее.
Сравнение с патрулём J) … я почти плакаль..
Вот не понял можно ли xara троссировщик или (другой) заставить делать несколько плавных кривых чем тысячу отдельных линий? Ни как не получается меньше тысячи объектов. Какой смысл троссировки если всё равно фигурами и дугами аппроксимировать приходится?
да фиг его знает
я трассировкой не пользовался
Хороший урок. Но мне несколько непонятно, зачем на 16х16 лапы сделаны в полтора пикселя, и, как мне кажется, есть стороние почти прозрачные пиксели в раене головы и хвоста. Спасибо за урок, ждем новых. :)
т.е. все было нарисовано в illustratore??? а как по пиксельно выверять то?
Ничего не было нарисовано в Иллюстраторе :)
Все было нарисовано в Xara Xtreme. А по пикселям выверять - ставим однопиксельную сетку, включаем привязку и рисуем.
уф, да тут просто разговор за iilustrator зашел, вот я и подумал что от рисовано все в иллюстраторе. А как выверять по пикселям в других программах..ент понятно :) Иконки конечно супер рисуете и урок хороший, вот только бы на более сложно примере посмотреть как вы создаете иконки (пошагово). :)
Здравствуйте.
У меня есть один вопрос… Скажите пожалуйста, при создании изображений (иконок) маленьких размеров (16×16, 24×24, 32×32) Вы обычно работаете в векторном режиме с последующей конвертацией в растр или сразу в растре? Как “правильно”?
Заранее большое спасибо.
я - в векторном, но с включенной сеткой и с пониманием того, как что будет растеризоваться.