Введение
При отсутствии большого количества цвета или графики каждый сайт станет сайтом мечты Джекоба Нильсена (http://www.useit.com/). Хотя философия Нильсена об упрощенной архитектуре Web имеет определенные достоинства с точки зрения доступности и юзабилити, большинство дизайнеров Web хотят добавить сайтам авторское своеобразие с помощью различных элементов дизайна. К счастью дизайнер может добавить на сайт цвет, не теряя доступность и юзабилити, если сайт создается с учетом этих возможностей. Хотя многие дизайнеры чувствуют себя вполне спокойно при проектировании сайта для множества пользователей, эти же самые дизайнеры могут чувствовать себя неуверенно, когда речь идет о выборе цвета и графики.
В этой лекции рассмотрены основы цвета и три простые цветовые схемы, чтобы вы не испытывали затруднений при выборе цвета для сайта. Эта лекция будет продолжена еще одной публикацией о том, как упростить этот выбор цветов. В конце концов, приятнее получать комплименты по поводу дизайна Web-сайта, чем корпеть над выбором цвета. Лекция имеет следующее содержание:
Цвет, оттенки, и тениМонохроматические цветовые схемы
Дополнительные цветовые схемы
Теплые и холодные цвета
Триадические цветовые схемы
Тетрадические цветовые схемы
Заключение
Контрольные вопросы
Цвет, оттенки, и тени
Цвет, или тон, исторически делится на первичные, вторичные, и третичные цвета. Первичными цветами называют красный, желтый и синий цвета, так как для получения трех этих цветов не требуется смешивать другие цвета. Если требуется перевести эти цвета в цвета Web, то можно воссоздать их с помощью шестнадцатеричных эквивалентов #ff0000, #ffff00, и #0033cc, как показано на рисунке 8.1:
(рис 8.1) Первичные и вторичные цвета, и их шестнадцатеричные эквивалентыВторичные цвета смешиваются из первичных цветов следующим образом:
Красный + Желтый = Оранжевый ( #ff9900 )
Желтый + Синий = Зеленый ( #00cc00 )
Синий + Красный = Фиолетовый ( #660099 )
Третичные цвета смешиваются из вторичных цветов, и они находятся между первичными и вторичными цветами, показанными на цветовом круге выше. Хотя цвета Web отличаются от обычных цветов "художников", может быть полезно держать под рукой цветовой круг (http://colorwheelco.com/) (как показано на рисунке 8.2) во время изучения различных цветовых схем. Кроме того, цветовой круг покажет все оттенки, тональности и тени, так что вы начнете понимать имеющиеся цветовые возможности. В дальнейшем будем придерживаться следующей терминологии:
Оттенок (Tint) - Результат смешивания цвета с белым цветом
Тональность (Tone) - Результат смешивания цвета с серым цветом
Тень (Shade) - Результат смешивания цвета с черным цветом
(рис 8.2) Реальный цветовой кругСтрелки на рисунке 8.2 показывают примеры этих понятий следующим образом:
Самая внешняя полоса - третичный желто-оранжевый цвет (желтый + оранжевый)
Вторая полоса - оттенок третичного цвет а (добавлен белый)
Третья полоса - тональность цвета (добавлен серый)
Самая внутренняя полоса - тень на цветовом круге (добавлен черный)
Как можно видеть на показанном выше цветовом круге, количество добавленного к цвету белого, серого и черного минимально — только чтобы изменить исходный цвет и создать так называемую монохроматическую цветовую схему.
Монохроматические цветовые схемы
Цветовые схемы существуют уже очень давно, поэтому нет необходимости заново изобретать цветовой круг. Хотя цвета Web отличаются от цветов печати, принципы остаются такими же. Вы просто заменяете шестнадцатеричные числа названиями цветов, и выбираете ближайший цвет. Одним из инструментов в сети для этого является Color Scheme Generator II (http://www.colorschemedesigner.com/), показанный на рисунке 8.3, который позволяет быстро и легко определять цветовые схемы, и даже определить, обеспечивают ли выбранные цвета достаточную контрастность для слабовидящих или не различающих цвета пользователей.
(рис 8.3) Color Scheme Generator IIЕсли требуется дополнительная помощь, чтобы определить, что выбранные цвета обеспечивают достаточно хороший контраст, попробуйте использовать инструмент Contrast Analyser (http://www.paciellogroup.com/resources/contrast-analyser.html) компании Paciello Group. Этот инструмент определяет контраст между цветами фона и переднего плана.
Чтобы получить оттенок, тональность и тень для желто-оранжевого цвета в сетевом генераторе цветов, выберите сначала цвет, на который указывает стрелка на рисунке выше. Затем выберите Mono на панели, расположенной ниже цветового круга, и Default на панели в поле справа. Выберите также Normal Vision в раскрывающемся меню внизу справа. Не ставьте флажок "reduce to 'safe' colours" ("сократить до 'безопасных' цветов ") над полем цвета, если не являетесь пуристом.
) появился в то время, когда мониторы компьютеров могли выводить только 216 цветов. Эти 216 цветов должны были выглядеть одинаково на различных компьютерных платформах и браузерах, которые содержала 256-цветная (8-битная) компьютерная система, поэтому они были названы безопасными для использования на различных платформах. Хотя некоторые пуристы по-прежнему настаивают на "палитре безопасных цветов Web", современные браузеры способны работать с так называемых "32-битным" цветом. Реальный 32-битный цвет с десятью или
одиннадцатью битами на канал создает 4,294,967,296 различных цветов. Другими словами, вполне безопасно сказать, что палитра "безопасных цветов Web" может понадобиться крайне редко.
Вернемся назад к монохроматической цветовой схеме. Результаты, которые должны получиться при выполнении описанных выше действий, будут следующие: желто-оранжевый цвет ( #FFCC00 ), оттенок ( #FFF2BF ), тональность ( #FFE680 ), и тень ( #B38F00 ). Эти шестнадцатеричные числа значительно более надежны, чем любые предположения, которые можно было бы сделать при попытке совместить реальный цветовой круг с окном Web-браузера. И как предполагает "Mono", эта схема преобразуется в монохроматическую цветовую схему, показанную на рисунке 8.4.
(рис 8.4) Монохроматическая цветовая схемаМонохроматическая цветовая схема соответствует одному цвету и всем его оттенкам, тональностям и теням. Хотя эта схема самая простая для использования, она не вызывает большого энтузиазма при проектировании Web у многих дизайнеров. Вместо этого вы можете захотеть исследовать другие схемы, чтобы сделать более привлекательными ссылки, изображения, и баннеры.
Дополнительные цветовые схемы
Следующим рассматриваемым семейством цветовых схем являются дополнительные схемы, где вы подбираете цвета, которые расположены друг против друга на цветовом круге, как показано на рисунке 8.5.
(рис 8.5) Примеры дополнительных цветовых схемПри выборе одного цвета и его противоположного, используют также все оттенки, тональности и тени обоих цветов. Это обеспечивает более широкий диапазон выбора, и хорошо преобразуется с помощью сетевого инструмента цветов - см. рисунок 8.6.
(рис 8.6) Дополнительная цветовая схема в сетевом инструменте цветовНа изображении выше был выбран оранжевый цвет с противоположным дополнительным синим цветом. Для получения этой схемы выбраны следующие настройки: параметр Contrast внизу слева, значение по умолчанию ( default ) в меню ниже генератора, и нормальное зрение ( normal vision ). Обратите внимание, что основной выбранный цвет помечен черной точкой на внутреннем диске цветового круга, а противоположный, дополнительный цвет, который был выбран автоматически, помечен окружностью на внутреннем ободке. Эти пометки облегчают анализ цветовой схемы.
Этот генератор цветов облегчает выбор цветов для ссылок, посещенных ссылок, и даже изображений, так как предоставляет шестнадцатеричные значения цветов вверху справа. Можно смешивать и подбирать любые чистые цвета ( цвет вверху) и его оттенок, тональность и тень и радоваться выбору отличной цветовой схемы.
(рис 8.7) Сайт Гринпис - хороший пример дополнительной цветовой схемыСайт организации Гринпис, США (http://www.greenpeace.org/usa/) (см. рисунок 8.7) является одним из многих сайтов, которые используют контрастную цветовую схему. Да, вы видите желтые и оранжевые цвета, но доминирующими цветами являются зеленый и красный — два цвета, которые являются прямо противоположными друг другу на цветовом круге. Вы почти никогда не проиграете с этим методом дополнительных цветов. Фактически, использование цветовой комбинации "теплого" и "холодного" заставляет сайт сверкать цветовым контрастом.
Теплые и холодные цвета
Дополнительные цветовые схемы хорошо подходят для использования на Web-сайтах, так как они содержат также теплые и холодные цвета. Использование этих цветов обеспечивает контраст, и можно легко запомнить, какие цвета являются "теплыми", а какие цвета являются "холодными", как можно видеть на рисунке 8.8 (и на сайте генератора цветов ):
(рис 8.8) Теплые и холодные цветаТеплыми являются те цвета, которые будут напоминать вам о лете, солнце или огне. Они составляют цвета от фиолетовых до желтых. Холодные цвета могут напоминать весну, лед, или воду. Эти цвета простираются от желто-зеленого и до фиолетового. Если вы заметили, как цвета работают на круге, то скоро обнаружите, что не можете выбирать один цвет, не выбрав его противоположный по "температуре". Поэтому при выборе горячего красного цвета, противоположным будет холодный зеленый. Или, если вы выбираете холодный сине-зеленый, вы закончите острым красно-оранжевым на другой стороне.
Одним из примеров сайта, который согласованно использует цветовую комбинацию теплый/холодный, является сайт Ecolution (http://www.ecolution.com/), как показано на рисунке 8.9.
(рис 8.9) Ecolution - хороший пример теплых/холодных цветовEcolution обычно использует красный в качестве акцентирующего цвета на своей домашней странице, как контраст своему зеленому логотипу. Затем они смешивают два контрастных цвета с различными оттенками, тональностями и тенями двух этих цветов. Даже "черные цвета " на изображении могут склоняться к "теплому" или "холодному", так же как и белые цвета. В целом, фотография будет "теплой", что хорошо сочетается с совершенно чистым зеленым цветом. Хотя они используют те же самые цвета, что и Greenpeace, сайт Ecolution выглядит менее "слепящим", используя более насыщенные тональности и тени на фотографии.
Вы никогда не предполагали, что теория цвета такая простая, не правда ли? Ну, тогда давайте немного усложним вопрос …
Триадические цветовые схемы
Триадическая цветовая схема (см. рисунок 8.10) создается при выборе одного цвета и добавлении затем двух других цветов, которые должны лежать на одинаковом расстоянии друг от друга на цветовом круге, следующим образом:
(рис 8.10) Триадическая цветовая схемаДля этой схемы были выбраны основные цвета, так как я хочу показать, как цветовые схемы содержат, видимо, путь к помешательству. Совершенно не случайно, что основные цвета располагаются именно так на цветовом круге, так как каждый цвет содержит равное количество вторичных и третичных цветов между каждыми основными. Но триадическая схема из первичных цветов может показаться устаревшей, так как использовалась слишком часто. Вместо этого можно попробовать некоторый другой выбор цветов в сетевом генераторе цветов, что-нибудь вроде того, что показано на рисунке 8.11:
(рис 8.11) Альтернативная триадическая цветовая схемаПриведенная выше триадическая схема создана из оранжево-желтого, сине-зеленого, и красно-фиолетового цветов. Сначала я выбрал оранжево-желтый цвет (обратите внимание на темную точку во внутреннем разделе цветового круга слева), а затем выбрал пункт Triad, расположенный под кругом. Генератор автоматически выбирает триадические цвета, включая все оттенки, тональности и тени. Сопутствующие цвета помечены на цветовом круге маленькими окружностями, также как сопутствующий цвет был помечен в монохроматическом примере.
Теперь именно здесь может оказаться удобно использовать реальный цветовой круг, так как сетевые результаты не вполне совпадают с результатами переносного цветового круга. Однако когда я смещаю инструмент Angle/Distance под цветовым кругом к значению "max", то кажется что результаты совпадают с цветовым кругом, который находится в руках. Показанные выше результаты ближе всего подходят к результатам цветового круга.
Триадическая цветовая схема содержит также теплые и холодные цвета, но одна температура будет преобладать. Обычно, температура, которая будет преобладать над другими, выбирается для переднего плана. В данном случае в начале был выбран оранжево-желтый цвет, который является теплым цветом. Показанные выше теплые цвета будут в результате преобладать, с одним из двух других цветов представляющим холодный контраст.
(рис 8.12) Puzzle Pirates - Хорошая триадическая цветовая схемаСайт Puzzle Pirates (http://www.puzzlepirates.com/), показанный на рисунке 8.12, использует триадическую схему на своей домашней странице. Они используют основную красно-сине-желтую схему, и эта основная схема отлично подходит для сайта детской игры. Отметим, что синий цвет является преобладающим, и что красные и желтые цвета используются как акценты и направляют движение глаз по странице.
Тетрадические цветовые схемы
Чем больше цветов выбирается, тем более сложной будет цветовая схема. Однако один из приемов состоит в выборе оттенка, тональности или тени и придерживаться этих областей повсеместно, а не смешивать чистые цвета и их оттенки, тональности и тени. Этот метод хорошо работает с четырехцветной тетрадической схемой. Эта схема (см. рисунок 8.13) похожа на дополнительную схему, только используется две пары дополнительных цветов, расположенных на равном расстоянии друг от друга.
(рис 8.13) Тетрадические цветовые схемыРисунок 8.14 показывает, как тетрадическая схема создается в сети:
(рис 8.14) Тетрадическая цветовая схема в сетевом цветовом генератореОбратите внимание на черную точку под красным цветом на цветовом круге слева. Это был первый выбранный цвет, затем я щелкнула на кнопке Tetrad ниже цветового круга. Появившиеся четыре цвета снова были немного смещены относительно переносного цветового круга, но после смещения инструмента Angle/Distance ниже цветового круга к значению "max" они кажутся совпадающими с цветовым кругом, который находится в руках. Показанные выше результаты в наилучшей степени соответствуют цветовому кругу.
Эта цветовая схема может стать достаточно сложной, поэтому в этом месте можно выбрать все четыре оттенка или тональности или тени из цветов в столбце справа. Выбор можно сделать, щелкая на стрелках по правому краю. Например, рисунок 8.15 показывает пример заливки блока оттенками этой цветовой схемы:
(рис 8.15) Тетрадические оттенкиА рисунок 8.16 показывает пример средних тональностей:
(рис 8.16) Тетрадические средние тональностиЕсли внимательно посмотреть на показанные выше прямоугольники, то можно увидеть, что генератор предоставляет также четыре монохромные цветовые схемы. Эти схемы показаны как в столбце справа, так и в каждом прямоугольнике, вложенном в большой прямоугольник.
(рис 8.17) Сайт Jane Goodall Institute - хороший пример тетрадической цветовой схемыСайт Jane Goodall Institute (рисунок 8.17) является одним из немногих сайтов, которые действительно хорошо реализовали тетрадическую цветовую схему. Обратите внимание на пурпурный цвет, желтую тональность, красные отблески на фотографии (сайт содержит еще красный цвет далее вниз на странице), и зеленые цвета. Пурпурный не совсем точно соответствует цветовой схеме, сгенерированной сетевым инструментом цветов — он склоняется в сторону красно-фиолетового — но он достаточно близок для использования в качестве примера того, как можно использовать цветовой круг и сетевой генератор цветов для создания некоторых идей цветового оформления сайта.
Теперь, когда вы перемещаетесь в Web в поисках цветовых и дизайнерских идей, держите свой цветовой круг под рукой, чтобы лучше понять, как дизайнеры используют цветовые схемы на посещаемых вами Web-сайтах!
Заключение
Хотя комбинации цветов могут казаться сложными, все цветовые схемы подчиняются определенным "правилам". Эти рекомендации облегчат понимание, как взаимодействуют цвета, чтобы сделать Web-сайт интереснее и контрастнее.
Цветовой круг существует для того, чтобы люди его использовали. Цветовой круг и инструменты, подобные сетевому Color Generator, делают выбор цвета простым даже для неопытного дизайнера.
В этой лекции были рассмотрены четыре цветовые схемы: монохромная, дополнительная, триадическая и тетрадическая. Хотя существуют и другие цветовые схемы, эти четыре схемы являются самыми простыми для понимания и реализации.
Контрольные упражнения
Примечание: два последних вопроса не имеют "правильного" или "неправильного" ответа.
Назовите три основных цвета, и объясните, почему они называются основными цветами.
Назовите три вторичных цвета и основные цвета, использованные для создания этих вторичных цветов.
Опишите как создают оттенок, тональность, и тень.
Что такое монохроматическая цветовая схема?
Что такое дополнительная цветовая схема?
Опишите "теплые" и "холодные" цвета.
Что такое триадическая цветовая схема? Можете вы выбрать три цвета, которые будут соответствовать этой схеме?
Что такое тетрадическая цветовая схема? Можете вы выбрать четыре цвета, которые будут соответствовать этой схеме?
Какая цветовая схема кажется самой простой для использования?
Какая цветовая схема кажется самой сложной?
Об авторе
Линда Гоин получила степень бакалавра (BFA) в области визуальной коммуникации со специализацией в бизнесе и маркетинге, и степень MA по Американской истории со специализацией по Реформации. Хотя последняя степень кажется не соответствующей первому полученному образованию, Линда использует свой 25-летний опыт дизайна на сайтах, посвященных археологическим раскопкам и изучению материальной культуры.
Похвальные отзывы о ее работе включают пятнадцать первых премий Colorado Press Association, многочисленные премии по изящным искусствам и графическому дизайну, и интервью о разработке контента в The Wall St. Journal, Chicago Tribune, Psychology Today, и L.A. Times. Линда является автором нескольких е-книг по Web-дизайну, доступности и — как побочная линия — пишет также персональные финансовые статьи и пишет для некоторых SEO pros.
Материалы этого курса имеют лицензию
Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Введение
При отсутствии большого количества цвета или графики каждый сайт станет сайтом мечты Джекоба Нильсена (http://www.useit.com/). Хотя философия Нильсена об упрощенной архитектуре Web имеет определенные достоинства с точки зрения доступности и юзабилити, большинство дизайнеров Web хотят добавить сайтам авторское своеобразие с помощью различных элементов дизайна. К счастью дизайнер может добавить на сайт цвет, не теряя доступность и юзабилити, если сайт создается с учетом этих возможностей. Хотя многие дизайнеры чувствуют себя вполне спокойно при проектировании сайта для множества пользователей, эти же самые дизайнеры могут чувствовать себя неуверенно, когда речь идет о выборе цвета и графики.
В этой лекции рассмотрены основы цвета и три простые цветовые схемы, чтобы вы не испытывали затруднений при выборе цвета для сайта. Эта лекция будет продолжена еще одной публикацией о том, как упростить этот выбор цветов. В конце концов, приятнее получать комплименты по поводу дизайна Web-сайта, чем корпеть над выбором цвета. Лекция имеет следующее содержание:
Цвет, оттенки, и тениМонохроматические цветовые схемы
Дополнительные цветовые схемы
Теплые и холодные цвета
Триадические цветовые схемы
Тетрадические цветовые схемы
Заключение
Контрольные вопросы
Цвет, оттенки, и тени
Цвет, или тон, исторически делится на первичные, вторичные, и третичные цвета. Первичными цветами называют красный, желтый и синий цвета, так как для получения трех этих цветов не требуется смешивать другие цвета. Если требуется перевести эти цвета в цвета Web, то можно воссоздать их с помощью шестнадцатеричных эквивалентов #ff0000, #ffff00, и #0033cc, как показано на рисунке 8.1:
(рис 8.1) Первичные и вторичные цвета, и их шестнадцатеричные эквивалентыВторичные цвета смешиваются из первичных цветов следующим образом:
Красный + Желтый = Оранжевый ( #ff9900 )
Желтый + Синий = Зеленый ( #00cc00 )
Синий + Красный = Фиолетовый ( #660099 )
Третичные цвета смешиваются из вторичных цветов, и они находятся между первичными и вторичными цветами, показанными на цветовом круге выше. Хотя цвета Web отличаются от обычных цветов "художников", может быть полезно держать под рукой цветовой круг (http://colorwheelco.com/) (как показано на рисунке 8.2) во время изучения различных цветовых схем. Кроме того, цветовой круг покажет все оттенки, тональности и тени, так что вы начнете понимать имеющиеся цветовые возможности. В дальнейшем будем придерживаться следующей терминологии:
Оттенок (Tint) - Результат смешивания цвета с белым цветом
Тональность (Tone) - Результат смешивания цвета с серым цветом
Тень (Shade) - Результат смешивания цвета с черным цветом
(рис 8.2) Реальный цветовой кругСтрелки на рисунке 8.2 показывают примеры этих понятий следующим образом:
Самая внешняя полоса - третичный желто-оранжевый цвет (желтый + оранжевый)
Вторая полоса - оттенок третичного цвет а (добавлен белый)
Третья полоса - тональность цвета (добавлен серый)
Самая внутренняя полоса - тень на цветовом круге (добавлен черный)
Как можно видеть на показанном выше цветовом круге, количество добавленного к цвету белого, серого и черного минимально — только чтобы изменить исходный цвет и создать так называемую монохроматическую цветовую схему.
Монохроматические цветовые схемы
Цветовые схемы существуют уже очень давно, поэтому нет необходимости заново изобретать цветовой круг. Хотя цвета Web отличаются от цветов печати, принципы остаются такими же. Вы просто заменяете шестнадцатеричные числа названиями цветов, и выбираете ближайший цвет. Одним из инструментов в сети для этого является Color Scheme Generator II (http://www.colorschemedesigner.com/), показанный на рисунке 8.3, который позволяет быстро и легко определять цветовые схемы, и даже определить, обеспечивают ли выбранные цвета достаточную контрастность для слабовидящих или не различающих цвета пользователей.
(рис 8.3) Color Scheme Generator IIЕсли требуется дополнительная помощь, чтобы определить, что выбранные цвета обеспечивают достаточно хороший контраст, попробуйте использовать инструмент Contrast Analyser (http://www.paciellogroup.com/resources/contrast-analyser.html) компании Paciello Group. Этот инструмент определяет контраст между цветами фона и переднего плана.
Чтобы получить оттенок, тональность и тень для желто-оранжевого цвета в сетевом генераторе цветов, выберите сначала цвет, на который указывает стрелка на рисунке выше. Затем выберите Mono на панели, расположенной ниже цветового круга, и Default на панели в поле справа. Выберите также Normal Vision в раскрывающемся меню внизу справа. Не ставьте флажок "reduce to 'safe' colours" ("сократить до 'безопасных' цветов ") над полем цвета, если не являетесь пуристом.
) появился в то время, когда мониторы компьютеров могли выводить только 216 цветов. Эти 216 цветов должны были выглядеть одинаково на различных компьютерных платформах и браузерах, которые содержала 256-цветная (8-битная) компьютерная система, поэтому они были названы безопасными для использования на различных платформах. Хотя некоторые пуристы по-прежнему настаивают на "палитре безопасных цветов Web", современные браузеры способны работать с так называемых "32-битным" цветом. Реальный 32-битный цвет с десятью или
одиннадцатью битами на канал создает 4,294,967,296 различных цветов. Другими словами, вполне безопасно сказать, что палитра "безопасных цветов Web" может понадобиться крайне редко.
Вернемся назад к монохроматической цветовой схеме. Результаты, которые должны получиться при выполнении описанных выше действий, будут следующие: желто-оранжевый цвет ( #FFCC00 ), оттенок ( #FFF2BF ), тональность ( #FFE680 ), и тень ( #B38F00 ). Эти шестнадцатеричные числа значительно более надежны, чем любые предположения, которые можно было бы сделать при попытке совместить реальный цветовой круг с окном Web-браузера. И как предполагает "Mono", эта схема преобразуется в монохроматическую цветовую схему, показанную на рисунке 8.4.
(рис 8.4) Монохроматическая цветовая схемаМонохроматическая цветовая схема соответствует одному цвету и всем его оттенкам, тональностям и теням. Хотя эта схема самая простая для использования, она не вызывает большого энтузиазма при проектировании Web у многих дизайнеров. Вместо этого вы можете захотеть исследовать другие схемы, чтобы сделать более привлекательными ссылки, изображения, и баннеры.
Дополнительные цветовые схемы
Следующим рассматриваемым семейством цветовых схем являются дополнительные схемы, где вы подбираете цвета, которые расположены друг против друга на цветовом круге, как показано на рисунке 8.5.
(рис 8.5) Примеры дополнительных цветовых схемПри выборе одного цвета и его противоположного, используют также все оттенки, тональности и тени обоих цветов. Это обеспечивает более широкий диапазон выбора, и хорошо преобразуется с помощью сетевого инструмента цветов - см. рисунок 8.6.
(рис 8.6) Дополнительная цветовая схема в сетевом инструменте цветовНа изображении выше был выбран оранжевый цвет с противоположным дополнительным синим цветом. Для получения этой схемы выбраны следующие настройки: параметр Contrast внизу слева, значение по умолчанию ( default ) в меню ниже генератора, и нормальное зрение ( normal vision ). Обратите внимание, что основной выбранный цвет помечен черной точкой на внутреннем диске цветового круга, а противоположный, дополнительный цвет, который был выбран автоматически, помечен окружностью на внутреннем ободке. Эти пометки облегчают анализ цветовой схемы.
Этот генератор цветов облегчает выбор цветов для ссылок, посещенных ссылок, и даже изображений, так как предоставляет шестнадцатеричные значения цветов вверху справа. Можно смешивать и подбирать любые чистые цвета ( цвет вверху) и его оттенок, тональность и тень и радоваться выбору отличной цветовой схемы.
(рис 8.7) Сайт Гринпис - хороший пример дополнительной цветовой схемыСайт организации Гринпис, США (http://www.greenpeace.org/usa/) (см. рисунок 8.7) является одним из многих сайтов, которые используют контрастную цветовую схему. Да, вы видите желтые и оранжевые цвета, но доминирующими цветами являются зеленый и красный — два цвета, которые являются прямо противоположными друг другу на цветовом круге. Вы почти никогда не проиграете с этим методом дополнительных цветов. Фактически, использование цветовой комбинации "теплого" и "холодного" заставляет сайт сверкать цветовым контрастом.
Теплые и холодные цвета
Дополнительные цветовые схемы хорошо подходят для использования на Web-сайтах, так как они содержат также теплые и холодные цвета. Использование этих цветов обеспечивает контраст, и можно легко запомнить, какие цвета являются "теплыми", а какие цвета являются "холодными", как можно видеть на рисунке 8.8 (и на сайте генератора цветов ):
(рис 8.8) Теплые и холодные цветаТеплыми являются те цвета, которые будут напоминать вам о лете, солнце или огне. Они составляют цвета от фиолетовых до желтых. Холодные цвета могут напоминать весну, лед, или воду. Эти цвета простираются от желто-зеленого и до фиолетового. Если вы заметили, как цвета работают на круге, то скоро обнаружите, что не можете выбирать один цвет, не выбрав его противоположный по "температуре". Поэтому при выборе горячего красного цвета, противоположным будет холодный зеленый. Или, если вы выбираете холодный сине-зеленый, вы закончите острым красно-оранжевым на другой стороне.
Одним из примеров сайта, который согласованно использует цветовую комбинацию теплый/холодный, является сайт Ecolution (http://www.ecolution.com/), как показано на рисунке 8.9.
(рис 8.9) Ecolution - хороший пример теплых/холодных цветовEcolution обычно использует красный в качестве акцентирующего цвета на своей домашней странице, как контраст своему зеленому логотипу. Затем они смешивают два контрастных цвета с различными оттенками, тональностями и тенями двух этих цветов. Даже "черные цвета " на изображении могут склоняться к "теплому" или "холодному", так же как и белые цвета. В целом, фотография будет "теплой", что хорошо сочетается с совершенно чистым зеленым цветом. Хотя они используют те же самые цвета, что и Greenpeace, сайт Ecolution выглядит менее "слепящим", используя более насыщенные тональности и тени на фотографии.
Вы никогда не предполагали, что теория цвета такая простая, не правда ли? Ну, тогда давайте немного усложним вопрос …
Триадические цветовые схемы
Триадическая цветовая схема (см. рисунок 8.10) создается при выборе одного цвета и добавлении затем двух других цветов, которые должны лежать на одинаковом расстоянии друг от друга на цветовом круге, следующим образом:
(рис 8.10) Триадическая цветовая схемаДля этой схемы были выбраны основные цвета, так как я хочу показать, как цветовые схемы содержат, видимо, путь к помешательству. Совершенно не случайно, что основные цвета располагаются именно так на цветовом круге, так как каждый цвет содержит равное количество вторичных и третичных цветов между каждыми основными. Но триадическая схема из первичных цветов может показаться устаревшей, так как использовалась слишком часто. Вместо этого можно попробовать некоторый другой выбор цветов в сетевом генераторе цветов, что-нибудь вроде того, что показано на рисунке 8.11:
(рис 8.11) Альтернативная триадическая цветовая схемаПриведенная выше триадическая схема создана из оранжево-желтого, сине-зеленого, и красно-фиолетового цветов. Сначала я выбрал оранжево-желтый цвет (обратите внимание на темную точку во внутреннем разделе цветового круга слева), а затем выбрал пункт Triad, расположенный под кругом. Генератор автоматически выбирает триадические цвета, включая все оттенки, тональности и тени. Сопутствующие цвета помечены на цветовом круге маленькими окружностями, также как сопутствующий цвет был помечен в монохроматическом примере.
Теперь именно здесь может оказаться удобно использовать реальный цветовой круг, так как сетевые результаты не вполне совпадают с результатами переносного цветового круга. Однако когда я смещаю инструмент Angle/Distance под цветовым кругом к значению "max", то кажется что результаты совпадают с цветовым кругом, который находится в руках. Показанные выше результаты ближе всего подходят к результатам цветового круга.
Триадическая цветовая схема содержит также теплые и холодные цвета, но одна температура будет преобладать. Обычно, температура, которая будет преобладать над другими, выбирается для переднего плана. В данном случае в начале был выбран оранжево-желтый цвет, который является теплым цветом. Показанные выше теплые цвета будут в результате преобладать, с одним из двух других цветов представляющим холодный контраст.
(рис 8.12) Puzzle Pirates - Хорошая триадическая цветовая схемаСайт Puzzle Pirates (http://www.puzzlepirates.com/), показанный на рисунке 8.12, использует триадическую схему на своей домашней странице. Они используют основную красно-сине-желтую схему, и эта основная схема отлично подходит для сайта детской игры. Отметим, что синий цвет является преобладающим, и что красные и желтые цвета используются как акценты и направляют движение глаз по странице.
Тетрадические цветовые схемы
Чем больше цветов выбирается, тем более сложной будет цветовая схема. Однако один из приемов состоит в выборе оттенка, тональности или тени и придерживаться этих областей повсеместно, а не смешивать чистые цвета и их оттенки, тональности и тени. Этот метод хорошо работает с четырехцветной тетрадической схемой. Эта схема (см. рисунок 8.13) похожа на дополнительную схему, только используется две пары дополнительных цветов, расположенных на равном расстоянии друг от друга.
(рис 8.13) Тетрадические цветовые схемыРисунок 8.14 показывает, как тетрадическая схема создается в сети:
(рис 8.14) Тетрадическая цветовая схема в сетевом цветовом генератореОбратите внимание на черную точку под красным цветом на цветовом круге слева. Это был первый выбранный цвет, затем я щелкнула на кнопке Tetrad ниже цветового круга. Появившиеся четыре цвета снова были немного смещены относительно переносного цветового круга, но после смещения инструмента Angle/Distance ниже цветового круга к значению "max" они кажутся совпадающими с цветовым кругом, который находится в руках. Показанные выше результаты в наилучшей степени соответствуют цветовому кругу.
Эта цветовая схема может стать достаточно сложной, поэтому в этом месте можно выбрать все четыре оттенка или тональности или тени из цветов в столбце справа. Выбор можно сделать, щелкая на стрелках по правому краю. Например, рисунок 8.15 показывает пример заливки блока оттенками этой цветовой схемы:
(рис 8.15) Тетрадические оттенкиА рисунок 8.16 показывает пример средних тональностей:
(рис 8.16) Тетрадические средние тональностиЕсли внимательно посмотреть на показанные выше прямоугольники, то можно увидеть, что генератор предоставляет также четыре монохромные цветовые схемы. Эти схемы показаны как в столбце справа, так и в каждом прямоугольнике, вложенном в большой прямоугольник.
(рис 8.17) Сайт Jane Goodall Institute - хороший пример тетрадической цветовой схемыСайт Jane Goodall Institute (рисунок 8.17) является одним из немногих сайтов, которые действительно хорошо реализовали тетрадическую цветовую схему. Обратите внимание на пурпурный цвет, желтую тональность, красные отблески на фотографии (сайт содержит еще красный цвет далее вниз на странице), и зеленые цвета. Пурпурный не совсем точно соответствует цветовой схеме, сгенерированной сетевым инструментом цветов — он склоняется в сторону красно-фиолетового — но он достаточно близок для использования в качестве примера того, как можно использовать цветовой круг и сетевой генератор цветов для создания некоторых идей цветового оформления сайта.
Теперь, когда вы перемещаетесь в Web в поисках цветовых и дизайнерских идей, держите свой цветовой круг под рукой, чтобы лучше понять, как дизайнеры используют цветовые схемы на посещаемых вами Web-сайтах!
Заключение
Хотя комбинации цветов могут казаться сложными, все цветовые схемы подчиняются определенным "правилам". Эти рекомендации облегчат понимание, как взаимодействуют цвета, чтобы сделать Web-сайт интереснее и контрастнее.
Цветовой круг существует для того, чтобы люди его использовали. Цветовой круг и инструменты, подобные сетевому Color Generator, делают выбор цвета простым даже для неопытного дизайнера.
В этой лекции были рассмотрены четыре цветовые схемы: монохромная, дополнительная, триадическая и тетрадическая. Хотя существуют и другие цветовые схемы, эти четыре схемы являются самыми простыми для понимания и реализации.
Контрольные упражнения
Примечание: два последних вопроса не имеют "правильного" или "неправильного" ответа.
Назовите три основных цвета, и объясните, почему они называются основными цветами.
Назовите три вторичных цвета и основные цвета, использованные для создания этих вторичных цветов.
Опишите как создают оттенок, тональность, и тень.
Что такое монохроматическая цветовая схема?
Что такое дополнительная цветовая схема?
Опишите "теплые" и "холодные" цвета.
Что такое триадическая цветовая схема? Можете вы выбрать три цвета, которые будут соответствовать этой схеме?
Что такое тетрадическая цветовая схема? Можете вы выбрать четыре цвета, которые будут соответствовать этой схеме?
Какая цветовая схема кажется самой простой для использования?
Какая цветовая схема кажется самой сложной?
Об авторе
Линда Гоин получила степень бакалавра (BFA) в области визуальной коммуникации со специализацией в бизнесе и маркетинге, и степень MA по Американской истории со специализацией по Реформации. Хотя последняя степень кажется не соответствующей первому полученному образованию, Линда использует свой 25-летний опыт дизайна на сайтах, посвященных археологическим раскопкам и изучению материальной культуры.
Похвальные отзывы о ее работе включают пятнадцать первых премий Colorado Press Association, многочисленные премии по изящным искусствам и графическому дизайну, и интервью о разработке контента в The Wall St. Journal, Chicago Tribune, Psychology Today, и L.A. Times. Линда является автором нескольких е-книг по Web-дизайну, доступности и — как побочная линия — пишет также персональные финансовые статьи и пишет для некоторых SEO pros.
Материалы этого курса имеют лицензию
Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
