14 ноября 2008 в 23:47

Готовим макет для клиента. Часть I: Гладить или нет?

Готовим макет для клиента. Часть I: Гладить или нет?


Часть I: Гладить или нет?
Часть II: Если гладить, то как?

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

Многие дизайнеры достаточно неплохо освоили фотошоп, и научились использовать разнообразные трюки и хитрости для производства ярких и сочных картинок. Глянец и «карамельность» захватили умы многих. На сегодняшний день принято считать, что такой «вылизанный» техдизайн — наиболее дорогостоящий и модный. Хорошо это или не очень — в данном случае не суть важно.

Важно другое. Верхняя половина с шапкой из нереально синего неба, чрезмерно зелёной травки, блестящих хромированных небоскрёбов и пластмассовых людей с приклеенными улыбками — всё это очень нравится клиентам, и сами дизайнеры пузырятся от гордости, показывая подобные коллажики своим коллегам. А вот нижняя половина… Тут, в большинстве случаев, как раз всё очень и очень уныло.

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


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

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

Что же не так в тех замечательных макетах с красивыми коллажами?

Всё очень просто.

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

Ведь кто есть веб-дизайнер? И что такое веб-сайт? Разве основная его задача — сделать красивую шапку и напихать симпатичных иконок? И все мы ходим на сайты ради них?

Вряд ли кто-либо поспорит с тем, что содержание 90% сайтов это — текст и ещ раз текст. Все мы посещаем большинство страниц, чтобы почитать что-либо, найти нужную информацию. В общем, почерпнуть что-то полезное. И картинки в этом случае служат лишь для улучшения восприятия. Тем более, изображения, из которых складывается интерфейс веб-сайта. Конечно, мы можем обойтись практически и вовсе без текста. Например, рассматривая галереи на фото-сайте. Но это, скорее, исключение из правил.

Дизайнер всегда должен помнить об этом. И в первую очередь обязан уметь оформлять текст в наиболее удобоваримом виде. А уж потом заниматься украшательствами и яркими коллажами.

Рассматривая оформление текста, мы в первую очередь обращаем внимание на то, как он выглядит. И вариантов здесь два: шрифт сглажен или антиалиасинг (термин, обозначающий алгоритм экранного сглаживания) отключён.

В качестве примера для анализа я решил выбрать какой-нибудь простой и нейтральный с точки зрения дизайна сайт, в котором имеются типовые текстовые блоки в двух колонках, с подзаголовками различных уровней, с ссылками и прочими элементами. Как нельзя лучше подошли страницы корпоративного сайта компании Intel. Я наугад выбрал первую попавшуюся страницу, ее мы и рассмотрим.

Предположим, у нас выключено экранное сглаживание шрифтов, как это было в ранних версиях Windows.

Эта страница будет выглядеть следующим образом:

No Anti-aliasing

Вполне неплохо. Хороший строгий корпоративный дизайн. Без особых изысков, но зато и воспринимается хорошо. Немного, правда, странно выглядит текст в шапке, написанный белым цветом — «Технологические новшества каждый день». Он сглажен. А стоящий ниже заголовок «Лидерство в области технологий» — без сглаживания. Любой дизайнер пожмёт плечами: ну и что тут такого, обычное, мол, дело. Шапка — цельное изображение в формате JPEG, где принято текст выводить сглаженными шрифтами. А второй заголовок — текст HTML. Потому они по-разному и выглядят.

Однако, сразу хочется задать вопрос приверженцам несглаживаемого HTML-текста: а не кажется ли вам странным и нелепым такие сочетания? Ведь оба текста набраны одним и тем же шрифтом одного и того же кегля, а выглядят столь разно? А ещё хочется задать такой вопрос: какой текст вам больше нравится? Если белый, то читайте дальше. Если чёрный, то вот вам ещё один вопрос: а зачем же вы тогда все тексты, которые появляются на сайте в виде графических файлов (например, в логотипах), сглаживаете? Отключите тогда антиалиасинг на всех шрифтах, даже в картинках, сотрите вручную сглаживание у логотипа — пусть и его буковки будут зубчатыми, как в этом заголовке чёрного цвета.

Ладно, это, конечно, я утрирую.

Потому что в большинстве современных операционных систем можно отключить сглаживание не на всех кеглях, а только на тех, которые меньше определённого. В MacOS X вообще нельзя полностью отключить антиалиасинг, а возможно лишь не сглаживать шрифты с кеглем меньше 14 пунктов.

Допустим, у нас как раз имеется подобное ограничение: весь текст, попадающий в диапазон 9-13 пунктов — не сглажен. Почему нижний предел 9 пунктов? Потому что ни один существующий шрифт не может растеризоваться на современных мониторах без потери качества, если он меньше данного значения. Попробуйте сверстать текст кеглем в 7 пунктов и попытайтесь его прочитать при отключенном сглаживании.

Итак, наш фрагмент сайта будет выглядеть следующим образом при частичном сглаживании:

image

Ну вот, уже получше. Оба крупных заголовка выглядят одинаково. Зато как-то чересчур жирно стали смотреться подзаголовки в правой колонке. Когда текст был несглаженным, эти строки не бросались так сильно в глаза своей чрезмерной густотой. Странно, не правда ли? Один и тот же шрифт ведёт себя по-разному. Дизайнеры со стажем скажут: так это же пресловутая Verdana! С ней всегда так. В обычных кеглях и особенно в мелких текстах шрифт хорош. А в заголовки его лучше не ставить. Тем более в жирном начертании. Там, дескать, буквы кривые. Но этого момента мы коснёмся чуть позже.

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

Вы увидите примерно следующее:

image

Почему я сказал примерно? Дело в том, что ClearType — субпиксельный рендеринг. И всецело зависит от заданного порядка следования цветовых сигналов (например, RGB или RBG). Попытка сделать скриншот может быть обречена на провал: на мониторах с таким же как у вас порядком чередования цветовых сигналов текст будет выглядеть хорошо, а на других — ощутимо хуже. А в итоге вы получите набор цветастых точек навроде этого (в увеличенном масштабе):

