Готовим макет для клиента. Часть II: Если гладить, то как?

[spaceemangrechko]

чувак, ты реальный маньяк :)

[flacon]

С появлением Sharp пользуюсь им в 90% случаев, и не заморачиваюсь. :)

[Nightquest]

Мне не нравится Шарп у маленького ариала, например:

[flacon]

На вкус и цвет… мне по душе первый вариант.

Анализ тем не менее заслуживает уважения.

[Nightquest]

Он возможно симпатичнее выглядит, но не похож на ариал.

[flacon]

Хм, не думал, что целью статьи было достижение узнаваимости гарнитуры на веб-страницах.

[sitehound]

Ты проделал много работы. Молодец! В свое время я это опытным путем изучал, подгонял. Была бы такая статья раньше — много бы времени сэкономил. Статья написана на уровне коммерческого журнала.

[Devich]

А что, действительно еще у кого-то стоит вопрос о необходимости сглаживания?

[nicothin]

вот и я удивляюсь…

[maDByte]

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

[maDByte]

а что мы минусуем-то? ) я же просто мнение своё высказал.

[4g3n7]

Потому что что есть «контентный шрифт»?

Я представил себе 18-пиксельный жирный Ариал чёрного цвета и несглаженный, и мне стало плохо!

Может быть имеется в виду шрифт эдак 9-13 пикселов? Тут да, можно еще поспорить, сглаживать или нет.

Долго объяснять, почему меряю в пикселах. Вкратце — удобно и с помощью 62.5% в емах нормально эмулировать.

[Suomi]

Твое мнение кому-то не нравится. Вот и минусуют. Кто-то может так же написать Винда говно, маки рулят. И ему наставят минусов. А он просто скажет: «А что такого? Я просто мнение свое высказал»

[maDByte]

Ну тогда это получается детский сад, а не дискуссия. Ставить минусы нужно тому, кто не прав. А тут правых нет, либо нравится, либо не нравится.

[Suomi]

Так я и могу считать, что он не прав. Что его мнение неправильное.

[Zibba]

Иногда лучше жевать чем говорить :)
/> минусы

[NecroHill]

отличная статья. буквально 3 дня назад занимался поиском оптимальных комбинаций сглаживаний. остановился на шарп, чтоб не заморачиваться. хотя к заголовкам тоже Smooth применяю, бывает.
я ожидал что в CS4 появится метод сглаживания «как в браузере»… и нифига… (о кнопке «Сделать красиво» не мечтал)

[Nimnul]

Спасибо за обзоры.
Почитал статейки и включил ClearType в XP-шке :)

[Fade]

Забавно, но поучительно. Хотя, у меня лично пока такой проблемы нет, т.к. для макетов использую векторный редактор Xara, у которого экранное сглаживание почти идеальное (почти, т.к. оно отличаеться от сглаживания браузеров в лучшую сторону и приходиться вручную «ухудшадь» макеты, чтобы добиться совпадения).

[4g3n7]

Я шарпом пользуюсь.
Бывает иногда играюсь с остальными режимами сглаживания, но (о, чудо!) практически всегда выбираю шарп :)

А автор маньяк, да :)

[Grayscale]

Статья хорошая, еще раз убедился в своем древнем выборе. Хотя, на макетах часто для малоразмерных шрифтов не использую сглаживание (например, лично для меня, georgia в 9-12pt выглядит лучше и как то реалистичней в режиме none).

[404]

Кроме Photoshop, макеты для web можно готовить в Fireworks. И вот здесь есть такая вещь, как Custom Anti-aliasing:




не хотите с ним поиграться, выяснить его достоинства и недостатки?

[energel]

Вау… Ну всё, теперь точно придется перелезать в fw…

[nicothin]

с большим нетерпением жду статьи о шрифтовых сочетаниях :)

[egorinsk]

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

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

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

p.s. А strong — это явно Линуксовое сглаживание!

p.p.s. Хуже всего выгляджит уменьшенный несглаженный шрифт(

[egorinsk]

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

[despoth]

Очевидно, вы не читали статью с самого начала, с первой части. Иначе бы не было этого поста.

[Nightquest]

Ужас просто.

«Во первых верстальщику будет понятно, что заголовок — текст, а не IMG картинка.»
Верстальщику-идиоту, который не смотрит на слои в фотошопе?

[despoth]

> Во первых верстальщику будет понятно, что заголовок — текст, а не IMG картинка.
См. NB в конце статьи.

[srDiGer]

Молодец! Жду продолжения «банкета». И ты реально маньяк :)

[slavik]

не в тему, но вопрос давно мучает — давно заметил и не знаю как избавиться: в firefox-е (с предпоследних обновлений 3-ей версии) в блоке текста с align:justify, обычный пробел растягивается пропорционально, а неразрывный —  , так и остается стандартной ширины, что делать? кто-нибудь знает?

[despoth]

Никогда не использовать justify. В газетах и журналах этот тип выключки работает превосходно, но на сайте всегда смотрится чудовищно. По причине отсутствия системы расстановки переносов, возможности тонко настраивать зоны сужения или расширения трекинга, а также из-за скуднейшего набора эрканных шрифтов. То, что свёрстано в журнале при помощи Caslon или Baskerville при включении полной выключки на экране в исполнении Times New Roman страшно удручает.

[despoth]

