Теория цвета: Как подобрать гармоничную комбинацию цветов для Web-сайта
 

  Кабинет пользователя  
   Обработка фото    Обработка видео  Скачать   Купить   Учебник   Поддержка   О Компании  
en  fr  de  es  pt  it  jp  ru  
 

Статьи

Теория цвета:
Как подобрать гармоничную комбинацию цветов для Web-сайта

 

Learning to Use Color on Your Web Site
автор: 2000, Element K Content LLC и Ron Wilder
перевод: n|a

От редактора: Наконец-то мы подошли к самому вкусному. В данной статье описывается простой процесс подбора гармоничных сочетаний цветов. А что, как не гармоничное сочетание цветов, важно для создания приятного, радующего глаз Web-узла?
Маленькое замечание: в качестве первичных цветов по художеской традиции упоминаются красный, синий, желтый. Но мы-то с вами знаем, что первичными цветами на самом деле являются красный, зеленый, синий.

 

В жизни мы часто встречаем людей, которые запросто делают вещи, непостижимые для других. Например, кто-то может овладеть игрой на музыкальном инструменте за несколько дней, а другому приходится на это тратить целую жизнь. Мы едва справляемся с правилами родного языка, а кто-то может свободно говорить на нескольких иностранных. Кто-то прикоснувшись к электрощиту, способен ударить током всех окружающих, а кто-то решает проблему одной левой. Часто встречается мнение, что чувство цвета - нечто врожденное, и этому невозможно научиться. Но на самом деле, при наличии соответствующих инструментов, а также пережив несколько "ударов электротоком", даже дальтоник может научиться подбирать цветовые схемы, которые будут радовать глаз. Так что для всех вас, уважаемые читатели-дальтоники, а также для всех тех, кто бросил посещать занятия в изостудиях, когда узнал, что там не будет нагих моделей, мы публикуем статью о том, как выбирать цвета так же хорошо, как это делает профессионал, опираясь на базовые знания о цвете.

 

Это синий

Во-первых, давайте разберемся в терминологии, чтобы убедиться, что вы не потеряете нить рассуждений в процессе чтения статьи. Все мы знаем, что первичными (primary) цветами являются красный, желтый и синий. Для того, чтобы получить вторичные (secondary) цвета, мы смешиваем один цвет с другим. Желтый и красный дают нам оранжевый, красный и синий - пурпурный/лиловый, а синий и желтый - зеленый. А что такое третичные (tetriary) цвета? Просто берется первичный цвет и к нему добавляется соседний вторичный. Это означает, что существует шесть третичных цветов (по два цвета от каждого первичного цвета). Рис. А демонстрирует все описанные цвета во всей их красоте.

Три типа цветов
Рис. А.: для того, чтобы научиться подбирать великолепные цветовые схемы,
для начала нужно знать о трех типах цветов.

Для того, чтобы полностью понять, как эти цвета взаимодействуют друг с другом, лучше всего расположить их по кругу. Такая организация, показанная на рис. В, в мире дизайна называется цветовым кругом. Красиво, не правда ли? Но что действительно впечатляет, это как данный круг будет помогать вам выбирать цвета для вашего Web-сайта.

Цветовой круг
Рис. В.: собрав воедино первичные, вторичные и третичные цвета, мы получаем цветовой круг.

 

Подбор цветов с помощью цветового круга

Самый простой способ подбора цветов в цветовом круге - представить себе над кругом равнобедренный треугольник. Цвета, которые окажутся под вершинами - потенциальные кандидаты на использование. (Для тех, кто проспал урок геометрии и черчения, поясняю, вершинами являются точки, где сходятся отрезки, образующие стороны треугольника). Этот тип подбора цветов называется "триадной схемой". Взгляните на рис. С. У нас получаются четыре различных триадных схемы, с которыми уже можно работать. Суть заключается в том, что эти цвета, работая вместе, образуют гармоничную комбинацию цветов.

Четыре возможные триады на цветовом круге
Рис. С: на цветовом круге существует четыре возможных триады цветов

Но триадами не стоит ограничиваться. Можно выбрать и комплиментарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга - например, красный и зеленый. Они называются комплиментарными/дополняющими потому, что, будучи помещенными рядом, они делают друг друга ярче и живее, см. рис. D.

Комплиментарные (дополняющие) цвета
Рис. D.: цвета, противоположные друг другу на круге, называются комплиментарными/дополняющими

 

Различные варианты

На этом этапе мы уже можем приступить к более сложным комбинациям. Например, можно взять две пары комплиментарных цветов, что называется "двойной комплемент" (double complement). Скажем, желтый и пурпурный/лиловый, синий и оранжевый. Другой схемой является альтернативный комплемент (alternate complement), когда комбинируется триада цветов с цветом, комплиментарным одному из цветов триады. Зеленый, красно-пурпурный, красный и оранжевый - пример такой комбинации. Также существует "расщепленный комплемент" (split complement), когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.

И наконец, вы наверное слышали о тетраде: когда берутся четыре цвета, которые расположены прямо напротив друг друга. Т.е. выбираются 1 первичный, 1 вторичный и два третичных цвета. На рис. Е. Показаны примеры вышеперечисленных схем.

Цветовые схемы
Рис. Е.: эти схемы вдохнут жизнь в любой Web-сайт

 

Все семейство