image

Как видно, приведённый выше скриншот — один из вариантов сглаженного в броузере текста.

Но даже он выглядит несоизмеримо лучше текста, который не был сглажен.

Если вам так не кажется, значит я не прав, и вся эта статья вам не нужна. А, быть может, у вас просто старый монитор, который сильно замыливает сглаживание или просто не способен качественно отрисовывать субпиксельный рендеринг. Среди бюджетных офисных и домашних дисплеев это не редкость. Кстати, если у вас Windows XP, попробуйте режим «Обычное сглаживание». Возможно на вашем мониторе текст будет выглядеть лучше именно с этим режимом. Кроме того, можно попробовать различные утилиты тонкой настройки системы («твикеры»). Большинство из них предоставляет возможность зменять порядок чередования цветовых сигналов и степень чёткости в ClearType. Нередко небольшая подстройка позволяет тексту выглядеть лучше.

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

Иными словами, предположим, что вы — прогрессивно мыслящий дизайнер, и в вашем арсенале современная техника, позволяющая вам сосредоточиться на творческом процессе и не задумываться о технических несовершенствах, ошибочно сваливая всю вину на методы отрисовки шрифтов.

А теперь давайте представим себе несколько ситуаций.

Ситуация первая.

Ваш клиент ждёт–не дождётся макета. У него древний монитор, и у него установлена старая версия Windows, в которой напрочь отключено сглаживание шрифтов. Он привык все сайты видеть с обычными зазубренными буквами, и не испытывает никаких по этому поводу проблем. Вы — тоже приверженец несглаживаемых шрифтов. И показываете ему макет, подобный тому фрагменту, что был представлен на первых двух скриншотах. Клиент удовлетворённо кивает, предлагает незначительные поправки, и вы, получив гонорар, выкладываете утверждённую работу в своём портфолио в таком же виде, с несглаженными шрифтами. Посетители, подобные тому клиенту, посещая ваше портфолио, не заметят никаких странностей, и напишут вам ворох лестных дифирамбов.

Ситуация вторая.

Теперь предположим, что вы любите работать со сглаженными шрифтами, и тому же клиенту представляете макет, где на всех текстовых блоках включён антиалиасинг. Тут может быть два варианта. В первом случае клиент «схавает» макет и не задаст никаких вопросов по поводу сглаживания. По личному опыту могу сказать, что чаще всего так и получается. Клиент не жаждет вдаваться в технические особенности, его разум оценивает целостность и взаимосвязь блоков в дизайне, а отнюдь не какие-то там несоответствия в визуальном представлении букв. В редких случаях могут возникнуть претензии. Мол, я на сайтах везде вижу вот такой текст, а вы мне тут показываете в эдаком виде. И здесь можно поступить по-разному. Например, попытаться разъяснить клиенту сущность сглаживания, дать ему почитать эту статью, или просто убедить, что так пока будет лучше, а уже после порезки и вёрстки он увидит всё так, как ему хочется. Кстати, быть может, после ваших доводов клиент призадумается и решит навсегда отказаться от выключения антиалиасинга. Можно также оперативно отключить в макете сглаживание и показать макет с зазубренными буковками, и об этом мы поговорим чуть позже. Ну а если никакие способы не помогают, и уговоры не действуют, а клиент начинает капризничать, а то и вовсе буянить, мой вам совет: бросьте вы его. Всегда найдутся более адекватные люди.

В общем, вы получаете долгожданное утверждение макета со сглаженными шрифтами, и передаёте работу верстальщикам (или начинаете верстать сами). И макет ваш благополучно отправляется в портфолио, блоги или куда-нибудь ещё на всеобщее обозрение. Если к вам заходят поборники зубчатых шрифтов, они увидят просто хороший макет, где сглажены все тексты. Ни у кого из них не возникнет каких-либо вопросов по этому поводу. Ведь ваш скриншот — графический файл, а не HTML-текст, а графика как раз такой и должна быть. К этому все давно уже привыкли. Ну а у тех, кто сам пользуется экранным сглаживанием, и вовсе не будет никаких измышлений на этот счёт: они просто будут любоваться вашим творением. Конечно, при условии, что вы сделали всё грамотно и симпатично.

Ситуация третья.

А теперь представим, что наш клиент имеет в своём распоряжении современные компьютер, монитор и операционную систему (OS X, Vista/Vienna или Linux с последними версиями графических оболочек). И антиалиасинг у него включён на почти все без исключения шрифты. Лишь меньше 4 пунктов текст может не сглаживаться. Это сделано специально для издательских систем, чтобы не замедлять работу программ в случаях, когда страница представлена в сильно уменьшенном виде, и все текстовые блоки получают атрибут greek text.

И если вы тоже придерживаетесь мнения, что зубчатость на буквах — это моветон и позапрошлый век, то у вас с таким клиентом будет полная гармония и взаимопонимание. Почему я так уверен, что именно в этом случае оная гармония наступает? Поговорим и об этом чуть позже.

Ваш макет принимается с незначительными поправками, и отправляется в портфолио. Где так же, как и в предыдущем случае, на него реагируют посетители, среди которых есть как коллеги по цеху, так и потенциальные клиенты.

Ситуация четвёртая.

Ваш клиент — как в предыдущей ситуации. А вот вы категорически против включения антиалиасинга у кеглей меньше 14-18 пунктов. И посылаете ему макет с зазубренными шрифтами.

Угадайте, какова будет реакция клиента?

Хорошо, если он попросит что-то изменить в тексте и доработать так, чтобы всё выглядело в привычном ему виде, то есть со сглаживанием. А ведь может случиться так, что клиент попадётся молодой или недавно познакомившийся с компьютерами. И никогда прежде не видел несглаженного текста. Поверьте, такое тоже может случиться. И с каждым днём шанс встретить такого человека увеличивается. И тогда, увидев непривычно режущий глаз текст, клиент гневно возопит: ЧТО ЭТО ЗА ФИГНЯ?!!! Где гарантия, что он не вспылит (а клиенты нередко — люди горячие и несдержанные) и не откажется от дальнейшего с вами сотрудничества?

