Comments 96
>Правило №3: Не использовать сглаживание и размытие на тексте.
>К сожалению, не один из браузеров не поддерживает данное свойство.
Хотел бы заметить, что когда текст мелкий (где-то до 16-18px, зависит от шрифта), замечание верно.
Но большой шрифт сглаживается. В winXP по крайней мере.
>К сожалению, не один из браузеров не поддерживает данное свойство.
Хотел бы заметить, что когда текст мелкий (где-то до 16-18px, зависит от шрифта), замечание верно.
Но большой шрифт сглаживается. В winXP по крайней мере.
На самом деле все зависит от браузера. Internet Expolorer 7 и Safari 3 сглаживают шрифты в любом случае. А вот Firefox сглаживает шрифты только начиная с 18px.
В WinXP можно включить ClearType и всё будет сглаженным.
При этом большие шрифты будут наоборот, несглаженными.
И что? Вы все в одну корзину кладете.
Дизайнер клиенту показал со сглаженными шрифтами, клиент доволен. Дали верстать - опа! а там без сглаживания, клиент топает ногами и тычет пальцем в монитор. и что делать? услужливо ему подсказывать, что "клеартайп" включить надо? и тогда все окей будет?
а Вы сами этот клеартайп включали? и работали с ним? глаза умирают и отказываются работать через 5 минут.
Дизайнер клиенту показал со сглаженными шрифтами, клиент доволен. Дали верстать - опа! а там без сглаживания, клиент топает ногами и тычет пальцем в монитор. и что делать? услужливо ему подсказывать, что "клеартайп" включить надо? и тогда все окей будет?
а Вы сами этот клеартайп включали? и работали с ним? глаза умирают и отказываются работать через 5 минут.
видимо от гла зависит, работаю не первый год, ем и нахваливаю
Так я ж не говорю, что автор не прав насчёт того, что нужно давать картинки без сглаживания. Всё правильно - я сам матерюсь на дизайнеров за красотульки, которые при реализации без сглаживания оказываются не такими уж красивыми.
В данном случае просто обсуждалось наличие/отсутствие сглаживания у браузеров.
Кстати, как раз 2 дня назад перешёл на cleartype, чтобы использовать шрифт Monaco в эклипсе. Первые 2 часа были такие ж ощущения, как у вас. А потом тюнером подрегулировал и теперь не нарадуюсь. И на странички смотреть приятнее...
В данном случае просто обсуждалось наличие/отсутствие сглаживания у браузеров.
Кстати, как раз 2 дня назад перешёл на cleartype, чтобы использовать шрифт Monaco в эклипсе. Первые 2 часа были такие ж ощущения, как у вас. А потом тюнером подрегулировал и теперь не нарадуюсь. И на странички смотреть приятнее...
Firefox сам ничего не сглаживает. Как в XP выставлено сглаживание, так шрифты и будут отображаться.
Сглаживание шрифтов устанавливается в Display Properties > Appearence > Effects, не всё зависит от браузера
Ну да, в WinXP. MacOS все прекрасно сглаживает. + Вспоминаем IE7 и Safari под Windows.
Спасибо за статью! Несколько отличных практик для действительно хорошего дизайна.
мой опыт подтверждает то, что здесь написано :)
правила в общем простые, можно было бы сделать краткий список из их названий
Правило №1: Учитывать динамическое изменение информации в блоке.
Правило №2: Текст должен быть в отдельном слое (не растеризованном).
Правило №3: Не использовать сглаживание и размытие на тексте.
Правило №4: Использовать нестандартный шрифт только для картинок.
Правило №5: Все элементы дизайна должны быть в независимых слоях.
правила в общем простые, можно было бы сделать краткий список из их названий
Правило №1: Учитывать динамическое изменение информации в блоке.
Правило №2: Текст должен быть в отдельном слое (не растеризованном).
Правило №3: Не использовать сглаживание и размытие на тексте.
Правило №4: Использовать нестандартный шрифт только для картинок.
Правило №5: Все элементы дизайна должны быть в независимых слоях.
Правило 3. Браузеры поддерживают сглаживание шрифтов. Показать?
Правило 5. Это вам кто сказал? А в том варианте дизайна, которым вы иллюстрируете правило, вообще всё можно слить и сверстать из джипега. «Привет, 90-е!»
Правило 5. Это вам кто сказал? А в том варианте дизайна, которым вы иллюстрируете правило, вообще всё можно слить и сверстать из джипега. «Привет, 90-е!»
Сверстать можно и со слов клиента. :))
Здесь ведь описывается как НАДО делать, чтобы проблем меньше было у обоих сторон.
Ох и наверстался я со скриншетов, неблагодарное это дело. (
Здесь ведь описывается как НАДО делать, чтобы проблем меньше было у обоих сторон.
Ох и наверстался я со скриншетов, неблагодарное это дело. (
Спасибо Вам за ваш комментарий. Вот ради чего я написал эту статью! Вон человек выше пишет,что правила простые. Мне тоже периодически приходиться верстать со скриншотов и я успел прочувствовать на сколько это приятно. Поэтому надеюсь,что пользуясь этой статьёй PM или дизайнеры приложат хоть какие-то усилия для улучшения процесса web-разработки
>Правило №3: Не использовать сглаживание и размытие на тексте.
Небудем голословными. Есть такой open source JavaScript, который заменяет текст на странице на flash эквивалент. Использую его можно добиться любых эффектов с текстом. Имя ему sIFR (Scalable Inman Flash Replacement)
Небудем голословными. Есть такой open source JavaScript, который заменяет текст на странице на flash эквивалент. Использую его можно добиться любых эффектов с текстом. Имя ему sIFR (Scalable Inman Flash Replacement)
Ага, а река течет и лошади кушают сено.
Правила хорошие конечно, про шрифты особенно хочется дизайнерам вдалбливать...
Но нет самого главного по моему мнению правила.
Учитывать то, что окошко браузера не совпадает с таковым в фотошопе.
Ну почему нельзя представить, что элемент с этой красивой рамкой может растягиваться? Как можно делать картинки, обрезанные по нижнему краю, или занимающие ровно n пикселей в ширину для фона? Ну и ошибки в таком духе...
Высекать правило в заголовке фотошопа.
Но нет самого главного по моему мнению правила.
Учитывать то, что окошко браузера не совпадает с таковым в фотошопе.
Ну почему нельзя представить, что элемент с этой красивой рамкой может растягиваться? Как можно делать картинки, обрезанные по нижнему краю, или занимающие ровно n пикселей в ширину для фона? Ну и ошибки в таком духе...
Высекать правило в заголовке фотошопа.
По-моему, достаточно очевидные правила, всё же.
Про пункт 3 добавлю, что включаю анти-алайзинг, когда кегль шрифта больше 18px по причине, озвученной выше: http://habrahabr.ru/blog/webdev/30441.ht…
Про пункт 3 добавлю, что включаю анти-алайзинг, когда кегль шрифта больше 18px по причине, озвученной выше: http://habrahabr.ru/blog/webdev/30441.ht…
Дополнение к пункту 5.
Слои должны быть понятно подписаны, и собраны в группы.
Слои должны быть понятно подписаны, и собраны в группы.
Правило номер ноль:
Рисуйте в Фотошопе, а не в богопротивном многомерзком Кореле, который вообще для полиграфии предназначен.
Рисуйте в Фотошопе, а не в богопротивном многомерзком Кореле, который вообще для полиграфии предназначен.
Дополнение к правилу ноль: если можете, верстайте дизайн макета в InDesign, рисуйте в Фотошопе.
Для полиграфии предназаначены Adobe Illustrator и Macromedia FreeHand. Макеты, прошедшие через CorelDRAW в большинстве типографий не принимают. Так что единственное применение CarelDRAW в полиграфии это непритязательные к качеству цвета домашние принтерные распечатки. Если же (даже на принтере) вам нужен правильный цвет, то CorelDRAW отпадает.
Напротив, большинство полиграфий хотят именно CorelDRAW, это по личному опыту, но разговор вообще не об этом.
Мы с вами похоже с разным уровнем полиграфии общаемся. Я всё больше по типографиям где печатают всякие глянцевые журналы и на худой конец газеты. Там слово "корел" ругательство. А если говорить о владельцах принтеров/ксероксов которые продают услуги этой техники населению, то у них и нет необходимости в высоком качестве печати. К слову сделайте эксперимент разыщите старенькую версию FreeHand 9 и просто сравните печать на одном и том же принтере одного и того же макета. Уверен вы будете сильно удивлены что "ваш принтер может так печатать". =)
Зачем так дерзко сказал?
С таким подходом в будущем каждая кухарка сможет сделать достойный шаблон в фотошопе!
Однако на мой взгляд это не так. Эти «правила хорошего тона» похоже на чтото вроде «С++ за 24 часа».
Однако на мой взгляд это не так. Эти «правила хорошего тона» похоже на чтото вроде «С++ за 24 часа».
Ага и ещё можно добавить "Не использовать наклон главного текстового блока" А то был случай у меня, что весь текст на сайте должен был идти под наклоном)))
Все верно написано.
Но мне не пригодится — свои макеты я верстаю сам.
Но мне не пригодится — свои макеты я верстаю сам.
А вот я бы еще добавил:
Руководители мелких фирм! Берите на работу верстальщиков, а не заставляйте верстать страницы программистов!!! Что взять с моей верстки, если я не верстальщик???
Кстати, подсчитал, что в текущем проекте дизайнер (дизайн преддоставлен заказчиком) не выполнил 3 из 5 предложенных в статье требований. Мне меня жалко :)
Руководители мелких фирм! Берите на работу верстальщиков, а не заставляйте верстать страницы программистов!!! Что взять с моей верстки, если я не верстальщик???
Кстати, подсчитал, что в текущем проекте дизайнер (дизайн преддоставлен заказчиком) не выполнил 3 из 5 предложенных в статье требований. Мне меня жалко :)
Действительно, я тоже думаю, что каждый должен делать свою работу, нельзя быть профессионалом во всех областях. к этому надо стремится, но не в ущерб основной профессии:) Программист ведь будет верстать намного дольше, чем верстальщик, если вообще правильно сверстает. Также, как верстальщик будет дольше писать CMS, если вообще её напишет)
psd — хорошая штука, только вот макеты в png мне больше нравятся, они лучше для многостраничных макетов и над каждым елементом как с обьектом работаешь, а не как со слоем ) я об этом уже писал в обсуждении голосования. По поводу хорошего тона — файл должен содержать описание (description), основные цвета выложены в swatches, градиенты и кнопки — в стилях, вместо направляющих должен быть использован слой с модульной сеткой.
PS и автор файла тоже должен быть указан, что бы знать, кого проклинать за ебонутый декор в шрифтах и злоебучее наложение слоев с прозрачностью и маской смешивания, за блочки с разными тенюшками, за непонимание того, что не у всех 1024x768, за нежелание думать о верстальщиках. Верстальщики всегда думают о дизайнерах ;)
PS и автор файла тоже должен быть указан, что бы знать, кого проклинать за ебонутый декор в шрифтах и злоебучее наложение слоев с прозрачностью и маской смешивания, за блочки с разными тенюшками, за непонимание того, что не у всех 1024x768, за нежелание думать о верстальщиках. Верстальщики всегда думают о дизайнерах ;)
Про шрифты
Дизайнер должен сам сделать документ в html и посмотреть как с помощью css можно изголяться над стандартным шрифтом. От этого и плясать дальше
Дизайнер должен сам сделать документ в html и посмотреть как с помощью css можно изголяться над стандартным шрифтом. От этого и плясать дальше
Чьорт... Я в гимпе дизайню:(
всё бы хорошо, только работа со слоями у него уж очень не удобна...
всё бы хорошо, только работа со слоями у него уж очень не удобна...
Да вы герой! Уважаю. дай что нибудь посмотреть
да... Я по направлению не дизайнер, и дизайном на жизнь не зарабатываю... Скорее так, для себя, всякие мелочи... Поетому палками не бейте.
Вот, недавно делал стенд для своего отделения в ВУЗ`е. Картинка большая, 1.4мб.
Набросок сайта для молодежной организации. сделано в Inkscape+Gimp. (цветовую схему выбирал заказчик)
Вот, недавно делал стенд для своего отделения в ВУЗ`е. Картинка большая, 1.4мб.
Набросок сайта для молодежной организации. сделано в Inkscape+Gimp. (цветовую схему выбирал заказчик)
Еще одна проблема - дизайнеры не выкладывают шрифты, использованные в проекте. Часто приходится искать нужный шрифт по коллекции, чтобы тот же sifr прикрутить.
Ужасно, господа, ужасно.
Такими темпами скоро в книгах будут печатать подробное руководство по тому, как правильно умываться с утра и как готовить яичницу (с мельчайшими подробностями и картинками. Ну и с обязательным уточнением, что яичница должна готовиться на сковородке и именно из яиц).
Такими темпами скоро в книгах будут печатать подробное руководство по тому, как правильно умываться с утра и как готовить яичницу (с мельчайшими подробностями и картинками. Ну и с обязательным уточнением, что яичница должна готовиться на сковородке и именно из яиц).
ага. Понимаю на 100%. Сама недавно писала практически о том же - http://ad-astra.habrahabr.ru/blog/29701.… . Полиграфизм - это диагноз.
Зачем вы так. В PSD стиль с текстом растеризован. А скажем вам позарез нужен именно текст, а не рыба Lorem ipsum, Ваши руки ведь не из жопы? Правильно? А вместо секундной операции придётся набирать текст.
описка - не стиль а слой
Спасибо за ссылку. Я имел в виду вам позарез нужен именно тот текст который растеризован. Например PSD внутренней странички "О компании", а там длинная терада о всех веха компании и т.д. На запросы прислать текст в текстовом файле заказчик не может ничего внятного прислать или ответить (такое ощущение что текст там мистически проявился сам). И вот тут действительно происходит то, что к вёрстке не имет отношения - тупо набор текста который видишь. Это, я согласен с вами, неприятно.
Классический пример неверстабельности - вертикальный градиентный фон на всю страницу. Такое ещё ни один раузер растягивать не научился - а полиграфисты любят почему-то.
выше вот славный пример про текст под наклоном. Попробуете?
С какого перепугу дизайном стали называть подготовку PSD-файлов к верстке?
Хорошая статья по этому же вопросу http://engelside.net/coder-vs-designer/
Даже один и тот же размер и шрифт, выглядит совсем по разном в ФШ без сглаживания и в браузерах
PS. Удобно также помечать однотипные слоя цветом (правом кнопкой на глазике в панели слоев)
PS. Удобно также помечать однотипные слоя цветом (правом кнопкой на глазике в панели слоев)
"Правило №2: Текст должен быть в отдельном слое (не растеризованном)."
А что, кто-то делает текст в растеризованном слое!?
А что, кто-то делает текст в растеризованном слое!?
Именно. А вы счастливый человек!
Не представляю, зачем это делать. Даже самые тупые дизайнеры с которыми я встречался, делали нормальным текстом, без использования хитрых шрифтов.
Сочувствую.
Сочувствую.
Свои делают нормально, но вот то что присылают пендосы.... достойно сочувствия
Я не работал со «своими» дизайнерами, дизайнерами их вообще трудно назвать, т.к. у многих нет минимальной школы, а вот европейцы, обычно дипломированные специалисты, отсюда и разница у вас – текс растовый, у нас – нормальный, т.к. люди знают что такое фотошоп и что с их файлом будут потом работать люди.
Sign up to leave a comment.
5 правил подготовки макетов веб-страниц