Цветовые переходы: Методы построения гибкой цветовой палитры для вашей дизайн-системы

Методы построения гибкой цветовой палитры для вашей дизайн-системы

Дисклеймер: в данной статье будут использоваться следующие термины и их переводы:

color palette — «цветовая палитра»;  color theme — «цветовая тема»; практически то же, что и color ramp — «схема цветовых переходов», «схема переходов» и иногда просто «схема».

Если вам покажется, что перевод можно улучшить — пишите на [email protected], поговорим.

Mineral UI  это open source дизайн-система, которая создается компанией CA Technologies и будет использоваться во всех наших продуктах. Цвет — это центральный строительный блок любой дизайн-системы; кроме того, именно цвет оказался одной из самых сложных проблем в дизайне, с которыми мы когда-либо сталкивались, в особенности из-за большого количества требований к себе:

• Mineral предназначена для последовательного моделирования, и схемы цветовых переходов

  (color ramps) в ней можно заменять в любое время. Значения в схеме перехода (но не значения отдельных цветов) применяются к каждому элементу интерфейса. Например, цвет синий-60 должен восприниматься таким же по контрастности как красный-60 или бирюзовый-60.
  

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

• Цвет используется, чтобы показать статус. Множество продуктов компании CA Technologies используется чтобы описать и/или сообщить о различных статусах — ошибках, развитии истории, доступности маршрутизатора и т.д. Цвет — это важный инструмент для моментальной передачи значения, поэтому у нас есть несколько вариантов UI-компонентов, которые служат основополагающими концепциями в нашей системе. Эти цветные элементы интерфейса должны гармонично сочетаться со всеми нашими цветовыми схемами.

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

Новые схемы цветовых переходов (color ramps), описанные в этой статье, используются на сайте mineral-ui.com. Если вам хочется попробовать их у себя — взгляните на наши дизайн ассеты.

mineral-ui.com

Mineral UI это open source дизайн-система, построенная на библиотеке React, и созданная для разработки привлекательных продуктов. Это апогей совместной работы дизайнеров и разработчиков, который предоставляет командам возможность быстрее реализовывать высококачественные продукты.

Ретроспективный обзор

Одна из самых первых вещей, о которых мы подумали, создавая дизайн-систему, — это создание цветовой палитры (color palette), ведь она имеет столь важное значение в принятии решений в области дизайна и разработки. Мы постоянно учимся — и часто видим очевидные ошибки уже оглядываясь назад. Наше желание развиваться подтолкнуло нас исследовать то, как другие команды принимают решения — и только потом принимать свои собственные.

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

Взято из Plasma Design System. Основные элементы, такие как цвет, сложно поменять позже.

Анализируя цветовые схемы во время ревизии, мы определили, что наша цветовая палитра должна содержать следующие характеристики:

• Темы: они обеспечивают последовательные ощущения и внешний вид во всех продуктах, избавляя от необходимости работать наугад.
  

• Тематическая гармония: в каждой цветовой теме должно быть одно значение тона.
  

• Четкие контрольные точки цвета (hue breakpoints): у нас многие продукты продаются модулями или наборами, поэтому цвета должны быть настолько похожи, чтобы восприниматься как цветовая «семья», но в то же время достаточно ясно давать понять юзеру, что есть разные модули в рамках одной семьи.
  

• Маштабирование и дополняемость: цветовая палитра должна иметь систематический паттерн, которую можно расширять по мере роста потребностей дизайн-системы.
  

• Никаких фундаментальных перемен: развиваясь, мы хотели, чтобы наша цветовая система работала в любой ситуации, поэтому мы отказались от каких-либо критических изменений в дизайнах, которые на данный момент используются в Mineral.

• Доступность: наша цель — чувствовать уверенность в том, что каждый получает положительный опыт, используя наш продукт. Mineral поддерживает средний уровень цветового контраста (АА). Визуальное представление текста должно осуществляться с коэффициентом контрастности 4,5:1 в каждом из компонентов пользовательского интерфейса.

Исследование

Мы провели глубокий анализ других тематических цветовых палитр, использующих схемы цветовых переходов —  исследовали палитры IBM Design, Material Design и Open-Color. (Заметка: Если вам интересно изучение других дизайн-систем, можно начать с Adele от UXPin). Цель исследования заключалась не в том, чтобы скопипастить их идеи, а скорее в том, чтобы «заглянуть за кулисы» и понять, каким образом принимаются решения по выбору того или иного цвета.

В процессе исследования мы фокусировались на следующем:

• Тон (Hue): Используется ли в каждой цветовой палитре одно значение тона? Или же значение тона меняется в пределах одной схемы цветовых переходов?

• Паттерн: подчиняется ли выбор значений какому-либо правилу? Если такое правило существует, применимо ли оно для других палитр?
  

• Насыщенность и яркость (светлота): Как работают насыщенность и яркость, когда каждое значение уменьшается или увеличивается в пределах схемы цветовых переходов?

RGB, HSB, HSL, или HEX?

Работа с моделями цветового пространства — это сложная тема, заслуживающая отдельной статьи. Но вкратце, вот, что важно: в этих примерах я работаю с моделью HSB (Hue, Saturation, Brightness — тон, насыщенность, яркость), потому что этот подборщик цветов — один из самых удобных для пользователя, он идеально подходит для изучения  и настройки цвета. Тем не менее, HSB (360 × 100 × 100 = 3 600 000 цветов) может выразить только около 21,5% цветового пространства модели RGB (256 × 256 × 256 = 16 777 216 цветов).

HSB — хороший инструмент для изучения цвета, но чтобы избежать проблем с рендерингом между различными интерпретаторами (браузерами, программным обеспечением для проектирования, дисплеями и т. д.), окончательное определение цвета наиболее точно записывается как значения в RGB или HEX. Еще одно важное замечание: HSL и HSB — это две разные модели, имеющие разные принципы, и их не следует путать. Примеры в этой статье приведены в HSB.

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

IBM Design

Цветовая палитра IBM использует весь спектр насыщенности и яркости, но было сложно определить единое правило, которому бы подчинялись разные схемы цветовых переходов. Возьмем Зеленый (см. ниже) — у IBM широко сдвигается значение тона между 78 и 120, — может быть сложно последовательно воспроизвести и управлять такими значениями при работе с другими цветами. В IBM явно ценят доступность, потому что коэффициент контрастности они раз за разом ставят на 4,5:1 или выше, когда значение равно 50 или выше.

https://www.ibm.com/design/language/resources/color-library

Material Design

Значения в Material Design быстро изменяют свое направление на графике, когда  значение достигает 500. У некоторых цветов могут быть проблемы с доступностью, потому что некоторые базовые цвета оказываются ярче, чем цвета на других позициях в палитре. Конечно, проблема может быть решена путем изменения цвета текста при переключении тем (например, использовать черный цвет текста вместо белого), но наша цель — найти решение, с которым всегда будет хорошо работать один определённый цвет текста.

https://material.io/guidelines/style/color.html#color-color-palette

 

Open Color

Палитры Open Color построены на отточенных кривых. Посмотрите на расположение цвета на сетке HSB: кажется, что эту кривую намеренно строили такой аккуратной. Корректный выбор цветов отражает современные тренды веб-дизайна. Коэффициент контрастности несколько ниже, поэтому эти палитры не совсем помогут нам сделать продукты компании доступными по умолчанию.

https://yeun.github.io/open-color/

 

Анализ

• С IBM можно использовать цвет и не волноваться о доступности, потому что каждую схему цветовых переходов можно последовательно применить к разнообразным продуктам.

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

Дизайн цветовой палитры

Система тем в Mineral содержит серую схему (она используется во многих темах) и ещё несколько тематических схем. Когда мы говорим о «цветовой палитре», мы имеем в виду тематические схемы.

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

Как определить смену в теме за три простых шага

1. Базовый цвет: базовый цвет — доминирующий цвет в темах; это тот цвет, который будет использоваться в основном в элементах интерфейса. Тема-60 всегда является базовым цветом для светлых шаблонов (белый текст на цвете темы), а тема-50 — базовым цветом для темных шаблонов тем (черный текст на цвете темы). Коэффициент контрастности этих двух цветов всегда 4,5:1 или выше.
2. Цвета рядом с базовыми: эти цвета будут использованы в ховерах, активных и фокусных состояниях базового цвета в элементах действия, таких как кнопки, ссылки и элементы форм.
3. Начальные и конечные цвета: эти цвета чаще всего используются как акцентные фоновые цвета, либо для добавления визуальной массы элементу интерфейса, как в светлых, так и в тёмных темах. Например, тема-10 (светлая) или тема-100 (темная) могут использоваться в качестве фона для выбранных элементов в выпадающем меню или в строке таблицы.

Метод для создания первой версии палитры

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

Мы начали с выбора базового цвета. Это решение может быть весьма произвольным, хотя мы целенаправленно искали цвета высокой насыщенности с коэффициентом контрастности 4,5:1 или выше. Здесь мы еще думали, что у нас не будет темной темы, и что цвет текста будет меняться через код с черного на белый и обратно в зависимости от контрастности.