Но что, если клиент попался сговорчивый и принял работу в том виде, как вы ему показали. В итоге, как и в первой ситуации, вы выкладываете в портфолио работу в этом самом виде. И на ваш сайт попадает другой потенциальный клиент, привыкший к антиалиасингу. Увидев работу с зазубренными буквами, он, быть может, всё же обратится к вам с предложением. А, может статься, что просто уйдёт с вашего сайта, разочаровавшись.

Помните, что восприятие большинства людей — субъективно и подсознательно. Их глаз не вооружён тем арсеналом, каковой есть у каждого опытного дизайнера. Они могут не до конца осознавать то, почему им не нравятся ваши работы, но, как правило, причины лежат на поверхности. Рассмотренный пример — как раз один из таких случаев.

Совершенно нелепо выглядят случаи, когда в вёрстку намеренно вставляются графические элементы (подписи у логотипов, кнопки или маркеры типа «НОВИНКА» или «beta»), где текст написан без сглаживания. Когда сайт просматривается со включённым антиалиасингом, подобные вкрапления могут неприятно бросаться в глаза, а то и вовсе испортить впечатление от просмотра. За примерами далеко ходить не надо. На упомянутом Free-lance.ru многие кнопки сделаны именно таким образом. Попробуйте включить сглаживание, и вы увидите этих «пришельцев из прошлого».

Следует также учитывать тот факт, что обладателей хороших мониторов и современных операционных систем сейчас уже стало ощутимо больше. Ещё год-другой, и вы вряд ли встретите пользователей, принудительно отключающих сглаживание. Таковы тенденции. Можно их сколь угодно долго оспаривать, вести «холивары» и развивать никчемные диспуты. Только в этом нет никакого смысла. Достаточно лишь проанализировать приведённые ситуации.

Дизайнер, отключающий сглаживание, получает выгоду лишь в первом случае. В последней ситуации он оказывается в явном проигрыше.

Сторонник сглаживания во всех случаях оказывается в выигрыше.

Разве этого довода не достаточно? Впрочем, даже если вы всё равно сами по каким-то причинам просматриваете сайты с отключенным сглаживанием, будет нелишне ознакомиться со второй частью статьи, где мы рассмотрим различные варианты и комбинации сглаживания для успешной демонстрации макета клиенту.

Вы спросите: а зачем вообще всё это надо? Я, мол, никогда не показываю клиенту подобного рода наброски, а сразу верстаю всё, в графическом редакторе лишь дорабатывая графику: логотипы, иконки, коллажи. Если вы и вправду так можете, эта статья — не для вас. А лично я снимаю перед вами шляпу. Я так не могу. И все мои знакомые коллеги-дизайнеры тоже не могут. Перед тем, как начинаются какие-то работы с кодом HTML, клиенту в подавляющем большинстве показывается предварительный набросок. «Скетч», «драфт», «рыба». Как угодно называйте, но без этого — никак.

Так что же делать? Некоторые дизайнеры используют следующий метод: пишут в HTML-редакторе простенький код, где вставляют таблички нужной ширины и с подходящим фоновым цветом, в которые помещают текст предполагаемым шрифтом и цветом. В случае, когда сглаживание выключено, удобно также с помощью «волшебной палочки» вырезать весь текст с однородного фона, чтобы потом было можно легко манипулировать этим блоком, размещённом на отдельном слое. Но зачем же так усложнять себе работу, если всё то же самое можно сделать в графическом редакторе, не прибегая к вёрстке временных блоков. Подавляющее большинство дизайнеров так и поступает. Но чаще всего — с единственным видом сглаживания: none.

Если вы внимательно читали статью, вы уже в курсе, что это — не наш путь.

А о том, как при помощи Photoshop наилучшим образом подготовить макет для демонстрации клиенту, мы поговорим в следующей части.

Не переключайтесь! ;-)

N.B. Я не намерен вступать в какую-либо полемику относительно того, насколько несглаженный текст лучше сглаженного. Я принадлежу к той категории дизайнеров, у которых всё в порядке со зрением, нормальный монитор и современная операционная система, а клиенты в подавляющем своём большинстве также не отстают от прогресса и целиком и полностью одобряют случаи, когда шрифт выглядит именно шрифтом, а не набором пикселей. Если у вас не так, я вам искренне сочувствую. Если так, но вы по какой-то причине не согласны и рвётесь доказать превосходство зазубренных букв — попробуйте ещё раз перечитать вышеизложенное. Наверняка вы что-то недопоняли.

Спасибо за внимание.

P.S. Меня упрекают в избытке «воды» в излагаемом материале. Я просто стараюсь писать для всех аудиторий, не только для специалистов, уже и так хорошо знающих всё вышеизложенное. Вторая часть предположительно будет содержать горадо более практического материала.
+84
3952
161
despoth 18,8

Комментарии (99)

НЛО прилетело и опубликовало эту надпись здесь
–6
fidukoff, #
ай молодец! +1

PS У меня все что больше 17px — сглаживается.
0
zuck, #
прочитано на одном дыхании.
+1
upir, #
Всё таки краткость сестра таланта, а статья хороша :)
0
AmirL, #
Я понял за что я не люблю типографику. Вещь конечно нужная, но лично мне (я Не дизайнер) — вся куча теорий не нужна. Мне нужна практическая часть и выводы — какое сглаживание\несглаживание лучше выглядит. Где какие шрифты использовать и т.п. Я не думаю, что написать это в таком виде нельзя — ведь должны же как то недизайнеры оценивать работу оных?
0
despoth, #
Практическая часть и выводы в процессе как раз. Там будет много любопытного :)
+1
nicothin, #
лично я при прочтении был весьма озадачен отсутствием практической части и выводов.
любая статья без них — как бы хорошо она не была написана 9а эта статья, несомненно, написана хорошо) оставляет впечатление, наиболее четко выразимое фразой «ну и что?».

