Графика на Вашей странице
Четкие графические шрифты на страничке

Название (и тему) этой статьи я не выдумал, а взял из раздела конференций Клуба. Причем тема эта не нова и поднимается у нас уже не первый раз. О чем же речь?

О том, что при использовании на веб-странице мелкого текста, данного в виде картинки (что приходится делать достаточно часто), мы получаем или корявые, или слишком размытые, но в любом случае--неудобочитаемые буквы.

Обычно подготовка такого текста-картинки проводится в PhotoShop или подобном графическом пакете (например, его интернет-ориентированном аналоге Adobe ImageReady). Поэтому все сказанное далее справедливо для работы в подобных программах.

Проблема в том, что при экранном разрешении (72 или 96 dpi) мелкий кегль означает растеризацию буквы в совсем небольшое число точек. Если эта растеризация будет проведена без полутонового сглаживания (в терминологии PhotoShop--"anti-aliasing"), буквы неизбежно получатся неровными, "корявыми". Если же сглаживание включено (это делается "чек-боксом" в диалоге инструмента TYPE TOOL), то механизм растеризации сильно "размывает" буквы, формально компенсируя неровности, но еще более уменьшая удобочитаемость. Для того, чтобы минимизировать этот нежелательный эффект я могу посоветовать следующие маленькте хитрости.

1. Используйте шрифты формата PostScript, а не TrueType. О разнице в механизме описания, и следовательно--растеризации, этих форматов, я кратко писал в другой своей статье. По моему опыту, Type1 (т.е. PostScript) шрифты работают в данном случае куда лучше.

2. По возможности, подберите шрифт с простым и геометричным рисунком букв. Лучше всего--какой-нибудь гротеск. В нем меньше мелких элементов и кривых, т.е. "поводов" для корявости. Кстати, старайтесь не использовать курсивы. Их наклонные штрихи отрастеризуются хуже всего.

3. Повторите накладывание шрифта на фон несколько раз. Вы увидите, что каждый раз результат растеризации оказывается разным. Дело в том, что курсор инструмента находится в момент нажатия кнопки мыши (т.е. момент начала операции) в разных точках, а именно эти его положения берутся за начало координат при расчете точечного представления буквы.

Рис.1 Вот, что получилось, когда я шесть раз подряд вывел в Photoshop одно и то же слово. Тот же шрифт, тот же кегль, те же цвета, с теми же установками. (в натуральную величину и увеличенное в 4 раза)

4. Если вам надо сделать несколько коротких надписей (например--названия разделов узла), выведите все их одной операцией, а затем разрежьте и разнесите в нужные места. По причине, указанной в предыдущем пункте, буквы в них будут одинаковыми.

5. Если насыщеность получившегося текста на ваш взгляд недостаточна, наложите сверху такой же текст, того же цвета. Причем, поскольку вам врядли удастся сразу "попасть" в тот же вариант растеризации, проще скопировать первую надпись и сделать "PASTE".

6. Получив изображение нужного текста попробуйте уменьшить количество градаций цвета. Во-первых, это уменьшит размер картинки, а во-вторых, уберет избыточное сглаживание.
Самый простой (и мой любимый способ) уменьшения градаций--это воспользоваться командой MAP>POSTERIZE. Если вы поставите количество градаций (LEVELS) равным 6, это даст вам от 6 до 11 градаций для каждой пары цветов, а все полученные цвета будут совпадать с "безопасной", 216-цветной веб-палитрой.

Рис.2 Та же надпись, после MAP>POSTERIZE>LEVELS=6

7. В тех же целях можно воспользоваться встроенными возможностями упоминавшегося ImageReady, который предлагает выбрать качество растеризации (т.е. то же количество градаций) при выводе текста.

8. И последнее. Самая качественная работа--ручная. Не поленитесь и подправьте полученный результат ручками, по точечкам. О-о-очень помогает!

Рис.3 Сравните: слева--самый удачный из верхних вариантов надписи, справа--он же, но доработанный руками.

[Оглавление]