В то же время мы выбрали конечные точки схемы переходов — цвета со светлыми (тема-10) и темными (тема-100) значениями. Светлые цвета имеют яркость от 90 до 100, а темные цвета — от 20 до 30. Палитры цветов темы-10 значительно менее насыщены, чем цвета темы-100.

После определения этих ключевых значений (10, 60, 100), основные цвета каждой темы стали очевидными.

Примечание: сравните цвета первой версии с цветами второй.

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

• Лимонный цвет исчез, потому что в команде решили убрать код, который менял цвет текста в зависимости от контраста (для упрощения). Если бы мы настраивали контрастность лимонный цвет на 4,5:1 с белым текстом, этот цвет уже не был бы похож на цвет лимона (скорее на цвет гусиной какашки).

• С желтым одинаково сложно сделать контрастную цветовую тему. Если коэффициент контраста желтого цвета больше, чем 4,5:1, он будет выглядеть как тот бронзовый цвет, что у нас уже есть.

• Нам написали о том, что оранжевый, используемый для статуса «Предупреждение» в нашей теме, легко путали со статусом «Опасность» (Красный). Бронза появилась на свет как компромиссный способ обеспечить некоторое визуальное расстояние от вариантов «Предупреждение» и «Опасность».

Возвращаясь к методу первой версии:

Теперь пришло время нарисовать кривую цвета и распределить оставшиеся образцы по схеме. Цель — сделать гладкое изогнутое распределение. Каждый паттерн кривой будет немного отличаться, в зависимости от локации ключевого цвета (10, 60, 100).

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

Вот несколько примеров из палитры первой версии:

 

И вот перед вами финальная палитра первой версии, в которой все цвета были созданы по одному правилу.

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

1. Темы Teal (бирюзовая), Slate (синевато-серая) и Dusk (сумеречная), у которых относительно низкая насыщенность, визуально отличаются от тем с высокой насыщенностью. Когда эти темы размещали на серой схеме, лежащей в основе системы, они выглядели странно.
2. Мы преобразовали цветовую палитру в оттенки серого — и оказалось, что нет равного прироста у каждого значения в темах, поэтому перемена мест по признаку «значение-значение» в рамках одной темы (например, синего-10 и зеленого-10) в некоторых случаях создавала сомнительные результаты в плане визуальной составляющей и контраста.

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

Aaron Sagray (@asagray) обнаружил эту проблему во время проверки значений серого.

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

Давайте выкопаем материалы предыдущих исследований из других дизайн-систем и посмотрим, решили ли они эту проблему:

У Material Design и Open Color в разных темах значения серого тона не одинаковы для каждого уровня выборки в схеме цветовых переходов. У IBM получше, с последовательной на вид паттерном в серой палитре (но и тут не идеально в плане значений, зеленый, например, кажется ярче остальных)

Интересненько…

Чтобы изучить значения серого, я воспользовался приложением Sketch, в котором можно манипулировать цветами, и Фотошопом с его проверенными значениями преобразования в HSB.  

После проведения этого обзора мы в обсудили команде ценность последовательности:

• Каковы преимущества наличия последовательных значений серого?

• Возможно ли создать систему с точно такими же значениями серого, как у отдельно взятого цвета, во всех темах?

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

Вторая версия: Обновление цветовой палитры

Когда мы решили исправить проблему последовательности значений контрастности, мы также решили проработать просьбу, единую почти для всех наших бизнес-единиц: темная тема, которая обычно используется для HUDs (Heads Up Displays) в Operations Centers и других средах мониторинга. В первом варианте цветовой палитры использовались сверхнасыщенные цвета на темном конце схемы перехода. Когда мы разместили эти цвета на черном фоне, они выглядели неуместно.

Для второй версии палитры мы дополнили предыдущую версию несколькими дополнительными шагами и новой цветовой кривой, благодаря которой тёмная тема стала возможной:

1. Создать серый паттерн

Как показано на этой диаграмме, «простым» решением может быть увеличение значений с использованием равномерного интервала между каждым значением. Я задал яркость 95% для темы-10 и 15% для темы-100. Для каждого шага мы уменьшали яркость на 9% по мере увеличения значений темы.

После тестирования некоторых ключевых цветов нашей системы мы поняли, что этот подход хорош для начала, но все же не идеален.

