Мелочь пузатая

В статье с этим пафосным и официозным названием я хочу ответить на вопрос, который задали в блоге давным-давно, и на который, наконец, дождался своего часа. Вопрос этот поставлен очень удачно и описывает типичную проблему, с которой сталкиваются многие иконкописцы. Вот он:

«Добрый день, я вот тоже занимаюсь иконками, и у меня возник вопрос — как грамотно уменьшать иконку? Большие у меня получаются яркие и красивые, а маленькие грязные и страшные, мне бы очень хотелось поправить положение дел.»

В процессе уменьшения иконок есть, как минимум два момента. Первый из них связан с особенностями человеческого восприятия, а второй — с возможностями экранного разрешения.

Начнем с первого.

На крупной иконке, как и на любом другом изображении адекватных размеров, мы подсознательно сортируем объекты по размеру, выделяя из них крупные, средние и маленькие. На иконке размером поскромнее мы сможем пользоваться более грубым делением – крупные (относительно иконки) и мелкие. А на малюсенькой иконке все объекты малюсенькие, и если дизайнер не предпримет специальных усилий, чтобы помочь глазу пользователя их классифицировать, то все смешается в одну плотную кучку под девизом «кто это тут напачкал?».

Возьмем абстрактное изображение. На крупном варианте мы различаем три крупных объекта (круг, треугольник, квадрат) , несколько объектов средней величины и некоторое количество мелочевки.

Просто уменьшив это изображение до размеров мелочевки, мы получаем маловразумительную кашу.

Чтобы исправить положение, на маленькой картинке необходимо оставить лишь основные составляющие изображения (крупные, и, при необходимости, средние объекты), а мелкими деталями пренебречь, если они не являются критическими для всего изображения.

От мелочи мы избавились, теперь перед нами стоит вторая задача: восстановить субординацию между крупными и средними объектами на иконке. Ведь при уменьшении изображения, уменьшается и разница в размерах между ними, следовательно мы должны эту разницу искусственно гипертрофировать.


На крупной картинке видна четкая взаимосвязь и подчинение элементов: три зеленых круга соединены голубыми перемычками.
При уменьшении изображения эти отличия скрадываются и мы начинаем видеть обыкновенный треугольник.

Вернуть первоначальную иерархию можно, подчеркнув разницу между элементами —укрупним кружки и снимем акценты с перемычек.

Итак, запомнили: избавляемся от ненужной мелочевки и подчеркиваем субординацию.

Теперь, обратимся к особенности экранного изображения, на совести которой лежит основная масса трудов в нелегком деле создания маленькой иконки. Пиксельная сетка.

Почему яркая, красивая и понятная иконка становится мутной и бестолковой? Потому что пиксельная сетка, жадно принимая иконку в свое лоно, с хрустом и причмокиванием пожирает все любовно вырисованные вами детали, после чего результат достоин показа в телепередаче «Дежурный патруль».

Что же делать?

Ну, первое мы уже сделали — избавились от мелочи, которая все равно канула бы в небытие, загрязнив при этом окружающую среду. Второе сделали тоже — увеличили основные детали, так что теперь они отъедят себе побольше пиксельного жизненного пространства.

Третье: примите к сведению, что теперь вы не просто рисуете свое изображение, а фактически строите его из квадратных кирпичиков. Понятное дело, что при помощи них вам легко дадутся горизонтальные и вертикальные линии и прямоугольные формы, а все остальное — с трудом. Причем чем дальше от строгой геометрии, тем труднее будут трудные труды. Поэтому есть резон развернуть иконку таким образом, чтобы она предстала зрителю во фронтальной проекции. И, разумеется, необходимо соотнести границы объектов с границами пикселей.

А теперь я продемонстрирую все вышесказанное на живом примере.

Ассистировать в этом деле мне будет симпатичная сова по имени Hedwig, с которой в седьмом Гарри Поттере стало не скажу что, а то вы меня ногами запинаете за спойлеры.

Итак, у нас есть большая белая сова размером 128×128 точек, а задача стоит так: уменьшить ее сперва до размера 48×48, а потом и до 16×16. Что подсказывает нам здравый, но неискушенный смысл? «Трансформируй ее пропорционально в сторону минимизации до требуемых величин», — шепчет он у тех, кто предпочитает сложные и умные предложения. «Жми контрл-тэ и уменьшай с шифтом», — сообщает он тем, кто дружит с фотошопом. «Ты лови ее, лови, да дави ее, дави!» — самозабвенно декламирует внутренний голос тем, кто любит попроще, но чтобы было бодренько как-то.

Что ж, сделаем, как он просит, и посмотрим, что из этого получится.

И, несмотря на то, что версия 48×48 кажется относительно сносной, все равно, начинаем кропотливо править Хедвигу.

Ну вот и славненько.

Что касается версии 16х16, то в текущем варианте она напоминает не саму сову, а, скорее, продукты ее бодрой жизнедеятельности, так что тут рисуем все сначала.

И получаем результат, после которого уже не очень стыдно смотреть людям во влажные очи.

Возможно, вас также заинтересуют следующие работы