Pull to refresh

Comments 74

Отличная статья. Спасибо.
Только я не вижу разницы между рисунками? (наверное мне стоит выспаться).
Стоит :) Разница есть, конечно же.
разница есть, но нельзя сказать однозначно что в лучшую сторону. К примеру, солнце(или что это) в левом варианте более круглое чем в правом. Разница ощущается в основном в цветах, правый «вытянут», но растр или пиксель здесь совсем не причём. Если говорить про «GROUP» то не нужно путать четкость с излишним контрастом. Во общем не так всё это делается, не так)) Хотя конечно момент крайне важный.
Немного не понял вас на счёт слова 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?
Оффтоп:
Rechtagular Margue Tool

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

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

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

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