я не обладаю статистической информацией, однако позвольте вот так, априорно, усомниться в распространенности старых компутеров со старыми осями (то есть, случаев, когда отключено экранное сглаживание).
0
despoth, #
Сильно расстраивает невнимательность читателей. А также то, что зачастую предъявляются одни и те же претензии, ответ на которые и есть в самой статье. Читайте внимательнее, и у вас не будет повода писать подобные комментарии.
0
nicothin, #
вы не правы. я очень внимательно прочитал статью.
и, в отличие от ваших статей о веб-типографике, в избранное ее не занес (судя по вашим же словам, я в том не одинок).

моя критика исключительно конструктивна. я очень рад, что имею возможность читать написанные вами статьи (читай: я рад, что вы их пишите и выкладываете на Хабр). никаких претензий не имею!
как человек, входящий в целевую группу статьи, просто хочу просить: меньше теста, больше смысла. исхожит эта просьба из того, что мне не встречались ни противники сглаживания (на всех размерах), ни клиенты (и вообще пользователи) с ОСями, в которых отключено сглаживание.
поэтому лично для меня вопрос «гладить или нет» просто не стоит, — глажу всегда.
0
despoth, #
Статья гораздо больше, чем было тут помещено. Мне пришлось ее разбить на две части, а потом и вовсе на три. Сейчас подумываю дописать и еще одну часть, уж слишком много хочется рассказать.
Данная часть была сугубо вводной. Или «водной», если уж на то пошло :) Я пишу не только для Хабра. Есть и другие цели, и тут бы хотелось, чтобы было понятно не только профи, но и новичкам. Вам и большинству других, возможно, будет более интересна вторая часть, которую я сейчас дорабатываю и скоро размещу здесь. Она назвается «Если гладить, то как?» :)
0
AmirL, #
М… а я куда не приду все сидят в опере и никакого сглаживания там не видать. Я сам в ослике седьмом сижу, там сглаживание есть — но в других браузерах его у меня нет… Оно как то особо шамански должо включаться? о_О Или это только для висты? Давно мучаюсь этим вопросом…
0
nicothin, #
все в опере?
зная статистику распросраненности этого браузура, можно догадаться, что ходите Вы мало :)
0
AmirL, #
Ну это помимо ослика...6-го )). Так я не пойму — я у всех вижу несглаженный текст… а у всех сглаженый??
0
nicothin, #
а что — 6й осел не сглаживает текст в XP при настройках по умолчанию? :)))
–1
AmirL, #
Ни опера, ни осел 6, ни файрфокс… чего то я непонимаю…
Вот если тулзу ClearType поставить — она пытается весь текст в винде сглаживать. Но в комплекте с виндой тулза не идет, да и не очень она мне нравиться.
0
SlamJam, #
не сглаживает
+6
cassius, #
Статья хорошая и полезная спору нет, но слишком много воды. Да и так вроде понятно уже всему миру, что «гладкий» текст намного приятнее «зубчатого», из-за этого осталось впечатление, что автор «переливает из пустого в порожнее». Я не критикую, просто осталось такое впечатление. Автору можно сказать спасибо только за то, что он столько написал. Это заслуживает уважения.
0
despoth, #
Поясняю. Я пишу «сразу в несколько мест» и с умыслом :)
Специалисты, конечно, в курсе, и им будет более интересно продолжение. А вот что касается новичков, недизайнеров и в особенности — работодателей, нуждающихся в дизайне вся эта «вода» необходима, без неё не будет какого-то целостного понимания сути. Я по ходу поинтересовался у нескольких людей, которые своими вопросами и натолкнули меня на написание этой статьи. Они как раз мало смыслят в дизайне и веб-типографике. Им читать было вполне интересно, и главное — понятно. Значит своей цели я в какой-то степени достиг.
0
MTonly, #
Любая попытка сделать скриншот обречена на провал: «раздробленные» пиксели аппроксимируется к цельным, поэтому вы получите набор цветастых точек навроде этого (в увеличенном масштабе)
По-моему, автор не вполне понимает суть субпиксельного сглаживания. Никаких чудес не происходит, этот вид сглаживания просто эксплуатирует тот факт, что пиксел состоит из субпикселов и соответствующим образом корректирует RGB-код каждого пиксела как цельной сущности. И скриншот (если он, конечно, сохранён в формате без потерь — например, PNG24) отображается в точности как оригинальная картинка на экране.

Разница в отображении может иметь место только за счёт разного порядка следования субпикселей (RGB, BGR) на разных мониторах (что бывает редко), и не более того.
+4
despoth, #
Ну я не специалист, но вот что по этому поводу сообщает нам Википедия:



Масштаб 100 %:
1 Линия без сглаживания
2 Линия, сглаженная традиционным способом
3 Линия отображённая с субпиксельным рендерингом
Масштаб 1500 %:
4 Линия без сглаживания
5 Линия, сглаженная традиционным способом
6 Линия, отображённая с субпиксельным рендерингом
7 Та же линия, как она будет отображена на мониторе

