Рейтинг@Mail.ru
сентября 18, 2009 | Author: VeryOldCat

Эта статья написана в продолжение курса создания дизайна страницы сайта в программе 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

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

Фотошоп с нуля в видеоформате

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

Изучайте прямо сейчас!

3 комментария
  1. Саша пишет:

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

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

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

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

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

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

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

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="">