Рейтинг@Mail.ru

Найти в Google:

Пользовательского поиска

Подбор WEB цвета для страницы сайта. Цветовой круг

сентября 18, 2009

Эта статья написана в продолжение курса создания дизайна страницы сайта в программе Photoshop. Ну в самом деле, как можно было обойти стороной вопрос  подбора web цветов, то есть совместимых цветов для  создаваемого сайта?  Во мы и не обошли...

У профессионального дизайнера подбор web цвета для страницы сайта  — процесс творческий. Основные инструменты профессионального web дизайнера – опыт и интуиция. Это хорошо, когда есть и опыт и интуиция. Хуже, когда нет никакого опыта, а web-страничку надо сделать. И желательно так, чтобы было близко к шедеврам дизайнерского мастерства, или хотя бы, издали их напоминало. Так давайте попробуем немного разобраться в этом вопросе – подборе  web цвета для страницы сайта. Тем более, что подбирать для сайта нужно не просто цвет, а web цвет.
Для начала – теория. Самое элементарное — теория цветов и цветовой круг.  Тем, кто хочет изучить эту проблему "глубжее и ширее " — советую зайти на сайт Color Matters (www.colormatters.com). Итак:

  • Первичными (primary) цветами являются красный, желтый и синий – это общеизвестно.
  • Вторичные (secondary) цвета получают смешиванием одного цвета с другим. Если смешать желтый и красный цвет — получим оранжевый, смешаем красный и синий – получим пурпурный (лиловый), смешаем синий и желтый — получаем зеленый.
  • Есть еще такое понятие третичные (tetriary) цвета. Для получения третичных цветов берется первичный цвет и к нему добавляется вторичный, те, что по-соседству. Из этого получается — по два цвета от каждого первичного цвета — шесть третичных цветов. Вот так:

Подбор WEB цвета для страницы сайта. Цветовой круг

Первичные

Подбор WEB цвета для страницы сайта. Цветовой круг

Вторичные

Подбор WEB цвета для страницы сайта. Цветовой круг

*************************Третичные

Для понятия взаимодействия этих цветов – их располагают по кругу. WEB дизайнеры называют его цветовым кругом и используют,  подбирая web цвета для  сайтов:

Подбор WEB цвета для страницы сайта. Цветовой круг

Ну и как пользоваться цветовым кругом? В теории – очень просто. Поставьте точку на круге, на месте выбранного вами цвета. Цвет, соответствующий выбранному основному, будет находится на равном расстоянии от основного. То есть, если вы в ладах с геометрией, то соединив эти точки, получите равносторонний треугольник. Поворачивая который вокруг оси – подбирают совместимые цвета. А так, как их всегда по три, то такой метод подбора цветов называют триадной схемой:

Подбор WEB цвета для страницы сайта. Цветовой круг

Но это не все. Можно и нужно подбирать цвета расположенные в круге друг против друга, так называемые комплиментарные. Почему они так называются? Распложенные рядом они дополняют друг друга, они друг другу комплиментарны:

Подбор WEB цвета для страницы сайта. Цветовой круг

Подбор WEB цвета для страницы сайта. Цветовой круг

Вот, где-то так, идет процесс подбора web цвета для  страницы сайта при создании ее  дизайна. Рассмотрим более сложные сочетания.

Перейдем на страницу  Более сложные сочетания цветов WEB


Кстати, тоже интересно:
6 комментариев
  1. Саша пишет:

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

  2. Александра пишет:

    Вот нашла такой colorschemedesigner.com/

  3. Сергей Кондулуков пишет:

    Уважаемый Автор. Я глубоко благодарен и признателен Вам за такой замечательный сайт.

    С уважением С.Кондулуков

  4. Velodriver пишет:

    Добавлю еще онлайн сервис по подбору цветовой гаммы сайта в целом: colored.svojsajt.ru Использует довольно интересный алгоритм подбора цветов

  5. benoni пишет:

    colorscheme.ru/ — русский аналог colorschemedesigner.com/

  6. Александр пишет:

    Спасибо Александре за ссылку!

Оставить комментарий

XHTML: Можно использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Карта сайта