Насколько я понимаю, 6 и 7 визуально всё-таки отличаются, и то, как отображается на моём мониторе немного отличается от того, что я в результате получаю на скриншоте.
+1
MTonly, #
Иллюстрации 6 и 7 различаются только тем, что на первой изображены цельные пикселы (то, что вы увидите, сильно увеличив изображение линии 3 в графическом редакторе), а на второй они для наглядности разделены на составляющие субпикселы. Призовите здравый смысл. ;-)
0
despoth, #
Я просто субъективно вижу разницу между реальным текстом и его скриншотом. Вот и всё. В теории я не лезу, ибо не специалист.
+1
MTonly, #
Немудрено увидеть разницу между исходным изображением и скриншотом, сохранённым в формате с потерями, коим является JPEG. В ином случае разницы нет и быть не может.
–1
despoth, #
Я не о сохранённом скриншоте, а о скриншоте, только что снятом и вставленном в фотошоп. Помещаю рядом два окна: окно броузера с текстом и окошко скриншота в фотошопе. И вижу пусть небольшую, но разницу. Текст в броузере выглядит лучше.
+3
MTonly, #
Это плацебо. Если, конечно, не банальный цветовой профиль. ;-)
0
MTonly, #
К вопросу об управлении цветом в Photoshop — 3 простых шага для отключения проблем (англ.).
0
despoth, #
я поменял в тексте насчет ClearType. Спасибо за комментарии…
0
despoth, #
Хотя, возможно, это моё субъективное видение. Наверное, всё же вы правы, здесь я технически неверно отобразил суть технологии…
0
Mikhail_K, #
Да тут и не надо влезать глубоко в теорию.
Просто представьте что монитор не может показывать 1/3 пикселя. Либо он его показывает, либо нет(грубо). А раз он показывает дискретно, по одному пикселю, то отчего скриншот без потерь сохраненный будет лгать?
Неважно как монитор формирует 1 пиксель, 3 составными частями или 8, интересно другое — он может работать с инфой для одной целой точки.
Другими словами если и возможно было бы дробить пиксели, то это должно было бы происходить на уровне монитора а никак не фотошопа или ОС с ClearType.
0
despoth, #
логично. спасибо. теперь буду знать. в статье подкорректировал.
0
grafmishurov, #
Сафари виндовая антиальясит хтмл своими алгоритмами, вне зависимости от настроек ОС. В 3д-программах субпиксели участвуют в расчетах, всякие методы суперсемплов, фильтров гауса, митчела и ты ды и ты пы. Но это внутренние расчеты, в качестве итога получается изображение с целыми пикселями. Алгоритмы антиальяса я так полагаю аналогично растрируют векторный щрифт. А цветные оттенки на монохромном тексте видимо для коррекции, которые на расстоянии выглядят уже монохромными, за счет оптического смешения.
0
grafmishurov, #
6 — пиксели разного цвета; 7 — RGB триады, каждая триада формирует оптическим смешением один пиксель.
0
Usmekhaiouschiysia, #
На самом деле, последнее — то, как отобразится эта линия на плазменном мониторе. На ЖК — всё иначе.
0
barkalov, #
???
0
Usmekhaiouschiysia, #
Лупу возьмите — увидите.
+2
bsoo, #
Раньше я вообще отключал сглаживание в своих макетах, разве что, кроме заголовков, начиная от 18px и больше.

И вот уже с год я сглаживаю вообще все шрифты и, надо сказать, мне это нравится, и именно это я считаю правильным.
Есть пара моментов, за которыми стоит следить — это шрифты < 9px (там сглаживание отключается однозначно, иначе ничего не видно) и подчеркивание ссылок (нужно следить чтобы черта «попадала в пиксель», иначе при включенном сглаживании это может выглядеть неопрятно )
+6
absorbent, #
Это неплохая статья, она затрагивает интересную тему.

Но к сожалению, очень много воды, и не предложены выходы из, например, такой ситуации: у дизайнера экранные шрифты сглаживаются вистовским Clear Type-ом, а в фотошопе, как известно есть три варианта — Strong, Smooth и Crisp. И ни один из них не сглаживает так же как Clear Type (даже дилетант легко увидит разницу). Причём на тексте размером ~12 пунктов, Clear Type выглядит значительно лучше.

Если мы тут ставим задачу показать заказчику максимально близкий к результату эскиз, такие проблемы надо как-то решать, или хотя бы формулировать :)
0
despoth, #
Не гоните лошадей. Именно про это и будет вторая часть статьи. Я не метеор, и не могу быстро все писать :)
0
absorbent, #
Пишите поменьше воды и всё уместится в одну статью :)
0
despoth, #
Про воду я написал в комментариях выше.
+1
Pantofobos, #
есть еще четвертый тип сглаживания, в списке типов сглаживания текста в Adobe Photoshop, он на первом месте (после None) — Sharp.
0
absorbent, #
Забыл, извините. Суть не поменялась :)
+2
compgraf, #
почему же не поменялась. режим Sharp как раз наиболее приемлем для макетов и максимально приближен к виндовс-сглаживанию.
0
absorbent, #
дилетант легко отличит Sharp от Clear Type, я ставил эксперимент на моей маме :)
+7
anatoly_rr, #
Насчёт субпиксельного сглаживания. Пусть меня поправят, если я ошибаюсь.

На разных жк-мониторах может использоваться разный порядок цветных компонентов пикселя. Поэтому, если вы показываете кому-то макет как картинку-скриншот, может получиться, что в мониторе смотрящего другой порядок. И всё сглаживание летит к чертям :(

Вот пример. Полагаю, у большинства верхний кусок будет отображён нормально, а нижний — коряво. Но у кого-то будет и наоборот.



Мораль: если делаете картинку с текстом, лучше сглаживать без недопикселей.
+1
despoth, #
Спасибо. Не знал. Учту при написании следующей части.
зы. У меня лучше нижняя половина.
0
anatoly_rr, #
Я исследований специальных не проводил, о том что верхний порядок более распространён сужу по тому, что чужие скриншоты чаще всего у меня выглядят нормально. :)

Ещё, кстати один момент, который стоит учитывать: так же как и при увеличении картинки, при уменьшении сглаживание может портиться.
+4
Aralot, #
для статистики: у меня верхняя часть лучше смотрится :)
0
sorrowmoon, #
Угу, нижняя словно размазанна, расфокусированна.
0
kostitsyn, #
у меня верхняя выглядит вроде лучше, но в первом абзаце какая то лабуда :( или так надо? :)
0
anatoly_rr, #
Так и должно быть ;)