Я сам удивлен. Пришел кто-то (или несколько кого-то), что было в нуле — опустил в минусА, что было с плюсами — опустил до нуля. На многих комментариях. Я вообще раньше не ставил практически минуса, в основном только плюсы. Минуса в крайне редких случаях — грубиянам и пошлякам. В последнее время воздерживаюсь от вообще каких бы то ни было оценок. Но вот удивляет и удручает поведение людей: втихаря вот так вот мелочно мстить или злобу свою проявлять. Как-то это все недостойно, подленько.

[porqz]

На то он и неразрывный пробел.)

[Nightquest]

Давным-давно так. Выход — не использовать идиотский justify. Это зло. Нет, правда.

[snch]

а кто вам сказал, что он должен вести себя по другому?

[serjio]

капец) не жалко же время на размусоливание сглаживаняи в двух статьях.
предыдущие статьи повеселее были.

что меня волнует и что в этой статье толком не было затронуто — это крайне хуёвое сглаживание в фотшопе, на мелких шрифтах оно очень далеко от реального экранного сглаживания (cleartype в частности) и не понятно как с этим бороться (где-то промелькнула ссылка на плагин, который во-первых платный, во-вторых с кирилицей плохо дружит)…

при чём это выглядит гораздо менее реалистично и более херово чем если мы показываем клиенту просто макет без сглаживания.

[serjio]

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

[Aux]

Как верстальщик, я хочу заметить, что верстальщику шаблон надо отдавать в следующем виде:

* весь сглаженный текст идёт в результате картинкой;
* весь несглаженный будет в результате текстом.

[Hitryi_Pryanik]

А если абзац с рыбой сглаженным увидите, тоже в картинку экспортить будете? Молодцом, так держать!

[Aux]

Когда я работаю с незнакомыми дизайнерами я всегда выдвигаю такие условия. Если он сгладил весь текст — чтож, сам идиот.

[despoth]

См. NB в конце статьи.

[Aux]

Это безусловно здорово, когда дизайнер понимает что будет делать верстальщик, но, к сожалению, некоторые дизайнеры далеки от этого. И с ними тоже иногда приходится иметь дело. И если подобный чел хочет видить одну вердану картинкой, а другую текстом, то пусть лучше готовит шаблоны так, чтобы у меня не возникало вопросов. К тому же иногда «тексты на картинках» бывают именно текстами, а не картинками. Вобщем, лучше раз и навсегда определится с тем, что сглаживаем, а что нет, чем потом бегать к горе-дизигнеру и спрашивать — а это шозанах?

[despoth]

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

[Aux]

Ну я иногда верстальщик, но ни разу не дизайнер. И отличить вердану от тахомы не могу. И нах оно надо?

[despoth]

Ты прав. Тебе не надо.

[multik]

вопрос может не по адресу но всё же — как сверстать текст в режиме сглаживания?

[Hitryi_Pryanik]

По поводу макета верстальщику: его банально нужно структуировать, создавая группы и подгруппы в иерархии слоёв. Когда слоёв под сотню, кидать их в одну ленту по меньшей мере неразумно и работу это тормозит. Что говорить, если уже готовых групп иногда набирается под два десятка

[Hitryi_Pryanik]

Я почитал, посмотрел примеры. Маньячество — эт конечно хорошо в профессионализме. Я тоже люблю поманьячить. Возможно поэтому у меня не фотошоп.

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

А для портфолио можно и поманьячить, вылизывая весь дизайн. Однако честнее сделать скриншот и показывать именно его :)

[energel]

Настоящий сенсей по вырезанию человечков из правды-матки… :)
Всё больше благодарен Хабрахабру — инкубатору хороших авторов и, соответственно, отличных статей!
Спасибо.

[xmagnusx]

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

[Chesheer]

Мое пятикопеечное imho насчет того что верстать текстом, а что графикой: просто выделяю графические слои цветом в панели слоев и все. Дополнительные замечания по верстке я всегда включаю в сам шаблон с использованием note — так сразу все под рукой и не забудется.

[gauss]

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

[despoth]

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

[despoth]

Какие-то озлобленные клоуны понаставили на все мои комментарии минусов. Детский сад :)

[EugeneKudashev]

Благодарю за ценный материал, обе части было прочитать очень интересно. Вы планируете писать ещё статьи о типографике?

[despoth]

В планах у меня следующий материал:
1. Окончание статьи о сглаживании третьей частью с окончательным анализом всех вариантов для основных веб-шрифтов.
2. Окончания цикла статей «Веб-типографика сегодня» шестой частью со схожим материалом, но там акцент будет не на выборе типа сглаживания для разных шрифтов, а анализ и поиск оптимальных шрифтовых сочетаний для наборов заголовок-подзаголовок-текст-мелкий текст.
3. Продолжения статей о подготовке макета для клиента (пока задумки на 3-4 части, может будет больше) — о том, как в готовом лэйтауте лучше расставлять блоки, как манипулировать абзацными атрибутами (когда шрифтовые атрибуты выбраны), как наилучшим образом готовить «рыбу», а также как делать пост-продакшн драфтов.

[sashock]

Спасибо, за статью, хорошая работа!
Сам использую сглаживание только в заголовках и текстах больше 18 pt (а в некоторых шрифтах — 17 pt), т.к. все же сглаживание в фотошопе мелких шрифтов меня не устраивает, хотя в системе использую ClearType и там все шрифты выглядят классно в любых кеглях.

[KynuMHe6y6EH]

А как заставить винду гладить по-клиртайповски только указанные шрифты только указанного диапазона кегля?