Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный
Лекция 8:

Теория цвета

< Лекция 7 || Лекция 8: 123 || Лекция 9 >
Аннотация: Рассмотрены основы цвета и три простые цветовые схемы, помогающие при выборе цвета для сайта. В последующих материалах будет рассказано, как упростить этот выбор цветов

Введение

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

Color Scheme Generator II

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

Примечание. Термин "безопасные цвета Web" (http://www.lynda.com/hex.asp) появился в то время, когда мониторы компьютеров могли выводить только 216 цветов. Эти 216 цветов должны были выглядеть одинаково на различных компьютерных платформах и браузерах, которые содержала 256-цветная (8-битная) компьютерная система, поэтому они были названы безопасными для использования на различных платформах. Хотя некоторые пуристы по-прежнему настаивают на "палитре безопасных цветов Web", современные браузеры способны работать с так называемых "32-битным" цветом. Реальный 32-битный цвет с десятью или одиннадцатью битами на канал создает 4,294,967,296 различных цветов. Другими словами, вполне безопасно сказать, что палитра "безопасных цветов Web" может понадобиться крайне редко.

Вернемся назад к монохроматической цветовой схеме. Результаты, которые должны получиться при выполнении описанных выше действий, будут следующие: желто-оранжевый цвет ( #FFCC00 ), оттенок ( #FFF2BF ), тональность ( #FFE680 ), и тень ( #B38F00 ). Эти шестнадцатеричные числа значительно более надежны, чем любые предположения, которые можно было бы сделать при попытке совместить реальный цветовой круг с окном Web-браузера. И как предполагает "Mono", эта схема преобразуется в монохроматическую цветовую схему, показанную на рисунке 8.4.

Монохроматическая цветовая схема

Рис. 8.4. Монохроматическая цветовая схема

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

< Лекция 7 || Лекция 8: 123 || Лекция 9 >
Марина Походаева
Марина Походаева

Помогите мне. Я ничего не понимаю в курсе ((((((   (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!!

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Данила Некрасов
Данила Некрасов
Россия, Пермь, ПНИПУ
Сергей Федоров
Сергей Федоров
Россия