Три ошибки при работе с цветом и как их исправить

Когда цветовая палитра подобрана верно, проект манит к себе, как конфетка. Им можно любоваться день напролёт. Его даже хочется погладить.

Но если выбран неподходящий цвет — всё не так. Сочетание цветов напрягает, и вам сложно смотреть на изображение, не морщась. Глаз не обманешь — без исправлений не обойтись.

Труднее всего, когда никак не понять, что именно нужно изменить. Это обескураживает. Вот несколько способов, которые помогут не попасть в тупик — или выбраться, если вы уже там.

Как избежать проблем с цветом

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

Спросите себя:
1. Какова дизайнерская цель проекта?

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

2. Как цвет поможет выразить то, что я хочу?

Чего вы хотите добиться в плане эстетики? Цвет — неотъемлемая часть дизайна, а не просто финальный штрих. Чтобы получить то, что нужно, понадобятся время, эксперименты и даже исследования.

Создайте «доску стилей» (stylescapes)(Также её называют «доска настроения», мудборд (mood board) и «доска вдохновения» (inspiration board). — Пер.) Она поможет определить визуальный язык и цветовую палитру проекта. Сделать такую несложно в Pinterest. Покажите её клиенту. Убедитесь, что вы одного мнения о визуальном стиле и цветовом решении, — в будущем это поможет избежать бесконечных изменений и правок.

3. Какие чувства я хочу вызвать?

Это, пожалуй, самое важное. Цвет призван будить чувства. Он может вселять доверие или вызывать трепет и удивление. Цвет — сильная штука. Применяйте его с умом.

Если фирменных цветов недостаточно

Когда вы ограничены цветами бренда, то должны заставить их работать. Часто в клиентском брендбуке указаны дополнительные цвета, их тоже можно брать. Например, на картинке ниже я использовала жёлтый, чтобы уравновесить палитру.

Но что делать, если ошибки уже допущены? Попробуем починить цветовую палитру.

Исправляем ошибки

Ошибка первая, слишком много цветов

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

Как это выглядит?

Посмотрите на картинку:

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

Как исправить: сократить число цветов

Тогда как исходное изображение содержало десять цветов, в новом я оставила всего пять. Цветов стало меньше, и место прежних заняли вариации одного цветового тона — в нашем случае зелёного:

Исходный вариант vs. Итоговый вариант

Ошибка вторая, цвета перенасыщены

От одного взгляда на изображение начинают болеть глаза? Может, насыщенность цветов высоковата?

Например, проверим цвет № 7 (см. картинку с номерами). В палитре Photoshop видно, что он лежит в области неоновых цветов (neon land). Лучше не выбирать подобные цвета: они слишком яркие и интенсивные.

Выбирайте цвета из области, которую я обозначила оранжевым (на рисунке ниже). Их насыщенность не слишком высокая.

Начните с этих цветов. Поиграйтесь с ними, поэкспериментируйте, постепенно добавляя другие. Осторожнее с цветами у верхнего края палитры. Возьмёте много таких — и получите почти неоновый эффект. Они чрезмерно яркие и насыщенные, поэтому их сочетания могут напрягать глаза.

Как это работает на практике

Вернёмся к картинкам из первого примера. Я уменьшила там не только число цветов, но и насыщенность:

Исходный вариант vs. Итоговый вариант

На картинку справа смотреть приятнее, потому что большинство цветов на ней менее интенсивные.

Ниже, на палитре выбора цвета (Color picker) видно, что эти цвета попадают в безопасную область, которую мы описали ранее. Они больше не приходятся на неоновый край.

Ошибка третья, не хватает контраста

Контраст — ещё один виновник проблем, на которого не сразу подумаешь. В предыдущей статье я объяснила, как быстро понять, оптимален ли он. Обычно контраста недостаточно, если вы сочетаете близкие по яркости цвета.

Как это выглядит?

Вновь обратимся к исходной картинке. Чтобы проверить контрастность, обесцветим изображение — так легче увидеть проблему. Вот что получилось:

Перед нами тусклая и плоская картинка, границы объектов почти сливаются друг с другом — тонального контраста действительно не хватает. Теперь очевидно, что выбранные цвета имеют близкую яркость.

Как это исправить

На правой картинке я не только избавилась от проблемных цветов, но и поработала с контрастом.

Для проверки обесцветим и её. Сравним чёрно-белые варианты исходного и исправленного изображения:

Заметно, что тоновая контрастность улучшилась. Почему? Во-первых, я добавила ахроматический белый. Во-вторых, выбрала варианты монохроматического1 зелёного, достаточно разные по яркости.

В-третьих, я размещала контрастные цвета рядом или друг на друге. Например, красный и жёлтый на синем, зелёный — на красном. Это усилило цветовой контраст.

Источник:

Skillbox

Оригинальна статья
Добавить комментарий
Вам также может понравиться
Читать

Рисунок — это иллюстрация? А фото? Объясняем, что такое иллюстрация

Что такое иллюстрация? Слово «иллюстрация» произошло от латинского «ilustratio» («наглядное изображение»), поэтому мы привыкли называть так любое изображение, которое сопровождает или поясняет текст. Это определение хорошо…