Рассмотрим тему-60: значение яркости составляет 50%, что не соответствует среднему уровню (AA), так как соотношение контрастности составляет 3,95:1. Этот результат заставил нас попробовать более проработанный паттерн «горная вершина»:

Мы поставили яркость темы-10 на 95%, яркость темы-60 на 45% и яркость темы-100 на 15%. Затем мы пробовали разные последовательности непоследовательных  увеличений значений, которые вместе на графике выглядели как «рост, пик и падение» и обнаружили, что если значения повышались одинаково, более низкие или более высокие значения значительно отличались от таковых в середине.

2. Создание цветового паттерна

У нас есть серая схема переходов, которая работает со всеми темами — теперь можно обратить внимание на тон и насыщенность.

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

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

В большинстве цветовых тем используются круговые схемы, но для красного, мадженты и бронзового используются овальные, потому что из-за значения яркости цветности, круговые узоры закрепляют насыщенность на 100%, что выглядит ужасно в тёмном интерфейсе.

Мой монитор довольно-таки большой и широкий 😉

Чтобы создать такой «идеальный паттерн», необходима непрерывная проверка согласованности в градациях серого в процессе создания. Мы решили скопировать и вставить значение каждого цвета в Photoshop, чтобы убедиться, что они точно соответствуют значениям оттенков серого, установленным ранее.

Мы упростили себе работу, записав каждое значение цвета в одном месте — так делать особенно удобно, когда есть вероятность, что другим людям нужно будет ссылаться на вашу работу. На этом этапе мы также решили, что было бы неплохо записать точное значение RGB или HEX для разработки. Мы решили использовать HEX.

Повторите этот процесс для каждого цвета темы — и получите удобную и гибкую систему тем, как показано ниже.

Конвертируем в оттенки серого

Теперь все темы состоят из цветовых плашек, организованных по единому серому паттерну. (У нашей серая тема значения намеренно отличаются от значений цвета в других темах, поэтому она не участвует в общем паттерне)

Заключение

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

• Процесс, описанный в этой статье от начала до конца, занял около шести месяцев. За это время команды начали использовать Mineral и оспаривали некоторые из наших ранних додумок относительно урегулирования доступности и темных тем. Мы открываем для себя то, что дизайн-системы формируются как под действием культуры, так и под действием самих продуктов.

 

Особая благодарность:

• CA Central Design Team: Albert Tan, Aaron Sagray, Sun Young Han, Matthew Talebi

• Mineral UI Component Team: Mike Waite, Mike Holm, Kyle Gach, Brent Ertz, Victoria Vasys.

Быстрые и простые решения для цвета

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

• 0to255.com

• colorsafe.co

• coolors.co

• paletton.com

• galactic.ink/sphere/

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

Больше статей о цвете:

• HSL и HSV

• Как избежать использования равноудаленных  HSV цветов

• Теория и принципы цвета

• Цилиндрическая система координат

Создание плавных цветовых переходов с помощью инструмента «Градиент»

Руководство пользователя Отмена

Поиск

Последнее обновление Aug 24, 2022 08:59:55 AM GMT

1. Руководство пользователя Illustrator
2. Основы работы с Illustrator
   1. Введение в Illustrator
      1. Новые возможности в приложении Illustrator
      2. Часто задаваемые вопросы
      3. Системные требования Illustrator
      4. Illustrator для Apple Silicon
   2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Ускоренное обучение благодаря панели «Поиск» в Illustrator
      3. Создание документов
      4. Панель инструментов
      5. Комбинации клавиш по умолчанию
      6. Настройка комбинаций клавиш
      7. Общие сведения о монтажных областях
      8. Управление монтажными областями
      9. Настройка рабочей среды
      10. Панель свойств
      11. Установка параметров
      12. Рабочая среда «Сенсорное управление»
      13. Поддержка Microsoft Surface Dial в Illustrator
      14. Отмена изменений и управление историей дизайна
      15. Повернуть вид
      16. Линейки, сетки и направляющие
      17. Специальные возможности в Illustrator
      18. Безопасный режим
      19. Просмотр графических объектов
      20. Работа в Illustrator с использованием Touch Bar
      21. Файлы и шаблоны
   3. Инструменты в Illustrator
      1. Краткий обзор инструментов
      2. Выбор инструментов
         1. Выделение
            
         2. Частичное выделение
         3. Групповое выделение
         4. Волшебная палочка
         5. Лассо
         6. Монтажная область
      3. Инструменты для навигации
         1. Рука
         2. Повернуть вид
            
         3. Масштаб
      4. Инструменты рисования
         1. Градиент
            
         2. Сетка
         3. Создание фигур
      5. Текстовые инструменты
         1. Текст
            
         2. Текст по контуру
         3. Текст по вертикали
      6. Инструменты рисования
         1. Перо
         2. Добавить опорную точку
         3. Удалить опорные точки
         4. Опорная точка
         5. Кривизна
         6. Отрезок линии
         7. Прямоугольник
         8. Прямоугольник со скругленными углами
         9. Эллипс
         10. Многоугольник
         11. Звезда
         12. Кисть
         13. Кисть-клякса
         14. Карандаш
         15. Формирователь
         16. Фрагмент
      7. Инструменты модификации
         1. Поворот
         2. Отражение
         3. Масштаб
         4. Искривление
         5. Ширина
         6. Свободное трансформирование
         7. Пипетка
         8. Смешать
         9. Ластик
         10. Ножницы
   4. Быстрые действия
      1. Ретротекст
      2. Светящийся неоновый текст
      3. Старомодный текст
      4. Перекрашивание
      5. Преобразование эскиза в векторный формат