Это из книжки Ричарда Фейнмана «Вы, конечно, шутите, мистер Фейнман!». Очень рекомендую!
0
Hitryi_Pryanik, #
Верхний синеватый, нижний коричневатый. Неприятно пестрят. Нижний естессно поменьше, т.к. порядок совпадает. Моник ламповый Mitsubishi Diamond Pro. Сглаживание в винде включено. Мелкий шрифт не сглаживается. Сам при изготовлении тех же кнопок для самых мелких кеглей (ниже 9) ставлю пиксельный шрифт, керню, поправляю некоторые пиксели, добавляя «полупрозрачных» или чуть сбавляя насыщенность основных, чтобы убрать лесенки. Очень хорошо мелочи всякие различаю, потому приятнее смотреть на пиксельный без цветного месева и размытия. А чтоб совсем было хорошо, на мониторе подстроены антимуар и резкость так, чтобы слегка размывать пиксели, торчащие без соседей.

По сабжу: для картинок либо применять обычное сглаживание, а потом смещать буквы и затирать/докрашивать «недопиксели», либо наоборот мелкий пиксельный текст облагораживать полупрозрачными. И никаких цветастых извращений.

+1
Mikhail_K, #
У меня отключен ClearType и мне не приятно когда меня заставляют смотреть мазню(с ClearType). Если очень буду хотеть я на своей машине смогу это включить. У меня включено сглаживание, названное MS как «обычное», оно убирает зубцы, но при этом оставляет текст текстом, не превращая его в не пойми что смахивающее на разноцветный кисель.

Может быть от того что я много времени занимаюсь графикой(растровой) и глаз невольно стал более прихотлив к деталям чем у обычныйх пользователей, но смотреть на то, как серый текст переливается я не могу :)

Когда я впервые с этим столкнулся у себя на ПС в Эдобовской читалке, я думал все, пора дурку вызывать. Текст цветной. :) вместо черного — с какими то отливами, переливами :)

Пробовал более тонко настроить ClearType утилитой от MS, но так ни чего и не подобрал для себя.

Единственный выход из сложившейся ситуации — мониторы с очень маленьким зерном, которые рано или поздно прийдут на смену сегодняшних обычных дисплеев. Я так понял в ноутбуках уже ставят дисплей с матрицами у которых намного меньше точки чем обычно.
+1
despoth, #
Очевидно, тут проблема в мониторе.
У меня на стареньком ноутбуке ClearType так и выглядит — чудовищной цветной мазнёй.
А на рабочем мониторе всё преотлично. Опять же, не знаю с чем это связано, но клиртайп виндовый по умолчанию выглядит хуже маковского, но можно поколдовать специальными утилитами, и становится достаточно хорошо.
но я настолько привык к эппловскому клиртайпу, что несглаженный текст сильно режет глаз…
Я поспрашивал у коллег-дизайнеров, у некоторых клиентов. У 8 из 10 включен клиртайп. Мониторы у всех нормальные, видимо.
+1
xmagnusx, #
Хорошая статья. Спасибо, волновал этот вопрос
0
pietrovich, #
Потому что ни один существующий шрифт не может растеризоваться на современных мониторах без потери качества

хм… зачем так категорично!? а пиксельные шрифты как же!? ;)
0
despoth, #
Да, я прекрасно помню времена шрифтов 8х8 пикселей, и как в них умудрялись впихнуть много чего любопытного. Но это, скорее, извращение. И практического применения вряд ли достойно. К тому же, речь о сглаженных шрифтах, а все они на 8 пунктах нечитабельны.
0
404, #
А для того, что бы не было неожиданностей, как на первом скриншоте, весь значимый текст должен быть на сайте текстом. И графический дизайнер должен об этом помнить. И не использовать в шапке свой любимый Myriad Pro. А верстальщик должен не лениться, и подгонять такой текст под макет.
0
despoth, #
Это, позвольте, чушь собачья.
Использование того или иного шрифта — корпоративный стиль, от которого никуда не деться.
Если Apple выбрали своим корпоративным шрифтом Myriad Pro, то он у них используется везде на сайте в виде графических заголовков. А уже HTML-текст выдаётся шрифтом Lucida Grande. И в этом нет ничего плохого. Даже наоборот. Далеко не всем нравится писать слоганы и заголовки надоевшими Ариалом, Верданой и Тахомой.
+4
404, #
Корпоративный стиль — аргумент серьёзный. Но в приведённом скриншоте и текст на картинке, и текст в заголовке набраны одним и тем же шрифтом.

А у Apple картинкой только тот текст, для которого имеется дополнительное оформление стилевыми эффектами.

За использование Ариала в текстах макетов сайтов дизайнерам вообще нужно руки отрывать. Он абсолютно непригоден к отображению на экране мелким кеглем.
+1
grafmishurov, #
Зато у него есть курсивное начертание)
0
404, #
А у Верданы вот как будто нет?
+2
grafmishurov, #
В рот мне ноги!
НЛО прилетело и опубликовало эту надпись здесь
+1
despoth, #
Ну пятница ж была, вот и накопилось много воды :)
–1
grafmishurov, #
Ну я хз, я сглаживаю, штоб погламурше смотрелось, скоро эволционно на всех клиентских машинах будет альяс на весь текст. А в остальном помойму веб типографика ничем не отличается от традиционной. Ну переносов нет, флаговый набор, ну выбором шрифтов ограничен, ну антиальяс важен для некоторых на мелких кеглях. Если адекватная студия, сделают относительными единицами, возможность ктрл+ увеличивать все шрифты на сайте. Весь текст: кроме банеров на флеше и логоидентики по хорошему должен быть текстом. Функционализм и здравый смысл приведет разработчика к вебдваноль, ну а если хозяин-барин картинок хочет да покрасивше, ну хрена, пущай платит денег: будет ему как говорится хоть под египед, хоть под изоаиль, хоть оленьи рога на стене.
+1
Minimall, #
Потрясающая статья. И не слушайте тех, кто завуалированно кричит «многабукаф». Вы действительно отлично расписали, как быть в каждом случае (хотя многое из этого очевидно для дизайнеров с некоторым опытом). С нетерпением жду статью об оформлении макета!
0
nikel303, #
Есть плагин для фотошопа, Sharptype sharptype.graphest.com/, который позволяет делать надписи аля ClearType.

Но к сожалению:

1. Он платный;
2. Ужасный интерфейс;
3. И что-то не совсем хорошо работает с русским языком.
+4
kellas, #
Спасибо за статью, много написали, старались, всё очень подробно, но… на мой взгляд не очень актуально.

