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

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

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

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

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



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

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


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

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



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

подскажи пожалуйста где ты использовал данный суперприём совершая обряд «ручного антиалиасинга для штрихов шрифта под наклоном больше или меньше 45°;» ;)
Так если ты действительно так хорошо следил за контекстом, почему не понял, что трансформ был применен на область, выделенную рехтейглом? Почему сразу не предупредил, что я забылся и отвечаю вне контекста и что такие выделения не годятся для редактирования того, о чём спрашивал Valery35?
Почему сразу не предупредил — думал мы говорим о одних и тех же вещах :) Не бери в голову, я действительно хорошо следил за контекстом, поскольку твоя статья меня заинтересовала. Спасибо тебе за труд) просто немного не поняли друг-друга.
Я бы еще посоветовал не увлекаться особо ручным альясингом, а ограничиться ручным кернингом в фотошопе для мелких шрифтов (ALT+стрелки во время редактирования строки) и простого сдвига вверх и вниз при Free-transform крупного шрифта для более точного попадания в пиксельную сетку. К векторным объектам теже советы — точное выравнивание по пиксельной сетке.
вот контур солнца трогать не надо было)
а написано всё правильно
UFO landed and left these words here
Красивый шрифт, которым набрано «КАКТУС», превратили в то, что любой шрифтовик назовет говном.
Этот шрифт сделан мной. Я не думаю, что после растеризации шрифт превратился в говно.
Посмотрите на буквы А и С — видно насколько вы исковеркали собственный же шрифт.

Если вам не кажется очевидным ухудшение этих символов — я прошу прощения и умываю руки.
пример совсем неудачен и не показателен. изначально ненужный антиалиасинг исправляется, но портится изображение из-за излишнего шарпа.
UFO landed and left these words here
Наличие векторного варианта логотипа абсолютно не говорит о том, что его можно легко трансформировать под любые нужны. В Вашем случае данный логотип следует заново отрисовать под заданный размер 85х90px, а не шарпить.
Only those users with full accounts are able to leave comments. Log in, please.