3. Illustrator на iPad
   1. Представляем Illustrator на iPad
      1. Обзор по Illustrator на iPad.
      2. Ответы на часто задаваемые вопросы по Illustrator на iPad
      3. Системные требования | Illustrator на iPad
      4. Что можно и нельзя делать в Illustrator на iPad
   2. Рабочая среда
      1. Рабочая среда Illustrator на iPad
      2. Сенсорные ярлыки и жесты
      3. Комбинации клавиш для Illustrator на iPad
      4. Управление настройками приложения
   3. Документы
      1. Работа с документами в Illustrator на iPad
      2. Импорт документов Photoshop и Fresco
   4. Выбор и упорядочение объектов
      1. Создание повторяющихся объектов
      2. Объекты с переходами
   5. Рисование
      1. Создание и изменение контуров
      2. Рисование и редактирование фигур
   6. Текст
      1. Работа с текстом и шрифтами
      2. Создание текстовых надписей по контуру
      3. Добавление собственных шрифтов
   7. Работа с изображениями
      1. Векторизация растровых изображений
   8. Цвет
      1. Применение цветов и градиентов
4. Облачные документы
   1. Основы работы
      1. Работа с облачными документами Illustrator
      2. Общий доступ к облачным документам Illustrator и совместная работа над ними
      3. Публикация документов для проверки
      4. Обновление облачного хранилища для Adobe Illustrator
      5. Облачные документы в Illustrator | Часто задаваемые вопросы
   2. Устранение неполадок
      1. Устранение неполадок с созданием или сохранением облачных документов в Illustrator
      2. Устранение неполадок с облачными документами в Illustrator
