Цветовые контрасты
Виды контрастов: по светлоте, теплоте, насыщенности и цвету. Пример работы над цветовой палитрой.
Цвет влияет на визуальный вес объектов. Цветом можно расставить акценты, уравновесить элементы в композиции и поддержать название продукта или акции по смыслу.
В зависимости от цвета элементы дизайна имеют разный визуальный вес. Контрастный к фону объект имеет больший вес, чем такой же по размеру, но менее контрастный. Сплошное цветовое пятно тяжелее текстового блока, который является просто набором штрихов. Если подобрать цвета неправильно, композиция может развалиться и акцент попадёт не на тот элемент.
Нет
Между плашкой и фоном контраст выше, чем между заголовком и фоном, плашка тяжелее текста. Плашка перевешивает, композиция ломается.
Да
Плашка всё ещё тяжелее текста, но теперь контраст между заголовком и фоном выше. Модуль уравновешен, акценты на своих местах.
Разные виды контрастов создают разное впечатление.
Виды контраста
Есть несколько видов контраста: по светлоте, температуре, насыщенности и цвету.
Контраст по светлоте — контраст светлого и тёмного. На картинках ниже заголовок написан темно-коричневым по почти белому фону. Самый большой контраст по светлоте у ахроматических цветов: белого и чёрного.
Контраст по температуре — контраст тёплого и холодного. Он есть в макете с «Морской линейкой» между фоном и продуктом. При этом, из-за привычной нам воздушной перспективы, холодный фон кажется отступающим вглубь, а теплые оранжево-желто-красные тона пиццы выдвигают её вперед.
Контраст по насыщенности или контраст цветового насыщения — контраст между насыщенным и приглушенным, блеклым. На макете с денвичем между насыщенным оранжевым фоном и названием разбеленно оранжевого цвета как раз такой контраст.
Контраст по цвету — контраст между разными цветовыми тонами. Самый большой контраст по цвету у трёх первичных цветов в их предельной насыщенности: красного, жёлтого и синего.
Этот контраст очень напряжённый и может быть избыточен для рекламы пищевых продуктов. На картинке ниже такой контраст у красного фона и зелёных плашек. Чаще мы используем чистые вторичные цвета, например оранжевый и фиолетовый.
У этого сочетания одновременно есть ещё и контраст тёплого и холодного, поэтому контраст получается очень сильным, подходит для акционных макетов.
Работа над цветовой палитрой макета
В макете с продуктом часть палитры определена заранее — это цвета самого продукта — желтый и красный разной степени светлоты и насыщенности. Они — отправная точка для подбора подходящей цветовой гаммы.
В процессе подбора референсов появляются синий и белый. Бело-голубая скатерть и тёмное дерево — узнаваемый образ баварской кухни.
Тон дерева получаем из уже имеющихся в палитре цветов — это тёмный красный. Рифмуем синий на скатерти синей рубашкой модели.
Получившаяся цветовая палитра уже гармонична, не будем добавлять в неё другие хроматические цвета, только чёрный. Плашка «Новинка» красная, а весь текст — разбеленный желтый.
При составлении цветовой палитры важно учитывать, что некоторые цвета не могут быть напечатаны, это виртуальные, экранные цвета. Особого внимания требует сине-зелёная часть спектра.
Читать далее: