Комментарии 74
Отличная статья. Спасибо.
-9
Только я не вижу разницы между рисунками? (наверное мне стоит выспаться).
-8
Стоит :) Разница есть, конечно же.
+6
разница есть, но нельзя сказать однозначно что в лучшую сторону. К примеру, солнце(или что это) в левом варианте более круглое чем в правом. Разница ощущается в основном в цветах, правый «вытянут», но растр или пиксель здесь совсем не причём. Если говорить про «GROUP» то не нужно путать четкость с излишним контрастом. Во общем не так всё это делается, не так)) Хотя конечно момент крайне важный.
+5
Немного не понял вас на счёт слова GROUP.
-1
Скорее всего, имеется ввиду то, что такие вещи, как иконки 16*16, рисуют больше руками, чем сжатую картинку обрабатывают. По крайней мере, с иконками точно такой подход не прокатит, их создают всегда с нуля (ну или почти с нуля).
-2
Нет, danger4k имел ввиду, что в контрастных шрифтах (это шрифты, где основные штрихи толще второстепенных + шрифты с обратным контрастом) не получится использовать доводку, как я здесь использовал, потому что иначе они потеряют контраст или будут выглядеть нечитабельно.
-1
Солнце мне в левом варианте кажется чуть более мягким, ему это совсем не мешает. А про GROUP я, как и автор поста, не понял :)
0
я имел ввиду что излишний контраст на очень тонком шрифте начинает теряться. Чуть более толстое начертание при растеризации получает градиентное скругление и смотрится некрасиво, однако, если очень мелкий шрифт с тонким начертанием после подобного шарпа получает толщину линий в 1-2 пикселя, то в итоге может это и эстетичнее, но точно не удобочитаемее, а это, согласитесь, очень даже важно.
+1
Хм… =) Попробуйте увидеть разницу на большом рисунке и затем перенесите её на маленький.
-1
Внимательно приглядитесь ко второй букве «К» в слове «КАКТУС» — на правом рисунке границы четкие, а на левом рисунке слева серая размытая граница.
Буква «Т» еще более показательна, там вовсе границы размыта на левом рисунке.
Буква «Т» еще более показательна, там вовсе границы размыта на левом рисунке.
+1
Растеризованый в ручную намного четче. Особенно заметно на маленьких буквах в слове group
0
Ну, если Вам принципиально видеть разницу, то купите монитор на хорошей матрице (PVA ИЛИ IPS), на нём всё точно разглядите.
0
ага, и посоветовать всем посетителям сайта тоже новые мониторы купить :) насмешили.
Разницу и невооруженным взглядом видно и вариант что слева встречается часто в нете и думаешь то ли монитор рябит то ли мастер хабр не читает :)))
Разницу и невооруженным взглядом видно и вариант что слева встречается часто в нете и думаешь то ли монитор рябит то ли мастер хабр не читает :)))
0
Это действительно полезно знать!
пс: Ockonal, без обид, но ты неправ, разница очевидна.
пс: Ockonal, без обид, но ты неправ, разница очевидна.
+1
А мне левый больше нравится. Да, Т размыта — это плохо. Но знаковая часть меньше пикселизована и с более приятными цветовыми переходами.
+14
нужен оптимально средний между ними. первый излишне размыт, второй излишне перешарплен. солнцу немного мягкости надо придать справа, теряется круг. у кактуса излишне четкий контур тени.
+2
Вы хотели сказать излишне чёток?
-4
немного
+1
Я бы от себя сказал, что он излишне «зубаст». Режет глаз, особенно у солнца.
Если Вы посмотрите на линии в шрифте, то заметите, что «полупрозрачные» пиксели расположены не равномерно. Они разные по тону и прилеплены на буквы кое-как. Где то их просто нет. Из-за этого у букв рваные края. Присмотритесь к «У» или «С» например.
Если Вы посмотрите на линии в шрифте, то заметите, что «полупрозрачные» пиксели расположены не равномерно. Они разные по тону и прилеплены на буквы кое-как. Где то их просто нет. Из-за этого у букв рваные края. Присмотритесь к «У» или «С» например.
0
«расположены не равномерно» это я неудачно выразился. Попробую иначе:) Вот взять например букву «А»
В оригинале кажется, что ее «ноги» слегка вогнуты внутрь. А у Вас скорее наоборот-наружу. Вероятно из- за нескольких одинаковых пар пикселей. Вертикальная палочка у «Т» выглядит тоньше чем у «К». Возможно по тому, что это разные фигуры, и мало их просто сделать одинаковыми по количеству пикселей.
В оригинале кажется, что ее «ноги» слегка вогнуты внутрь. А у Вас скорее наоборот-наружу. Вероятно из- за нескольких одинаковых пар пикселей. Вертикальная палочка у «Т» выглядит тоньше чем у «К». Возможно по тому, что это разные фигуры, и мало их просто сделать одинаковыми по количеству пикселей.
0
Для полезной статьи пример несколько неудачен. Рисунок слева лучше всем, кроме надписи. А так справа и основание кактуса подкошено, и тени неестественные, и солнце квадратное вместо лучистого.
+5
А что вы подразумеваете под неестественными тенями?
-2
Кактус стал казаться плоским с окантовкой. Как палочка от мороженого. Особенно в верхней части заметно. Они и слева не идеальны, но увеличение четкости еще больше подчеркнуло. Впрочем, это я придираюсь.
+2
кстати да. сам рисунок лучше выглядит на «компьютерном» варианте, а текст — в «ручном».
из-за шарпа стали видны квадратные пиксели на рисунке.
из-за шарпа стали видны квадратные пиксели на рисунке.
+2
Избавиться от многих проблем при автоматической растеризации может помочь небольшая коррекция масштаба и сдвиг относительно системы координат на 0.5px (это проблема многих растеризаторов).
И только после этого шарпить «плохие» места.
И только после этого шарпить «плохие» места.
+1
Да, это действительно проблема. Я так ни разу и не смог добиться результата, который бы меня полностью удовлетворил. Наверное, это ощущения от сравнения оригинального вектора и получившегося растра.
0
Я предпочитаю в иллюстраторе уменьшить логотип до нужного размера, включить View > Pixel Preview и потом используя Direct Selection Tool и потом стрелочками на клавиатуре доводим элементы до аккуратного вида и попадания в пиксельную сетку (главное не забыть в настройках выставить Keyboard Increment где-нибудь на 0.25 px). Ну и потом экспорт и в фотошоп.
+4
Ну и потом очень не хватает на хабре редактирования комментариев. :–)
+2
А кактус и мячик так зазубривать не стоило.
0
Спасибо. Полезная информация.
-1
Перенести все старания в фотошоп помогает использование smart object.
С недавнего времени мне стало гораздо удобнее копипастить векторные объекты непосредственно на место назначения и там уже подгонять под сетку)
С недавнего времени мне стало гораздо удобнее копипастить векторные объекты непосредственно на место назначения и там уже подгонять под сетку)
0
Эти две картинки две крайности. Текст стал лучше, кактус стал лучше. Песок стал хуже, солнце стало гораздо хуже. Итого 2:2. Обе картинки похожи на автоматическую растеризацию с разным качестом антиалиасинга. Так что «ручной здесь» не сильно пахнет… Точнее все плюсы ручного как раз и не раскрыты. Я в этом смысле.
А нужно было обрабатывать каждый объект вручную, а не применять все действия ко всем объекам (вы говорите что отдельно меняли только слово group).
А нужно было обрабатывать каждый объект вручную, а не применять все действия ко всем объекам (вы говорите что отдельно меняли только слово group).
0
Я бы совместил «Это сделал компьютер» и «Это сделал человек» в одно целое.
В человеческой части хороша текстовая часть, а в компьютерной визуал выглядит более мягко. Шарп сделал его обглоданным. Солнышко вот вообще покусанное вышло.
В человеческой части хороша текстовая часть, а в компьютерной визуал выглядит более мягко. Шарп сделал его обглоданным. Солнышко вот вообще покусанное вышло.
0
левый больше нравится
0
что левый, что правый уг. и разницы, которая делает какой-то из них лучше нет.
-2
Ожидал, что увижу в заметке хотя бы упоминание о пиксельной сетке и примеры попадания/непопадания в неё вектором. Как-то так, например:
И уж чего не ожидал — упоминание Фотошопа. Векторные изображения лучше в векторном редакторе рисовать.
И уж чего не ожидал — упоминание Фотошопа. Векторные изображения лучше в векторном редакторе рисовать.
+6
На счёт упоминания о фотошопе; советую перечитать текст статьи.
-2
Если вы намекаете на то предложение, где говорится о переносе векторного логотипа в макет, то у меня мнение нисколько не меняется. Все мои макеты хранятся в векторном формате, при необходимости любая часть макета экспортируется в растр без промежуточных копирований в другие программы. Но если у вас макеты растровые, то логичным было бы вставлять в них уже доведенный до ума логотип в растровой форме, а не выполнять часть работы в векторном редакторе, а часть в растровом.
-1
Я не понял к чему вы это вообще. Я рисую макеты в векторе (Illustrator преимущественно), а Photoshop упомянут тут, как средство обработки растра. При чём здесь доведение? При чём здесь промежуточные программы? Извините, не понял я вас, не понял. Наверное это у меня плохо с головой.
-1
А минус в карму зачем? :) Не поняли так не поняли, я могу ещё раз объяснить. В том-то и дело, что вы изначально векторное изображение доводите до приемлемого вида уже в растровой форме, а можно (и правильнее) это сделать выгнув вектор таким образом, чтоб он чётче попадал в пиксельную сетку. Тогда при экспорте в растр будет выдаваться чистенькая и аккуратненькая картинка, которую не нужно будет править в Фотошопе.
-1
Поддерживаю.
Пиксельная сетка — это очень важно для логотипов, где есть чётко выраженные вертикали-горизонтали. Стоит об этом упомянуть и попробовать привести к растру более традиционный монохромный логотип.
Пиксельная сетка — это очень важно для логотипов, где есть чётко выраженные вертикали-горизонтали. Стоит об этом упомянуть и попробовать привести к растру более традиционный монохромный логотип.
0
"— ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°;"
Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.
Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.
0
Что-то типа того. Тут перечислены основые инструменты. Настройки — по ситуации ;)
Можно и получше, но тут чисто для примера.
+2
Спасибо. Вопрос интересен еще как метод создания хороших маркеров.
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
+1
— Pencil Tool (для точек и прозрачности)
— Eraser Tool (для стирания и прозрачности)
— Rechtagular Margue Tool (для быстрой доводки линий)
— Eraser Tool (для стирания и прозрачности)
— Rechtagular Margue Tool (для быстрой доводки линий)
0
— Rechtagular Margue Tool
мне кажется что проще удерживать шифт при использовании пенцила)
хотя тут на любителя)
мне кажется что проще удерживать шифт при использовании пенцила)
хотя тут на любителя)
0
Соль в следующем
0
Извини, а что тут изображено ?:) я не совсем понимаю ) я вижу что зелёно-желтый градиент не куц, как соседний — это факт. Вижу что на блок (предположительно шириной в 1px) натянут трансформ. А мораль?)
Я не вижу пока Rechtagular Margue Tool :) вижу трансформ)
Я не вижу пока Rechtagular Margue Tool :) вижу трансформ)
0
Твоя задача убрать «мыло» на стыке двух градиентов. Попробуй сначала сделать это карандашем с зажатым шифтом, как ты предлагал, а потом подумай, как это можно сделать с помощью рехтэйгл тула.
-2
ну это конечно клёво, ты молодец и всё такое, но только ты не забывай что ответил это в контексте вопроса звучащего следующим образом:
«ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°; Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.»
подскажи пожалуйста где ты использовал данный суперприём совершая обряд «ручного антиалиасинга для штрихов шрифта под наклоном больше или меньше 45°;» ;)
«ручной антиалиасинг для штрихов шрифта под наклоном больше или меньше 45°; Подскажите, пожалуйста, какими инструментами и с какими настройками это делается.»
подскажи пожалуйста где ты использовал данный суперприём совершая обряд «ручного антиалиасинга для штрихов шрифта под наклоном больше или меньше 45°;» ;)
+1
Так если ты действительно так хорошо следил за контекстом, почему не понял, что трансформ был применен на область, выделенную рехтейглом? Почему сразу не предупредил, что я забылся и отвечаю вне контекста и что такие выделения не годятся для редактирования того, о чём спрашивал Valery35?
-2
Оффтоп:
rectangle, rectangular и marquee пишутся и читаются несколько иначе ;-)
Rechtagular Margue Tool
выделенную рехтейглом
rectangle, rectangular и marquee пишутся и читаются несколько иначе ;-)
+1
Почему сразу не предупредил — думал мы говорим о одних и тех же вещах :) Не бери в голову, я действительно хорошо следил за контекстом, поскольку твоя статья меня заинтересовала. Спасибо тебе за труд) просто немного не поняли друг-друга.
+1
Я бы еще посоветовал не увлекаться особо ручным альясингом, а ограничиться ручным кернингом в фотошопе для мелких шрифтов (ALT+стрелки во время редактирования строки) и простого сдвига вверх и вниз при Free-transform крупного шрифта для более точного попадания в пиксельную сетку. К векторным объектам теже советы — точное выравнивание по пиксельной сетке.
+1
вот контур солнца трогать не надо было)
а написано всё правильно
а написано всё правильно
+1
НЛО прилетело и опубликовало эту надпись здесь
Объясните мне кто-нибудь зачем вообще нужен анти-альясинг надписи высотой в 5 пх
+4
Красивый шрифт, которым набрано «КАКТУС», превратили в то, что любой шрифтовик назовет говном.
-4
пример совсем неудачен и не показателен. изначально ненужный антиалиасинг исправляется, но портится изображение из-за излишнего шарпа.
0
НЛО прилетело и опубликовало эту надпись здесь
Наличие векторного варианта логотипа абсолютно не говорит о том, что его можно легко трансформировать под любые нужны. В Вашем случае данный логотип следует заново отрисовать под заданный размер 85х90px, а не шарпить.
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Растеризация логотипов