5. Добавление и редактирование содержимого
   1. Рисование
      1. Основы рисования
      2. Редактирование контуров
      3. Рисование графического объекта с точностью на уровне пикселов
      4. Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
      5. Рисование простых линий и фигур
      6. Трассировка изображения
      7. Упрощение контура
      8. Определение сеток перспективы
      9. Инструменты для работы с символами и наборы символов
      10. Корректировка сегментов контура
      11. Создание цветка в пять простых шагов
      12. Рисование перспективы
      13. Символы
      14. Рисование контуров, выровненных по пикселам, при создании проектов для Интернета
   2. 3D-объекты и материалы
      1. Подробнее о 3D-эффектах в Illustrator
         
      2. Создание трехмерной графики
         
      3. Проецирование рисунка на трехмерные объекты
      4. Создание трехмерного текста
   3. Цвет
      1. О цвете
      2. Выбор цветов
      3. Использование и создание цветовых образцов
      4. Коррекция цвета
      5. Панель «Темы Adobe Color»
      6. Цветовые группы (гармонии)
      7. Панель «Темы Color»
      8. Перекрашивание графического объекта
   4. Раскрашивание
      1. О раскрашивании
      2. Раскрашивание с помощью заливок и обводок
      3. Группы с быстрой заливкой
      4. Градиенты
      5. Кисти
      6. Прозрачность и режимы наложения
      7. Применение обводок к объектам
      8. Создание и редактирование узоров
      9. Сетки
      10. Узоры
   5. Выбор и упорядочение объектов
      1. Выделение объектов
      2. Слои
      3. Группировка и разбор объектов
      4. Перемещение, выравнивание и распределение объектов
      5. Размещение объектов    
      6. Блокировка, скрытие и удаление объектов
      7. Копирование и дублирование объектов
      8. Поворот и отражение объектов
      9. Переплетение объектов
   6. Перерисовка объектов
      1. Кадрирование изображений
      2. Трансформирование объектов
      3. Объединение объектов
      4. Вырезание, разделение и обрезка объектов
      5. Марионеточная деформация
      6. Масштабирование, наклон и искажение объектов
      7. Объекты с переходами
      8. Перерисовка с помощью оболочек
      9. Перерисовка объектов с эффектами
      10. Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
      11. Работа с динамическими углами
      12. Улучшенные процессы перерисовки с поддержкой сенсорного ввода
      13. Редактирование обтравочных масок
      14. Динамические фигуры
      15. Создание фигур с помощью инструмента «Создание фигур»
      16. Глобальное изменение
   7. Текст
      1. Дополнение текстовых и рабочих объектов типами объектов
      2. Создание маркированного и нумерованного списков
      3. Управление текстовой областью
      4. Шрифты и оформление
      5. Форматирование текста
      6. Импорт и экспорт текста
      7. Форматирование абзацев
      8. Специальные символы
      9. Создание текста по контуру
      10. Стили символов и абзацев
      11. Табуляция
      12. Текст и шрифты
      13. Поиск отсутствующих шрифтов (технологический процесс Typekit)
      14. Обновление текста из Illustrator 10
      15. Шрифт для арабского языка и иврита
      16. Шрифты | Часто задаваемые вопросы и советы по устранению проблем
      17. Создание эффекта 3D-текста
      18. Творческий подход к оформлению
      19. Масштабирование и поворот текста
      20. Интерлиньяж и межбуквенные интервалы
      21. Расстановка переносов и переходы на новую строку
      22. Усовершенствования работы с текстом
      23. Проверка орфографии и языковые словари
      24. Форматирование азиатских символов
      25. Компоновщики для азиатской письменности
      26. Создание текстовых проектов с переходами между объектами
      27. Создание текстового плаката с помощью трассировки изображения
   8. Создание специальных эффектов
      1. Работа с эффектами
      2. Стили графики
      3. Создание тени
      4. Атрибуты оформления
      5. Создание эскизов и мозаики
      6. Тени, свечения и растушевка
      7. Обзор эффектов
   9. Веб-графика
      1. Лучшие методы создания веб-графики
      2. Диаграммы
      3. SVG
      4. Создание анимации
      5. Фрагменты и карты изображений
6. Импорт, экспорт и сохранение
   1. Импорт
      1. Помещение нескольких файлов в документ
      2. Управление связанными и встроенными файлами
      3. Сведения о связях
      4. Извлечение изображений
      5. Импорт графического объекта из Photoshop
      6. Импорт растровых изображений
      7. Импорт файлов Adobe PDF
      8. Импорт файлов EPS, DCS и AutoCAD
   2. Библиотеки Creative Cloud Libraries в Illustrator 
      1. Библиотеки Creative Cloud Libraries в Illustrator
   3. Диалоговое окно «Сохранить»
      1. Сохранение иллюстраций
   4. Экспорт
      1. Использование графического объекта Illustrator в Photoshop
      2. Экспорт иллюстрации
      3. Сбор ресурсов и их массовый экспорт
      4. Упаковка файлов
      5. Создание файлов Adobe PDF
      6. Извлечение CSS | Illustrator CC
      7. Параметры Adobe PDF
      8. Информация о файле и метаданные
7. Печать
   1. Подготовка к печати
      1. Настройка документов для печати
      2. Изменение размера и ориентации страницы
      3. Задание меток обреза для обрезки и выравнивания
      4. Начало работы с большим холстом
   2. Печать
      1. Наложение
      2. Печать с управлением цветами
      3. Печать PostScript
      4. Стили печати
      5. Метки и выпуск за обрез
      6. Печать и сохранение прозрачных графических объектов
      7. Треппинг
      8. Печать цветоделенных форм
      9. Печать градиентов, сеток и наложения цветов
      10. Наложение белого
8. Автоматизация задач
   1. Объединение данных с помощью панели «Переменные»
   2. Автоматизация с использованием сценариев
   3. Автоматизация с использованием операций
9. Устранение неполадок 
   1. Проблемы с аварийным завершением работы
   2. Восстановление файлов после сбоя
   3. Проблемы с файлами
   4. Поддерживаемые форматы файлов
   5. Проблемы с драйвером ГП
   6. Проблемы устройств Wacom
   7. Проблемы с файлами DLL
   8. Проблемы с памятью
   9. Проблемы с файлом настроек
   10. Проблемы со шрифтами
   11. Проблемы с принтером
   12. Как поделиться отчетом о сбое с Adobe
   13. Повышение производительности Illustrator