за 2 года работы с клиентами(показывал макеты и со сглаженным текстом и не со сглаженным), ещё ни один не вспомнил про какие-то там шрифты, «зубчатость», а вот что «просто как-то» «картинок воткните», «наш бухгалтер говорит что вместо белого лучше зелёный фон сделать» вот это да.

Я вижу у автора большой опыт, буду очень благодарен если в последующих статьях посоветуете как лучше ответить клиенту на вопрос «а что всё так проста?»

P.S. я из провинции, тут основная масса значительно менее продвинутая нежели в столицах.
–1
serjio, #
согласен, клиент разбирается в сглаживании как свинья в апельсинах, в крайнем случае можно за минуту пояснить ситуацию.
–1
Nail13, #
Хм… А я в корне с автором не согласен по поводу сделанных выводов относительно психологии клиента.

Предпочитаю сделать так: макет на утверждение — без сглаженных шрифтов. Если клиент делает кривое лицо по поводу зубчатых букв — объясняю ему примерно то же, что описано в статье. Если клиент этому не внемлет — прощаемся. Обычно довод «сверстанный макет будет выглядеть лучше благодаря сглаживанию» вполне убедителен.
Когда клиент реально потом видит на своем мониторе сверстанный HTML сглаженным, он становится довольным: «получилось даже лучше, чем я ожидал».
Если же вы подписываете макет со сглаженными шрифтами, клиент ожидает их увидеть на сайте именно такими! И вот тогда вы рискуете попасть в неразрешимую проблему: «А почему я дома на компе мой сайт вижу не таким, как я утвердил? На работе все нормально, а дома плохо. И моей секретарши точно так же, я проверял.» — говорит вам клиент и требует привести к тому виду, который он утвердил. И поскольку в момент согласований никаких лекций про сглаживание он не слышал, а с вашей стороны проделана уже очень большая работа (сайт уже готов!) — расстаться с ним «из-за невменяемости» вам будет очень сложно. А с другой стороны — со шрифтами вы сделать уже ничего не сможете, разве только «к моменту сдачи» заменить все тексты картинками и попытаться подсунуть клиенту «куклу» %)))

Если же говорить о выкладывании макетов в портфолио — делайте, как считаете нужным. Психологию лица, принимающего решение о сотрудничестве с вами, вы НИКОГДА не сможете предсказать. Кто-то любит желтое, а кто-то — бананы.
0
despoth, #
Я не ставлю целью предсказывание психологии. Я основываюсь исключительно на личном опыте и тех примерах, что я видел. Приведу два примера. В одном случае я показал клиенту несколько своих и чужих макетов. Он выбрал только те, где текст был сглажен. На остальные не смотрел дольше секунды. На мой вопрос «почему» он ответил: какие-то они корявые, глаза режут в текстах. В другом случае я был свидетелм беседы дизайнера с заказчиком в одном кафе. Заказчик принёс свой ноутбук, а дизайнер на флешке — эскизы. Я сидел рядом и невольно стал свидетелем беседы. У дизайнера на всех макетах были несглаженные шрифты, а у клиента на макбуке, разумеется, включенный антиалиасинг. Клиент, увидев макеты, попросил «что-нибудь сделать с этими жуткими текстами». Он не пояснил что, но дизайнер тотчас понял о чём речь и попытался с виноватым видом объяснить, что-то мямлил про то, что это он так изобразил HTML-текст, мол, только графику принято сглаживать и всё такое. На что клиент, уже изрядно раздражённый, показал ему пару сайтов, где и в помине не было никаких зубчатых текстов. Не знаю, чем закончился их диалог, принял ли заказчик макеты (а они были весьма недурны). Но эти случае вполне показательны. А сколько их случается вообще? И поверьте — ни я, ни один из моих знакомых дизайнеров (а я по аське устроил опрос своих коллег на тему сглаживания, и оказалось, что 8 из 10 включают антиалиасинг) не сталкивался с проблемами, если клиенту показывается сглаженный текст. Напротив, клиент почти не предъявляет претензий по оформлению именно текстовых блоков. Лишь возникают вопросы по организации лааута в целом и по всяким графическим мулечкам, цветам или размерам шрифта.
–1
Nail13, #
А… Ну понятно. Если ваша задача — заставить клиента принять макет «как есть» и вам безразлична дальнейшая судьба этого макета, тогда да, тогда конечно… %)))
–1
despoth, #
Моя задача — сделать так, чтобы клиент был доволен. При этом нередко приходится его убеждать в необходимости сделать так или эдак, а не сообразно его каким-то порывам и капризам. Имея довольно богатый опыт в области предоставления клиенту макетов, а также в области аудита готовых сайтов, я редко сталкиваюсь с случаями, когда такие макеты не проходят по причине некорректно представленных текстовых блоков. Как раз, напротив. Дальнейшая судьба сделанных мной макетов мне никогда не бывает безразличной. Передав работу верстальщику, я четко слежу за максимально точным воспроизводством того, что было задумано. За многие годы я научился проводить тонкий аудит верстаемых сайтов и подготавливаю детализированный список всех доработок, которые должно провести на этапе верстки, включая едва заметные сдвиги буквально на один пиксель и прочие нюансы. Но я не стану вас переубеждать. Я в своих действиях уверен, ибо это приносит мне реальные результаты. А вот уверены ли вы в своей позиции?
–2
serjio, #
хреново написано, мусолить н-листов одно и тоже не по мне…

