Comments 74
Отличная статья. Спасибо.
Только я не вижу разницы между рисунками? (наверное мне стоит выспаться).
Стоит :) Разница есть, конечно же.
разница есть, но нельзя сказать однозначно что в лучшую сторону. К примеру, солнце(или что это) в левом варианте более круглое чем в правом. Разница ощущается в основном в цветах, правый «вытянут», но растр или пиксель здесь совсем не причём. Если говорить про «GROUP» то не нужно путать четкость с излишним контрастом. Во общем не так всё это делается, не так)) Хотя конечно момент крайне важный.
Немного не понял вас на счёт слова GROUP.
Скорее всего, имеется ввиду то, что такие вещи, как иконки 16*16, рисуют больше руками, чем сжатую картинку обрабатывают. По крайней мере, с иконками точно такой подход не прокатит, их создают всегда с нуля (ну или почти с нуля).
Нет, danger4k имел ввиду, что в контрастных шрифтах (это шрифты, где основные штрихи толще второстепенных + шрифты с обратным контрастом) не получится использовать доводку, как я здесь использовал, потому что иначе они потеряют контраст или будут выглядеть нечитабельно.
Солнце мне в левом варианте кажется чуть более мягким, ему это совсем не мешает. А про GROUP я, как и автор поста, не понял :)
я имел ввиду что излишний контраст на очень тонком шрифте начинает теряться. Чуть более толстое начертание при растеризации получает градиентное скругление и смотрится некрасиво, однако, если очень мелкий шрифт с тонким начертанием после подобного шарпа получает толщину линий в 1-2 пикселя, то в итоге может это и эстетичнее, но точно не удобочитаемее, а это, согласитесь, очень даже важно.
Хм… =) Попробуйте увидеть разницу на большом рисунке и затем перенесите её на маленький.
Внимательно приглядитесь ко второй букве «К» в слове «КАКТУС» — на правом рисунке границы четкие, а на левом рисунке слева серая размытая граница.
Буква «Т» еще более показательна, там вовсе границы размыта на левом рисунке.
Буква «Т» еще более показательна, там вовсе границы размыта на левом рисунке.
Растеризованый в ручную намного четче. Особенно заметно на маленьких буквах в слове group
Ну, если Вам принципиально видеть разницу, то купите монитор на хорошей матрице (PVA ИЛИ IPS), на нём всё точно разглядите.
Это действительно полезно знать!
пс: Ockonal, без обид, но ты неправ, разница очевидна.
пс: Ockonal, без обид, но ты неправ, разница очевидна.
А мне левый больше нравится. Да, Т размыта — это плохо. Но знаковая часть меньше пикселизована и с более приятными цветовыми переходами.
нужен оптимально средний между ними. первый излишне размыт, второй излишне перешарплен. солнцу немного мягкости надо придать справа, теряется круг. у кактуса излишне четкий контур тени.
Вы хотели сказать излишне чёток?
немного
Я бы от себя сказал, что он излишне «зубаст». Режет глаз, особенно у солнца.
Если Вы посмотрите на линии в шрифте, то заметите, что «полупрозрачные» пиксели расположены не равномерно. Они разные по тону и прилеплены на буквы кое-как. Где то их просто нет. Из-за этого у букв рваные края. Присмотритесь к «У» или «С» например.
Если Вы посмотрите на линии в шрифте, то заметите, что «полупрозрачные» пиксели расположены не равномерно. Они разные по тону и прилеплены на буквы кое-как. Где то их просто нет. Из-за этого у букв рваные края. Присмотритесь к «У» или «С» например.
«расположены не равномерно» это я неудачно выразился. Попробую иначе:) Вот взять например букву «А»
В оригинале кажется, что ее «ноги» слегка вогнуты внутрь. А у Вас скорее наоборот-наружу. Вероятно из- за нескольких одинаковых пар пикселей. Вертикальная палочка у «Т» выглядит тоньше чем у «К». Возможно по тому, что это разные фигуры, и мало их просто сделать одинаковыми по количеству пикселей.
В оригинале кажется, что ее «ноги» слегка вогнуты внутрь. А у Вас скорее наоборот-наружу. Вероятно из- за нескольких одинаковых пар пикселей. Вертикальная палочка у «Т» выглядит тоньше чем у «К». Возможно по тому, что это разные фигуры, и мало их просто сделать одинаковыми по количеству пикселей.
Для полезной статьи пример несколько неудачен. Рисунок слева лучше всем, кроме надписи. А так справа и основание кактуса подкошено, и тени неестественные, и солнце квадратное вместо лучистого.
Избавиться от многих проблем при автоматической растеризации может помочь небольшая коррекция масштаба и сдвиг относительно системы координат на 0.5px (это проблема многих растеризаторов).
И только после этого шарпить «плохие» места.
И только после этого шарпить «плохие» места.
Да, это действительно проблема. Я так ни разу и не смог добиться результата, который бы меня полностью удовлетворил. Наверное, это ощущения от сравнения оригинального вектора и получившегося растра.
Я предпочитаю в иллюстраторе уменьшить логотип до нужного размера, включить View > Pixel Preview и потом используя Direct Selection Tool и потом стрелочками на клавиатуре доводим элементы до аккуратного вида и попадания в пиксельную сетку (главное не забыть в настройках выставить Keyboard Increment где-нибудь на 0.25 px). Ну и потом экспорт и в фотошоп.
Ну и потом очень не хватает на хабре редактирования комментариев. :–)
А кактус и мячик так зазубривать не стоило.
Спасибо. Полезная информация.
Перенести все старания в фотошоп помогает использование smart object.
С недавнего времени мне стало гораздо удобнее копипастить векторные объекты непосредственно на место назначения и там уже подгонять под сетку)
С недавнего времени мне стало гораздо удобнее копипастить векторные объекты непосредственно на место назначения и там уже подгонять под сетку)
Эти две картинки две крайности. Текст стал лучше, кактус стал лучше. Песок стал хуже, солнце стало гораздо хуже. Итого 2:2. Обе картинки похожи на автоматическую растеризацию с разным качестом антиалиасинга. Так что «ручной здесь» не сильно пахнет… Точнее все плюсы ручного как раз и не раскрыты. Я в этом смысле.
А нужно было обрабатывать каждый объект вручную, а не применять все действия ко всем объекам (вы говорите что отдельно меняли только слово group).
А нужно было обрабатывать каждый объект вручную, а не применять все действия ко всем объекам (вы говорите что отдельно меняли только слово group).
Я бы совместил «Это сделал компьютер» и «Это сделал человек» в одно целое.
В человеческой части хороша текстовая часть, а в компьютерной визуал выглядит более мягко. Шарп сделал его обглоданным. Солнышко вот вообще покусанное вышло.
В человеческой части хороша текстовая часть, а в компьютерной визуал выглядит более мягко. Шарп сделал его обглоданным. Солнышко вот вообще покусанное вышло.
левый больше нравится
что левый, что правый уг. и разницы, которая делает какой-то из них лучше нет.
Ожидал, что увижу в заметке хотя бы упоминание о пиксельной сетке и примеры попадания/непопадания в неё вектором. Как-то так, например:
И уж чего не ожидал — упоминание Фотошопа. Векторные изображения лучше в векторном редакторе рисовать.
И уж чего не ожидал — упоминание Фотошопа. Векторные изображения лучше в векторном редакторе рисовать.
На счёт упоминания о фотошопе; советую перечитать текст статьи.
Если вы намекаете на то предложение, где говорится о переносе векторного логотипа в макет, то у меня мнение нисколько не меняется. Все мои макеты хранятся в векторном формате, при необходимости любая часть макета экспортируется в растр без промежуточных копирований в другие программы. Но если у вас макеты растровые, то логичным было бы вставлять в них уже доведенный до ума логотип в растровой форме, а не выполнять часть работы в векторном редакторе, а часть в растровом.
Я не понял к чему вы это вообще. Я рисую макеты в векторе (Illustrator преимущественно), а Photoshop упомянут тут, как средство обработки растра. При чём здесь доведение? При чём здесь промежуточные программы? Извините, не понял я вас, не понял. Наверное это у меня плохо с головой.
А минус в карму зачем? :) Не поняли так не поняли, я могу ещё раз объяснить. В том-то и дело, что вы изначально векторное изображение доводите до приемлемого вида уже в растровой форме, а можно (и правильнее) это сделать выгнув вектор таким образом, чтоб он чётче попадал в пиксельную сетку. Тогда при экспорте в растр будет выдаваться чистенькая и аккуратненькая картинка, которую не нужно будет править в Фотошопе.
Поддерживаю.
Пиксельная сетка — это очень важно для логотипов, где есть чётко выраженные вертикали-горизонтали. Стоит об этом упомянуть и попробовать привести к растру более традиционный монохромный логотип.
Пиксельная сетка — это очень важно для логотипов, где есть чётко выраженные вертикали-горизонтали. Стоит об этом упомянуть и попробовать привести к растру более традиционный монохромный логотип.
"— ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°;"
Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.
Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.
Что-то типа того. Тут перечислены основые инструменты. Настройки — по ситуации ;)
Можно и получше, но тут чисто для примера.
Спасибо. Вопрос интересен еще как метод создания хороших маркеров.
code.google.com/intl/ru-RU/apis/maps/articles/customicons.html
gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/examples/markericonoptions-wizard.html
googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-many.html
code.google.com/intl/ru-RU/apis/maps/articles/customicons.html
gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/examples/markericonoptions-wizard.html
googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-many.html
— Pencil Tool (для точек и прозрачности)
— Eraser Tool (для стирания и прозрачности)
— Rechtagular Margue Tool (для быстрой доводки линий)
— Eraser Tool (для стирания и прозрачности)
— Rechtagular Margue Tool (для быстрой доводки линий)
— Rechtagular Margue Tool
мне кажется что проще удерживать шифт при использовании пенцила)
хотя тут на любителя)
мне кажется что проще удерживать шифт при использовании пенцила)
хотя тут на любителя)
Соль в следующем
Извини, а что тут изображено ?:) я не совсем понимаю ) я вижу что зелёно-желтый градиент не куц, как соседний — это факт. Вижу что на блок (предположительно шириной в 1px) натянут трансформ. А мораль?)
Я не вижу пока Rechtagular Margue Tool :) вижу трансформ)
Я не вижу пока Rechtagular Margue Tool :) вижу трансформ)
Твоя задача убрать «мыло» на стыке двух градиентов. Попробуй сначала сделать это карандашем с зажатым шифтом, как ты предлагал, а потом подумай, как это можно сделать с помощью рехтэйгл тула.
ну это конечно клёво, ты молодец и всё такое, но только ты не забывай что ответил это в контексте вопроса звучащего следующим образом:
«ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°; Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.»
подскажи пожалуйста где ты использовал данный суперприём совершая обряд «ручного антиалиасинга для штрихов шрифта под наклоном больше или меньше 45°;» ;)
«ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°; Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.»
подскажи пожалуйста где ты использовал данный суперприём совершая обряд «ручного антиалиасинга для штрихов шрифта под наклоном больше или меньше 45°;» ;)
Так если ты действительно так хорошо следил за контекстом, почему не понял, что трансформ был применен на область, выделенную рехтейглом? Почему сразу не предупредил, что я забылся и отвечаю вне контекста и что такие выделения не годятся для редактирования того, о чём спрашивал Valery35?
Оффтоп:
rectangle, rectangular и marquee пишутся и читаются несколько иначе ;-)
Rechtagular Margue Tool
выделенную рехтейглом
rectangle, rectangular и marquee пишутся и читаются несколько иначе ;-)
Почему сразу не предупредил — думал мы говорим о одних и тех же вещах :) Не бери в голову, я действительно хорошо следил за контекстом, поскольку твоя статья меня заинтересовала. Спасибо тебе за труд) просто немного не поняли друг-друга.
Я бы еще посоветовал не увлекаться особо ручным альясингом, а ограничиться ручным кернингом в фотошопе для мелких шрифтов (ALT+стрелки во время редактирования строки) и простого сдвига вверх и вниз при Free-transform крупного шрифта для более точного попадания в пиксельную сетку. К векторным объектам теже советы — точное выравнивание по пиксельной сетке.
вот контур солнца трогать не надо было)
а написано всё правильно
а написано всё правильно
Объясните мне кто-нибудь зачем вообще нужен анти-альясинг надписи высотой в 5 пх
Красивый шрифт, которым набрано «КАКТУС», превратили в то, что любой шрифтовик назовет говном.
пример совсем неудачен и не показателен. изначально ненужный антиалиасинг исправляется, но портится изображение из-за излишнего шарпа.
Наличие векторного варианта логотипа абсолютно не говорит о том, что его можно легко трансформировать под любые нужны. В Вашем случае данный логотип следует заново отрисовать под заданный размер 85х90px, а не шарпить.
Sign up to leave a comment.
Растеризация логотипов