6 классических схем для сочетания цветов на цветовом круге

Ссылки, описания, дополнительная информация для моих уроков на YouTube
Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 2802
Зарегистрирован: 18 мар 2016, 23:20
Откуда: С Ютуба
Благодарил (а): 18 раз
Поблагодарили: 274 раза
Контактная информация:

6 классических схем для сочетания цветов на цветовом круге


Теги:

Сообщение #1 aeplug » 13 май 2016, 01:21

Каждому дизайнеру нужно хотя бы раз ознакомиться с понятием цветового круга - волшебного инструмента для составления красивых и гармонично выглядящих композиций. Давно уже подмечено, что человеческий глаз большинства людей определённые сочетания цветов воспринимает гораздо лучше, чем другие. Результатом исследований в данной области и стал цветовой круг. Зная несколько простых схем и умея пользоваться таким кругом, даже новичок сможет быстро подобрать цвета, которые не вызовут у зрителя противоречивых чувств при просмотре.
Цветовой-круг.jpg
Цветовой-круг.jpg (75.84 КБ) 17369 просмотров
Цветовой-круг.jpg
Цветовой-круг.jpg (75.84 КБ) 17369 просмотров

Вот шесть основных схем цветовых сочетаний, которые вы можете начать использовать уже сейчас:

1. Монохроматические цвета (Monochromatic)
1 Monochromatic.jpg
1 Monochromatic.jpg (43.76 КБ) 17370 просмотров
1 Monochromatic.jpg
1 Monochromatic.jpg (43.76 КБ) 17370 просмотров

Это наверное, самая простая схема. Выбираете любимый цвет и используете любые его оттенки по яркости и насыщенности. На первом месте в таком случае оказывается работа с формой и контрастом, нежели с цветом как таковым.

2. Аналогичные цвета (Analogous Colors)
2 Analogous.jpg
2 Analogous.jpg (49.19 КБ) 17370 просмотров
2 Analogous.jpg
2 Analogous.jpg (49.19 КБ) 17370 просмотров

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

3. Триады (Triads)
3 Triadic.jpg
3 Triadic.jpg (53.74 КБ) 17370 просмотров
3 Triadic.jpg
3 Triadic.jpg (53.74 КБ) 17370 просмотров

Контрастная яркая схема их трех цветов с одинаковым расстоянием между друг другом на круге.

4. Дополняющие цвета (Complementary Colors)
4 Complementary.jpg
4 Complementary.jpg (56.82 КБ) 17370 просмотров
4 Complementary.jpg
4 Complementary.jpg (56.82 КБ) 17370 просмотров

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

5. Расщепленные дополняющие цвета (Split Complementary Colors)
5 Split Complementary.jpg
5 Split Complementary.jpg (61.5 КБ) 17370 просмотров
5 Split Complementary.jpg
5 Split Complementary.jpg (61.5 КБ) 17370 просмотров

Более сложный вариант комплиментарной схемы, где вместо одного из цветов на противоположном конце берутся два по соседству. Более мягкая и разнообразная.

6. Прямоугольная схема (Tetradic Colors)
6 Tetratic.jpg
6 Tetratic.jpg (77.38 КБ) 17370 просмотров
6 Tetratic.jpg
6 Tetratic.jpg (77.38 КБ) 17370 просмотров

Схема, состоящая из двух комплиментарных. Может быть выполнена в виде квадрата (равноудаленные цвета) или прямоугольника. Рекомендуется один цвет выбирать в качестве доминирующего.

Больше информации с примерами вы может найти в этом видео: Мастер-класс "Понимание цвета" Understanding Color
https://www.youtube.com/watch?v=wuCEHnw2N4g
Еще одно полезное видео: Построение композиции
https://www.youtube.com/watch?v=izKlGmEZHAM


Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах

Теги:


Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 2802
Зарегистрирован: 18 мар 2016, 23:20
Откуда: С Ютуба
Благодарил (а): 18 раз
Поблагодарили: 274 раза
Контактная информация:

Полезные онлайн сервисы для работы с цветовыми схемами

Сообщение #2 aeplug » 13 май 2016, 21:34

Несколько инструментов для подбора цветов с использованием цветового круга, которые доступны прямо из вашего браузера.
Цветовой круг | Цветовые схемы - Adobe Color CC
https://color.adobe.com/
Наверное самый известный сервис от компании Adobe с некоторыми элементами интеграции в его облачные сервисы. Ранее был известен под именем Kuler.
Adobe Color.jpg
Adobe Color.jpg (71.6 КБ) 17359 просмотров
Adobe Color.jpg
Adobe Color.jpg (71.6 КБ) 17359 просмотров


ColorScheme.Ru — Цветовой круг он-лайн: Подбор цветов и генерации цветовых схем
http://colorscheme.ru/
Интересный сервис в русском сегменте интернета с множеством настроек, предпросмотром на web странице и неплохими параметрами экспорта.
colorscheme.jpg
colorscheme.jpg (56.09 КБ) 17359 просмотров
colorscheme.jpg
colorscheme.jpg (56.09 КБ) 17359 просмотров


