Pull to refresh

Растеризация логотипов

Reading time 2 min
Views 8.2K
Да, это пост про растеризацию логотипов :-)
Коротко и по делу о растеризации логотипов.

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

При создании полиграфии достаточно просто скопировать векторный логотип в макет и он выйдет на печать ровным и чётким. При использовании его же в компьютерной графике (например, на сайтах) для того, чтобы добиться четкости, придётся прибегнуть к ручной растеризации.

Сразу хотелось бы заметить, что Vector Markup Language (VML), Scalable Vector Graphics (SVG) и HTML Canvas нас не спасут, потому что для их отображения всё равно будет использоваться антиалиасинг, размывающий границы формы. Может быть в будущем, когда мониторы, подобные IBM T220/221, будут стоять в каждом доме, эти технологии не только станут необходимы, но и их использование будет обеспечивать чёткий результат.

В ручной растеризации (в глобальном смысле) действует следующая закономерность: «Сложность растеризации возрастает с уменьшением размера изображения и его детальности». Это означает, что для ручной растеризации фотографии вполне может хватить фильтра Unsharp mask (Filter → Sharpen) и инструмента Sharpen Tool в Photoshop. Если же необходимо получить чёткий логотип в маленьком размере, то помимо расширения круга инструментов потребуется проявить умение и находчивость.

Практическая часть


В качестве примера я буду использовать свой старый логотип одного агентства. Этот логотип я выбрал не случайно, так как в нём используется шрифт с достаточно нестандартным наклоном основных штрихов.

До ручной растеризации и после

Логотип, находящийся слева, «замылен»: границы знака нечётки, Т совсем расплылась, а G и R в слове «GROUP» превратились в кашку, к тому же, логотип «подавлен цмиком». Давайте его спасать.

Результат вблизи

Что было сделано (Photoshop):
— увеличение чёткости знака и шрифта с помощью инструмента Sharpen Tool;
— «доводка» горизонталей и вертикалей при помощи Pencil Tool;
— ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°;
— ручной антиалиасинг слова «GROUP»;
— увеличена контрастность и яркость.

Наблюдения, которые можно сделать:
— чем сильнее линии рисунка отклонены от угла 45°, тем сложнее растеризация;
— при растеризации маленьких символов нельзя обходиться без видимости антиалиасинга, иначе буквы будут казаться совсем не сглаженными;
— допустимо небольшое изменения графемы букв в пользу чёткости при их растеризации;
— в процессе могут возникнуть цветовые зёрна или перешарп, которые надо убирать.

Важное замечание:
При ручном антиалиасинге необходимо избегать использования «прямого цвета». Это значит, что для получения цвета #808080 нужно будет применить Eraser Tool с Opacity = 50 % на чёрный цвет, нежели просто нарисовать пиксель с помощью Pencil Tool. Во-первых, это правило хорошего тона и профессионализма. Во-вторых, это удобно, если в будущем потребуется изменить фон.

Упоминания о растеризации


10 ошибок в дизайне иконок
Готовим макет для клиента. Часть I. Гладить или нет?
Готовим макет для клиента. Часть II. Если гладить, то как?

Спасибо за внимание. Позже дополню этот пост дополнительными примерами.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+84
Comments 74
Comments Comments 74

Articles