5 правил подготовки макетов веб-страниц

[@dyakov]

>Правило №3: Не использовать сглаживание и размытие на тексте.
>К сожалению, не один из браузеров не поддерживает данное свойство.

Хотел бы заметить, что когда текст мелкий (где-то до 16-18px, зависит от шрифта), замечание верно.
Но большой шрифт сглаживается. В winXP по крайней мере.

[@vanya]

На самом деле все зависит от браузера. Internet Expolorer 7 и Safari 3 сглаживают шрифты в любом случае. А вот Firefox сглаживает шрифты только начиная с 18px.

[@vanya]

По-моему, - нет.

[@deniq]

Включено по-умолчанию. Отключается из Internet Options > Advanced > Always use ClearType for HTML.

А само главное, что этим своим нововведением MS снова добавила головной боли и без того страдающих от них бедным кодерам.

[@iderins]

а зачем?

[@davojan]

В WinXP можно включить ClearType и всё будет сглаженным.

[@kost]

При этом большие шрифты будут наоборот, несглаженными.

[@xaja]

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

[@nekto]

видимо от гла зависит, работаю не первый год, ем и нахваливаю

[@proxor]

я тоже. на жк-мониторе с клеартайпом вообще намного лучше.

[@davojan]

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

В данном случае просто обсуждалось наличие/отсутствие сглаживания у браузеров.

Кстати, как раз 2 дня назад перешёл на cleartype, чтобы использовать шрифт Monaco в эклипсе. Первые 2 часа были такие ж ощущения, как у вас. А потом тюнером подрегулировал и теперь не нарадуюсь. И на странички смотреть приятнее...

[@squonk]

Firefox сам ничего не сглаживает. Как в XP выставлено сглаживание, так шрифты и будут отображаться.

[@wialy]

Сглаживание шрифтов устанавливается в Display Properties > Appearence > Effects, не всё зависит от браузера

[@ponchiknews]

Ну да, в WinXP. MacOS все прекрасно сглаживает. + Вспоминаем IE7 и Safari под Windows.

[@tarakashkin]

Спасибо за статью! Несколько отличных практик для действительно хорошего дизайна.

[@iuhiol]

мой опыт подтверждает то, что здесь написано :)

правила в общем простые, можно было бы сделать краткий список из их названий

Правило №1: Учитывать динамическое изменение информации в блоке.
Правило №2: Текст должен быть в отдельном слое (не растеризованном).
Правило №3: Не использовать сглаживание и размытие на тексте.
Правило №4: Использовать нестандартный шрифт только для картинок.
Правило №5: Все элементы дизайна должны быть в независимых слоях.

[@badlittleduck]

Скриншоты и комментарии раскрывают смысл пунктов для других участников web-разработки которые менее искушённые в вёрстке, но которые чертовски сильно на неё влияют :))

[@niker]

Правило 3. Браузеры поддерживают сглаживание шрифтов. Показать?
Правило 5. Это вам кто сказал? А в том варианте дизайна, которым вы иллюстрируете правило, вообще всё можно слить и сверстать из джипега. «Привет, 90-е!»

[@hoodoy]

Сверстать можно и со слов клиента. :))
Здесь ведь описывается как НАДО делать, чтобы проблем меньше было у обоих сторон.
Ох и наверстался я со скриншетов, неблагодарное это дело. (

[@badlittleduck]

Спасибо Вам за ваш комментарий. Вот ради чего я написал эту статью! Вон человек выше пишет,что правила простые. Мне тоже периодически приходиться верстать со скриншотов и я успел прочувствовать на сколько это приятно. Поэтому надеюсь,что пользуясь этой статьёй PM или дизайнеры приложат хоть какие-то усилия для улучшения процесса web-разработки

[@badlittleduck]

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

[@elias]

>Правило №3: Не использовать сглаживание и размытие на тексте.

Небудем голословными. Есть такой open source JavaScript, который заменяет текст на странице на flash эквивалент. Использую его можно добиться любых эффектов с текстом. Имя ему sIFR (Scalable Inman Flash Replacement)

[@xaja]

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

[@elias]

Хех, не заметил. Только заголовок прочитал :)

[@arsart]

про сифр глупость написана, его для заголовков и небольше 20 штук на странице реально использовать, но только не для текста.

[@NickMitin]

А еще у пользователя не может быть браузера или компьютера вообще :)
Я не выступаю в поддержку sIFR

[@More]

Ага, а река течет и лошади кушают сено.

[@badlittleduck]