Paletton - The Color Scheme Designer
http://paletton.com/
Просто еще один :)
paletton.jpg
paletton.jpg (47.56 КБ) 17359 просмотров
paletton.jpg
paletton.jpg (47.56 КБ) 17359 просмотров



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

Color Palette Generator: Automagically create a color palette from any photo.
https://bighugelabs.com/colors.php
bighugelabs.jpg
bighugelabs.jpg (40.57 КБ) 17359 просмотров
bighugelabs.jpg
bighugelabs.jpg (40.57 КБ) 17359 просмотров


Create Natural Palettes from Images - Color Palette Generator
http://palettegenerator.com/
palettegenerator.jpg
palettegenerator.jpg (51.33 КБ) 17359 просмотров
palettegenerator.jpg
palettegenerator.jpg (51.33 КБ) 17359 просмотров


Color Palette Generator
http://www.degraeve.com/color-palette/
degraeve.jpg
degraeve.jpg (25.5 КБ) 17359 просмотров
degraeve.jpg
degraeve.jpg (25.5 КБ) 17359 просмотров


Pictaculous - A Color Palette Generator
http://www.pictaculous.com/
pictaculous.jpg
pictaculous.jpg (33.73 КБ) 17359 просмотров
pictaculous.jpg
pictaculous.jpg (33.73 КБ) 17359 просмотров


Color palette generator
https://www.canva.com/color-palette/
Еще один онлайн-генератор палитры на основе загруженного изображения. Перетаскиваете любую фотку — получаете 5 цветов в виде hex-кода.
Color palette generator.jpg
Color palette generator.jpg (58.65 КБ) 12977 просмотров
Color palette generator.jpg
Color palette generator.jpg (58.65 КБ) 12977 просмотров


PALETTE GENERATOR
https://learnui.design/tools/data-color-picker.html
PALETTE GENERATOR.jpg
PALETTE GENERATOR.jpg (17.89 КБ) 11589 просмотров
PALETTE GENERATOR.jpg
PALETTE GENERATOR.jpg (17.89 КБ) 11589 просмотров

Генератор палитр между двумя крайними цветами.

Google Art & Culture Experiment - Art Palette
https://artsexperiments.withgoogle.com/artpalette/
Google Art Palette.jpg
Google Art Palette.jpg (41.26 КБ) 11177 просмотров
Google Art Palette.jpg
Google Art Palette.jpg (41.26 КБ) 11177 просмотров

Еще один сервис от Google, позволяет загружать изображения и показывает похожие по цвету.
Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах

Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 2802
Зарегистрирован: 18 мар 2016, 23:20
Откуда: С Ютуба
Благодарил (а): 18 раз
Поблагодарили: 274 раза
Контактная информация:

Популярные готовые схемы

Сообщение #3 aeplug » 13 май 2016, 21:48

А если совсем не хочется заморачиваться, то на многих подобных сайтах можно ознакомиться с популярными подборками, подготовленными и сохраненными другими дизайнерами. Например вот так это выглядит на сайте Adobe https://color.adobe.com/ru/explore/ Просто выбираете самую приглянувшуюся и используете в своем проекте.
Adobe Color Popular.jpg
Adobe Color Popular.jpg (122.79 КБ) 17354 просмотра
Adobe Color Popular.jpg
Adobe Color Popular.jpg (122.79 КБ) 17354 просмотра

Для After Effects существует специальный скрипт Ray Dynamic Color, который облегчает подбор и работу с цветами. А за счет выражений даже создается возможность их быстро менять во всем проекте за пару щелчком мыши.
Обзор Ray Dynamic Color для After Effects
https://www.youtube.com/watch?v=lahk5dRw8uM
Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах


ddd
Не Нуб
Не Нуб
Сообщения: 33
Зарегистрирован: 06 май 2016, 01:14
Благодарил (а): 7 раз

Re: 6 классических схем для сочетания цветов на цветовом круге

Сообщение #4 ddd » 23 май 2016, 14:35

aeplug писал(а):Источник цитаты Каждому дизайнеру нужно хотя бы раз ознакомиться с понятием цветового круга

Звучит как «Каждому хирургу нужно хотя бы раз ознакомиться с понятием скальпеля». Куда мы катимся…

Вот, обязательно к регулярному чтению, пока наизусть не выучится — Иоханнес Иттен «Искусство цвета».
Лучше брать книгу, там постарались с точностью цветов, а сканы в интернете — уже не то.

А то у нас «дизайнером и фотографом может быть каждый». :o ;)

Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 2802
Зарегистрирован: 18 мар 2016, 23:20
Откуда: С Ютуба
Благодарил (а): 18 раз
Поблагодарили: 274 раза
Контактная информация:

Полезные ссылочки

Сообщение #5 aeplug » 31 май 2016, 08:49

Крутая шпаргалка по сочетанию цветов
http://infogra.ru/design/krutaya-shparg ... yu-tsvetov
Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах


Вернуться в «Мои уроки»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей