Рецепты HTML

Добрый день.
Расширил статью посвященную выбору гармоничных цветов. Добавились разделы посвященные цветовому кругу, модели HSB и выбору трех и более цветов. Целиком статья не приводится, поскольку все остальное можно посмотреть в предыдущих рассылках; ниже опубликованы только новые разделы статьи.
Полностью статью можно посмотреть по адресу http://www.htmlbook.ru/design/selectcolor.shtml

Подбор гармоничных цветов

При создании сайтов важно уметь правильно подбирать цвета различных элементов веб-страницы, чтобы они смотрелись цельно и гармонично. Ниже представлена методика определения гармоничных цветов с использованием программы Adobe Photoshop и цветовой модели HSB.

Цветовой круг

Если спектр свернуть в виде трубки, то полученная фигура будет носить название цветовой круг (рис. 1). С помощью цветовго круга удобно подбирать цвета и манипулировать ими. Круг имеет два основных параметра - оттенок и насыщенность. Оттенок измеряется в градусах, как это ни звучит странно. Ноль и триста шестьдесят градусов соответствует красному цвету, от него и идет отсчет. Насыщенность обозначает видимую яркость, или интенсивность цвета.

Рис. 1. Цветовой круг. А - оттенок; Б - насыщенность; В - яркость; Г - оттенок

Более удобней описать особенности цветового круга с помощью окружности, поделенной на шесть равных сегментов (рис. 2).

Рис. 2. Цветовой круг, применяемый в дизайне

Цвета красный, зеленый и синий называются основными. Желтый, голубой и пурпурный - дополнительными или комплиментарными цветами. Вообще-то, правильней использовать английские названия цветов, поскольку в русском языке нет аналогов для описания нужных цветов. Поэтому, по общему соглашению, цвет, который скорее напоминает фиолетовый, принято называть пурпурным.
С цветовым кругом, представленным на рис. 2, связаны следующие особенности:

- цвета расположенные напротив друг друга являются контрастными. При их смешивании получается белый цвет;
- любой цвет можно получить смешиванием близлежащих к нему цветов. Так, желтый цвет получается при сложении красного и зеленого.

Цветовая модель HSB

Основанная на представлении цвета человеком, модель HSB описывает цвет тремя основными характеристиками (рис. 1):

Оттенок (Hue). Оттенком называют лучи света, отраженные от объекта или прошедшим сквозь него. На цветовом круге выражается в градусах от 0° до 360°.

Насыщенность (Saturation). Обозначает видимую яркость, или интенсивность цвета. Насыщенность определяет количество серого цвета в оттенке, измеряется в процентах от 0% (серый) до 100% (полная насыщенность). На цветовом круге показано параметром Б (рис. 1), увеличиваясь от центра круга к краям.

Яркость (Brightness). Зависит в основном от количества световых лучей, отраженных поверхностью данного цвета, что равно его яркости по отношению к другим цветам при данном освещении. Обычно измеряется в процентах от 0% (черный) до 100% (белый).

С помощью Photoshop можно изменять цвет, варьируя значениями этих параметров.

Подбор трех цветов

Подбор трех и более цветов проводится аналогично двум, при этом оттенки на цветовом круге размещаются на одинаковом расстоянии друг от друга. То есть весь цветовой круг необходимо разбить на три равных сегмента (рис. 9).

Рис. 9. Гармоничные цвета расположены на цветовом круге на одинаковом расстоянии друг от друга

Рассмотрим на примере.

1. Первый цвет выбираем самостоятельно, пусть это будет темно-синий #000080 (240, 100, 50 в HSB).

2. Оттенок следующего цвета должен отстоять от первого на 120 градусов. Последнее число получилось путем деления 360° на три, поскольку оттенки, которые, как мы помним, измеряются в градусах, должны отстоять друг от друга на одинаковый угол.

3. Отнимаем от значения HUE нашего синего цвета число 120. Остальные параметры оставляем неизменными. Получаем новый цвет со значениями 120, 100, 50.

4. Еще раз отнимаем 120 у значения HUE, но уже у нового цвета. Получится 0, 100, 50.

5. В итоге имеем следующие цвета.

Как видно из таблицы, изменением всего лишь одного параметра HUE, мы получаем набор хорошо сочетаемых между собой цветов.

Если необходимо выбрать четыре и более цвета, точно также мы разбиваем цветовой круг, но уже на столько частей, сколько цветов следует подобрать.

Заключение

1. Цветовая модель HSB легка и проста для понимания, так как базируется на хорошо представляемом цветовом круге.
2. С помощью цветового круга легко управлять оттенками и подбирать наборы гармоничных цветов.
3. Для выбора цветов можно использовать любую графическую программу, а не только Photoshop, поддерживающую модель HSB.

Horse XXI Russia - российское представительство Системы Бронирования Отелей Horse XXI (www.horse21.net) предоставляет пользователям Интернет уникальную возможность - бронировать тысячи отелей по всему миру в реальном режиме времени прямо с сайта.
Предлагаются 2 способа участия в партнерской программе Horse21:

1. Партнер размещает любые из предлагаемых баннеров Horse21 на своем сайте, баннерной сети, в рассылке и т.д. Клиент заходит с сайта партнера на www.horse21.ru и бронирует гостиницу. Вы получаете 4 EUR за каждое реализованное бронирование. Автоматическая регистрация участников находится здесь: http://affiliation.horse21.ru. Размер комиссионного вознаграждения обсуждается.

2. Партнер размещает у себя формы бронирования отелей Horse21. Подробнее о формах бронирования:
a. гибко настраиваются под интерфейс и стили сайта партнера.
b. реализованы на фреймовой технологии, что позволяет клиентам пользоваться услугами по бронированию, не покидая сайта партнера.
c. настройка под интерфейс партнерского сайта и демонстрационные версии партнерского сайта с установленной формой бронирования - предоставляются абсолютно бесплатно.

В этом способе сотрудничества сочетается возможность партнеров удачно расширить сферу услуг, предоставляемых сайтом пользователям, а также возможность самого партнера заработать. Комиссионные ставки, по формам бронирования могут достигать 4% от суммы, уплаченной клиентом в отеле. Время компиляции индивидуального фрейма бронирования для каждого ресурса колеблется в пределах нескольких часов.

Среди партнеров Horse21 - www.lycos.ru, www.kontorakuka.ru, www.fly.ru, и другие уважаемые ресурсы. За более подробной информацией и с предложениями, пожалуйста, обращайтесь pr@horse21.net. Страница партнерской программы Horse21 - http://affiliation.horse21.ru.