совет бросать клиента из-за того, что ему не нравится сглаживание в макете и он не захотел менять своего мнения — совет больного человека.
–1
despoth, #
Я упомянул о том, что не намерен вступать в холивары по поводу вышесказанного. Просто высказал свою точку зрения, опираясь на личный опыт и те тенденции, которые я вижу. Хочу лишь заметить, что в следующей части я планирую провести детальный аналаз наиболее распространённых вариантов использования самых популярных веб-шрифтов в сглаженном и несглаженном виде. Надеюсь, что после этого анализа каждый для себя сделает соответствующие выводы. Кто-то, возможно, переменит своё мнение. А кто-то останется при своих измышлениях. Нельзя всем угодить. Но если вам не интересно, зачем же вы тогда читаете? :)
0
Kukalyakin, #
Как раз вчера разбирали с нашими дизайнерами ваши статьи о веб-типографике. В связи с этим вопрос, пользуясь случаем — а 6-я часть будет?
–1
despoth, #
Непременно. В 6-й части я планирую разобрать на конкретных примерах варианты сочетаний тех или иных шрифтов. Кроме того, появилась идея сделать нечто вроде приложения, где я думаю привести 10 лучших на мой взгляд наборов (взятых с блогов или корпоративных сайтов): основной текст-мелкий текст-подзаголовок-большой заголовок-цитата.
0
Pantofobos, #
ссылка на первую часть, ведет на текущий топик. исправьте, пожалуйста.
за статью — спасибо.
–1
despoth, #
Ну вроде бы текущий топик и есть первая часть :)
0
Pantofobos, #
прошу прощения:) утренняя невнимательность :) жду продолжения.
0
sashabe, #
Дифирамбов.
0
G_Z, #
Статья хорошая, пусть и немного затянутая.
Обеими руками за сглаживание.

К сожалению, не затронута тема вариантов сглаживания того же Photoshop`а и их разницы с вариантами сглаживания ОС (субпиксельное сглаживание).

Как ни прискорбно, до сих пор в PS не добиться субпиксельного сглаживания, в результате чего, макет всегда жирней, чем его увидит кто-либо после вёрстки.
Что, зачастую, вызывает ещё больше вопросов нежели отключенное сглаживание.
–1
despoth, #
Ответил в предыдущих комментах раз пять уже, и вам отвечу: про фотошоп и методы представления сглаживания — во второй части.
0
G_Z, #
Пардон, читал статью когда комментариев почти не было.

Спасибо, почитаю во второй части.
0
pitri, #
Одной из сюжетных линий статьи является порядок сдачи дизайна клиенту (в качестве примера рассматривается дизайнер-одиночка: сдал — значит молодец). А каков будет порядок сдачи макета верстальщиком после такого дизайна?
–1
despoth, #
В рамках статьи рассматриваются методы (а их будет несоклько, сглаживание — лишь самый простой из них) улучшения чернового варианта, драфта. Потому как главная здесь задача — убедить клиента принять этот макет, да с минимальными правками. По поводу верстки ничего не могу сказать, т.к. в этих вопросах я не особо компетентен. Но про дизайн постараюсь рассказать по максимуму.
0
pitri, #
Я говорю лишь об этой статье.
Если не рассматривать идеальные случаи когда на дизайн-макете и в браузере после верстки выглядят буковки одинаково «круглые» или одинаково «квадратные», то гораздо проще сдать «круглые» после «квадратных», и порой фраза «ЧТО ЭТО ЗА ФИГНЯ?!!!» — имеет место в обратном случае.
Склоняя дизайнеров к «круглым» мы забываем о тех кому придется работать следом.
0
hiphopujenetot, #
Адекватный заказчик понимает, что на картинке текст выглядит иначе, чем в сверстанном htlm-файле.
А вообще, я против сглаживания. :)
0
hiphopujenetot, #
Не считая картинок.
–1
despoth, #
Это ваше личное дело. Но я еще раз возвращу вас к окончанию статьи:
Если так, но вы по какой-то причине не согласны и рвётесь доказать превосходство зазубренных букв — попробуйте ещё раз перечитать вышеизложенное. Наверняка вы что-то недопоняли.
0
hiphopujenetot, #
Я не спорю, а высказываю свое мнение по теме. ;)
+1
Nail13, #
Раз уж зашла такая тема, может ли автор (или кто-то из комментирующих) предложить способ определения статистических данных: какой процент пользователей НЕ использует сглаженные шрифты (методы «опроса по аське» сомнительны — нерепрезентативная выборка)?
0
despoth, #
Создайте топик-опрос на хабре. Будет любопытно посмотреть результаты.
+2
private, #
чувак, я нихера не понял, но ты заговорил и достучался до моего сердца (с)
+1
Sabiko, #
Вы знаете, я верстаю, удивляюсь каждый раз, когда присылают макет со сглаживанием. Вот найдите любую статистику и посмотрите, сколько людей сидит под маками, или вистой, или Сафари под вин. И, по-моему, если дизайнер включает сглаживание в макете какого-нибудь сайта регионального мелкой фирмочки, где наверняка ещё половина посетителей будет с древними мониторами и 800x600, то это «дизайнер», и про веб-дизайн он в лучшем случае где-то что-то слышал.

Смысл рисовать макет в том виде, в каком его увидят дай бог пять процентов пользователей (ну от целевой аудитории проекта зависит, конечно, но у вас этот момент вообще не затронут)? Или я неправильно что-то понимаю?

Т.е. понятно, что в статье в основном про «впечатлить клиента» и «чтоб в портфолио красиво было», но как же результат и конечный пользователь?
–3
despoth, #
Да нет, видимо мы с вами живем в разных странах. У меня клиенты, коллеги и просто посетители не испытывают проблем с мониторами и разрешениями, да и с операционными системами у всех давно все в порядке. Иначе бы я не начинал писать эту статью. Ну а если вы не верите мне, посмотрите портфолио ведущих и наиболее успешных студий Рунета. И покажите мне хотя бы один скриншот работы, выполненной в этом году, где текст не сглажен :)
0
ugarov, #
Только на фри-лансе видел макеты представленные с 100%-м размером…
У всех студий скриншоты уменьшены раза в два и вставлены в модный маковский браузер. Соответственно про сглаживание и его отсутствие судить трудно :- )
0
ugarov, #
Спасибо за статью, было интересно. Воды не ощутил, она неожиданно успела закончиться )

Только зарегистрированные пользователи могут оставлять комментарии.
Войдите, пожалуйста.