div.main {margin-left: 20pt; margin-right: 20pt} Добрый день!
Backgrounds (фоны)
Вообще-то на эту тему написано
много хорошего и полезного. Но я постараюсь взглянуть немного иначе на это дело.
Есс-но, речь пойдет о психологии восприятия и некоторых моментах, возникающих из
этого аспекта.
Начнем с самого простого. Кодовые фоны, получаемые при помощи bg color... Самый простой
и естественный фон - белый. Он напоминает цвет листа бумаги, помогает в полной
мере выявить цвета и тона фотографий, иллюстраций, подчеркнуть особенности
применямых вами шрифтов.
Но даже в таком, самом простом случае есть некоторые тонкости, как
технические, так и психофизические. Первая - это просто забывчивость некоторых
веб-мастеров в определении БГ страницы. Если в настройках тест-броузера по
умолчанию стоит белый фон, то и при такой забывчивости он тоже будет белым. А у
посетителя defoult bg может оказаться и просто серым (что страшно, в общем-то в
основном для общей идеи вашего дизайна, и ваших картинок, которые могут
оказаться немного чуждыми другому фону), а может оказаться и совсем другим, ну
мало ли... Поэтому цвет фона страницы лучше всего задавать принудительно.
Второй важный момент относительно белого фона страницы - цвет шрифта. Если
текст не очень велик, да еще рассредоточен на блоки с помощью пауз и иллюстраций
- то вроде бы и нормально. Но на больших текстах (150 кб и более) глаза начинают
уставать, так как задан наибольший контраст. Это происходит даже при длительном
чтении с бумаги, а ведь бумага светит только отраженным светом в отличие от
монитора... Простой выход - уменьшить контраст между шрифтом и фоном, сделав
шрифт не чисто черным, а немного сероватым. Впечатление останется тем же, а
напряжение на глаза немного уменьшится. Такой прием я применил на сайте журнала
"День и Ночь", имеющего достаточно
внушительные размеры печатаемых в нем повестей и рассказов. Как мне кажется -
прием себя полностью оправдал.
Снизить контраст можно и за счет фона (ввести слегка серый или подцвеченный
фон). Этот вариант используется настолько часто, что примеры на виду в больших
количествах. Проблемой может стать илишне активный цвет фона, так называемый
"открытый" цвет. Чисто желтый, ярко-красный, да и практически любой другой
открытый цвет (если это не обусловлено дизайнерскими задачами, но в таких
случаях обычно не бывает больших текстовых объемов). Решение давно найдено -
слегка подцвеченные фоны, более благородно, снижает контраст и не утомляет
глаза.
Использование битовых заголовков и gif-transparent иллюстраций на белом и
цветном фоне.
Если вы используете
картинку-заголовок или Gif-картинку с прозрачным фоном, следует обращать
внимание на благополучный контакт края видимого изображения с фоном (так
называемая антиалиасинговая зона). Как эта зона образуется, и как этим
пользоваться?
При выполнении графического заголовка с включеным antialiased Photoshop
производит полупрозрачный переход от контура символа до нуля через несколько
пикселов, образуя тем самым мягкий переход от тона к фону. На цветном фоне
(картинка 1) полупрозрачные пикселы принимают цвет фона, и при сохранении в
gif-transparent остаются цветными. На странице с фоном того же цвета они
обеспечивают тот самый мягкий переход, но если эту же картинку-заголовок
поместить на фон другого цвета - они выделятся в самостоятельную зону без связи
с фоном (картинка 2). Поэтому лучше графический заголовок
выполнять сразу на нужном фоне, а потом при сохранении в Gif фон можно
сделать прозрачным (картинка 3). Приходится выбирать между
универсальностью и качеством (я бы выбрал качество :o). Особенно этот прием
пригодится в том случае, когда в качестве БГ вы применяете паттерн или просто
картинку на весь экран.
Использование картинки в качестве фона страницы.
Проблема может быть та же, что
и при использовании просто цветного фона - излишне активный БГ, затрудняющий
восприятие основных материалов страницы. И решение то же - максимально
приглушить фон, спрятать излишние детали и применить достаточно контрастный
шрифт (чтобы его можно было читать без выпучивания глаз до головной боли).
Иногда удачной картинкой-БГ можно снять проблему излишнего контраста шрифта на
белой странице. Перед началом работы неплохо бы провести вот такой тест для
текста (не путать с текстом для теста :o)
Тест
для текста Тест для текста Текст для текста Тест для текста |
Тест для
текста Тест для текста Тест для текста Тест для текста |
Тест для
текста Тест для текста Тест для текста Тест для
текста |
И если вы определились с картинкой для фона и с цветом шрифта, то и
графические заголовки тогда лучше сразу делать на вашем потенциальном фоне (см.
чуть выше).
Смысловая суть картинки-фона.
Помимо визуальных качеств фона
(цвета, тона, рисунка-схемы) существует еще и смысловой ряд бэкграунда. Чаще
всего речь идет о простой уместности того или иного изображения или текстуры.
Мятая бумага, текстура холста или дерева содержат в себе определенный смысловой
(ассоциативный) ряд, и использовать столь конкретные текстуры "не по теме" не
прибавит достоинств вашей страничке. Скорее всего, это просто будет уводить
зрителя в сторону от главной темы. Лучше уж использовать абстрактную тектуру без
излишнего сюжета.
Как выбрать цветовую гамму для дизайна странички или просто цвет фона
Можно просто методом тыка в
палитре фотошопа, можно путем перебора всех возможных вариантов. Есть
психологическая тонкость - при попытке постоянно отыскивать цветосочетания в
своих чувствах и мыслях приводят к повторению одного и того же цвета.
Можно воспользоваться подсказками в палитре какой-нибудь хорошо настроенной
картинки - Gifa, вот например как этой. И даже если мне в ней ничего не
понравилось - это же не последняя моя картинка...
Как сделать текстурный фон без
швов при помощи Photoshop, где найти свободные для употребления БГ - информацию
об этом это вы можете легко найти, используя поисковые системы, и на многих,
подобных моему сайтах. Интересный вариант изготовления bg-tile предлагает
PhotoPaint 8 (ну и 9, надо полагать...) Ну и специализированные программульки (о
которых не могу сказать ничего, потому как никогда не пользовался).
02.10.99 © Виктор Вязьминов (MrDeSign)
|