Инструмент «Градиент» позволяет создавать плавные цветовые переходы с помощью линейных, радиальных или произвольных градиентов.

1. Выберите объект или область, которую требуется заполнить градиентом.

2. Дважды щелкните по значку инструмента Градиент   или нажмите клавишу G, чтобы открыть палитру «Градиент».
   

3. Выберите тип градиента: «Линейный», «Радиальный» или «Произвольный». По умолчанию выбран линейный тип градиента.

4. Измените значение обводки, угла, соотношения сторон или непрозрачности, чтобы отредактировать градиент. Используйте ползунок «Градиент» на палитре «Градиент» или на объекте, чтобы изменить место цветового перехода.

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

Вход в учетную запись

Войти

Управление учетной записью

Как добиться плавных цветовых переходов на картине Джейн Джонс

Поделиться:

В апрельском выпуске The Artist’s Magazine за 2009 год Джейн Джонс обсуждает проблемы смешивания цветов в картине.

Сохраняйте плавные и простые градации — глазурь по одному цвету за раз.

Джейн Джонс

Вечеринка в саду (масло, 12×9)

Рисовать объекты, имеющие более одного цвета, может быть сложно, особенно когда вы изображаете градации, чтобы показать размер. Задача становится еще сложнее, когда объекты, такие как лепестки или складки драпировки, разбиты всплесками света и тени. Вы можете оказаться в области, где четыре или более цветов объединяются, и все они должны быть плавно смешаны.

Лепестки цветов в наборе Garden Party (см. выше) являются хорошими примерами. Их цвета переходят от белого к красному, и большинство лепестков частично на свету, а частично в тени. Рисуя эти лепестки в пять слоев, мне нужно было контролировать только один цвет влажной краски за раз. Это намного проще, чем иметь дело с пятью цветами одновременно!

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

Инструкции по покраске скатерти, стеблей, листьев и вазы см. в разделе Остальная часть картины.

1. Установите фон и подкрасьте лепестки

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

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

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

2. Начните с мягкого перехода

Когда белые лепестки высохли, я слегка глазировал их натуральной розовой мареной и небольшим количеством Winsor & Newton Liquin. Настоящая розовая марена — это нежный, легко контролируемый цвет — хороший выбор для начала градации от белого к красному. Обратите внимание, что я закрасил все красные области, а не только более светлые участки. Это происходит по двум причинам: во-первых, интенсивность и глубина цвета, необходимые для завершения более ярких областей этих лепестков, требуют нескольких слоев краски. Розовая марена подлинная является лишь отправной точкой. Во-вторых, использование одного и того же цвета на всем этом слое создает цветовое единство картины.

Когда розовая марена высохла, я добавил желтизны на теплые участки лепестков. Индийский желтый — это интенсивный оттенок, но при очень легком использовании с большим количеством среды для рисования, такой как Liquin или вода, если вы рисуете акварелью, он становится мягким золотисто-желтым. Я использовал только один слой одного и того же желтого цвета. Обратите внимание, что области света и тени белых лепестков модулируют яркость и темноту желтой глазури.

3. Усиление красного цвета

Установив самый мягкий переход от красного к розовому, я начал усиливать красные участки лепестков с помощью хинакридонового красного. Этот прозрачный цвет позволяет теням, установленным в первом слое, просвечиваться, а в областях, куда падает свет, они выглядят как красивый чистый красный цвет. Постепенно увеличивая соотношение краски и Liquin, я плавно переходил красный цвет от очень светлого в розовых областях к более темному и интенсивному в более красных областях.

Я также добавил еще один светлый прозрачный слой индийского желтого на некоторые желтые области. Не закрашивая все эти области, я допускаю разнообразие оттенков.

Для центра средней розы я начал с бледно-желтого кадмия, смешанного с серо-фиолетовым из белого слоя. Затем я добавил в смесь немного ализаринового малинового цвета, чтобы она не казалась зеленой.

4. Еще больше усилите красный цвет

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

5. Добавьте окончательные детали

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

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

Остальная часть картины

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

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

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

Листья и стебли: Я нарисовал листья и стебли смесью желтого бледного кадмия, французского синего ультрамарина и серого цвета Пейна, добавив белого для самых светлых участков.

Ваза: Чтобы нарисовать стеклянную вазу, я использовал фоновый цвет (см. первый шаг демонстрации) с добавлением белого. Для отражения полос я использовал цвета полосок скатерти.