Если за последние 2 месяца вы не напоролись на вышеизложенное, то я вам завидую.

[@hlomzik]

Правила хорошие конечно, про шрифты особенно хочется дизайнерам вдалбливать...
Но нет самого главного по моему мнению правила.
Учитывать то, что окошко браузера не совпадает с таковым в фотошопе.
Ну почему нельзя представить, что элемент с этой красивой рамкой может растягиваться? Как можно делать картинки, обрезанные по нижнему краю, или занимающие ровно n пикселей в ширину для фона? Ну и ошибки в таком духе...

Высекать правило в заголовке фотошопа.

[@Nevermind]

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

[@ponchiknews]

По-моему, достаточно очевидные правила, всё же.

Про пункт 3 добавлю, что включаю анти-алайзинг, когда кегль шрифта больше 18px по причине, озвученной выше: http://habrahabr.ru/blog/webdev/30441.ht…

[@kost]

Дополнение к пункту 5.

Слои должны быть понятно подписаны, и собраны в группы.

[@badlittleduck]

Дельное дополнение.Я группы назвал сетами, возможно стоило назвать группами

[@kost]

Там сразу было написано "по сетам"? Я прочитал "по слоям", когда написал передыдущий комментарий.

[@404]

До CS2 групп не было, были сеты. На скриншоте - то ли семерка, то ли CS

[@badlittleduck]

Вы правы, на скриншоте 7ка. Значит правильно назвал.

[@mike3g]

Возможны проблемы на стороне верстальщика с группами. Если неизвестно чем он пользуется, то лучше без групп и выставленной 'Maximize PSD and PSB File Compatibility'.

[@sevon]

Правило номер ноль:
Рисуйте в Фотошопе, а не в богопротивном многомерзком Кореле, который вообще для полиграфии предназначен.

[@ponchiknews]

Дополнение к правилу ноль: если можете, верстайте дизайн макета в InDesign, рисуйте в Фотошопе.

[@sevon]

Поддерживаю.

[@masterbo]

Для полиграфии предназаначены Adobe Illustrator и Macromedia FreeHand. Макеты, прошедшие через CorelDRAW в большинстве типографий не принимают. Так что единственное применение CarelDRAW в полиграфии это непритязательные к качеству цвета домашние принтерные распечатки. Если же (даже на принтере) вам нужен правильный цвет, то CorelDRAW отпадает.

[@sevon]

Напротив, большинство полиграфий хотят именно CorelDRAW, это по личному опыту, но разговор вообще не об этом.

[@masterbo]

Мы с вами похоже с разным уровнем полиграфии общаемся. Я всё больше по типографиям где печатают всякие глянцевые журналы и на худой конец газеты. Там слово "корел" — ругательство. А если говорить о владельцах принтеров/ксероксов которые продают услуги этой техники населению, то у них и нет необходимости в высоком качестве печати. К слову сделайте эксперимент — разыщите старенькую версию FreeHand 9 и просто сравните печать на одном и том же принтере одного и того же макета. Уверен вы будете сильно удивлены что "ваш принтер может так печатать". =)

[@xvost]

Зачем так дерзко сказал?

[@sevon]

Ибо криворукие дизайнеры привили лютую ненависть к сему пакету.

[@xvost]

"Криворукие дизайнеры" применяют любые пакеты.

[@horsev]

С таким подходом в будущем каждая кухарка сможет сделать достойный шаблон в фотошопе!

Однако на мой взгляд это не так. Эти «правила хорошего тона» похоже на чтото вроде «С++ за 24 часа».

[@badlittleduck]

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

Прислали раз PSD в котором все слои склеены. Представляете? Я как мог обьяснил, что от такого PSD толку как и от JPG. К сожалению пришлось работать с тем,что дали.

[@Kiro]

Ага и ещё можно добавить "Не использовать наклон главного текстового блока" А то был случай у меня, что весь текст на сайте должен был идти под наклоном)))

[@badlittleduck]

Мир полон чудес. Верю и понимаю. Из избранных вещей можно сборники делать.

[@badlittleduck]

А-а-а-а-а-а! За что? Чур меня Якоб! Мне кстате, его причёска и юзерпик никогда не нравились :))

[@Spunk]

Все верно написано.
Но мне не пригодится — свои макеты я верстаю сам.

[@Yeah]

А вот я бы еще добавил:
Руководители мелких фирм! Берите на работу верстальщиков, а не заставляйте верстать страницы программистов!!! Что взять с моей верстки, если я не верстальщик???
Кстати, подсчитал, что в текущем проекте дизайнер (дизайн преддоставлен заказчиком) не выполнил 3 из 5 предложенных в статье требований. Мне меня жалко :)