Итак, мы перебрали все возможные комбинации контрастирующих цветов. Теперь обратимся к двум типам схем, где используются родственные цвета - монохроматической (monochromatic) и сходственной (analogous). Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании эта схема может придать Web-сайту аккуратный, чистый вид. Сходственная схема цветов, с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге. Как можно судить по рисунку F. сходственная схема весьма похожа на монохроматическую.

Сходственная схема
Рис. F.: сходственная схема очень напоминает монохроматическую

 

Итак, все вместе

Теперь, когда мы вывалили вам на голову столько комбинаций цветов, считаем своим долгом дать несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. Вам по-прежнему придется кое-что поменять в цветах (насыщенность или яркость), чтобы они "ужились". Приведенные здесь схемы - лишь отправная точка, а не вершина мастерства. Ведь, в конечном счете, решающим фактором будет читаемость текста на Web-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция "слои", и сравнить различные варианты схем, переключаясь между ними. Например, на рис. G, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.

Комбинации цветов
Рис. G.: не всякая комбинация годится в дело

 

Заключение

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

 

Подробнее!

Теории цвета можно посвятить множество выпусков, но мы опасаемся жалоб со стороны тех, кто ее уже знает. Если вы хотите научиться большему, посетите Web-сайт Color Matters (www.colormatters.com) *. Этот сайт охватывает такие темы, как цвет и Web, цвет и изобразительное искусство, цвет и наука, и даже цвет и еда (непременно почитайте статью о синих спагетти!)

 

Источник: www.webmascon.com

 

_____________

* Статьи ресурса Color Matters (www.colormatters.com) доступны на нашем сайте в английском разделе Articles.

 

 
Введение Введение
Как выбрать камеру Как выбрать камеру
   — С чего начать — С чего начать
   — Объективно об объективе — Объективно об объективе
   — Камера по размеру — Камера по размеру
   — Мой любимый цвет — Мой любимый цвет
   — Память на фото — Память на фото
   — Компьютер на шнурке — Компьютер на шнурке
   — Про питание — Про питание
   — Чем сложней, тем проще — Чем сложней, тем проще
Сканирование - это просто Сканирование - это просто
   — Оригиналы для сканирования — Оригиналы для сканирования
   — Алгоритм сканирования — Алгоритм сканирования
   — Цветокоррекция и цветовые модели — Цветокоррекция и цветовые модели
   — Методы цветокоррекции — Методы цветокоррекции
   — Цветокоррекция в Lab — Цветокоррекция в Lab
   — Фильтрация и техническая ретушь — Фильтрация и техническая ретушь
   — Система управления цветом — Система управления цветом
Цветокоррекция с Adjustment Layers Цветокоррекция с Adjustment Layers
Исправление ошибок экспозиции Исправление ошибок экспозиции
Теория цвета Теория цвета
   — О цвете с самого начала — О цвете с самого начала
   — Новая модель цифрового цвета — Новая модель цифрового цвета
   — Музей цветовых моделей — Музей цветовых моделей
   — Словарь теории цвета — Словарь теории цвета
   — Более подробный словарь — Более подробный словарь
   — Гармоничное сочетание цветов — Гармоничное сочетание цветов
Обработка цифровых фотографий Обработка цифровых фотографий
   — Основы ретуши и цифровой шум — Основы ретуши и цифровой шум
   — Проблемы ракурса и экспозиции — Проблемы ракурса и экспозиции
   — Эффект красных глаз — Эффект красных глаз
Советы начинающим фотографам Советы начинающим фотографам
Железные правила плохого фотоснимка Железные правила плохого фотоснимка
Цифровая фотоазбука Цифровая фотоазбука
   — Съемка в разных условиях — Съемка в разных условиях
   — Конечная обработка фотографий — Конечная обработка фотографий
   — Хранение фотографий — Хранение фотографий
   — Постоянная практика — Постоянная практика
История фотографии История фотографии
   — Как все начиналось… — Как все начиналось…
   — Снимки Ньепса — Снимки Ньепса
   — Снимки Толбота — Снимки Толбота
   — Снимки Дагера — Снимки Дагера
   — Фотография в России — Фотография в России
   — Дальнейшее развитие фотографии — Дальнейшее развитие фотографии
История создания Photoshop История создания Photoshop
Как работать с уровнями в Photoshop Как работать с уровнями в Photoshop
   — Гистограмма — Гистограмма
   — Цветная гистограмма — Цветная гистограмма
   — Логарифмичность — Логарифмичность
   — Уровни — Уровни
   — Уровни и контраст — Уровни и контраст
   — Выходные уровни — Выходные уровни
   — Цветные уровни — Цветные уровни
   — Авто-уровни — Авто-уровни
   — Уровни в черно-белых фото — Уровни в черно-белых фото
   — Уровни при сканировании — Уровни при сканировании
   — Уровни в CMYK — Уровни в CMYK
   — Уровни и арифметическая яркость — Уровни и арифметическая яркость
   — Кривые — Кривые
Маска цветовой насыщенности Маска цветовой насыщенности
Новогодние кисти в Photoshop Новогодние кисти в Photoshop

 

 

в начало страницы

 

  English  | Français  | Deutsch  | Español  | Português(Br)  | Italiano  | 日本語  | Pусский  |
Facebook | Twitter | YouTube | Forum
© 2004-2017 Компания "АКВИС". Все права защищены. 
Политика безопасности