Как создавать красивые и четкие надписи для веб?

[vasiliyb]

Пытаюсь нарисовать меню, есть объект для подражания, но никак не могу добиться такой же безупречной (на мой взгляд), четкой холености
В прикрепленном файле верхняя надпись "О КОМПАНИИ" - вожделенный оригинал, нижняя - моя, во вкладках те настройки, с которыми я получил свой вариант надписи, наиболее близкий к чужой, но все равно гораздо более "мыльный"

 

[faortto]

Ответ: Как создавать красивые и четкие надписи для веб?

режим сглаживания сейчас стоит smooth, надо поменять

 

[vasiliyb]

Ответ: Как создавать красивые и четкие надписи для веб?

Пробовал все, ближе всего Smooth и Crisp..
пробовал None с последующими Blur'ами поочередно на растре и наоборот Sharp на растеризованных алиасингах шрифта..
всё вроде бы пробовал, потому и пишу..
Прямые линии у букв КМПН у оригинала чёткие, у меня же в любых испробованных комбинациях на них муар

 

[Шут]

Ответ: Как создавать красивые и четкие надписи для веб?

Так там, на сайте, наверняка была текстовая ссылка, а не графическая, наиболее
близко будет именно None. Безо всяких последующих блюров и шарпов!

 

[vasiliyb]

Ответ: Как создавать красивые и четкие надписи для веб?

Уважаемые, я что, не отличу текстовую ссылку?!! обижаете! Во вложенном к теме фотовопросе я подражаю прямо на живом скриншоте, без предварительных пересохранений с потерями, и именно поэтому выложил вопрос знатокам в psd а не в жпэге, пусть даже и 100%.
Источник в принципе такой - ниссан.ру, смотреть на верхнее меню.

 

[Mallard]

Ответ: Как создавать красивые и четкие надписи для веб?

Имхо - без ручной дорисовки попиксельно - никак. Сначала шрифтом с режимом сглаживания Sharp, ну а потом уже дорисовка. И там еще осталось над чем поработать - первая О, А, ну и тд.

 

[vasiliyb]

Ответ: Как создавать красивые и четкие надписи для веб?

Согласен, так вообще идеально, но все же подозреваю, что вариант с сайта не обрабатывался ручками, и я хотел бы иметь возможность редактировать такие надписи не прибегая к каждовременной дорисовке-чистке.. Так сазать найти золотую середину.

 

[Mallard]

Ответ: Как создавать красивые и четкие надписи для веб?

и я хотел бы иметь возможность редактировать такие надписи не прибегая к каждовременной дорисовке-чистке.

Как вариант - использование пиксельных шрифтов. Например:
http://www.pixelportal.ru/download/index.php

 

[rdes02]

Ответ: Как создавать красивые и четкие надписи для веб?

Ну шрифт там не пиксельный...
Как вариант немного править ручками или что-то хитрое типа набить в большом разрешении, уменьшать без антиалисинга. да от шрифта зависит, емнип за параметр привязки к пикселам отвечает понятие хинтинг в шрифте.

 

[Mallard]

Ответ: Как создавать красивые и четкие надписи для веб?

Ну шрифт там не пиксельный...
или что-то хитрое типа набить в большом разрешении

Я знаю, что в оригинале не пиксельный. А хитрое - ну к примеру вот скриншот с Иллюстратора можно.

 

[vasiliyb]

Ответ: Как создавать красивые и четкие надписи для веб?

Millard, скриншот с иллюстратора не проходной, буква М прямо скажем зубастая. И мелкий шрифт читается ассоциативным путем уже в голове.
Т.е. наиболее вероятной версии КАК написали на оригинале (выше упомянутом сайте) так и нет? и что, если таким шрифтом писать нужно и меню и заголовки?
Пирогов-то могу понять, что скорее всего прибег бы к хэнд мэйду, а здесь мне почему-то представляется более универсальная технология..

 

[Zest]

Ответ: Как создавать красивые и четкие надписи для веб?

Тема - баян, ибо уже было. Ответ прост: ФШ не умеет делать хинтинг, как это элементарно делает Винда-хренда если включить режим сглаживания шрифтов в ней. Только не по технологии ClearType, а обычный.

Теоретически создав документ равный экранному разрешению и выбрав режим System Layout вы и должны получить отображение шрифта таким, каким он отображается в других программах. Но почему-то теория не прокатывает, ФШ тупо переключает режим сглаживания на None.

На первой иллюстрации пример как сглаживает Фотошоп - вверху, и как FrontPage - внизу. 11 pt.

На второй - что мне удалось добиться от Верданы: самая верхняя строчка. Автору: вам нужно хинтовать вручную - на таком размере это обычная работа кернингом (Alt + Left (Right) Arrow). Но все равно не получается так, как в примере. Режим сглаживания - Sharp и к текстовому слою применена слоевая маска с альфа-каналом загруженным с самого текстового слоя. В psd файле все увидите.

Не уверен что именно это решение, но получается похоже.

 

[MetroidZ]

Ответ: Как создавать красивые и четкие надписи для веб?

Попробовал в Photoshop и Corel Photo-Paint.
Если смотреть при масштабе 100%, разницу не особо видно.
И все таки впечатление такое, что кое что в оригинале подтерто стиралкой (серые контуры у буквы "Н" например).
В прикрепленном рисунке больше всего нравится верхний вариант.

 

[Zest]

Ответ: Как создавать красивые и четкие надписи для веб?

В Кореле интерполяция на порядок лучше Адобской - медицинский факт. Хинтует ли РР со сглаживанием - этого я не проверял, но с качеством сглаживания экспериментировал. Где-то тут есть тема.

 

[vasiliyb]

Ответ: Как создавать красивые и четкие надписи для веб?

В принципе если "хинтовать" (для меня пока нецензурщина) с буквы с прямыми (HTMUPL и т.д.), быстро добиваюсь четких надписей, меня устроило. Спасибо!!!

 

[Zest]

Ответ: Как создавать красивые и четкие надписи для веб?

Хинтование - привязка к сетке пикселов (grid-fitting) векторной формы. Я писал для ФШ скрипт, который двигал узлы векорной кривой в координаты ближайшего пиксельного узла. Фактически это и был хинтинг. Например вы нарисовали скругленный прямоугольник используя опцию Snap To Pixels но потребовалось его увеличить в составе других слоев. После чего ребра шейпа перестали совпадать с пиксельной сеткой и стали расплывчатыми. Запускаем скрипт и все становится на место. Но т.к. программа тупая, то бывало двигала узлы не в тот межпиксельный узел - приходилось редактировать вручную.

Инструкции по хинтованию должны быть созданы человеков и вложены в виде таблиц в файл шрифта. Тогда все будет зашибись, если, конечно, программа-рендер их будет понимать. ФШ - не понимает. Вот такая чудесная у него текстовая машина (Text Engine). В качестве иллюстрации статья с Вики http://en.wikipedia.org/wiki/Font_hinting