Библиотека Интернет Индустрии I2R.ru

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

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