Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>30 сен 2019</li>

3 <li>0</li>

4 </ul><h2>Три ошибки при работе с цветом и как их исправить</h2>

5 Что делать, если с цветом что-то пошло не так. Смотрим на примерах с картинками.

6 vlada_maestro / shutterstock

7 Переводит, пишет, редактирует. Любит живую речь, уважает букву Ё. Формализм мастдай.

8 Сара Хили(Sarah Healy)

9 об авторе

10 Дизайнер, рассказчик и неутомимый искатель приключений.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

42 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>