Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн

Статьи о дизайне   Портфолио дизайнера
Дизайн Форум


Про дизайн и web дизайн




Главная     Форум     Галереи




  Статьи о дизайне





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

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


Другие статьи Виктора Вязьминова о дизайне, цвете и композиции:
Стиль на веб сайте
Создание логотипов
Физиологические основы восприятия
Психология восприятия пространства
Цвет и тон в среде
Как работать с цветом
Беседы о тоне и цвете
Тон и цвет в рекламе
Модульная сетка
Основные средства и принципы композиции
Акценты в композиции
Модульные сетки в веб-дизайне
Web дизайн таблиц
Композиционные схемы
Backgrounds (фоны)







Электронные книги о дизайнеЧМ 2018Гламурные картинкиГраффити галереяЯпония фотографииО путешествиях и странах, дешевые авиабилеты и отелиДизайн форум



    Rambler's Top100     Яндекс.Метрика  


Web дизайн и создание сайтов


Карта сайта       Наверх