Сглаживание в макетах
Некоторые дизайнеры не используют сглаживание текста в своих макетах. Эту жуткую практику нужно искоренять.
Одни говорят, что в браузере всё равно без сглаживания. Ну, ребята, пора уже переходить с Виндоуса-95 на что-то более адекватное. Я не помню, когда последний раз видел компьютер с выключенным сглаживанием. Кроме того, мне не кажется, что дизайнеру должно быть важно видеть текст на сайте таким, каким его увидят мазохисты.
Другие говорят, что Фотошоп сглаживает не так, как ОС, и поэтому получается неправдоподобно. Как из этого следует, что сглаживание нужно выключить совсем, не уточняется. Разные виды сглаживания всё-таки отличаются меньше, чем сглаживание от его отсутствия. Кстати, ОСи бывают разные, и сглаживают они по-разному — это вообще не важно, просто лестницы на краях букв ни для чего не нужны.
Третьи говорят, что отказываясь от сглаживания, они как бы намекают, что «тут просто текст», чтобы у верстальщика не было соблазна сохранить текст картинкой. Но нормальный верстальщик без намёков понимает, что весь текст должен быть текстом, если это возможно технически. А если в макете есть спорный случай, то его всё равно придётся обсуждать. Решать коммуникационную проблему через издевательство над зрением — крайне неэффективно.
Какой же из режимов сглаживания выбрать? Как правило, текст смотрится чище всего в «криспе», и я долгое время пользовался именно им, пока Артём не предложил перейти на «шарп». Поскольку текст в «шарпе» выглядит грязнее, он будет заставлять себя всячески облегчать: использовать меньше разных начертаний, увеличивать интерлиньяж и т. д. Тогда, если добиться того, чтобы текст выглядел хорошо в «шарпе» на макете, то в браузере потом он будет выглядеть просто изумительно.
Я немного не так делаю, у меня текст всегда None, но вот начертание, интерлиньяж я беру из западных принтов, по мне такой вариант более жесткий, но продуктивный для намётки глаза и прививания хорошего и удобного расположения текста на сайте, тогда грубый и тощий None будет торкать.
Второй плюс — такой способ заставляет переосмыслить текст который будет на сайте и оформить его так, чтобы не было скучно читать его, поставить акценты на скорости чтения.
Ну и примеры шрифтовых принтов от которых меня плющит
http://smages.com/i/76/e1/76e127f0ee72a74ccba94d6c12ebaafe.jpg
http://smages.com/i/2f/e0/2fe058d346008d080c2d4a17fc108d67.jpg
http://smages.com/i/27/a6/27a640493ac0c75f9a07e27719b44642.jpg
Я не использую экранное сглаживание. Может быть конечно это просто привычка к Виндоус-95, которая все еще не прошла, но у меня достаточно быстро устают глаза при чтении сглаженного текста. А читать с экрана мне приходится достаточно много.
Терпеть не могу экранное сглаживание, особенно в браузерах. Выключил его 2001, потом несколько раз пробовал, но так и не понравилось.
Ещё нулевые говорят, что сглаживание — это не тру и что настоящие дизайнеры никогда ничего не сглаживают.
На несглаженных макетах всегда слово «подробнее» написано в новостях такой милой ступенчатой Верданкой, и стоят дебильные иконки с домиком, поиском и картой сайта.
Привет настоящим дизайнерам!
Важно ещё отметить, что сглаживание на ЖК и ЭЛТ мониторах — разные вещи. В ЭЛТ текст и так немного размыт из-за физики нашего мира, дополнительное сглаживание может быть лишним. А на ЖК оно действительно необходимо.
Ну почему обязательно «подробнее» — всем известно, что это моветон, поэтому пишут «далее» или просто ставят скромное многоточие.
После Фотошопного сглаживания сайт действительно смотрится сильно иначе, чем результирующий. Для меня загадка почему Фотошоп не включил в свой пакет «сглаживание как в Windows».
Потому, что нет такого понятия: Виндоус спрашивает у монитора, в каком порядке идут у него подпиксели, и в зависимости от этого выдаёт ту или иную картинку. Если бы Фотошоп использовал вариант, который применяет Виндоус на твоём мониторе, на моём могло бы отображаться жуткое нечитаемое мыло. А уж какая хрень получалась бы при печати — страшно представить.
Поэтому, кстати, когда делаешь в Виндоусе скриншот, текст хорошо бы дополнительно чёрно-белить (Контроль+Шифт+U).
Ну, печать (полиграфия) меня мало волнует. Если ты о печати страницы макета, то зачем его печатать? Я за всё время работы над сайтами это делал раз десять, а это очень маленький процент.
Мыло или нет, а именно так сайт и будет смотреть у большинства людей, неплохо было бы это видеть. Про ч.б не понял, объясни, пожалуйста.
Похоже, ты не знаешь, как работает экранное сглаживание. У всех (а не у большинства) людей сглаживание будет выглядеть отлично, потому, что Винда подбирает метод сглаживания в «реальном времени» исходя из того, на какой монитор она вещает. Если ты сделаешь скриншот окна, а потом откроешь его на мониторе с другим порядком подпикселей, то текст будет мыльным и со смешными цветными краями. Точно так же было бы, если бы в Фотошопе можно было использовать «сглаживание как в моём Виндоусе» — в чужом Виндоусе (а точнее: на чужом мониторе) качество текста было бы непредсказуемым.
Чёрнобелить текст нужно для того, чтобы цветные подпиксели по краям букв превратить в бледно-серые полные пиксели.
Гм… честно сказать, я не задумывался, что Винда подбирает сглаживание под монитор и твои слова многое объясняют.
Щас вот пошёл ещё раз посмотрел в Википедии — там пишут, что Клиртайп исходит из RGB-порядка пикселей, а если у тебя на мониторе другой, то тебе нужно в Клиртайп-тюнере самому выбрать это. С другой стороны, где-то раньше я читал, в драйверах мониторов содержится также и информация о порядке подпикселей, и Клиртайп это использует.
В Винде нет такой штуки как «драйвер монитора», там есть (текстовый) файл, где перечислены расширения и частоты и бывает ещё (редко бывает и ещё реже его кто-нибудь ставит) цветовой профиль.
http://en.wikipedia.org/wiki/ClearType
А зачем вообще рисовать макет сайта в графическом редакторе? Я тут погуглил, вижу, что это повсеместная практика. А я в шоке. Зачем макетировать в графическом редакторе, чем это лучше макетирования в браузере?
Сергей, вам привет из космоса, с планеты «Земля»! точка-точка-тире
Вообще не пользуюсь Клиртайпом. От него глаза болят. Обычный метод сглаживания всё-же читабельнее, конечно если у вас не плазма во всю стену…
В макетах раньше сглаживание не использовал вообще, заблуждался как и многие. Сейчас пользуюсь криспом или шарпом, в зависимости от настроения и размера шрифта.
Я ни разу не встречал монитора, у которого порядок субпикселей BGR вместо RGB.
А вот контрастность может быть разная: например, я люблю текст посветлее, поэтому на винде у меня стоит гамма 1.9 вместо стандартных вроде бы 1.6.
Прочитал комментарии про виндовое сглаживание. На ЭЛТ там еще можно было жить, но на ЖК...
Простите, но клеартайп в винде не просто плох, от него реально тянет блевать!
Я не могу описать насколько он убог, что в XP что в висте.
Даже правильно настроенное субпиксельное сглаживание дает зелено-красные разводы, я молчу про неправильное (причем винда каким-то магическим образом в 90% случаев устанавливает неправильное)
При неправильно (наоборот) настроенном невозможно даже немного читать текст, однако правильно настроенное все равно видно когда долго что-то пишешь в текстовом редакторе — для меня это актуально, так как я программист ;)
В нормальных операционных системах (я про *nix и все-таки мак) такую вещь как пиксельная решетка приняли как данность и разработали замечательные экранные шрифты, которые попадают в эту пиксельную решетку, и включено только обычное (серое, а не цветное-субпиксельное) сглаживание, которое попадает на закругления букв — на расстоянии в 20 см его уже не видно.
Это же виндовое убожество умудряется поместить букву между пикселей, а потом сгладить ее так, что буква становится серо-размытой, а если включен клеартайп, то еще и цветной по всей высоте!
Простите, но после линукса я не могу смотреть на винду со сглаживанием — майкрософту нужно оторвать все что можно за такое поделье!
В винде даже без какого либо сглаживания с квадратиками на углах буквы о смотрится лучше чем со всеми этими клеартайпами.
Иван, ваши представления о прекрасном сильно испорчены. Я не думаю, что возможно всерьёз обсуждать типографику с давним пользователем никсов, где всё, что в этом смысле можно сделать плохо, сделано плохо :-) Кроме того, на Маке сглаживание, вопреки вашим словам, как раз таки совершенно не учитывает пиксельную решётку.
Для справки.
Линукс: http://www.linux.org.ru/gallery/3893087.png
Виста: http://elgeek.com/wp-content/uploads/2009/03/ie8_vista.png
Мак: http://s3.amazonaws.com/m.david/screen-shots/Safari-Runing-on-Windows-Runing-on-Mac-big.jpg
Да, что-же я был лучшего мнения о маке, все размыто, все очень плохо...
Мак действительно видел мало и он мне очень не понравился — он совершенно не удобен.
Про скриншот висты Ярослава я могу сказать только то что по нему мало чего видно — просто тут нужен церный цвет на белом фоне.
К сожалению скриншот в «линуксе» похоже сделан человеком, который «приполз с винды пару дней назад» и сделал так-же криво как и в ней — а именно вместо того чтобы оставить шрифты черно-белыми включил субпиксельное сглаживание — цвета именно видны на краях букв — как цветные линии — это действительно делает чтение очень напрягающим.
Единственные шрифты, которые мне понравились были на линуксе, первые стандартные в дебиане. Вот пожалуйста скриншот: http://smages.com/61/b9/61b9ef0525b8a6e6570f86ec1e1cfc0b.png.htm
Если смотреть именно так в 100% размере без ресайзов — то я убей не пойму что там плохого — лучший шрифт который я видел.
Илья, с мнением «где всё, что в этом смысле можно сделать плохо, сделано плохо» я совершенно не согласен — лучшие шрифты я видел на линуксе. Точно так-же я считаю что говорить о шрифтах с теми кто считает что они в винде хорошие абсолютно бесперспективно.
Возможно как-то более-менее сглаженный шрифт смотрится в заголовке, но для текста размером 10-12 пунктов такое сглаживание просто ужасно, тут нужен именно хинтинг.
Довольно подробно рассказано вот тут
http://marvin.mezon.ru/~alecs/osxfonts.html
!!Про скриншот висты Ярослава я могу сказать только то что по нему мало чего видно — просто тут нужен церный цвет на белом фоне.!!
Пожалуйста :-)
!!К сожалению скриншот в «линуксе» похоже сделан человеком, который «приполз с винды пару дней назад» и сделал так-же криво как и в ней...!!
Вот скришнот стандартной Убунты, без изменений. Что скажете?
Удивительно, что такая простая вещь вызавала столько разногласий. Я раньше тоже делал шрифты несглаженными в макетах именно из-за разницы сглаживаний шоповских и винды. Потом очень быстро сообразил, что так они могут выглядеть только при кегле 10 пунктов и то не самый айс. Теперь всгеда использую шарп, не смотря на то, что с мелкими шрифтами он справляется немного по-другому чем в браузерах. Для сравнения сам поработал без сглаживания и со сглаживанием, решил что с ним удобнее. Теперь клиртайп включен всегда. Да и макеты со сглаживанием радуют взгляд заказчика это безусловно. Видит ли он обычно в браузере все без сглаживания, или наоборот у него виста и всё стоит по-умолчанию. В любом случае сейчас несглаженный текст в макете будет удивлять и возможно даже вызывать вопросы.
Ярослав, я действительно не пойму.
Может у вас монитор с настолько мелким зерном, что вы не видите цветных разводов?
Может у меня настолько старый, что я их вижу?
Может у меня зрение очень хорошее?
Мой монитор — Samsung SyncMaster 913n — полез в яндекс-маркет — Шаг точки — 0.294 мм, монитор подключен по VGA.
я не хочу сказать что это профессиональный/дизайнерский монитор, и я знаю что там есть DVI, но это обычная «рабочая лошадка» — аналогичные мониторы стоят во многих фирмах сейчас, где-то лучше, где-то хуже. На работе у нас ViewSonic не помню точно модель, но там точно такая-же ситуация. Более того, у нас некоторые в винде специально отключили сглаживание.
Я очень четко вижу зелено-красные разводы на расстоянии половины руки от экрана, хотя иногда я читаю даже ближе — в данном случае справа от вертикальной линии сине-зеленую, а слева светло-оранжевую.
На скриншоте с Вистой разводов не вижу. На скриншоте с Убунтой вижу. На экран смотрю с расстояния 75 см. На зрение не жалуюсь :-)
Про скриншот убунты скажу, что там во первых не идеально, но гораздо лучше чем в висте.
Да, там включено субпиксельное сглаживание, да разводов почти не видно на расстоянии вытянутой руки, но ближе они заметны. Также хочу еще заметить, что тут «шрифт находится в более выгодном положении» — на жирных шрифтах это действительно менее заметно, чем на обычных. И меня в принципе такое даже бы устроило, правда тут слишком увеличенный шрифт по отношению к экрану, но это уже издаржки размера экрана виртуалбокса — у вас получается гораздо меньшая относительная зернистость для шрифта на таком экране. Я сам замечал такое несколько раз, когда ставил дебиан на виртуалку — он выставлял немного не те шрифты, какие было нужно и иногда это смотрелось не очень.
Я довольно давно не видел убунты — использую дебиан, кстати попробую поставить свежий testing и посмотрю — с учетом перехода на kde4 они могли изменить дефолтные настройки, хотя насколько я знаю не меняли — использую kde4, но настройки с kde3, но уже не сегодня :)
Ярослав а вот у меня наоборот — на висте вижу, на убунте почте не вижу.
Вот интересно, что вы скажите про дебиан, потому что там вообще разводов нету — они никогда не врубали субпиксельное сглаживание.
Про Дебиан я могу сказать то, что там буквы ужасно размыты, и у й дужка съехала вправо (но это, скорее всего, дефект при масштабировании символа).
А у меня наоборот в таком масштабе буквы абсолютно четкие.
Мне кажется, что такой спор проводить по интернету бессмысленно, так как тут нужно еще и совпадение разрешений экрана и возможно чего-то еще...
Помоему лучшим решением будет поставить на один комп по очереди две системы и смотреть. По крайне мере на моем мониторе линукс ведет себя гораздо лучше, хотя я не встречал пока еще ни одного компа с жк монитором, у которого не появлялось бы таких разводов.
На http://smages.com/61/b9/61b9ef0525b8a6e6570f86ec1e1cfc0b.png.htm видно, что в местах, где добавлены серые точки, меняется визуальная толщина линий. Может, кому-то так приятно, но не мне. По-моему, к ClearType привыкнуть несложно, и после этого цветные очертания букв практически незаметны.
Тем не менее, могу выделить следующие недостатки ClearType: сглаживание происходит только по горизонтали (заметно при достаточно большом размере шрифта); буквы остаются вписанными в сетку, из-за чего не «сглаживаются» межбуквенные расстояния, то есть они всегда измеряются целым числом пикселов (чем меньше размер шрифта, тем сильнее проявляется данный эффект).
Этих двух недостатков нет в сглаживании от Apple, которое похоже на фотошоповское, но имеет возможность субпиксельного сглаживания. Мне такое нравится больше всего, а многим людям, привыкшим к визуально более четкому ClearType, от него становится плохо. Кстати, подобное субпиксельное сглаживание можно включать в Adobe Reader для Виндовса.
В WinXP антиальясинг текста по умолчанию выключен. Статистика говорит, что посетителей сайтов, на которых стоит счетчик LiveInternet, пользующихся ОС WinXP, больше 70%.
http://www.liveinternet.ru/stat/ru/oses.html
Вид сайта со сглаживанием — это один вариант вида сайта из примерно миллиарда вариантов, в котором сайт может отбразиться. Конечно, я сделаю всё настолько красиво, насколько можно: с красивым сглаживанием, с красивыми маковскими кнопками и чекбоксами, с красивым маковским окном. Зачем показывать худший вариант, если можно показать наилучший возможный?
какой тонкий троллинг однако :)
давно всем известно, что точка должна быть не более 0.2, а тут 0.3. Естественно, с точкой 0.3 видно невооружённым взглядом все техники сглаживания.
Сергей, по поводу того что размер точки должен быть 0.2 — он никому ничего не должен, а если и должен, то всем прощает — посмотрите на популярные рабочие мониторы. Не профессиональные, а просто популярные мониторы, которые установлены хотя-бы в большинстве фирм и дома.
Здоровью он должен, этот пиксель, глазу. Нельзя использовать монитор, который делает 1280 максимум по горизонтали на 19» диагонали на расстоянии 30-50 см. Это же очевидные, простите невольный каламбур, вещи.
Ха-ха! Весело тут а вас :) Илья дело написал. Я бы такую заметку не разрешил комментировать. Пусть бы все мучались в корчах.
Не, это терроризм, запрещать комментировать такую заметку :-)
Простите, кто-то рисует в ЭЛТ? Те кто пользуют его сами себе злые буратино.
Надо быть ближе к людям) Андрей Шапиро прав, на сегодняшний день у абсолютного большинства установлен XP, а там по-умолчанию отсутствует сглаживание для мелких кеглей шрифтов.
Настоящим открытием стало для меня, что сглаживание обычно черного текста происходит с использованием разных цветов, особенно хорошо это видно при увеличении, спасибо за эту информацию
Простите, вы зайдите пожалуйста в магазин и посмотрите, какие там мониторы продаются.
Только пожалуйста не те, которые стоят раза в 4 дороже системника, а нормальные мониторы, которые в большинстве своем. Во первых 1280 это основное разрешение экрана для 19» во вторых — 0.27-0.29 это основная зернистость для мониторов.
Зайдите и посмотрите тот-же прайс олди.
Сергей Соляник, пожалуйста «не надо тролить» — это нормальные мониторы, которые использует подавляющее большинство пользователей. И пожалуйста не надо говорить бред, выдавая его за очевидные вещи.
Берем гораздо более дорогой монитор (http://oldi.ru/catalog/show.php?idx=17509&cod=97572&pgf=%2Fcatalog%2Findex.php%3Fmsgrp%3D125741%26nch%3D0%26idp%3D71) и видим что его зернистось — 0,285 — тоесть не намного меньше той, которая у меня. Так что — (http://oldi.ru/catalog/index.php?msgrp=125741&idp=71) посмотрите на реальные мониторы, а не на вымышленные.
0.3 это очень даже достаточная зернистость, если конечно в винде отключить это убожество, которое они назвали сглаживанием.
Павел Корнилов — про ЭЛТ речи тут вообще нету — только про ЖК.
!!1280 это основное разрешение экрана для 19»»»
Это верно только для мониторов с соотношением сторон 4:3, которые уже практически не выпускаются. Сейчас более популярно соотношение 16:10, и стандартное разрешение при нём — 1440×900.
Надо же, сколько времени не замечал, _насколько_ убого сглаживание в линуксе по умолчанию. Конечно, его нужно доводить до ума сразу после установки системы, но как же оно ужасно...
Ярослав, спуститесь на землю, мониторы 4:3 у него уже не выпускаются....
Антон Вернигор, ну вообще то что у меня установлено — это по умолчанию, я ничего не хочу сказать про убунту — в ней очень много настроено криво, для того чтобы те кто пришли с винды не испугались как все может быть хорошо наверное :)
1) Мониторы 4:3 крайне редкие вещи. Очень редкие. Те мониторы которые многие называют 4:3 на деле оказываются 5:4. Just calculate!
2) Примерное процентное содержание в магазинах на сегодня:
4:3 — 1% (в основном «под заказ», в наличии не оказалось ни у кого!)
5:4 — 14%
16:9 — 27%
16:10 — 58%
3) Самый приобретаемый размер монитора — 22». Их примерно 50%. На втором месте — 19» (1280 на 1024, 5:4).
4) Типичный размер точки ЖК-монитора — 0,282 мм. 0,25 мм — это почти минимальный предел. 0,2 мм не видел в природе.
5) Мониторы менее 20» домой не приобретают единицы. Менее 1%.
6) Стоимость широкого 18,5» монитора 136 долларов, а 19» (5:4) — 175 долларов.
7) В настоящий момент вектор улучшения мониторов — увеличение разрешения в его истинном смысле (точек/дюйм).
8) Методика сглаживания на Маках нацелена на высокое разрешение монитора (от 90 точек на дюйм).
9) Не сглаженный текст — маразм. Как и ЭЛТ-мониторы. Буквы состоят из кривых, а не из точек. Глупо утверждать, что буквы должны состоять из точек изначально.
10) Сглаживание на Линуксе по умолчанию — говно. Но крутилками можно добиться хороших результатов. Лучше чем в винде, но хуже чем на маке.
Так-то!
ОМГ! Илья, поправь пожалуйста знаки дюйма в моем посте, а то я умру со стыда!
Я не знаю, как это сделать :-)
О! И еще суперхинт: круче всего делать макеты в Adobe InDesign. ;-) Вопрос про сглаживание тогда отпадает.
Как правильно заметил Bolk, драйвера монитора действительно нет, но Илья прав в том, что выбор типа Cleartype сглаживания лежит на операционной системе. Проблема в том что ОС не может узнать какой Cleartype использовать в данной ситуации. Поэтому его нужно настроить вручную.
Микрософт предоставляет онлайн настройщик: http://www.microsoft.com/typography/cleartype/tuner/Step1.aspx.
Кстати возможно что у людей которые жалуются что видят цвета по краям букв, эта фигня просто неправильно настроена.
Ага.
Да да да
мне недавно один менеджер так и сказал
надо сделать в макете текст без зглаживания
типа привет из прошлого!
Kimosabe
Знаете, но фигня в том что цвета по краям букв видны во всех вариантах. Да, при правильной настройке меньше, но видны.
Эта фигня называется порядок пикселей — варианты RGB, BGR и вертикальные.
Винда (как кстати и линукс, если в том-же КДЕ включить субпиксельное сглаживание) по умолчанию настроена на RGB как на самый распространенный, и это действительно самый распространенный порядок. Так что насчет того что неправильно настроен — это не так, по крайне мере в большинстве случаев.
Если уйти от споров кто красивее гладит — виндоус, убунту или мак...
Мои аргументы:
У меня по иному поводу любопытство — почему все спорят о субпиксельном сглаживании текста, но нигде и ни в одной программе я не видел субпиксельного сглаживания векторной графики? Чем она так провинилась?
Ну а насчет сравнения мака и винды — на маке сначала все казалось размыто, но после того как привык, очень тяжело смотреть на винду — ну настолько корявыми теперь кажутся буквы — что с ClearType что с классическим антиалиасингом.
А, видя скриншоты с Мака, всегда завидовал, и поэтому с первого дня после перехода был счастлив.
Долгое время работал без «Clear type». В макетах сглаживание использовал лишь для заголовков. И мне, напротив, казалось, что сглаживание — это в основном маковская и вистовская тема. А в XP она кое-как была у меня только в Эксплорере, которы почти не использую. И без сглаживания привычнее было. Хотя бы не мутно. Но прочитав это обсуждение, шагнул вперёд. Спасибо за ссылку с возможностью выбора, Kimosabe. Но в Фотошопе теперь будет трудно (