[@Zoberg]

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

[@bezz]

psd — хорошая штука, только вот макеты в png мне больше нравятся, они лучше для многостраничных макетов и над каждым елементом как с обьектом работаешь, а не как со слоем ) я об этом уже писал в обсуждении голосования. По поводу хорошего тона — файл должен содержать описание (description), основные цвета выложены в swatches, градиенты и кнопки — в стилях, вместо направляющих должен быть использован слой с модульной сеткой.

PS и автор файла тоже должен быть указан, что бы знать, кого проклинать за ебонутый декор в шрифтах и злоебучее наложение слоев с прозрачностью и маской смешивания, за блочки с разными тенюшками, за непонимание того, что не у всех 1024x768, за нежелание думать о верстальщиках. Верстальщики всегда думают о дизайнерах ;)

[@Kengry]

Про шрифты

Дизайнер должен сам сделать документ в html и посмотреть как с помощью css можно изголяться над стандартным шрифтом. От этого и плясать дальше

[@badlittleduck]

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

[@Kengry]

Есть дизайнеры, которые рисуют красивые картинки, а есть дизайнеры, которые делают хорошие сайты.

[@meako]

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

[@primalscream]

Да вы герой! Уважаю. дай что нибудь посмотреть

[@meako]

да... Я по направлению не дизайнер, и дизайном на жизнь не зарабатываю... Скорее так, для себя, всякие мелочи... Поетому палками не бейте.
Вот, недавно делал стенд для своего отделения в ВУЗ`е. Картинка большая, 1.4мб.

Набросок сайта для молодежной организации. сделано в Inkscape+Gimp. (цветовую схему выбирал заказчик)

[@bonton]

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

[@badlittleduck]

Согласен, ценное дополнение

[@Nightquest]

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

[@badlittleduck]

Если бы я достаточно часто не натыкался на описанные огрехи, я бы 100% подумал так же.

[@badlittleduck]

ставлю +. Я по белому вам завидую

[@Ad_Astra]

ага. Понимаю на 100%. Сама недавно писала практически о том же - http://ad-astra.habrahabr.ru/blog/29701.… . Полиграфизм - это диагноз.

[@badlittleduck]

Зачем вы так. В PSD стиль с текстом растеризован. А скажем вам позарез нужен именно текст, а не рыба Lorem ipsum, Ваши руки ведь не из жопы? Правильно? А вместо секундной операции придётся набирать текст.

[@badlittleduck]

описка - не стиль а слой

[@badlittleduck]

Спасибо за ссылку. Я имел в виду вам позарез нужен именно тот текст который растеризован. Например PSD внутренней странички "О компании", а там длинная терада о всех веха компании и т.д. На запросы прислать текст в текстовом файле заказчик не может ничего внятного прислать или ответить (такое ощущение что текст там мистически проявился сам). И вот тут действительно происходит то, что к вёрстке не имет отношения - тупо набор текста который видишь. Это, я согласен с вами, неприятно.

[@Ad_Astra]

Классический пример неверстабельности - вертикальный градиентный фон на всю страницу. Такое ещё ни один раузер растягивать не научился - а полиграфисты любят почему-то.

[@badlittleduck]

полиграфисты ещё любят пускать круговой градиент или по диагонали :))

[@Ad_Astra]

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

[@Sabiko]

выше вот славный пример про текст под наклоном. Попробуете?

[@Ad_Astra]

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

[@Novikov]

С какого перепугу дизайном стали называть подготовку PSD-файлов к верстке?

[@reader]

Хорошая статья по этому же вопросу http://engelside.net/coder-vs-designer/

[@s2d]

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

[@Ainur]

"Правило №2: Текст должен быть в отдельном слое (не растеризованном)."

А что, кто-то делает текст в растеризованном слое!?

[@badlittleduck]

Именно. А вы счастливый человек!

[@Ainur]

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

[@badlittleduck]

Свои делают нормально, но вот то что присылают пендосы.... достойно сочувствия

[@Ainur]

Я не работал со «своими» дизайнерами, дизайнерами их вообще трудно назвать, т.к. у многих нет минимальной школы, а вот европейцы, обычно дипломированные специалисты, отсюда и разница у вас – текс растовый, у нас – нормальный, т.к. люди знают что такое фотошоп и что с их файлом будут потом работать люди.

[@badlittleduck]

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