ДЖЕЙН ДЖОНС , автор книги «Классический натюрморт » (Watson-Guptill, 2004), популярный преподаватель мастер-классов. Для получения дополнительной информации перейдите на сайт www.janejonesartist.com.

Эта статья появилась в апрельском выпуске The Artist’s Magazine за 2009 г., который доступен для заказа в виде цифровой загрузки. Кликните сюда, чтобы узнать больше.

Другие работы Джейн Джонс:

• Рисование отраженным светом лепестков цветов
• Демонстрация живописи | Цветовая температура создает глубину и форму
• Раскрась лепестки цветов: изучи свет и края

Бесплатный предварительный просмотр artistnetwork.tv
Нажмите здесь, чтобы посмотреть бесплатный видео-превью «Кисть с дикой природой маслом с Пипом МакГарри».

---

ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ ДЛЯ ХУДОЖНИКОВ

• Смотрите художественные мастер-классы по запросу на ArtistsNetwork. ТВ
• Онлайн-семинары для художников
• Мгновенная загрузка журналов по изобразительному искусству, книг, видео и многого другого
• Подпишитесь на электронную рассылку новостей Artist’s Network и получите БЕСПЛАТНУЮ электронную книгу

Поделиться:

Категории: Среды искусства, Предметы искусства, Техники и навыки искусства, Журнал художников, Цветы, Картина маслом

Плавные переходы цветов с помощью цветных карандашей — Кэрри Л. Льюис, художник

Как сделать плавные переходы цветов? Мои часто, кажется, имеют определенные остановки и старты.

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

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

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

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

Мой секрет плавных цветовых переходов

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

One Color to Paper Color

Это мой любимый набросок декабря. Это горная сцена размером 4×6 дюймов, нарисованная одним карандашом (Prismacolor Dark Umber) на бумаге Fawn Stonehenge.

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

Световые значения

На этом рисунке я выделил самые светлые оттенки. Область внутри коробки — это место, где я использовал один слой и легкое (или очень легкое) давление.

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

Звучит сложно, но как только вы привыкнете рисовать таким образом, процесс станет автоматическим.

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

Средние и темные значения

Для средних значений я сделал в основном то же самое.

Но я провел несколько раз по одной и той же области, пока не получил желаемое значение.

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

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

Кроме того, я изменил длину штрихов, сделав одни длиннее, другие короче. Это также помогло создать плавные переходы.

Я использовал ребро карандаша почти для всего этого рисунка. Рисование остро заточенным карандашом — хороший способ получить плавные переходы. Это потому, что карандаш больше лежит на бумаге. Также проще сделать «подъемный штрих», который я описал выше, когда рисуешь боковой стороной карандаша.

Один цвет на другой

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

Давайте рассмотрим пример на бристольском пергаменте.

Шаг 1

Я использовал очень резкий красный цвет Prismacolor Crimson Red, чтобы сделать эту затемненную коробку. Самые темные значения слева — это множество слоев круговых и вертикальных штрихов, нанесенных с легким нажимом. По мере того как я рисовал вправо, я уменьшал количество слоев до тех пор, пока вы едва различали цвет.

Шаг 2

Затем я проделал то же самое с зеленым попугаем, начав справа и двигаясь слева.

Еще раз, я добавил много слоев справа и меньше слоев, когда работал над красным. Я сохранял легкое давление и был очень осторожен в том, как я наносил цвет на бумагу.

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

Аккуратность при наложении цвета так же важна, как и давление, которое вы используете, и метки, которые вы делаете. Особенно, если ваша цель — плавные переходы цветов.

Шаг 3

Следующим шагом было повторное прохождение каждой области, переход от красного к зеленому, а от зеленого к красному.

Я продолжал с легким давлением так долго, как это было возможно. Когда мне нужно было увеличить давление, я увеличивал его ровно настолько, насколько это было необходимо. Самые темные значения на иллюстрации ниже были применены с более сильным давлением, но все же не самым сильным давлением.

Я продолжал накладывать цвета до тех пор, пока не получил нужную яркость и покрытие. Я чередовал круговые штрихи, штриховку и перекрестную штриховку. Кроме того, я проводил штрихами в разных направлениях (вертикально, горизонтально и по диагонали).

Шаг 4

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

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

Наконец, я выполнил вертикальное наложение в области, где цвета перекрываются.

Несколько замечаний по этому процессу

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

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

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

Я также работал с Bristol, который плохо растворяется. Вы должны знать, насколько хорошо бумага, которую вы выбираете, справляется с растворителями.

В заключение

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