On-Line Библиотека www.XServer.ru - учебники, книги, статьи, документация, нормативная литература.
       Главная         В избранное         Контакты        Карта сайта   
    Навигация XServer.ru








 

Backgrounds (фоны)

Виктор Вязьминов (MrDeSign)

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

Начнем с самого простого. Кодовые фоны, получаемые при помощи 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, надо полагать...) Ну и специализированные программульки (о которых не могу сказать ничего, потому как никогда не пользовался).



Графика и дизайн: общие темы