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

    Да, это пост про растеризацию логотипов :-)
    Коротко и по делу о растеризации логотипов.

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

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

    Сразу хотелось бы заметить, что 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. Если гладить, то как?

    Спасибо за внимание. Позже дополню этот пост дополнительными примерами.
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 74

      –9
      Отличная статья. Спасибо.
        –8
        Только я не вижу разницы между рисунками? (наверное мне стоит выспаться).
          +6
          Стоит :) Разница есть, конечно же.
            +5
            разница есть, но нельзя сказать однозначно что в лучшую сторону. К примеру, солнце(или что это) в левом варианте более круглое чем в правом. Разница ощущается в основном в цветах, правый «вытянут», но растр или пиксель здесь совсем не причём. Если говорить про «GROUP» то не нужно путать четкость с излишним контрастом. Во общем не так всё это делается, не так)) Хотя конечно момент крайне важный.
              –1
              Немного не понял вас на счёт слова GROUP.
                –2
                Скорее всего, имеется ввиду то, что такие вещи, как иконки 16*16, рисуют больше руками, чем сжатую картинку обрабатывают. По крайней мере, с иконками точно такой подход не прокатит, их создают всегда с нуля (ну или почти с нуля).
                  –1
                  Нет, danger4k имел ввиду, что в контрастных шрифтах (это шрифты, где основные штрихи толще второстепенных + шрифты с обратным контрастом) не получится использовать доводку, как я здесь использовал, потому что иначе они потеряют контраст или будут выглядеть нечитабельно.
                0
                Солнце мне в левом варианте кажется чуть более мягким, ему это совсем не мешает. А про GROUP я, как и автор поста, не понял :)
                  +1
                  я имел ввиду что излишний контраст на очень тонком шрифте начинает теряться. Чуть более толстое начертание при растеризации получает градиентное скругление и смотрится некрасиво, однако, если очень мелкий шрифт с тонким начертанием после подобного шарпа получает толщину линий в 1-2 пикселя, то в итоге может это и эстетичнее, но точно не удобочитаемее, а это, согласитесь, очень даже важно.
                    –1
                    Вот как раз я позже собирался приложить примеры о том, как решать вопрос с контрастными шрифтами. Там действительно не всегда стоит делать просто «контрастную» доводку.
              –1
              Хм… =) Попробуйте увидеть разницу на большом рисунке и затем перенесите её на маленький.
                +1
                Внимательно приглядитесь ко второй букве «К» в слове «КАКТУС» — на правом рисунке границы четкие, а на левом рисунке слева серая размытая граница.
                Буква «Т» еще более показательна, там вовсе границы размыта на левом рисунке.
                  0
                  Растеризованый в ручную намного четче. Особенно заметно на маленьких буквах в слове group
                    0
                    Ну, если Вам принципиально видеть разницу, то купите монитор на хорошей матрице (PVA ИЛИ IPS), на нём всё точно разглядите.
                      0
                      ага, и посоветовать всем посетителям сайта тоже новые мониторы купить :) насмешили.
                      Разницу и невооруженным взглядом видно и вариант что слева встречается часто в нете и думаешь то ли монитор рябит то ли мастер хабр не читает :)))
                        0
                        Камрад, я же сказал, если принципиально видеть разницу.
                        А посетителям не принципиально, просто немалая часть увидит косяк и с самого хренового монитора, просто потому что так совпала чувствительность монитора и допущеный косяк — такое часто встречается…
                    +1
                    Это действительно полезно знать!

                    пс: Ockonal, без обид, но ты неправ, разница очевидна.
                      +14
                      А мне левый больше нравится. Да, Т размыта — это плохо. Но знаковая часть меньше пикселизована и с более приятными цветовыми переходами.
                        0
                        «Ну это нормально» (с)
                        Дело вкуса.
                        +2
                        нужен оптимально средний между ними. первый излишне размыт, второй излишне перешарплен. солнцу немного мягкости надо придать справа, теряется круг. у кактуса излишне четкий контур тени.
                          –4
                          Вы хотели сказать излишне чёток?
                            +1
                            немного
                              0
                              Я бы от себя сказал, что он излишне «зубаст». Режет глаз, особенно у солнца.
                              Если Вы посмотрите на линии в шрифте, то заметите, что «полупрозрачные» пиксели расположены не равномерно. Они разные по тону и прилеплены на буквы кое-как. Где то их просто нет. Из-за этого у букв рваные края. Присмотритесь к «У» или «С» например.
                                0
                                «расположены не равномерно» это я неудачно выразился. Попробую иначе:) Вот взять например букву «А»
                                В оригинале кажется, что ее «ноги» слегка вогнуты внутрь. А у Вас скорее наоборот-наружу. Вероятно из- за нескольких одинаковых пар пикселей. Вертикальная палочка у «Т» выглядит тоньше чем у «К». Возможно по тому, что это разные фигуры, и мало их просто сделать одинаковыми по количеству пикселей.
                            +5
                            Для полезной статьи пример несколько неудачен. Рисунок слева лучше всем, кроме надписи. А так справа и основание кактуса подкошено, и тени неестественные, и солнце квадратное вместо лучистого.
                              –2
                              А что вы подразумеваете под неестественными тенями?
                                +2
                                Кактус стал казаться плоским с окантовкой. Как палочка от мороженого. Особенно в верхней части заметно. Они и слева не идеальны, но увеличение четкости еще больше подчеркнуло. Впрочем, это я придираюсь.
                                  0
                                  Да нет, всё правильно.
                                  Просто для этой статьи я решил сделать как можно более заметную разницу.
                                +2
                                кстати да. сам рисунок лучше выглядит на «компьютерном» варианте, а текст — в «ручном».
                                из-за шарпа стали видны квадратные пиксели на рисунке.
                                +1
                                Избавиться от многих проблем при автоматической растеризации может помочь небольшая коррекция масштаба и сдвиг относительно системы координат на 0.5px (это проблема многих растеризаторов).

                                И только после этого шарпить «плохие» места.
                                  –1
                                  Добавлю информацию об этом в обновлении.
                                  0
                                  Да, это действительно проблема. Я так ни разу и не смог добиться результата, который бы меня полностью удовлетворил. Наверное, это ощущения от сравнения оригинального вектора и получившегося растра.

                                    +4
                                    Я предпочитаю в иллюстраторе уменьшить логотип до нужного размера, включить View > Pixel Preview и потом используя Direct Selection Tool и потом стрелочками на клавиатуре доводим элементы до аккуратного вида и попадания в пиксельную сетку (главное не забыть в настройках выставить Keyboard Increment где-нибудь на 0.25 px). Ну и потом экспорт и в фотошоп.
                                      +2
                                      Ну и потом очень не хватает на хабре редактирования комментариев. :–)
                                        0
                                        А кактус и мячик так зазубривать не стоило.
                                          –1
                                          Спасибо. Полезная информация.
                                            0
                                            Перенести все старания в фотошоп помогает использование smart object.
                                            С недавнего времени мне стало гораздо удобнее копипастить векторные объекты непосредственно на место назначения и там уже подгонять под сетку)
                                            0
                                            Эти две картинки две крайности. Текст стал лучше, кактус стал лучше. Песок стал хуже, солнце стало гораздо хуже. Итого 2:2. Обе картинки похожи на автоматическую растеризацию с разным качестом антиалиасинга. Так что «ручной здесь» не сильно пахнет… Точнее все плюсы ручного как раз и не раскрыты. Я в этом смысле.

                                            А нужно было обрабатывать каждый объект вручную, а не применять все действия ко всем объекам (вы говорите что отдельно меняли только слово group).
                                              0
                                              Я бы совместил «Это сделал компьютер» и «Это сделал человек» в одно целое.
                                              В человеческой части хороша текстовая часть, а в компьютерной визуал выглядит более мягко. Шарп сделал его обглоданным. Солнышко вот вообще покусанное вышло.
                                                0
                                                Это я не умничаю и эстетствую тут, если что, а говорю к тому, что правильные вещи несёт в массы товарищ. Многие вообще пренебрегают какой-либо обработкой чего-либо после (и во время) ресайза, что в корне неправильно. Но и в крайности впадать не нужно, шарп явно лишний.
                                                0
                                                левый больше нравится
                                                  –2
                                                  что левый, что правый уг. и разницы, которая делает какой-то из них лучше нет.
                                                    +6
                                                    Ожидал, что увижу в заметке хотя бы упоминание о пиксельной сетке и примеры попадания/непопадания в неё вектором. Как-то так, например:



                                                    И уж чего не ожидал — упоминание Фотошопа. Векторные изображения лучше в векторном редакторе рисовать.
                                                      –2
                                                      На счёт упоминания о фотошопе; советую перечитать текст статьи.
                                                        –1
                                                        Если вы намекаете на то предложение, где говорится о переносе векторного логотипа в макет, то у меня мнение нисколько не меняется. Все мои макеты хранятся в векторном формате, при необходимости любая часть макета экспортируется в растр без промежуточных копирований в другие программы. Но если у вас макеты растровые, то логичным было бы вставлять в них уже доведенный до ума логотип в растровой форме, а не выполнять часть работы в векторном редакторе, а часть в растровом.
                                                          –1
                                                          Я не понял к чему вы это вообще. Я рисую макеты в векторе (Illustrator преимущественно), а Photoshop упомянут тут, как средство обработки растра. При чём здесь доведение? При чём здесь промежуточные программы? Извините, не понял я вас, не понял. Наверное это у меня плохо с головой.
                                                            –1
                                                            А минус в карму зачем? :) Не поняли так не поняли, я могу ещё раз объяснить. В том-то и дело, что вы изначально векторное изображение доводите до приемлемого вида уже в растровой форме, а можно (и правильнее) это сделать выгнув вектор таким образом, чтоб он чётче попадал в пиксельную сетку. Тогда при экспорте в растр будет выдаваться чистенькая и аккуратненькая картинка, которую не нужно будет править в Фотошопе.
                                                              –2
                                                              Я вам минус в карму не ставил.
                                                                –1
                                                                Значит какой-то злобный редиска пытался устроить провокацию. :)
                                                        0
                                                        Поддерживаю.

                                                        Пиксельная сетка — это очень важно для логотипов, где есть чётко выраженные вертикали-горизонтали. Стоит об этом упомянуть и попробовать привести к растру более традиционный монохромный логотип.
                                                        0
                                                        "— ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°;"
                                                        Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.

                                                          +2

                                                          Что-то типа того. Тут перечислены основые инструменты. Настройки — по ситуации ;)
                                                          Можно и получше, но тут чисто для примера.
                                                          0
                                                          — Pencil Tool (для точек и прозрачности)
                                                          — Eraser Tool (для стирания и прозрачности)
                                                          — Rechtagular Margue Tool (для быстрой доводки линий)
                                                            0
                                                            — Rechtagular Margue Tool
                                                            мне кажется что проще удерживать шифт при использовании пенцила)
                                                            хотя тут на любителя)
                                                              0
                                                              Соль в следующем
                                                                0
                                                                Извини, а что тут изображено ?:) я не совсем понимаю ) я вижу что зелёно-желтый градиент не куц, как соседний — это факт. Вижу что на блок (предположительно шириной в 1px) натянут трансформ. А мораль?)

                                                                Я не вижу пока Rechtagular Margue Tool :) вижу трансформ)



                                                                  –2
                                                                  Твоя задача убрать «мыло» на стыке двух градиентов. Попробуй сначала сделать это карандашем с зажатым шифтом, как ты предлагал, а потом подумай, как это можно сделать с помощью рехтэйгл тула.
                                                                    +1
                                                                    ну это конечно клёво, ты молодец и всё такое, но только ты не забывай что ответил это в контексте вопроса звучащего следующим образом:
                                                                    «ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°; Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.»

                                                                    подскажи пожалуйста где ты использовал данный суперприём совершая обряд «ручного антиалиасинга для штрихов шрифта под наклоном больше или меньше 45°;» ;)
                                                                      –2
                                                                      Так если ты действительно так хорошо следил за контекстом, почему не понял, что трансформ был применен на область, выделенную рехтейглом? Почему сразу не предупредил, что я забылся и отвечаю вне контекста и что такие выделения не годятся для редактирования того, о чём спрашивал Valery35?
                                                                        +1
                                                                        Оффтоп:
                                                                        Rechtagular Margue Tool

                                                                        выделенную рехтейглом

                                                                        rectangle, rectangular и marquee пишутся и читаются несколько иначе ;-)
                                                                          +1
                                                                          Почему сразу не предупредил — думал мы говорим о одних и тех же вещах :) Не бери в голову, я действительно хорошо следил за контекстом, поскольку твоя статья меня заинтересовала. Спасибо тебе за труд) просто немного не поняли друг-друга.
                                                            +1
                                                            Я бы еще посоветовал не увлекаться особо ручным альясингом, а ограничиться ручным кернингом в фотошопе для мелких шрифтов (ALT+стрелки во время редактирования строки) и простого сдвига вверх и вниз при Free-transform крупного шрифта для более точного попадания в пиксельную сетку. К векторным объектам теже советы — точное выравнивание по пиксельной сетке.
                                                              +1
                                                              вот контур солнца трогать не надо было)
                                                              а написано всё правильно
                                                                –1
                                                                Да, я излишне обрезал. Уже понял.
                                                              • UFO just landed and posted this here
                                                                  +4
                                                                  Объясните мне кто-нибудь зачем вообще нужен анти-альясинг надписи высотой в 5 пх

                                                                    –4
                                                                    Красивый шрифт, которым набрано «КАКТУС», превратили в то, что любой шрифтовик назовет говном.
                                                                      +1
                                                                      Этот шрифт сделан мной. Я не думаю, что после растеризации шрифт превратился в говно.
                                                                        0
                                                                        Посмотрите на буквы А и С — видно насколько вы исковеркали собственный же шрифт.

                                                                        Если вам не кажется очевидным ухудшение этих символов — я прошу прощения и умываю руки.
                                                                      0
                                                                      пример совсем неудачен и не показателен. изначально ненужный антиалиасинг исправляется, но портится изображение из-за излишнего шарпа.
                                                                      • UFO just landed and posted this here
                                                                          0
                                                                          Наличие векторного варианта логотипа абсолютно не говорит о том, что его можно легко трансформировать под любые нужны. В Вашем случае данный логотип следует заново отрисовать под заданный размер 85х90px, а не шарпить.

                                                                          Only users with full accounts can post comments. Log in, please.